Commit the roughest POC of an UI ever

dev/settings.json

@@ -1,8 +1,12 @@
 {
-  "client_secret": "7rc7p00md0n0xsvqnv4rv17fthvjjrzpdghak1yq45833zvdvnb0",
+  "client_secret": "s76t1dazfctvtgq9dyvgw9herxc4gcz39q0q0y3taxpkgg0ahq8g",
   "max_cache_size_mib": 2048,
-  "client_port": 8080,
+  "client_port": 443,
-  "max_burst_rate_kib_per_second": 100,
+  "max_burst_rate_kib_per_second": 0,
-  "max_bandwidth_mib_per_hour": 1,
+  "max_bandwidth_mib_per_hour": 0,
-  "threads_per_cpu": 32
+  "threads_per_cpu": 32,
+  "web_settings":
+  {
+    "ui_port": 8080
+  }
 }

src/main/java/mdnet/base/MangaDexClient.java

@@ -64,8 +64,7 @@ public class MangaDexClient {
 			if (snapshot != null) {
 				String json = snapshot.getString(0);
 				snapshot.close();
-				statistics.set(GSON.fromJson(json, new TypeToken<ArrayList<Statistics>>() {
+				statistics.set(GSON.fromJson(json, Statistics.class));
-				}.getType()));
 			} else {
 				statistics.set(new Statistics());
 			}
@@ -85,6 +84,16 @@ public class MangaDexClient {
 		}
 
 		statsMap.put(Instant.now(), statistics.get());
+		try {
+			DiskLruCache.Editor editor = cache.edit("statistics");
+			if (editor != null) {
+				String json = GSON.toJson(statistics.get(), Statistics.class);
+				editor.setString(0, json);
+				editor.setString(1, "");
+				editor.setString(2, "");
+				editor.commit();
+			}
+		} catch (IOException ignored) {}
 
 		if (clientSettings.getWebSettings() != null) {
 			webUi = WebUiKt.getUiServer(clientSettings.getWebSettings(), statistics, statsMap);

src/main/kotlin/mdnet/base/Statistics.kt

@@ -7,5 +7,6 @@ data class Statistics(
     @field:SerializedName("cache_hits") val cacheHits: Int = 0,
     @field:SerializedName("cache_misses") val cacheMisses: Int = 0,
     @field:SerializedName("browser_cached") val browserCached: Int = 0,
-    @field:SerializedName("bytes_sent") val bytesSent: Long = 0
+    @field:SerializedName("bytes_sent") val bytesSent: Long = 0,
+    @field:SerializedName("bytes_on_disk") val bytesOnDisk: Long = 0
 )

src/main/kotlin/mdnet/base/web/WebUi.kt

@@ -25,7 +25,6 @@ fun getUiServer(
     statistics: AtomicReference<Statistics>,
     statsMap: Map<Instant, Statistics>
 ): Http4kServer {
-    val statisticsLens = Body.auto<Statistics>().toLens()
     val statsMapLens = Body.auto<Map<Instant, Statistics>>().toLens()
 
     return catchAllHideDetails()
@@ -34,7 +33,7 @@ fun getUiServer(
         .then(
             routes(
                 "/api/stats" bind Method.GET to {
-                    statisticsLens(statistics.get(), Response(Status.OK))
+                    statsMapLens(mapOf(Instant.now() to statistics.get()), Response(Status.OK))
                 },
                 "/api/pastStats" bind Method.GET to {
                     synchronized(statsMap) {

src/main/resources/webui/dataReceive.js

@@ -200,11 +200,12 @@ function loadStuff() {
         type: 'doughnut',
         data: {
             datasets: [{
-                data: [0, 0]
+                data: [0, 0, 0]
             }],
             labels: [
                 'Hits',
-                'Misses'
+                'Misses',
+                'Browser Cached'
             ]
         },
         options: {}
@@ -235,12 +236,12 @@ function loadStuff() {
     byte = new Chart(document.getElementById('bytessent').getContext('2d'), {
         type: 'line',
         data: {
-            labels: [1, 2, 3, 4],
+            labels: [],
             datasets: [{
                 label: 'Bytes Sent',
                 backgroundColor: "#f00",
                 borderColor: "#f00",
-                data: [36, 98, 45, 67],
+                data: [],
                 fill: false
             }]
         },
@@ -258,12 +259,12 @@ function loadStuff() {
     cached = new Chart(document.getElementById('browsercached').getContext('2d'), {
         type: 'line',
         data: {
-            labels: [1, 2, 3, 4],
+            labels: [],
             datasets: [{
-                label: 'Cached',
+                label: 'Bytes On Disk',
                 backgroundColor: "#f00",
                 borderColor: "#f00",
-                data: [36, 98, 45, 67],
+                data: [],
                 fill: false
             }]
         },
@@ -585,49 +586,38 @@ function updateWithMessage(m) {
 
 function getStats() {
     fetch("/api/stats")
-        .then(response => async function () {
+        .then(response => response.json())
-            let respj = JSON.parse(await response.text());
+        .then(response => {
-            parseResponse(respj);
+            updateValues(response);
-            console.log(respj);
+            console.log(response);
         });
     //TODO: use values and update web info
 }
 
-function parseResponse(x) {
-    hitmiss.data.datasets[0].data[0] = (x.cache_hits);
-    hitmiss.data.datasets[0].data[1] = (x.misses);
-    req.data.labels.push(x.snap_time);
-    req.data.datasets.forEach((dataset) => {
-        dataset.data.push(x.requests_served);
-    });
-    byte.data.labels.push(x.snap_time);
-    byte.data.datasets.forEach((dataset) => {
-        dataset.data.push(x.bytes_sent);
-    });
-    cached.data.labels.push(x.snap_time);
-    cached.data.datasets.forEach((dataset) => {
-        dataset.data.push(x.browser_cached);
-    });
-}
-
 function updateValues(data) {
     for (let key in data) {
         if (data.hasOwnProperty(key)) {
             let x = data[key];
-            hitmiss.data.datasets[0].data[0] = (x.cache_hits);
+            hitmiss.data.datasets[0].data[0] = x.cache_hits;
-            hitmiss.data.datasets[0].data[1] = (x.misses);
+            hitmiss.data.datasets[0].data[1] = x.cache_misses;
+            hitmiss.data.datasets[0].data[2] = x.browser_cached;
+
+            hitmiss.update()
             req.data.labels.push(key);
             req.data.datasets.forEach((dataset) => {
                 dataset.data.push(x.requests_served);
             });
+            req.update()
             byte.data.labels.push(key);
             byte.data.datasets.forEach((dataset) => {
                 dataset.data.push(x.bytes_sent);
             });
+            byte.update()
             cached.data.labels.push(key);
             cached.data.datasets.forEach((dataset) => {
-                dataset.data.push(x.browser_cached);
+                dataset.data.push(x.bytes_on_disk);
             });
+            cached.update()
         }
     }
 }

src/main/resources/webui/index.html

@@ -21,7 +21,7 @@
     <div id="consoleLatest" hidden></div>
     <button id="connection" class="connecting button" onclick="reconnect()">Disconnected</button>
 </div>
-<div id="sideBar">
+<div id="sideBar" >
     <div id="expSide" class="sideOption" onclick="expSide()">
         <img src="icons/showmore.png" alt="dash" width="30px" height="30px" style="padding: 10px" class="img">
         <h2 style="position: absolute; left: 50px; top: 0; margin: calc((50px - 29px)/2)">Menu</h2>
@@ -30,17 +30,9 @@
         <img src="icons/dashboard.png" alt="dash" width="30px" height="30px" style="padding: 10px" class="img">
         <h2 style="position: absolute; left: 50px; top: 50px; margin: calc((50px - 29px)/2)">Dashboard</h2>
     </div>
-    <div id="cons" class="sideOption" onclick="selectTab('cons','console')">
-        <img src="icons/console.png" alt="dash" width="30px" height="30px" style="padding: 10px" class="img">
-        <h2 style="position: absolute; left: 50px; top: 100px; margin: calc((50px - 29px)/2)">Console</h2>
-    </div>
     <div id="opt" class="sideOption" onclick="selectTab('opt','dashOptions')">
         <img src="icons/options.png" alt="dash" width="30px" height="30px" style="padding: 10px" class="img">
-        <h2 style="position: absolute; left: 50px; top: 150px; margin: calc((50px - 29px)/2)">Options</h2>
+        <h2 style="position: absolute; left: 50px; top: 100px; margin: calc((50px - 29px)/2)">Options</h2>
-    </div>
-    <div id="inf" class="sideOption" onclick="selectTab('inf','info')">
-        <img src="icons/info.png" alt="dash" width="30px" height="30px" style="padding: 10px" class="img">
-        <h2 style="position: absolute; left: 50px; top: 200px; margin: calc((50px - 29px)/2)">Info</h2>
     </div>
 </div>
 <div id="content">
@@ -93,23 +85,6 @@
                 <h4>Data Refresh Rate</h4>
                 <label><input id="dataRefreshRate" type="number" class="optionInput input" placeholder="5000" min="500"></label>
             </div>
-            <div class="option">
-                <h4>Websocket Port</h4>
-                <label><input id="port" type="number" class="optionInput input" placeholder="33333"></label>
-            </div>
-            <div class="option">
-                <h4>Client IP</h4>
-                <label><input id="ip" type="text" class="optionInput input" placeholder="localhost"></label>
-            </div>
-            <div class="option">
-                <h4>Max Console Lines</h4>
-                <label><input id="maxConsoleLines" type="number" class="optionInput input" placeholder="1000" min="100"></label>
-            </div>
-            <div class="option">
-                <h4>Graph Time Frame</h4>
-                <label><input id="graphTimeFrame" type="number" class="optionInput input" placeholder="30000"
-                              min="5000"></label>
-            </div>
             <h3>Display</h3>
             <div class="option">
                 <h4>Theme</h4>
@@ -127,13 +102,6 @@
                     <option value="softStyle">Soft</option>
                 </select></label>
             </div>
-            <div class="option">
-                <h4>Show Console Latest</h4>
-                <label class="switch switchInput">
-                    <input id="newestconsole" type="checkbox">
-                    <span id="newestconsolecb" class="slider"></span>
-                </label>
-            </div>
             <div class="option">
                 <h4>Animations</h4>
                 <label class="switch switchInput">
@@ -141,13 +109,6 @@
                     <span id="doAnimationscb" class="slider"></span>
                 </label>
             </div>
-            <div class="option">
-                <h4>Lock Dashboard <br>(does not work)</h4>
-                <label class="switch switchInput">
-                    <input id="lockDash" type="checkbox">
-                    <span id="lockDashcb" class="slider"></span>
-                </label>
-            </div>
         </div>
         <button id="apply" class="button" onclick="applyOptions()">Apply</button>
         <button id="reset" class="button" onclick="resetOptions()">Reset</button>