🧼 Clean up MDNS UI

app/src/lib/types/models.ts

@@ -190,3 +190,32 @@ export type ServoConfiguration = {
   servo_oscillator_frequency: number
   servos: Servo[]
 }
+
+export interface MDNSServiceQuery {
+  services: MDNSServiceItem[]
+}
+
+export interface MDNSServiceItem {
+  ip: string
+  port: number
+  name: string
+}
+
+export interface MDNSService {
+  service: string
+  protocol: string
+  port: number
+}
+
+export interface MDNSTxtRecord {
+  key: string
+  value: string
+}
+
+export interface MDNSStatus {
+  started: boolean
+  hostname: string
+  instance: string
+  services: MDNSService[]
+  global_txt_records: MDNSTxtRecord[]
+}

app/src/lib/utilities/string-utilities.ts

@@ -1,36 +1,47 @@
 export const humanFileSize = (size: number): string => {
-	const units = ['B', 'kB', 'MB', 'GB', 'TB'];
+  const units = ['B', 'kB', 'MB', 'GB', 'TB']
-	var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
+  const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024))
-	return Number((size / Math.pow(1024, i)).toFixed(2)) * 1 + units[i];
+  return Number((size / Math.pow(1024, i)).toFixed(2)) * 1 + units[i]
-};
+}
 
 export const capitalize = (str: string): string => {
-	return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
-};
+}
 
 export const convertSeconds = (seconds: number) => {
-	// Calculate the number of seconds, minutes, hours, and days
+  // Calculate the number of seconds, minutes, hours, and days
-	let minutes = Math.floor(seconds / 60);
+  let minutes = Math.floor(seconds / 60)
-	let hours = Math.floor(minutes / 60);
+  let hours = Math.floor(minutes / 60)
-	let days = Math.floor(hours / 24);
+  const days = Math.floor(hours / 24)
 
-	// Calculate the remaining hours, minutes, and seconds
+  // Calculate the remaining hours, minutes, and seconds
-	hours = hours % 24;
+  hours = hours % 24
-	minutes = minutes % 60;
+  minutes = minutes % 60
-	seconds = seconds % 60;
+  seconds = seconds % 60
 
-	// Create the formatted string
+  // Create the formatted string
-	let result = '';
+  let result = ''
-	if (days > 0) {
+  if (days > 0) {
-		result += days + ' day' + (days > 1 ? 's' : '') + ' ';
+    result += days + ' day' + (days > 1 ? 's' : '') + ' '
-	}
+  }
-	if (hours > 0) {
+  if (hours > 0) {
-		result += hours + ' hour' + (hours > 1 ? 's' : '') + ' ';
+    result += hours + ' hour' + (hours > 1 ? 's' : '') + ' '
-	}
+  }
-	if (minutes > 0) {
+  if (minutes > 0) {
-		result += minutes + ' minute' + (minutes > 1 ? 's' : '') + ' ';
+    result += minutes + ' minute' + (minutes > 1 ? 's' : '') + ' '
-	}
+  }
-	result += seconds + ' second' + (seconds > 1 ? 's' : '');
+  result += seconds + ' second' + (seconds > 1 ? 's' : '')
 
-	return result;
+  return result
-};
+}
+
+export const compareIp = (ip1: string, ip2: string) => {
+  const ip1Parts = ip1.split('.').map(Number)
+  const ip2Parts = ip2.split('.').map(Number)
+  for (let i = 0; i < 4; i++) {
+    if (ip1Parts[i] !== ip2Parts[i]) {
+      return ip1Parts[i] > ip2Parts[i] ? 1 : -1
+    }
+  }
+  return 0
+}

app/src/routes/wifi/mdns/MDNS.svelte

@@ -7,8 +7,10 @@
   import StatusItem from '$lib/components/StatusItem.svelte'
   import { cubicOut } from 'svelte/easing'
   import { slide } from 'svelte/transition'
+  import type { MDNSStatus, MDNSServiceItem, MDNSServiceQuery } from '$lib/types/models'
+  import { compareIp } from '$lib/utilities'
 
-  let mdnsStatus: MDNSStatus = $state()
+  let mdnsStatus: MDNSStatus | undefined = $state()
   let services: MDNSServiceItem[] = $state([])
   let isLoading = $state(false)
 
@@ -31,44 +33,15 @@
       console.error('Error:', result.inner)
       return
     }
-    services = result.inner.services.sort((a, b) => b.name.localeCompare(a.name))
+    services = result.inner.services.sort((a, b) => compareIp(a.ip, b.ip))
     isLoading = false
   }
 
