feat: adding a nice table to metrics page

tm26a21p · Jun 28, 2024 · 226adc7 · 226adc7
1 parent 7751912
commit 226adc7
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 25 deletions.
diff --git a/public/input.css b/public/input.css
@@ -9,20 +9,38 @@
   body {
     @apply font-sans;
   }
-}
 
-#theme-btn {
-  @apply btn btn-primary btn-block mb-2;
-}
+  #theme-btn {
+    @apply btn btn-primary btn-block mb-2;
+  }
 
-.card:hover {
-  @apply shadow-lg border-primary ring-8;
-}
+  .card:hover {
+    @apply shadow-lg border-primary ring-8;
+  }
 
-.link:hover {
-  @apply shadow-lg border-primary ring-8;
-}
+  .link:hover {
+    @apply shadow-lg border-primary ring-8;
+  }
+
+  p {
+    @apply subpixel-antialiased;
+  }
 
-p {
-  @apply subpixel-antialiased;
+  table tr td:first-child {
+    @apply p-4;
+    @apply font-extrabold;
+    @apply min-w-60;
+    @apply text-left;
+    @apply border-r-green-100;
+    @apply mr-4;
+  }
+
+  table tr td:nth-child(2) {
+    @apply p-4;
+    @apply min-w-60;
+    @apply text-left;
+    @apply border-l-2;
+    @apply ml-4;
+
+  }
 }
diff --git a/src/htmx_routes.rs b/src/htmx_routes.rs
@@ -8,7 +8,7 @@ use axum::{
 };
 use askama_axum::Template;
 use axum_extra::{headers::*, TypedHeader};
-use octocrab::params::repos::Type;
+// use octocrab::params::repos::Type;
 use serde::Deserialize;
 
 use crate::{htmx_templates::*, project::Project, state::Common};

diff --git a/templates/components/table_stats.html b/templates/components/table_stats.html
@@ -1,24 +1,37 @@
-<div class="overflow-x-auto flex justify-center items-center">
-    <table class="table table-zebra">
+<div class="flex justify-between min-h">
+    <table class="table">
         <thead>
-            <tr>
+            <tr class="">
                 {# <th></th> #}
-                <th class="text-xl border-left">Metric</th>
-                <th class="text-xl border-left">Value</th>
+                {# <th class="text-left text-lg">Metric</th>
+                <th class="text-right text-lg">Value</th> #}
             </tr>
         </thead>
         <tbody>
             <tr class="hover">
-                <td class="">IP Address</td>
+                <td>IP Address</td>
                 <td hx-get="/api/ip" hx-swap="innerHTML" hx-trigger="load">Unknown
                     address</td>
             </tr>
             <tr class="hover" hx-get="/api/location" hx-swap="outerHTML" hx-trigger="load">
             </tr>
+        </tbody>
+    </table>
+    <table class="table">
+        <thead>
+
+        </thead>
+        <tbody>
             <tr class="hover" hx-get="/api/device_info" hx-swap="outerHTML" hx-trigger="load">
             </tr>
+        </tbody>
+    </table>
+    <table class="table">
+        <thead>
+
+        </thead>
+        <tbody>
             <tr class="hover" hx-get="/api/visit_info" hx-swap="outerHTML" hx-trigger="load">
             </tr>
         </tbody>
-    </table>
 </div>
diff --git a/templates/htmx/device_info.html b/templates/htmx/device_info.html
@@ -14,10 +14,6 @@
     <td>Window Resolution</td>
     <td id="srt">
 </tr>
-<tr class="hover">
-    <td>Language</td>
-    <td>{{language}}</td>
-</tr>
 <script type="text/javascript">
     document.getElementById('srt').innerHTML = window.innerWidth + 'x' + window.innerHeight;
     // listen to the changes in the size of the window and change the value of the userAgent input field

diff --git a/templates/htmx/visit_info.html b/templates/htmx/visit_info.html
@@ -4,9 +4,17 @@
 </tr>
 <tr class="hover">
     <td>Visit Duration</td>
-    <td>{{total_time}}</td>
+    <td>
+        <span class="countdown">
+            <span style="--value:12;"></span>
+        </span>
+    </td>
 </tr>
 <tr class="hover">
     <td>Origin</td>
     <td>{{origin}}</td>
+</tr>
+<tr class="hover">
+    <td>Language</td>
+    <td>language</td>
 </tr>