🌌 Migrate app to svelte-5
This commit is contained in:
Rune Harlyk
@@ -1,4 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { preventDefault } from 'svelte/legacy';
|
||||
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { slide } from 'svelte/transition';
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
@@ -13,10 +15,10 @@
|
||||
|
||||
const features = useFeatureFlags();
|
||||
|
||||
let apSettings: ApSettings;
|
||||
let apStatus: ApStatus;
|
||||
let apSettings: ApSettings = $state();
|
||||
let apStatus: ApStatus = $state();
|
||||
|
||||
let formField: any;
|
||||
let formField: any = $state();
|
||||
|
||||
async function getAPStatus() {
|
||||
const result = await api.get<ApStatus>('/api/wifi/ap/status');
|
||||
@@ -67,14 +69,14 @@
|
||||
{ bg_color: 'bg-warning', text_color: 'text-warning-content', description: 'Lingering' }
|
||||
];
|
||||
|
||||
let formErrors = {
|
||||
let formErrors = $state({
|
||||
ssid: false,
|
||||
channel: false,
|
||||
max_clients: false,
|
||||
local_ip: false,
|
||||
gateway_ip: false,
|
||||
subnet_mask: false
|
||||
};
|
||||
});
|
||||
|
||||
async function postAPSettings(data: ApSettings) {
|
||||
const result = await api.post<ApSettings>('/api/wifi/ap/settings', data);
|
||||
@@ -152,8 +154,12 @@
|
||||
</script>
|
||||
|
||||
<SettingsCard collapsible={false}>
|
||||
<AP slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
|
||||
<span slot="title">Access Point</span>
|
||||
{#snippet icon()}
|
||||
<AP class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
|
||||
{/snippet}
|
||||
{#snippet title()}
|
||||
<span >Access Point</span>
|
||||
{/snippet}
|
||||
<div class="w-full overflow-x-auto">
|
||||
{#await getAPStatus()}
|
||||
<Spinner />
|
||||
@@ -234,7 +240,7 @@
|
||||
>
|
||||
<form
|
||||
class="grid w-full grid-cols-1 content-center gap-x-4 p-0s sm:grid-cols-2"
|
||||
on:submit|preventDefault={handleSubmitAP}
|
||||
onsubmit={preventDefault(handleSubmitAP)}
|
||||
novalidate
|
||||
bind:this={formField}
|
||||
>
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { createBubbler } from 'svelte/legacy';
|
||||
|
||||
const bubble = createBubbler();
|
||||
import { closeModal } from 'svelte-modals';
|
||||
import { focusTrap } from 'svelte-focus-trap';
|
||||
import { fly } from 'svelte/transition';
|
||||
@@ -10,8 +13,12 @@
|
||||
import { AP, Network, Reload, Cancel } from '$lib/components/icons';
|
||||
|
||||
// provided by <Modals />
|
||||
export let isOpen: boolean;
|
||||
export let storeNetwork: any;
|
||||
interface Props {
|
||||
isOpen: boolean;
|
||||
storeNetwork: any;
|
||||
}
|
||||
|
||||
let { isOpen, storeNetwork }: Props = $props();
|
||||
|
||||
const encryptionType = [
|
||||
'Open',
|
||||
@@ -25,9 +32,9 @@
|
||||
'WAPI PSK'
|
||||
];
|
||||
|
||||
let listOfNetworks: NetworkItem[] = [];
|
||||
let listOfNetworks: NetworkItem[] = $state([]);
|
||||
|
||||
let scanActive = false;
|
||||
let scanActive = $state(false);
|
||||
|
||||
let pollingId: number;
|
||||
|
||||
@@ -73,15 +80,15 @@
|
||||
role="dialog"
|
||||
class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
|
||||
transition:fly={{ y: 50 }}
|
||||
on:introstart
|
||||
on:outroend
|
||||
onintrostart={bubble('introstart')}
|
||||
onoutroend={bubble('outroend')}
|
||||
use:focusTrap
|
||||
>
|
||||
<div
|
||||
class="bg-base-100 rounded-box pointer-events-auto flex max-h-full min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
|
||||
>
|
||||
<h2 class="text-base-content text-start text-2xl font-bold">Scan Networks</h2>
|
||||
<div class="divider my-2" />
|
||||
<div class="divider my-2"></div>
|
||||
<div class="overflow-y-auto">
|
||||
{#if scanActive}<div
|
||||
class="bg-base-100 flex flex-col items-center justify-center p-6"
|
||||
@@ -93,10 +100,10 @@
|
||||
<ul class="menu">
|
||||
{#each listOfNetworks as network, i}
|
||||
<li>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<div
|
||||
class="bg-base-200 rounded-btn my-1 flex items-center space-x-3 hover:scale-[1.02] active:scale-[0.98]"
|
||||
on:click={() => {
|
||||
onclick={() => {
|
||||
storeNetwork(network.ssid);
|
||||
}}
|
||||
role="button"
|
||||
@@ -114,7 +121,7 @@
|
||||
Channel: {network.channel}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow" />
|
||||
<div class="flex-grow"></div>
|
||||
<RssiIndicator showDBm={true} rssi={network.rssi} />
|
||||
</div>
|
||||
</li>
|
||||
@@ -122,19 +129,19 @@
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="divider my-2" />
|
||||
<div class="divider my-2"></div>
|
||||
<div class="flex flex-wrap justify-end gap-2">
|
||||
<button
|
||||
class="btn btn-primary inline-flex flex-none items-center"
|
||||
disabled={scanActive}
|
||||
on:click={scanNetworks}
|
||||
onclick={scanNetworks}
|
||||
><Reload class="mr-2 h-5 w-5" /><span>Scan again</span></button
|
||||
>
|
||||
|
||||
<div class="flex-grow" />
|
||||
<div class="flex-grow"></div>
|
||||
<button
|
||||
class="btn btn-warning text-warning-content inline-flex flex-none items-center"
|
||||
on:click={closeModal}><Cancel class="mr-2 h-5 w-5" /><span>Cancel</span></button
|
||||
onclick={closeModal}><Cancel class="mr-2 h-5 w-5" /><span>Cancel</span></button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
<svelte:options immutable={true} />
|
||||
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { openModal, closeModal } from 'svelte-modals';
|
||||
@@ -38,7 +36,7 @@
|
||||
|
||||
const features = useFeatureFlags();
|
||||
|
||||
let networkEditable: KnownNetworkItem = {
|
||||
let networkEditable: KnownNetworkItem = $state({
|
||||
ssid: '',
|
||||
password: '',
|
||||
static_ip_config: false,
|
||||
@@ -47,32 +45,32 @@
|
||||
gateway_ip: undefined,
|
||||
dns_ip_1: undefined,
|
||||
dns_ip_2: undefined
|
||||
};
|
||||
});
|
||||
|
||||
let static_ip_config = false;
|
||||
let static_ip_config = $state(false);
|
||||
|
||||
let newNetwork: boolean = true;
|
||||
let showNetworkEditor: boolean = false;
|
||||
let newNetwork: boolean = $state(true);
|
||||
let showNetworkEditor: boolean = $state(false);
|
||||
|
||||
let wifiStatus: WifiStatus;
|
||||
let wifiSettings: WifiSettings;
|
||||
let wifiStatus: WifiStatus = $state();
|
||||
let wifiSettings: WifiSettings = $state();
|
||||
|
||||
let dndNetworkList: KnownNetworkItem[] = [];
|
||||
let dndNetworkList: KnownNetworkItem[] = $state([]);
|
||||
|
||||
let showWifiDetails = false;
|
||||
let showWifiDetails = $state(false);
|
||||
|
||||
let formField: any;
|
||||
let formField: any = $state();
|
||||
|
||||
let formErrors = {
|
||||
let formErrors = $state({
|
||||
ssid: false,
|
||||
local_ip: false,
|
||||
gateway_ip: false,
|
||||
subnet_mask: false,
|
||||
dns_1: false,
|
||||
dns_2: false
|
||||
};
|
||||
});
|
||||
|
||||
let formErrorhostname = false;
|
||||
let formErrorhostname = $state(false);
|
||||
|
||||
async function getWifiStatus() {
|
||||
const result = await api.get<WifiStatus>('/api/wifi/sta/status');
|
||||
@@ -128,7 +126,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
function validateWiFiForm() {
|
||||
function validateWiFiForm(event: SubmitEvent) {
|
||||
event.preventDefault();
|
||||
let valid = true;
|
||||
|
||||
// Validate SSID
|
||||
@@ -286,8 +285,12 @@
|
||||
</script>
|
||||
|
||||
<SettingsCard collapsible={false}>
|
||||
<Router slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
|
||||
<span slot="title">WiFi Connection</span>
|
||||
{#snippet icon()}
|
||||
<Router class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
|
||||
{/snippet}
|
||||
{#snippet title()}
|
||||
<span>WiFi Connection</span>
|
||||
{/snippet}
|
||||
<div class="w-full overflow-x-auto">
|
||||
{#await getWifiStatus()}
|
||||
<Spinner />
|
||||
@@ -350,10 +353,10 @@
|
||||
{wifiStatus.rssi} dBm
|
||||
</div>
|
||||
</div>
|
||||
<div class="grow" />
|
||||
<div class="grow"></div>
|
||||
<button
|
||||
class="btn btn-circle btn-ghost btn-sm modal-button"
|
||||
on:click={() => {
|
||||
onclick={() => {
|
||||
showWifiDetails = !showWifiDetails;
|
||||
}}
|
||||
>
|
||||
@@ -451,7 +454,7 @@
|
||||
<div class="relative w-full overflow-visible">
|
||||
<button
|
||||
class="btn btn-primary text-primary-content btn-md absolute -top-14 right-16"
|
||||
on:click={() => {
|
||||
onclick={() => {
|
||||
if (checkNetworkList()) {
|
||||
addNetwork();
|
||||
showNetworkEditor = true;
|
||||
@@ -462,7 +465,7 @@
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary text-primary-content btn-md absolute -top-14 right-0"
|
||||
on:click={() => {
|
||||
onclick={() => {
|
||||
if (checkNetworkList()) {
|
||||
scanForNetworks();
|
||||
showNetworkEditor = true;
|
||||
@@ -482,51 +485,49 @@
|
||||
itemSize={60}
|
||||
itemCount={dndNetworkList.length}
|
||||
on:drop={onDrop}
|
||||
let:index
|
||||
>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2">
|
||||
<div class="mask mask-hexagon bg-primary h-auto w-10 shrink-0">
|
||||
<Router class="text-primary-content h-auto w-full scale-75" />
|
||||
{#snippet children({ index })}
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<div
|
||||
class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2"
|
||||
>
|
||||
<div class="mask mask-hexagon bg-primary h-auto w-10 shrink-0">
|
||||
<Router class="text-primary-content h-auto w-full scale-75" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-bold">{dndNetworkList[index].ssid}</div>
|
||||
</div>
|
||||
<div class="flex-grow"></div>
|
||||
<div class="space-x-0 px-0 mx-0">
|
||||
<button
|
||||
class="btn btn-ghost btn-sm"
|
||||
onclick={() => {
|
||||
handleEdit(index);
|
||||
}}
|
||||
>
|
||||
<Edit class="h-6 w-6" /></button
|
||||
>
|
||||
<button
|
||||
class="btn btn-ghost btn-sm"
|
||||
onclick={() => {
|
||||
confirmDelete(index);
|
||||
}}
|
||||
>
|
||||
<Delete class="text-error h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-bold">{dndNetworkList[index].ssid}</div>
|
||||
</div>
|
||||
<div class="flex-grow" />
|
||||
<div class="space-x-0 px-0 mx-0">
|
||||
<button
|
||||
class="btn btn-ghost btn-sm"
|
||||
on:click={() => {
|
||||
handleEdit(index);
|
||||
}}
|
||||
>
|
||||
<Edit class="h-6 w-6" /></button
|
||||
>
|
||||
<button
|
||||
class="btn btn-ghost btn-sm"
|
||||
on:click={() => {
|
||||
confirmDelete(index);
|
||||
}}
|
||||
>
|
||||
<Delete class="text-error h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</DragDropList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider mb-0" />
|
||||
<div class="divider mb-0"></div>
|
||||
<div
|
||||
class="flex flex-col gap-2 p-0"
|
||||
transition:slide|local={{ duration: 300, easing: cubicOut }}
|
||||
>
|
||||
<form
|
||||
class=""
|
||||
on:submit|preventDefault={validateWiFiForm}
|
||||
novalidate
|
||||
bind:this={formField}
|
||||
>
|
||||
<form class="" onsubmit={validateWiFiForm} novalidate bind:this={formField}>
|
||||
<div class="grid w-full grid-cols-1 content-center gap-x-4 px-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label class="label" for="channel">
|
||||
@@ -566,7 +567,7 @@
|
||||
</div>
|
||||
|
||||
{#if showNetworkEditor}
|
||||
<div class="divider my-0" />
|
||||
<div class="divider my-0"></div>
|
||||
<div
|
||||
class="grid w-full grid-cols-1 content-center gap-x-4 px-4 sm:grid-cols-2"
|
||||
transition:slide|local={{ duration: 300, easing: cubicOut }}
|
||||
@@ -747,12 +748,12 @@
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<div class="divider mb-2 mt-0" />
|
||||
<div class="divider mb-2 mt-0"></div>
|
||||
<div class="mx-4 flex flex-wrap justify-end gap-2">
|
||||
<button class="btn btn-primary" type="submit" disabled={!showNetworkEditor}>
|
||||
{newNetwork ? 'Add Network' : 'Update Network'}
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button" on:click={validateHostName}>
|
||||
<button class="btn btn-primary" type="button" onclick={validateHostName}>
|
||||
Apply Settings
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user