✨ Adds fetching hits

2025-10-08 18:49:29 +02:00
parent 544fb9bba9
commit caf98654ce
3 changed files with 127 additions and 10 deletions
--- a/static/index.html
+++ b/static/index.html
@@ -118,11 +118,44 @@
            width: 15rem;
        }

-        #tracker-table td, #tracker-table th {
+        #tracker-table td:nth-child(4) {
+            width: 10rem;
+        }
+
+        #tracker-table td, #tracker-table th, #hit-table td, #hit-table th {
            margin: 0;
-            padding: 0;
+            padding: 0.2rem 0;
            border-bottom: 1px solid black;
        }
+
+        #hit-title {
+            font-size: 1.15rem;
+            width: 100%;
+            margin-top: 2rem;
+            margin-bottom: 0;
+        }
+
+        #hit-table {
+            width: 100%;
+            overflow: auto;
+            font-size: 1.10rem;
+        }
+
+        #hit-table th:nth-child(1) {
+            width: 20rem;
+        }
+
+        #hit-table th:nth-child(2) {
+            width: 10rem;
+        }
+
+        #hit-table th:nth-child(4) {
+            width: 8rem;
+        }
+
+        #hit-table th:nth-child(5) {
+            width: 15rem;
+        }
    </style>
 </head>
 <body>
@@ -141,7 +174,18 @@
            <th>ID</th>
            <th>Name</th>
            <th>Created at</th>
-            <th>Hits</th>
+            <th></th>
+        </tr>
+    </table>
+
+    <p id="hit-title">No tracker selected</p>
+    <table id="hit-table">
+        <tr>
+            <th>ID</th>
+            <th>IP</th>
+            <th>Agent</th>
+            <th>Language</th>
+            <th>Created at</th>
        </tr>
    </table>

@@ -184,21 +228,68 @@
            }
        }).then((res) => {
            res.json().then((trackers) => {
-                console.log(trackers);
                trackers.forEach((tracker) => {
                    document.getElementById("tracker-table").innerHTML += `
                    <tr>
                        <td>${tracker.id}</td>
                        <td>${tracker.name}</td>
                        <td>${tracker.created_at}</td>
-                        <td>${tracker.hits}</td>
-                    </tr>
-                    `;
-                })
+                        <td>
+                            <button onclick="loadTrigger('${tracker.id}')">
+                                Show more
+                            </button>
+
+                            <button onclick="copyLink('${tracker.id}')">
+                                Copy link
+                            </button>
+                        </td>
+                    </tr>`;
+                });
            }).catch((err) => alert(`Couldn't unwrap json: ${err}`))
        }).catch((err) => alert(`Couldn't fetch trackers: ${err}`));
    }

+    function loadTrigger(id) {
+        const apiKey = localStorage.getItem("api-key");
+        if (!apiKey) {
+            return;
+        }
+
+        fetch(`http://localhost:8000/tracker/${id}/hits`, {
+            method: "GET",
+            headers: {
+                Authorization: apiKey,
+            }
+        }).then((res) => {
+            res.json().then((hits) => {
+                document.getElementById("hit-title").innerHTML = `${hits.length} hit(s) for tracker ${id}`;
+                document.getElementById("hit-table").innerHTML = `
+                <tr>
+                    <th>ID</th>
+                    <th>IP</th>
+                    <th>Agent</th>
+                    <th>Language</th>
+                    <th>Created at</th>
+                </tr>`;
+
+                hits.forEach((hit) => {
+                    document.getElementById("hit-table").innerHTML += `
+                    <tr>
+                        <td>${hit.id}</td>
+                        <td>${hit.ip}</td>
+                        <td>${hit.agent}</td>
+                        <td>${hit.language}</td>
+                        <td>${hit.created_at}</td>
+                    </tr>`;
+                });
+            }).catch((err) => alert(`Couldn't unwrap json: ${err}`));
+        }).catch((err) => alert(`Couldn't fetch hits: ${err}`));
+    }
+
+    function copyLink(id) {
+        navigator.clipboard.writeText(`http://localhost:8000/image/${id}`).catch((err) => alert(`Couldn't copy: ${err}`));
+    }
+
    init();
 </script>
 </body>