From c6e74cca90c853beb44f02592fec6897324925ce Mon Sep 17 00:00:00 2001
From: Sergo <Sergo>
Date: Sun, 4 Feb 2024 01:48:14 +0200
Subject: [PATCH] add card-style template for mobile view

---
 public/index.js | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/public/index.js b/public/index.js
index cf7c374..59389b7 100644
--- a/public/index.js
+++ b/public/index.js
@@ -1,8 +1,10 @@
 function renderAliases(data) {
     const dataContainer = document.getElementById('container');
-    const template = Handlebars.compile(okHandlebarsTemplate);
+    const template = window.innerWidth > 768 ? Handlebars.compile(defaultTemplate) : Handlebars.compile(responsiveCardTemplate);
     const html = template({
-        data: data.sort((a, b) => new Date(a.created) - new Date(b.created))
+        data: data
+            .sort((a, b) => new Date(a.created) - new Date(b.created))
+            .map(alias => ({ ...alias, created: new Date(alias.created).toLocaleString() }))
     });
 
     dataContainer.innerHTML = html;
@@ -38,7 +40,7 @@ function copyToClipboard(text) {
     navigator.clipboard.writeText(text)
 }
 
-const okHandlebarsTemplate = `
+const defaultTemplate = `
     <table class="table">
         <thead>
             <tr>
@@ -64,6 +66,29 @@ const okHandlebarsTemplate = `
     <input type="text" id="tags" placeholder="Add tags (optional)">
     <div class="btn btn-primary" onclick="createAlias()">Create alias</div class="btn btn-primary">
 `
+// Responsive card template for mobile
+const responsiveCardTemplate = `
+    {{#each data}}
+        <div class="card">
+            <div class="card-body">
+                <h5 class="card-title
+                    {{#if tags.length}}
+                        text-primary
+                    {{/if}}
+                ">
+                    {{#each tags}}
+                        <span class="badge bg-secondary">{{this}}</span>
+                    {{/each}}
+                </h5>
+                <h5 class="card-title" onclick="copyToClipboard('{{address}}')" style="cursor: pointer;">{{address}}</h5>
+                <p class="card-text">{{created}}</p>
+                <div onclick="deleteAlias('{{id}}')" class="btn btn-sm btn-danger {{#unless id}}disabled{{/unless}}">Delete</div>
+            </div>
+        </div>
+    {{/each}}
+    <input type="text" id="tags" placeholder="Add tags (optional)">
+    <button class="btn btn-primary btn-sm" onclick="createAlias()">Create alias</button">
+`
 
 fetch('/aliases').then(async res => {
     const dataContainer = document.getElementById('container');