Date filtering

+ Date filtering
+ Input styling
* Visual changes
+ Updated api calls

static/main.js

@@ -0,0 +1,55 @@
+/**
+ * @typedef {number}
+ */
+var initialInputOlder = 0; // miliseconds Unix TimeStamp
+/**
+ * @typedef {number}
+ */
+var initialInputNewer = 0; // miliseconds Unix TimeStamp
+
+
+/**
+ * @typedef {HTMLInputElement}
+ */
+var olderThanInputElement;
+/**
+ * @typedef {HTMLInputElement}
+ */
+var newerThanInputElement;
+
+document.addEventListener(`DOMContentLoaded`, initializePage)
+
+function initializePage() {
+
+    // Update the page's time filter
+    initialInputOlder = Number(document.getElementById(`inp-older`).textContent.trim())
+    initialInputNewer = Number(document.getElementById(`inp-newer`).textContent.trim())
+
+    // Bind the date elements
+    olderThanInputElement = document.getElementById(`olderThan`);
+    newerThanInputElement = document.getElementById(`newerThan`);
+
+    olderThanInputElement.value = convertTimestampToDateTimeLocal(initialInputOlder);
+    newerThanInputElement.value = convertTimestampToDateTimeLocal(initialInputNewer);
+
+}
+
+// Handle one of the date elements having their value changed.
+function applyDateInterval() {
+    const olderTimeStamp = new Date(olderThanInputElement.value).getTime()
+    const newerTimeStamp = new Date(newerThanInputElement.value).getTime()
+
+    window.location.href = `/?older=${olderTimeStamp}&newer=${newerTimeStamp}`;
+}
+
+/**
+ * Converts a Unix timestamp to a standard datetime string
+ * @param {number} timestamp - The Unix timestamp in milliseconds.
+ * @returns {string} - A normal string with Y-m-d H:i:s format
+ */
+function convertTimestampToDateTimeLocal(timestamp) {
+    const date = new Date(timestamp);
+    const offset = date.getTimezoneOffset() * 60000; // offset in milliseconds
+    const localDate = new Date(date.getTime() - offset);
+    return localDate.toISOString().slice(0, 19);
+}

static/style.css

@@ -76,4 +76,65 @@ table thead tr {
     border-radius: 8px;
 
     padding: .3rem .5rem;
+}
+
+
+/* Controls */
+
+input {
+    padding: .25rem .5rem;
+    font-size: 16px;
+    background-color: var(--bg3);
+    color: var(--fg0);
+
+    border: 1px solid var(--fg1);
+}
+
+.btn {
+    font-size: 16px;
+
+    padding: .5rem 1rem;
+
+    border: 1px solid var(--fg1);
+    border-radius: 6px;
+
+    background-color: var(--bg3);
+    color: var(--fg0);
+
+    cursor: pointer;
+}
+
+.btn:hover {
+    background-color: var(--bg2);
+}
+
+.input-grp {
+    display: flex;
+    flex-flow: column;
+}
+
+.input-grp label {
+    margin-bottom: .25rem;
+    font-weight: bold;
+}
+
+.graph-controls {
+    display: flex;
+    flex-flow: wrap;
+
+    align-items: center;
+    justify-content: space-evenly;
+
+    width: 100%;
+}
+
+.controls-panel {
+    display: flex;
+    flex-flow: column;
+
+    padding: 1rem 0;
+
+    border-bottom: 1px solid var(--fg1);
+    margin-bottom: 1rem;
+
 }