🍎 Updates ui
This commit is contained in:
Rune Harlyk
@@ -33,6 +33,7 @@
|
||||
|
||||
async function scanNetworks() {
|
||||
scanActive = true;
|
||||
await api.get('/api/wifi/scan');
|
||||
if ((await pollingResults()) == false) {
|
||||
pollingId = setInterval(() => pollingResults(), 1000);
|
||||
}
|
||||
@@ -40,13 +41,12 @@
|
||||
}
|
||||
|
||||
async function pollingResults() {
|
||||
if (result.isErr()){
|
||||
await api.get('/api/wifi/scan');
|
||||
const result = await api.get<NetworkList>('/api/wifi/networks');
|
||||
if (result.isErr()) {
|
||||
console.error(`Error occurred while fetching: `, result.inner);
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
let response = result.inner
|
||||
let response = result.inner;
|
||||
listOfNetworks = response.networks;
|
||||
scanActive = false;
|
||||
if (listOfNetworks.length) {
|
||||
@@ -83,7 +83,9 @@
|
||||
<h2 class="text-base-content text-start text-2xl font-bold">Scan Networks</h2>
|
||||
<div class="divider my-2" />
|
||||
<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" />
|
||||
<p class="mt-8 text-2xl">Scanning ...</p>
|
||||
</div>
|
||||
@@ -101,19 +103,19 @@
|
||||
tabindex="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 class="font-bold">{network.ssid}</div>
|
||||
<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 class="flex-grow" />
|
||||
<RssiIndicator
|
||||
showDBm={true}
|
||||
rssi={network.rssi}
|
||||
/>
|
||||
<RssiIndicator showDBm={true} rssi={network.rssi} />
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
@@ -125,7 +127,8 @@
|
||||
<button
|
||||
class="btn btn-primary inline-flex flex-none items-center"
|
||||
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" />
|
||||
|
||||
@@ -77,6 +77,7 @@
|
||||
let formErrorhostname = false;
|
||||
|
||||
async function getWifiStatus() {
|
||||
const result = await api.get<WifiStatus>('/api/wifi/status');
|
||||
if (result.isErr()) {
|
||||
console.error(`Error occurred while fetching: `, result.inner);
|
||||
return;
|
||||
@@ -86,6 +87,7 @@
|
||||
}
|
||||
|
||||
async function getWifiSettings() {
|
||||
const result = await api.get<WifiSettings>('/api/wifi/settings');
|
||||
if (result.isErr()) {
|
||||
console.error(`Error occurred while fetching: `, result.inner);
|
||||
return;
|
||||
@@ -98,13 +100,14 @@
|
||||
onDestroy(() => socket.off('WiFiSettings'));
|
||||
|
||||
onMount(() => {
|
||||
socket.on<WifiSettings>('WiFiSettings', (data) => {
|
||||
socket.on<WifiSettings>('WiFiSettings', data => {
|
||||
wifiSettings = data;
|
||||
dndNetworkList = wifiSettings.wifi_networks;
|
||||
});
|
||||
});
|
||||
|
||||
async function postWiFiSettings(data: WifiSettings) {
|
||||
const result = await api.post<WifiSettings>('/api/wifi/settings', data);
|
||||
if (result.isErr()) {
|
||||
console.error(`Error occurred while fetching: `, result.inner);
|
||||
notifications.error('User not authorized.', 3000);
|
||||
@@ -282,9 +285,6 @@
|
||||
dndNetworkList = reorder(dndNetworkList, from.index, to.index);
|
||||
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>
|
||||
|
||||
<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="mask mask-hexagon h-auto w-10 {wifiStatus.status === 3
|
||||
? 'bg-success'
|
||||
class="mask mask-hexagon h-auto w-10 {wifiStatus.status === 3 ?
|
||||
'bg-success'
|
||||
: 'bg-error'}"
|
||||
>
|
||||
<AP
|
||||
class="h-auto w-full scale-75 {wifiStatus.status === 3
|
||||
? 'text-success-content'
|
||||
class="h-auto w-full scale-75 {wifiStatus.status === 3 ?
|
||||
'text-success-content'
|
||||
: 'text-error-content'}"
|
||||
/>
|
||||
</div>
|
||||
@@ -360,8 +360,10 @@
|
||||
}}
|
||||
>
|
||||
<Down
|
||||
class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {showWifiDetails
|
||||
? 'rotate-180'
|
||||
class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {(
|
||||
showWifiDetails
|
||||
) ?
|
||||
'rotate-180'
|
||||
: ''}"
|
||||
/>
|
||||
</button>
|
||||
@@ -486,7 +488,9 @@
|
||||
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="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>
|
||||
@@ -530,7 +534,9 @@
|
||||
novalidate
|
||||
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>
|
||||
<label class="label" for="channel">
|
||||
<span class="label-text text-md">Host Name</span>
|
||||
@@ -539,20 +545,26 @@
|
||||
type="text"
|
||||
min="1"
|
||||
max="32"
|
||||
class="input input-bordered invalid:border-error w-full invalid:border-2 {formErrorhostname
|
||||
? 'border-error border-2'
|
||||
class="input input-bordered invalid:border-error w-full invalid:border-2 {(
|
||||
formErrorhostname
|
||||
) ?
|
||||
'border-error border-2'
|
||||
: ''}"
|
||||
bind:value={wifiSettings.hostname}
|
||||
id="channel"
|
||||
required
|
||||
/>
|
||||
<label class="label" for="channel">
|
||||
<span class="label-text-alt text-error {formErrorhostname ? '' : 'hidden'}"
|
||||
>Host name must be between 2 and 32 characters long</span
|
||||
<span
|
||||
class="label-text-alt text-error {formErrorhostname ? '' : (
|
||||
'hidden'
|
||||
)}">Host name must be between 2 and 32 characters long</span
|
||||
>
|
||||
</label>
|
||||
</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
|
||||
type="checkbox"
|
||||
bind:checked={wifiSettings.priority_RSSI}
|
||||
@@ -574,8 +586,10 @@
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="input input-bordered invalid:border-error w-full invalid:border-2 {formErrors.ssid
|
||||
? 'border-error border-2'
|
||||
class="input input-bordered invalid:border-error w-full invalid:border-2 {(
|
||||
formErrors.ssid
|
||||
) ?
|
||||
'border-error border-2'
|
||||
: ''}"
|
||||
bind:value={networkEditable.ssid}
|
||||
id="ssid"
|
||||
@@ -584,7 +598,9 @@
|
||||
required
|
||||
/>
|
||||
<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
|
||||
>
|
||||
</label>
|
||||
@@ -617,8 +633,10 @@
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="input input-bordered w-full {formErrors.local_ip
|
||||
? 'border-error border-2'
|
||||
class="input input-bordered w-full {(
|
||||
formErrors.local_ip
|
||||
) ?
|
||||
'border-error border-2'
|
||||
: ''}"
|
||||
minlength="7"
|
||||
maxlength="15"
|
||||
@@ -628,8 +646,12 @@
|
||||
required
|
||||
/>
|
||||
<label class="label" for="localIP">
|
||||
<span class="label-text-alt text-error {formErrors.local_ip ? '' : 'hidden'}"
|
||||
>Must be a valid IPv4 address</span
|
||||
<span
|
||||
class="label-text-alt text-error {(
|
||||
formErrors.local_ip
|
||||
) ?
|
||||
''
|
||||
: 'hidden'}">Must be a valid IPv4 address</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
@@ -640,8 +662,10 @@
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="input input-bordered w-full {formErrors.gateway_ip
|
||||
? 'border-error border-2'
|
||||
class="input input-bordered w-full {(
|
||||
formErrors.gateway_ip
|
||||
) ?
|
||||
'border-error border-2'
|
||||
: ''}"
|
||||
minlength="7"
|
||||
maxlength="15"
|
||||
@@ -651,8 +675,11 @@
|
||||
/>
|
||||
<label class="label" for="gateway">
|
||||
<span
|
||||
class="label-text-alt text-error {formErrors.gateway_ip ? '' : 'hidden'}"
|
||||
>Must be a valid IPv4 address</span
|
||||
class="label-text-alt text-error {(
|
||||
formErrors.gateway_ip
|
||||
) ?
|
||||
''
|
||||
: 'hidden'}">Must be a valid IPv4 address</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
@@ -662,8 +689,10 @@
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="input input-bordered w-full {formErrors.subnet_mask
|
||||
? 'border-error border-2'
|
||||
class="input input-bordered w-full {(
|
||||
formErrors.subnet_mask
|
||||
) ?
|
||||
'border-error border-2'
|
||||
: ''}"
|
||||
minlength="7"
|
||||
maxlength="15"
|
||||
@@ -673,8 +702,11 @@
|
||||
/>
|
||||
<label class="label" for="subnet">
|
||||
<span
|
||||
class="label-text-alt text-error {formErrors.subnet_mask ? '' : 'hidden'}"
|
||||
>Must be a valid IPv4 address</span
|
||||
class="label-text-alt text-error {(
|
||||
formErrors.subnet_mask
|
||||
) ?
|
||||
''
|
||||
: 'hidden'}">Must be a valid IPv4 address</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
@@ -684,8 +716,8 @@
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="input input-bordered w-full {formErrors.dns_1
|
||||
? 'border-error border-2'
|
||||
class="input input-bordered w-full {formErrors.dns_1 ?
|
||||
'border-error border-2'
|
||||
: ''}"
|
||||
minlength="7"
|
||||
maxlength="15"
|
||||
@@ -694,8 +726,10 @@
|
||||
required
|
||||
/>
|
||||
<label class="label" for="gateway">
|
||||
<span class="label-text-alt text-error {formErrors.dns_1 ? '' : 'hidden'}"
|
||||
>Must be a valid IPv4 address</span
|
||||
<span
|
||||
class="label-text-alt text-error {formErrors.dns_1 ?
|
||||
''
|
||||
: 'hidden'}">Must be a valid IPv4 address</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
@@ -705,8 +739,8 @@
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="input input-bordered w-full {formErrors.dns_2
|
||||
? 'border-error border-2'
|
||||
class="input input-bordered w-full {formErrors.dns_2 ?
|
||||
'border-error border-2'
|
||||
: ''}"
|
||||
minlength="7"
|
||||
maxlength="15"
|
||||
@@ -715,8 +749,10 @@
|
||||
required
|
||||
/>
|
||||
<label class="label" for="subnet">
|
||||
<span class="label-text-alt text-error {formErrors.dns_2 ? '' : 'hidden'}"
|
||||
>Must be a valid IPv4 address</span
|
||||
<span
|
||||
class="label-text-alt text-error {formErrors.dns_2 ?
|
||||
''
|
||||
: 'hidden'}">Must be a valid IPv4 address</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
@@ -726,11 +762,16 @@
|
||||
|
||||
<div class="divider mb-2 mt-0" />
|
||||
<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
|
||||
>
|
||||
<button class="btn btn-primary" type="button" on:click={validateHostName}
|
||||
>Apply Settings</button
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="button"
|
||||
on:click={validateHostName}>Apply Settings</button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user