betsy-button

Family health button
git clone https://git.woozle.org/neale/betsy-button.git

commit
6106621
parent
501a586
author
Neale Pickett
date
2025-07-01 13:21:40 -0600 MDT
update status checker
1 files changed,  +44, -23
M web/status.html
+44, -23
 1@@ -115,6 +115,13 @@
 2             margin-top: 1rem;
 3             text-align: center;
 4         }
 5+
 6+        .log {
 7+          max-height:  8em;
 8+          max-width: 90vw;
 9+          white-space: nowrap;
10+          overflow: auto;
11+        }
12     </style>
13 </head>
14 <body>
15@@ -126,13 +133,17 @@
16             <label for="id">
17                 Button ID:
18             </label>
19-            <input name="id" placeholder="identifier" maxlength="40" required>
20+            <input name="id" placeholder="xxx-xxx-xxxx" maxlength="40" required>
21         </div>
22 
23         <div class="no-light">
24             <div class="light"></div>
25         </div>
26         <p class="error hidden">Error fetching status.</p>
27+        <div>
28+          <h2>Checkin log</h2>
29+          <div class="log"></div>
30+        </div>
31     </div>
32 
33     <script>
34@@ -150,28 +161,38 @@
35         async function fetchButtonStatus() {
36             try {
37                 // Hide any previous error messages
38-                errorMessageDisplay.classList.add('hidden');
39-
40-                let id = buttonIdInput.value;
41-                // Construct the API URL using the button ID
42-                // Note: This assumes 'state/' is a relative path from where this HTML is served.
43-                // If it's an absolute path, you'd need to add the full domain.
44-                let resp = await fetch(`state/${id}`);
45-
46-                switch (resp.status) {
47-                    case 200:
48-                        // If status is 200 (OK), add 'ok' class to apply green color and pulse animation
49-                        statusLight.classList.add("ok");
50-                        break;
51-                    case 404:
52-                        // If status is 404 (Not Found), remove 'ok' class to apply red color and expired animation
53-                        statusLight.classList.remove("ok");
54-                        break;
55-                    default:
56-                        // For any other status, remove 'ok' class and throw an error
57-                        statusLight.classList.remove("ok");
58-                        throw new Error(`HTTP error! status: ${resp.status}`);
59-                }
60+                errorMessageDisplay.classList.add('hidden')
61+
62+                let id = buttonIdInput.value
63+                fetch(`state/${id}`)
64+                    .then(resp => {
65+                        switch (resp.status) {
66+                        case 200:
67+                            statusLight.classList.add("ok");
68+                            break;
69+                        case 404:
70+                            statusLight.classList.remove("ok");
71+                            break;
72+                        default:
73+                            statusLight.classList.remove("ok");
74+                            throw new Error(`HTTP error! status: ${resp.status}`);
75+                        }
76+                    })
77+
78+                fetch(`log/${id}.log`)
79+                    .then(resp => resp.text())
80+                    .then(txt => {
81+                        let log = document.querySelector(".log")
82+                        log.replaceChildren()
83+                        for (let line of txt.split("\n").reverse()) {
84+                            let date = new Date(line)
85+                            if (!isFinite(date)) {
86+                                continue
87+                            }
88+                            log.appendChild(document.createElement("div")).textContent = date
89+                        }
90+                    })
91+
92             } catch (error) {
93                 console.error('Error fetching button status:', error);
94                 // Show error message to the user