-  onMount(() => {
+  onMount(async () => {
-    getMDNSStatus()
+    await getMDNSStatus()
-    queryMDNSServices()
+    await queryMDNSServices()
   })
 
-  interface MDNSServiceQuery {
-    services: MDNSServiceItem[]
-  }
-
-  interface MDNSServiceItem {
-    ip: string
-    port: number
-    name: string
-  }
-
-  interface MDNSService {
-    service: string
-    protocol: string
-    port: number
-  }
-
-  interface MDNSTxtRecord {
-    key: string
-    value: string
-  }
-
-  interface MDNSStatus {
-    started: boolean
-    hostname: string
-    instance: string
-    services: MDNSService[]
-    global_txt_records: MDNSTxtRecord[]
-  }
-
   const triggerScan = async () => {
     await queryMDNSServices()
   }
@@ -91,9 +64,7 @@
     </button>
   {/snippet}
   <div class="w-full overflow-x-auto">
-    {#await getMDNSStatus()}
+    {#if mdnsStatus}
-      <Spinner />
-    {:then nothing}
       <div
         class="flex w-full flex-col space-y-1"
         transition:slide|local={{ duration: 300, easing: cubicOut }}>
@@ -120,11 +91,10 @@
                 <td>{service.ip}</td>
                 <td>{service.port}</td>
               </tr>
-              <!-- <StatusItem icon={Devices} title={service.name} description={service.port} /> -->
             {/each}
           </tbody>
         </table>
       </div>
-    {/await}
+    {/if}
   </div>
 </SettingsCard>

app/src/routes/wifi/mdns/MDNSSettings.svelte

@@ -1,99 +0,0 @@
-<script lang="ts">
-  import { Cancel, Edit, EditOff, Power } from '$lib/components/icons'
-  import { socket } from '$lib/stores'
-  import type { PeripheralsConfiguration } from '$lib/types/models'
-  import { onMount } from 'svelte'
-  import { modals } from 'svelte-modals'
-  import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
-
-  let settings: PeripheralsConfiguration | null = $state(null)
-  let isEditing = $state(false)
-
-  onMount(() => {
-    socket.on('peripheralSettings', handleSettings)
-    socket.sendEvent('peripheralSettings', '')
-    return () => socket.off('peripheralSettings', handleSettings)
-  })
-
-  const handleSettings = (data: any) => {
-    settings = data
-  }
-
-  const handleSave = () => {
-    modals.open(ConfirmDialog, {
-      title: 'Confirm configuration',
-      message:
-        'Are you sure you want to save this configuration? The operation cannot be undone. Please make sure you have the correct settings.',
-      labels: {
-        cancel: { label: 'Cancel', icon: Cancel },
-        confirm: { label: 'Confirm', icon: Power }
-      },
-      onConfirm: () => {
-        modals.close()
-        socket.sendEvent('peripheralSettings', settings)
-      }
-    })
-  }
-
-  const Icon = $derived(isEditing ? EditOff : Edit)
-</script>
-
-{#if settings}
-  <div class="collapse bg-base-100 border-base-300 border">
-    <input type="checkbox" />
-    <div class="collapse-title font-semibold">Configuration</div>
-    <div class="collapse-content text-sm">
-      <div class="flex flex-col gap-2">
-        <label for="sda" class="input validator">
-          SDA
-
-          <input
-            id="sda"
-            type="number"
-            required
-            placeholder="Type a number between 1 to 48"
-            min="0"
-            max="48"
-            title="SDA pin number (0-48)"
-            disabled={!isEditing}
-            bind:value={settings.sda} />
-        </label>
-        <label for="scl" class="input validator">
-          SCL
-
-          <input
-            id="scl"
-            type="number"
-            required
-            placeholder="Type a number between 1 to 48"
-            min="1"
-            max="48"
-            title="SCL pin number (0-48)"
-            disabled={!isEditing}
-            bind:value={settings.scl} />
-        </label>
-        <label class="input validator" for="frequency">
-          Frequency
-          <input
-            id="frequency"
-            type="number"
-            required
-            placeholder="Type a number between 100000 to 430000"
-            min="100000"
-            max="430000"
-            title="I2C frequency in Hz"
-            disabled={!isEditing}
-            bind:value={settings.frequency} />
-        </label>
-        <div>
-          <button class="btn btn-outline btn-primary" onclick={() => (isEditing = !isEditing)}>
-            <Icon class="h-6 w-6" />
-          </button>
-          {#if isEditing}
-            <button class="btn btn-outline btn-primary" onclick={handleSave}>Save</button>
-          {/if}
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}