Initital numbers dashboard

2026-08-29 15:44:00 +00:00 · 2022-04-20 12:51:03 +02:00
parent 54118cfef3
commit 6538005375
1 changed files with 133 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,133 @@
+<div id="table-container">
+</div>
+
+<script type="text/javascript">
+    function getRequest(url, callback) {
+        var xhr = new XMLHttpRequest();
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4 && xhr.status == 200) {
+                callback(xhr.responseText);
+            }
+        }
+        xhr.open("GET", url, true);
+        xhr.send();
+    }
+
+    function updateData() {
+        getRequest("https://where-is-felix-today-backend.herokuapp.com/api.json", function(data) {
+            const overviewTable = JSON.parse(data)["otherFxLifeData"]["overviewTable"]["value"];
+            const keys = ["weight", "gym", "minutesread", "sleepdurationwithings", "macroadherence", "veggies", "meditated"];
+            const rows = ["week", "month", "quarter", "year"]
+            for (var i = 0; i < keys.length; i++) {
+                const key = keys[i];
+                const value = overviewTable[key];
+                const container = document.getElementById("table-container");
+                const table = document.createElement("table");
+                table.setAttribute("cellspacing", 0)
+                table.setAttribute("cellpadding", 0)
+                table.setAttribute("id", key);
+                table.setAttribute("class", "metrics-table");
+                const thead = document.createElement("thead");
+                const tr = document.createElement("tr");
+                const th = document.createElement("th");
+                th.innerHTML = key;
+                th.colSpan = "2"
+                tr.appendChild(th);
+                thead.appendChild(tr);
+                table.appendChild(thead);
+                const tbody = document.createElement("tbody");
+                for (var j = 0; j < rows.length; j++) {
+                    const tr = document.createElement("tr");
+                    const td = document.createElement("td");
+                    td.innerHTML = rows[j];
+                    tr.appendChild(td);
+                    const td2 = document.createElement("td");
+                    td2.innerHTML = overviewTable[key + rows[j]];
+                    tr.appendChild(td2);
+                    tbody.appendChild(tr);
+                }
+                table.appendChild(tbody);
+                container.appendChild(table);
+            }
+        })
+    }
+    updateData();
+</script>
+
+<style type="text/css">
+    * {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        color: #353535;
+    }
+    
+    .metrics-table tr:nth-child(odd) {
+        background-color: #f7f7f7;
+    }
+    
+    thead th {
+        font-weight: bold;
+        text-align: center;
+    }
+    
+    .metrics-table td {
+        border: 1px solid #e8e8e8;
+    }
+    
+    .metrics-table th {
+        border: 1px solid #e8e8e8;
+    }
+    
+    .metrics-table th,
+    .metrics-table td {
+        padding: 10px 15px;
+    }
+    
+    .metrics-table>*>tr>td:first-child {
+        text-align: right;
+        white-space: nowrap;
+    }
+    
+    .metrics-table tr {
+        line-height: 16px;
+        font-size: 88%;
+    }
+    
+    #table-container {
+        margin-top: 20px;
+        margin-left: auto;
+        margin-right: auto;
+        text-align: left;
+    }
+    
+    .metrics-table {
+        border: none;
+        width: 250px;
+        margin: 20px;
+        display: inline;
+    }
+    
+    .metrics-table>*>tr>td:first-child {
+        text-align: right;
+        white-space: nowrap;
+        width: 50px;
+    }
+    
+    .metrics-table tr {
+        line-height: 16px;
+        font-size: 88%;
+    }
+    
+    .metrics-table tr .ago-subtle {
+        font-size: 85%;
+    }
+    
+    .metrics-table tr .highlighted {
+        padding: 4px;
+    }
+    
+    @media screen and (max-width: 800px) {
+        .metrics-table tr {
+            line-height: 12px;
+        }
+    }
+</style>