feat(db): Add description field to seed data and display in HTML view

wajeht · Aug 14, 2024 · 558eab5 · 558eab5
1 parent adad23c
commit 558eab5
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/src/db/seeds/01_seeds.ts b/src/db/seeds/01_seeds.ts
@@ -40,6 +40,7 @@ export async function seed(knex: Knex): Promise<void> {
 		.map(() => ({
 			user_id: faker.helpers.arrayElement(userIds).id,
 			name: faker.company.name(),
+			description: faker.internet.url(),
 			is_active: faker.datatype.boolean(),
 			created_at: faker.date.past(),
 			updated_at: faker.date.recent(),

diff --git a/src/views/pages/apps.html b/src/views/pages/apps.html
@@ -15,12 +15,31 @@ <h2>Apps</h2>
       <% apps.forEach(app => { %>
         <article style="border: dashed; padding: 20px; border-radius: 5px; display: flex; flex-direction: column; gap: 5px;">
 
-          <h3>
-            <a href="/apps/<%= app.id %>"><%= app.name %></a>
-          </h3>
+          <div style="display: flex; align-items: center; gap: 10px;">
+            <h3>
+              <a href="/apps/<%= app.id %>"><%= app.name %></a>
+            </h3>
+
+            <span style="
+                  display: inline-block;
+                  padding: 0px 5px;
+                  font-size: 0.75rem;
+                  border-radius: 5px;
+                  <%= app.is_active ? 'color: red; border: 1px solid red;' : 'color: green; border: 1px solid green;' %>"
+            >
+              <%= app.is_active ? 'Active' : 'Inactive' %>
+            </span>
+
+          </div>
 
           <div>
-            <p><%= app.is_active ? 'Active' : 'Inactive' %></p>
+            <% if (app.description.match(/^(https?:\/\/|www\.)/i)) { %>
+              <a href="<%= app.description %>" target="_blank" rel="noopener noreferrer">
+                <%= app.description %> ↗
+              </a>
+            <% } else { %>
+              <p><%= app.description %></p>
+            <% } %>
           </div>
 
           <div style="display: flex; gap: 20px; align-items: center;">