🧼 Migrates svelte-modals to 2.0
This commit is contained in:
Rune Harlyk
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { Modals, closeModal } from 'svelte-modals/legacy';
|
||||
import { page } from '$app/state';
|
||||
import { Modals, modals } from 'svelte-modals';
|
||||
import Toast from '$lib/components/toasts/Toast.svelte';
|
||||
import { notifications } from '$lib/components/toasts/notifications';
|
||||
import { fade } from 'svelte/transition';
|
||||
@@ -91,7 +91,7 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{$page.data.title}</title>
|
||||
<title>{page.data.title}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="drawer">
|
||||
@@ -106,7 +106,7 @@
|
||||
<!-- Side Navigation -->
|
||||
<div class="drawer-side z-30 shadow-lg">
|
||||
<label for="main-menu" class="drawer-overlay"></label>
|
||||
<Menu on:menuClicked={() => (menuOpen = false)} />
|
||||
<Menu menuClicked={() => (menuOpen = false)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -117,7 +117,7 @@
|
||||
<div
|
||||
class="fixed inset-0 z-40 max-h-full max-w-full bg-black/20 backdrop-blur"
|
||||
transition:fade
|
||||
onclick={closeModal}
|
||||
onclick={modals.closeAll}
|
||||
></div>
|
||||
{/snippet}
|
||||
</Modals>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { openModal, closeModal } from 'svelte-modals/legacy';
|
||||
import { modals } from 'svelte-modals';
|
||||
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
|
||||
import SettingsCard from '$lib/components/SettingsCard.svelte';
|
||||
import Spinner from '$lib/components/Spinner.svelte';
|
||||
@@ -60,7 +60,7 @@
|
||||
const postRestart = async () => await api.post('/api/system/restart');
|
||||
|
||||
function confirmRestart() {
|
||||
openModal(ConfirmDialog, {
|
||||
modals.open(ConfirmDialog, {
|
||||
title: 'Confirm Restart',
|
||||
message: 'Are you sure you want to restart the device?',
|
||||
labels: {
|
||||
@@ -68,14 +68,14 @@
|
||||
confirm: { label: 'Restart', icon: Power }
|
||||
},
|
||||
onConfirm: () => {
|
||||
closeModal();
|
||||
modals.close();
|
||||
postRestart();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function confirmReset() {
|
||||
openModal(ConfirmDialog, {
|
||||
modals.open(ConfirmDialog, {
|
||||
title: 'Confirm Factory Reset',
|
||||
message: 'Are you sure you want to reset the device to its factory defaults?',
|
||||
labels: {
|
||||
@@ -83,14 +83,14 @@
|
||||
confirm: { label: 'Factory Reset', icon: FactoryReset }
|
||||
},
|
||||
onConfirm: () => {
|
||||
closeModal();
|
||||
modals.close();
|
||||
postFactoryReset();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function confirmSleep() {
|
||||
openModal(ConfirmDialog, {
|
||||
modals.open(ConfirmDialog, {
|
||||
title: 'Confirm Going to Sleep',
|
||||
message: 'Are you sure you want to put the device into sleep?',
|
||||
labels: {
|
||||
@@ -98,7 +98,7 @@
|
||||
confirm: { label: 'Sleep', icon: Sleep }
|
||||
},
|
||||
onConfirm: () => {
|
||||
closeModal();
|
||||
modals.close();
|
||||
postSleep();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { openModal, closeModal, closeAllModals } from 'svelte-modals/legacy';
|
||||
import { page } from '$app/state';
|
||||
import { modals } from 'svelte-modals';
|
||||
import { slide } from 'svelte/transition';
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
|
||||
@@ -21,7 +21,7 @@
|
||||
accept: 'application/vnd.github+json',
|
||||
'X-GitHub-Api-Version': '2022-11-28'
|
||||
};
|
||||
const result = await api.get(`https://api.github.com/repos/${$page.data.github}/releases`, {
|
||||
const result = await api.get(`https://api.github.com/repos/${page.data.github}/releases`, {
|
||||
headers
|
||||
});
|
||||
if (result.isErr()) {
|
||||
@@ -53,17 +53,17 @@
|
||||
}
|
||||
if (url === '') {
|
||||
// if no asset was found, use the first one
|
||||
openModal(InfoDialog, {
|
||||
modals.open(InfoDialog, {
|
||||
title: 'No matching firmware found',
|
||||
message:
|
||||
'No matching firmware was found for the current device. Upload the firmware manually or build from sources.',
|
||||
dismiss: { label: 'OK', icon: Check },
|
||||
onDismiss: () => closeModal()
|
||||
onDismiss: () => modals.close()
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
openModal(ConfirmDialog, {
|
||||
modals.open(ConfirmDialog, {
|
||||
title: 'Confirm flashing new firmware to the device',
|
||||
message: 'Are you sure you want to overwrite the existing firmware with a new one?',
|
||||
labels: {
|
||||
@@ -72,8 +72,8 @@
|
||||
},
|
||||
onConfirm: () => {
|
||||
postGithubDownload(url);
|
||||
openModal(GithubUpdateDialog, {
|
||||
onConfirm: () => closeAllModals()
|
||||
modals.open(GithubUpdateDialog, {
|
||||
onConfirm: () => modals.closeAll()
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { openModal, closeModal } from 'svelte-modals/legacy';
|
||||
import { modals } from 'svelte-modals';
|
||||
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
|
||||
import SettingsCard from '$lib/components/SettingsCard.svelte';
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
}
|
||||
|
||||
function confirmBinUpload() {
|
||||
openModal(ConfirmDialog, {
|
||||
modals.open(ConfirmDialog, {
|
||||
title: 'Confirm Flashing the Device',
|
||||
message: 'Are you sure you want to overwrite the existing firmware with a new one?',
|
||||
labels: {
|
||||
@@ -24,7 +24,7 @@
|
||||
confirm: { label: 'Upload', icon: OTA }
|
||||
},
|
||||
onConfirm: () => {
|
||||
closeModal();
|
||||
modals.close();
|
||||
uploadBIN();
|
||||
}
|
||||
});
|
||||
@@ -42,8 +42,8 @@
|
||||
<Warning class="h-6 w-6 flex-shrink-0" />
|
||||
<span
|
||||
>Uploading a new firmware (.bin) file will replace the existing firmware. You may upload
|
||||
a (.md5) file first to verify the uploaded firmware.</span
|
||||
>
|
||||
a (.md5) file first to verify the uploaded firmware.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<input
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { openModal, closeModal } from 'svelte-modals/legacy';
|
||||
import { modals } from 'svelte-modals';
|
||||
import { slide } from 'svelte/transition';
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
import { notifications } from '$lib/components/toasts/notifications';
|
||||
@@ -205,12 +205,12 @@
|
||||
}
|
||||
|
||||
function scanForNetworks() {
|
||||
openModal(ScanNetworks, {
|
||||
modals.open(ScanNetworks, {
|
||||
storeNetwork: (network: string) => {
|
||||
addNetwork();
|
||||
networkEditable.ssid = network;
|
||||
showNetworkEditor = true;
|
||||
closeModal();
|
||||
modals.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -236,7 +236,7 @@
|
||||
}
|
||||
|
||||
function confirmDelete(index: number) {
|
||||
openModal(ConfirmDialog, {
|
||||
modals.open(ConfirmDialog, {
|
||||
title: 'Delete Network',
|
||||
message: 'Are you sure you want to delete this network?',
|
||||
labels: {
|
||||
@@ -252,21 +252,19 @@
|
||||
dndNetworkList.splice(index, 1);
|
||||
dndNetworkList = [...dndNetworkList]; //Trigger reactivity
|
||||
showNetworkEditor = false;
|
||||
closeModal();
|
||||
modals.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function checkNetworkList() {
|
||||
if (dndNetworkList.length >= 5) {
|
||||
openModal(InfoDialog, {
|
||||
modals.open(InfoDialog, {
|
||||
title: 'Reached Maximum Networks',
|
||||
message:
|
||||
'You have reached the maximum number of networks. Please delete one to add another.',
|
||||
dismiss: { label: 'OK', icon: Check },
|
||||
onDismiss: () => {
|
||||
closeModal();
|
||||
}
|
||||
onDismiss: () => modals.close()
|
||||
});
|
||||
return false;
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user