Darkages/SpotMicroESP32-Leika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🍎 Updates ui

Browse Source
This commit is contained in:
Rune Harlyk
2024-09-03 21:21:14 +02:00
committed by Rune Harlyk
parent 756f1c0148
commit 5e0b31aaf2
2 changed files with 864 additions and 820 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/routes/wifi/sta/Scan.svelte
+15 -12
View File
@@ -33,6 +33,7 @@
async function scanNetworks() { async function scanNetworks() {
scanActive = true; scanActive = true;
await api.get('/api/wifi/scan');
if ((await pollingResults()) == false) { if ((await pollingResults()) == false) {
pollingId = setInterval(() => pollingResults(), 1000); pollingId = setInterval(() => pollingResults(), 1000);
} }
@@ -40,13 +41,12 @@
} }
async function pollingResults() { async function pollingResults() {
if (result.isErr()){
await api.get('/api/wifi/scan');
const result = await api.get<NetworkList>('/api/wifi/networks'); const result = await api.get<NetworkList>('/api/wifi/networks');
if (result.isErr()) {
console.error(`Error occurred while fetching: `, result.inner); console.error(`Error occurred while fetching: `, result.inner);
return false return false;
} }
let response = result.inner let response = result.inner;
listOfNetworks = response.networks; listOfNetworks = response.networks;
scanActive = false; scanActive = false;
if (listOfNetworks.length) { if (listOfNetworks.length) {
@@ -83,7 +83,9 @@
<h2 class="text-base-content text-start text-2xl font-bold">Scan Networks</h2> <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 class="overflow-y-auto"> <div class="overflow-y-auto">
{#if scanActive}<div class="bg-base-100 flex flex-col items-center justify-center p-6"> {#if scanActive}<div
class="bg-base-100 flex flex-col items-center justify-center p-6"
>
<AP class="text-secondary h-32 w-32 shrink animate-ping stroke-2" /> <AP class="text-secondary h-32 w-32 shrink animate-ping stroke-2" />
<p class="mt-8 text-2xl">Scanning ...</p> <p class="mt-8 text-2xl">Scanning ...</p>
</div> </div>
@@ -101,19 +103,19 @@
tabindex="0" tabindex="0"
> >
<div class="mask mask-hexagon bg-primary h-auto w-10 shrink-0"> <div class="mask mask-hexagon bg-primary h-auto w-10 shrink-0">
<Network class="text-primary-content h-auto w-full scale-75" /> <Network
class="text-primary-content h-auto w-full scale-75"
/>
</div> </div>
<div> <div>
<div class="font-bold">{network.ssid}</div> <div class="font-bold">{network.ssid}</div>
<div class="text-sm opacity-75"> <div class="text-sm opacity-75">
Security: {encryptionType[network.encryption_type]}, Channel: {network.channel} Security: {encryptionType[network.encryption_type]},
Channel: {network.channel}
</div> </div>
</div> </div>
<div class="flex-grow" /> <div class="flex-grow" />
<RssiIndicator <RssiIndicator showDBm={true} rssi={network.rssi} />
showDBm={true}
rssi={network.rssi}
/>
</div> </div>
</li> </li>
{/each} {/each}
@@ -125,7 +127,8 @@
<button <button
class="btn btn-primary inline-flex flex-none items-center" class="btn btn-primary inline-flex flex-none items-center"
disabled={scanActive} disabled={scanActive}
on:click={scanNetworks}><Reload class="mr-2 h-5 w-5" /><span>Scan again</span></button on:click={scanNetworks}
><Reload class="mr-2 h-5 w-5" /><span>Scan again</span></button
> >
<div class="flex-grow" /> <div class="flex-grow" />
app/src/routes/wifi/sta/Wifi.svelte
+84 -43
View File
@@ -77,6 +77,7 @@
let formErrorhostname = false; let formErrorhostname = false;
async function getWifiStatus() { async function getWifiStatus() {
const result = await api.get<WifiStatus>('/api/wifi/status');
if (result.isErr()) { if (result.isErr()) {
console.error(`Error occurred while fetching: `, result.inner); console.error(`Error occurred while fetching: `, result.inner);
return; return;
@@ -86,6 +87,7 @@
} }
async function getWifiSettings() { async function getWifiSettings() {
const result = await api.get<WifiSettings>('/api/wifi/settings');
if (result.isErr()) { if (result.isErr()) {
console.error(`Error occurred while fetching: `, result.inner); console.error(`Error occurred while fetching: `, result.inner);
return; return;
@@ -98,13 +100,14 @@
onDestroy(() => socket.off('WiFiSettings')); onDestroy(() => socket.off('WiFiSettings'));
onMount(() => { onMount(() => {
socket.on<WifiSettings>('WiFiSettings', (data) => { socket.on<WifiSettings>('WiFiSettings', data => {
wifiSettings = data; wifiSettings = data;
dndNetworkList = wifiSettings.wifi_networks; dndNetworkList = wifiSettings.wifi_networks;
}); });
}); });
async function postWiFiSettings(data: WifiSettings) { async function postWiFiSettings(data: WifiSettings) {
const result = await api.post<WifiSettings>('/api/wifi/settings', data);
if (result.isErr()) { if (result.isErr()) {
console.error(`Error occurred while fetching: `, result.inner); console.error(`Error occurred while fetching: `, result.inner);
notifications.error('User not authorized.', 3000); notifications.error('User not authorized.', 3000);
@@ -282,9 +285,6 @@
dndNetworkList = reorder(dndNetworkList, from.index, to.index); dndNetworkList = reorder(dndNetworkList, from.index, to.index);
console.log(dndNetworkList); console.log(dndNetworkList);
} }
const result = await api.get<WifiStatus>('/api/wifi/status');
const result = await api.get<WifiSettings>('/api/wifi/settings');
const result = await api.post<WifiSettings>('/api/wifi/settings', data);
</script> </script>
<SettingsCard collapsible={false}> <SettingsCard collapsible={false}>
@@ -300,13 +300,13 @@
> >
<div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2"> <div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2">
<div <div
class="mask mask-hexagon h-auto w-10 {wifiStatus.status === 3 class="mask mask-hexagon h-auto w-10 {wifiStatus.status === 3 ?
? 'bg-success' 'bg-success'
: 'bg-error'}" : 'bg-error'}"
> >
<AP <AP
class="h-auto w-full scale-75 {wifiStatus.status === 3 class="h-auto w-full scale-75 {wifiStatus.status === 3 ?
? 'text-success-content' 'text-success-content'
: 'text-error-content'}" : 'text-error-content'}"
/> />
</div> </div>
@@ -360,8 +360,10 @@
}} }}
> >
<Down <Down
class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {showWifiDetails class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {(
? 'rotate-180' showWifiDetails
) ?
'rotate-180'
: ''}" : ''}"
/> />
</button> </button>
@@ -486,7 +488,9 @@
let:index let:index
> >
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- 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="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"> <div class="mask mask-hexagon bg-primary h-auto w-10 shrink-0">
<Router class="text-primary-content h-auto w-full scale-75" /> <Router class="text-primary-content h-auto w-full scale-75" />
</div> </div>
@@ -530,7 +534,9 @@
novalidate novalidate
bind:this={formField} bind:this={formField}
> >
<div class="grid w-full grid-cols-1 content-center gap-x-4 px-4 sm:grid-cols-2"> <div
class="grid w-full grid-cols-1 content-center gap-x-4 px-4 sm:grid-cols-2"
>
<div> <div>
<label class="label" for="channel"> <label class="label" for="channel">
<span class="label-text text-md">Host Name</span> <span class="label-text text-md">Host Name</span>
@@ -539,20 +545,26 @@
type="text" type="text"
min="1" min="1"
max="32" max="32"
class="input input-bordered invalid:border-error w-full invalid:border-2 {formErrorhostname class="input input-bordered invalid:border-error w-full invalid:border-2 {(
? 'border-error border-2' formErrorhostname
) ?
'border-error border-2'
: ''}" : ''}"
bind:value={wifiSettings.hostname} bind:value={wifiSettings.hostname}
id="channel" id="channel"
required required
/> />
<label class="label" for="channel"> <label class="label" for="channel">
<span class="label-text-alt text-error {formErrorhostname ? '' : 'hidden'}" <span
>Host name must be between 2 and 32 characters long</span class="label-text-alt text-error {formErrorhostname ? '' : (
'hidden'
)}">Host name must be between 2 and 32 characters long</span
> >
</label> </label>
</div> </div>
<label class="label inline-flex cursor-pointer content-end justify-start gap-4"> <label
class="label inline-flex cursor-pointer content-end justify-start gap-4"
>
<input <input
type="checkbox" type="checkbox"
bind:checked={wifiSettings.priority_RSSI} bind:checked={wifiSettings.priority_RSSI}
@@ -574,8 +586,10 @@
</label> </label>
<input <input
type="text" type="text"
class="input input-bordered invalid:border-error w-full invalid:border-2 {formErrors.ssid class="input input-bordered invalid:border-error w-full invalid:border-2 {(
? 'border-error border-2' formErrors.ssid
) ?
'border-error border-2'
: ''}" : ''}"
bind:value={networkEditable.ssid} bind:value={networkEditable.ssid}
id="ssid" id="ssid"
@@ -584,7 +598,9 @@
required required
/> />
<label class="label" for="ssid"> <label class="label" for="ssid">
<span class="label-text-alt text-error {formErrors.ssid ? '' : 'hidden'}" <span
class="label-text-alt text-error {formErrors.ssid ? ''
: 'hidden'}"
>SSID must be between 3 and 32 characters long</span >SSID must be between 3 and 32 characters long</span
> >
</label> </label>
@@ -617,8 +633,10 @@
</label> </label>
<input <input
type="text" type="text"
class="input input-bordered w-full {formErrors.local_ip class="input input-bordered w-full {(
? 'border-error border-2' formErrors.local_ip
) ?
'border-error border-2'
: ''}" : ''}"
minlength="7" minlength="7"
maxlength="15" maxlength="15"
@@ -628,8 +646,12 @@
required required
/> />
<label class="label" for="localIP"> <label class="label" for="localIP">
<span class="label-text-alt text-error {formErrors.local_ip ? '' : 'hidden'}" <span
>Must be a valid IPv4 address</span class="label-text-alt text-error {(
formErrors.local_ip
) ?
''
: 'hidden'}">Must be a valid IPv4 address</span
> >
</label> </label>
</div> </div>
@@ -640,8 +662,10 @@
</label> </label>
<input <input
type="text" type="text"
class="input input-bordered w-full {formErrors.gateway_ip class="input input-bordered w-full {(
? 'border-error border-2' formErrors.gateway_ip
) ?
'border-error border-2'
: ''}" : ''}"
minlength="7" minlength="7"
maxlength="15" maxlength="15"
@@ -651,8 +675,11 @@
/> />
<label class="label" for="gateway"> <label class="label" for="gateway">
<span <span
class="label-text-alt text-error {formErrors.gateway_ip ? '' : 'hidden'}" class="label-text-alt text-error {(
>Must be a valid IPv4 address</span formErrors.gateway_ip
) ?
''
: 'hidden'}">Must be a valid IPv4 address</span
> >
</label> </label>
</div> </div>
@@ -662,8 +689,10 @@
</label> </label>
<input <input
type="text" type="text"
class="input input-bordered w-full {formErrors.subnet_mask class="input input-bordered w-full {(
? 'border-error border-2' formErrors.subnet_mask
) ?
'border-error border-2'
: ''}" : ''}"
minlength="7" minlength="7"
maxlength="15" maxlength="15"
@@ -673,8 +702,11 @@
/> />
<label class="label" for="subnet"> <label class="label" for="subnet">
<span <span
class="label-text-alt text-error {formErrors.subnet_mask ? '' : 'hidden'}" class="label-text-alt text-error {(
>Must be a valid IPv4 address</span formErrors.subnet_mask
) ?
''
: 'hidden'}">Must be a valid IPv4 address</span
> >
</label> </label>
</div> </div>
@@ -684,8 +716,8 @@
</label> </label>
<input <input
type="text" type="text"
class="input input-bordered w-full {formErrors.dns_1 class="input input-bordered w-full {formErrors.dns_1 ?
? 'border-error border-2' 'border-error border-2'
: ''}" : ''}"
minlength="7" minlength="7"
maxlength="15" maxlength="15"
@@ -694,8 +726,10 @@
required required
/> />
<label class="label" for="gateway"> <label class="label" for="gateway">
<span class="label-text-alt text-error {formErrors.dns_1 ? '' : 'hidden'}" <span
>Must be a valid IPv4 address</span class="label-text-alt text-error {formErrors.dns_1 ?
''
: 'hidden'}">Must be a valid IPv4 address</span
> >
</label> </label>
</div> </div>
@@ -705,8 +739,8 @@
</label> </label>
<input <input
type="text" type="text"
class="input input-bordered w-full {formErrors.dns_2 class="input input-bordered w-full {formErrors.dns_2 ?
? 'border-error border-2' 'border-error border-2'
: ''}" : ''}"
minlength="7" minlength="7"
maxlength="15" maxlength="15"
@@ -715,8 +749,10 @@
required required
/> />
<label class="label" for="subnet"> <label class="label" for="subnet">
<span class="label-text-alt text-error {formErrors.dns_2 ? '' : 'hidden'}" <span
>Must be a valid IPv4 address</span class="label-text-alt text-error {formErrors.dns_2 ?
''
: 'hidden'}">Must be a valid IPv4 address</span
> >
</label> </label>
</div> </div>
@@ -726,11 +762,16 @@
<div class="divider mb-2 mt-0" /> <div class="divider mb-2 mt-0" />
<div class="mx-4 flex flex-wrap justify-end gap-2"> <div class="mx-4 flex flex-wrap justify-end gap-2">
<button class="btn btn-primary" type="submit" disabled={!showNetworkEditor} <button
class="btn btn-primary"
type="submit"
disabled={!showNetworkEditor}
>{newNetwork ? 'Add Network' : 'Update Network'}</button >{newNetwork ? 'Add Network' : 'Update Network'}</button
> >
<button class="btn btn-primary" type="button" on:click={validateHostName} <button
>Apply Settings</button class="btn btn-primary"
type="button"
on:click={validateHostName}>Apply Settings</button
> >
</div> </div>
</form> </form>