📐 Adds more settings pages

2024-02-05 21:17:17 +01:00
parent f42d75237b
commit dc4ad06aa1
5 changed files with 90 additions and 20 deletions
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { socket, isConnected, settings } from "../../lib/socket";
+    import { onMount } from 'svelte'
+    
+    onMount(() => {
+        if ($isConnected) {
+            const message = JSON.stringify({type: 'system/settings'})
+            $socket.send(message)
+        }
+    })
+
+</script>
+
+<div class="w-full h-full">
+    <div>
+        {#each Object.entries($settings) as entry}
+           <div class="flex gap-8">
+                <div class="w-32">{entry[0]}:</div>
+                <div>{entry[1]}</div>
+            </div>
+        {/each}
+    </div>
+</div>
@@ -1,3 +1,27 @@
-<div class="bg-blue-600 w-full h-full">
-INFO
+<script lang="ts">
+    import { socket, isConnected, systemInfo } from "../../lib/socket";
+    import { onMount } from 'svelte'
+	import { humanFileSize } from "../../lib/utils";
+    
+    onMount(() => {
+        if ($isConnected) {
+            const message = JSON.stringify({type: 'system/info'})
+            $socket.send(message)
+        }
+    })
+
+</script>
+<div class="w-full h-full">
+    <div class="w-1/3">
+        {#each Object.entries($systemInfo ?? {}) as entry}
+           <div class="flex gap-8">
+            <div class="w-32">{entry[0]}:</div>
+            {#if entry[0].includes("Size") || entry[0].includes("Free") || entry[0].includes("Min")}
+                <div>{humanFileSize(entry[1])}</div>
+            {:else}
+                <div>{entry[1]}</div>
+            {/if}
+        </div>
+        {/each}
+    </div>
 </div>
@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { socket, isConnected, log } from "../../lib/socket";
+    import { onMount } from 'svelte'
+    
+    onMount(() => {
+        if ($isConnected) {
+            const message = JSON.stringify({type: 'system/logs'})
+            $socket.send(message)
+        }
+    })
+
+</script>
+
+<div class="w-full h-full">
+    {#each $log as entry}
+        <div>{entry}</div>
+    {/each}
+</div>