From 6f45f55efea240cf7957604061451c4916f8f20d Mon Sep 17 00:00:00 2001
From: wajeht <58354193+wajeht@users.noreply.github.com>
Date: Fri, 16 Aug 2024 15:08:49 -0500
Subject: [PATCH] style: Update styling for channel details in apps-id-channels
 page

---
 src/handler.ts                        |  2 +
 src/views/pages/apps-id-channels.html | 69 +++++++++++++++++++++++++--
 2 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/src/handler.ts b/src/handler.ts
index 3ee5047..cf85b12 100644
--- a/src/handler.ts
+++ b/src/handler.ts
@@ -145,6 +145,8 @@ export async function getAppChannelsPageHandler(req: Request, res: Response) {
 						'app_id', app_channels.app_id,
 						'is_active', app_channels.is_active,
 						'channel_type', channel_types.name,
+						'created_at', app_channels.created_at,
+						'updated_at', app_channels.updated_at,
 						'config', CASE
 							WHEN channel_types.name = 'email' THEN
 								json_build_object('host', email_configs.host, 'port', email_configs.port, 'alias', email_configs.alias, 'auth_email', email_configs.auth_email)
diff --git a/src/views/pages/apps-id-channels.html b/src/views/pages/apps-id-channels.html
index 343cffd..6225082 100644
--- a/src/views/pages/apps-id-channels.html
+++ b/src/views/pages/apps-id-channels.html
@@ -8,10 +8,71 @@ <h2 style="margin: 0;">Channels</h2>
   <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">
 
     <% if (app.channels.length) { %>
-      <% app.channels.forEach(c => { %>
-        <article style="border-style: dashed; padding: 20px; border-radius: 5px;">
-          <pre><%= JSON.stringify(c, null, 2) %></pre>
-        </article>
+      <% app.channels.forEach(channel => { %>
+        <div style="display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; border: dashed; padding: 20px; border-radius: 5px;">
+          <div><strong>ID:</strong></div>
+          <div><%= channel.id %></div>
+
+          <div><strong>Type:</strong></div>
+          <div><%= channel.channel_type %></div>
+
+          <div><strong>Status:</strong></div>
+          <div
+            style="
+              height: fit-content;
+              width: fit-content;
+              padding: 0px 5px;
+              border-radius: 5px;
+              <%= channel.is_active ? 'color: green; border: 1px solid green;' : 'color: red; border: 1px solid red;' %>"
+          >
+            <%= channel.is_active ? 'Active' : 'Inactive' %>
+          </div>
+
+          <div><strong>Created:</strong></div>
+          <div><%= new Date(channel.created_at).toLocaleString() %></div>
+
+          <div><strong>Updated:</strong></div>
+          <div><%= new Date(channel.updated_at).toLocaleString() %></div>
+
+          <div style="display: flex; justify-content: space-between; align-items: center; gap: 10px;">
+            <details style="position: relative;">
+              <summary>View</summary>
+              <div style="position: absolute; top: 100%; left: 0; z-index: 1; border: dashed; padding: 10px; background-color: white; border-radius: 5px;">
+                <% if (channel.channel_type === 'email') { %>
+                  <div><strong>Email Host:</strong></div>
+                  <div><%= channel.config.host %></div>
+
+                  <div><strong>Email Port:</strong></div>
+                  <div><%= channel.config.port %></div>
+
+                  <div><strong>Email Alias:</strong></div>
+                  <div><%= channel.config.alias %></div>
+
+                  <div><strong>Email Auth:</strong></div>
+                  <div><%= channel.config.auth_email %></div>
+                <% } %>
+
+                <% if (channel.channel_type === 'discord') { %>
+                    <div><strong>Webhook URL:</strong></div>
+                    <div><%= channel.config.webhook_url %></div>
+                <% } %>
+
+                <% if (channel.channel_type === 'sms') { %>
+                    <div><strong>Phone Number:</strong></div>
+                    <div><%= channel.config.phone_number %></div>
+
+                    <div><strong>From Phone Number:</strong></div>
+                    <div><%= channel.config.from_phone_number %></div>
+
+                    <div><strong>Account SID:</strong></div>
+                    <div><%= channel.config.account_sid %></div>
+                <% } %>
+              </div>
+            </details>
+            <a href="#">Edit</a>
+          </div>
+
+        </div>
       <% }) %>
     <% } %>