feat: setting up correctly for device_info and visit_info

src/htmx_routes.rs

@@ -114,3 +114,22 @@ pub async fn location(
         .expect("Failed to render template");
     (StatusCode::OK, Html(reply_html).into_response())
 }
+
+pub async fn device_info(
+    Extension(_state): Extension<Common>
+) -> impl IntoResponse
+{
+    let device_info = DeviceInfoT::new();
+    let reply_html = device_info.render().expect("Failed to render template");
+    (StatusCode::OK, Html(reply_html).into_response())
+}
+
+pub async fn visit_info(
+    Extension(_state): Extension<Common>
+) -> impl IntoResponse
+{
+    let reply_html = VisitInfoT::new()
+        .render()
+        .expect("Failed to render template");
+    (StatusCode::OK, Html(reply_html).into_response())
+}

src/htmx_templates.rs

@@ -26,3 +26,47 @@ pub struct GeoLocation
     pub country: String,
     pub timezone: String,
 }
+
+#[derive(Template)]
+#[template(path = "htmx/device_info.html")]
+pub struct DeviceInfoT
+{
+    pub device: String,
+    pub os: String,
+    pub browser: String,
+    pub user_agent: String,
+    pub language: String,
+}
+
+impl DeviceInfoT
+{
+    pub fn new() -> Self
+    {
+        Self {
+            device: "device".to_string(),
+            os: "os".to_string(),
+            browser: "browser".to_string(),
+            user_agent: "user_agent".to_string(),
+            language: "language".to_string(),
+        }
+    }
+}
+
+#[derive(Template)]
+#[template(path = "htmx/visit_info.html")]
+pub struct VisitInfoT
+{
+    pub average_time: usize,
+    pub total_time: usize,
+}
+
+impl VisitInfoT
+{
+    pub fn new() -> Self
+    {
+        Self {
+            average_time: 24,
+            total_time: 0,
+        }
+    }
+}

src/main.rs

@@ -39,6 +39,8 @@ async fn main()
         .route("/api/set-theme", post(set_theme))
         .route("/api/ip", get(ip_adress))
         .route("/api/location", get(location))
+        .route("/api/device_info", get(device_info))
+        .route("/api/visit_info", get(visit_info))
         .nest("/public", using_serve_dir())
         .layer(Extension(state.clone()));
 

src/templates.rs

@@ -27,6 +27,7 @@ pub struct MetricsT
 }
 
 #[derive(Template)]
+#[allow(dead_code)]
 #[template(path = "pages/projects.html")]
 pub struct ProjectsT
 {

templates/htmx/device_info.html

@@ -0,0 +1,28 @@
+<tr>
+    <td class="border px-4 py-2">Device Type</td>
+    <td class="border px-4 py-2">{{device}}</td>
+</tr>
+<tr>
+    <td class="border px-4 py-2">Operating System</td>
+    <td class="border px-4 py-2">{{os}}</td>
+</tr>
+<tr>
+    <td class="border px-4 py-2">Browser</td>
+    <td class="border px-4 py-2">{{browser}}</td>
+</tr>
+<tr>
+    <td class="border px-4 py-2">Screen Resolution</td>
+    <td id="Screen-res-target" class="border px-4 py-2">Javascript</td>
+</tr>
+<tr>
+    <td class="border px-4 py-2">Language</td>
+    <td class="border px-4 py-2">{{language}}</td>
+</tr>
+<tr>
+    <td class="border px-4 py-2">User agent</td>
+    <td class="border px-4 py-2">{{user_agent}}</td>
+</tr>
+
+<script>
+    document.getElementById('Screen-res-target').innerText = window.screen.width + 'x' + window.screen.height;
+</script>

templates/htmx/location.html

@@ -9,9 +9,4 @@
 <tr>
     <td class="border px-4 py-2">Timezone</td>
     <td class="border px-4 py-2">{{location.timezone}}</td>
-</tr>
-<input type="hidden" id="userAgent" name="userAgent" value="" hx-post="/user-info" hx-trigger="load" hx-swap="none">
-</div>
-<script>
-    document.getElementById('userAgent').value = navigator.userAgent;
-</script>
+</tr>

templates/htmx/visit_info.html

@@ -0,0 +1,8 @@
+<tr>
+    <td class="border px-4 py-2">Average Visit Time</td>
+    <td class="border px-4 py-2">{{average_time}} minutes.</td>
+</tr>
+<tr>
+    <td class="border px-4 py-2">Visit Duration</td>
+    <td class="border px-4 py-2">{{total_time}}</td>
+</tr>

templates/pages/metrics.html

@@ -27,44 +27,24 @@ <h2 class="text-2xl font-bold mb-4 text-primary text-center">What I Know About Y
                             address</td>
                     </tr>
                     <tr hx-get="/api/location" hx-swap="outerHTML" hx-trigger="load">
-
-                    <tr>
-                        <td class="border px-4 py-2">Device Type</td>
-                        <td class="border px-4 py-2">Desktop</td>
-                    </tr>
-                    <tr>
-                        <td class="border px-4 py-2">Operating System</td>
-                        <td class="border px-4 py-2">Windows 10</td>
-                    </tr>
-                    <tr>
-                        <td class="border px-4 py-2">Browser</td>
-                        <td class="border px-4 py-2">Chrome</td>
-                    </tr>
-                    <tr>
-                        <td class="border px-4 py-2">Screen Resolution</td>
-                        <td class="border px-4 py-2">1920x1080</td>
                     </tr>
-                    <tr>
-                        <td class="border px-4 py-2">Language</td>
-                        <td class="border px-4 py-2">en-US</td>
-                    </tr>
-                    <tr>
-                        <td class="border px-4 py-2">Referrer URL</td>
-                        <td class="border px-4 py-2">google.com</td>
-                    </tr>
-                    <tr>
-                        <td class="border px-4 py-2">Visit Time</td>
-                        <td class="border px-4 py-2">10:30 AM</td>
+                    <tr hx-get="/api/device_info" hx-swap="outerHTML" hx-trigger="load">
                     </tr>
-                    <tr>
-                        <td class="border px-4 py-2">Visit Duration</td>
-                        <td class="border px-4 py-2">5 minutes</td>
+                    <tr hx-get="/api/visit_info" hx-swap="outerHTML" hx-trigger="load">
                     </tr>
                 </tbody>
             </table>
         </div>
     </div>
 </div>
 
+<div>
+    <input type="hidden" id="userAgent" name="userAgent" value="" hx-post="/user-info" hx-trigger="load" hx-swap="none">
+    hey
+</div>
+<script>
+    document.getElementById('userAgent').value = navigator.userAgent;
+</script>
+
 
 {% endblock %}