47 lines
1.5 KiB
Svelte
47 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
// The ordering of these imports is critical to your app working properly
|
|
import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
|
|
// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
|
|
import '@skeletonlabs/skeleton/styles/all.css';
|
|
import '$lib/scss/icons.scss'
|
|
// Most of your app wide CSS should be put in this file
|
|
import '../app.postcss';
|
|
|
|
import {alerts, globals} from "$lib/stores.js";
|
|
import { autoModeWatcher } from '@skeletonlabs/skeleton';
|
|
|
|
let alertsvar;
|
|
let globalvars;
|
|
|
|
function closeWarning(e) {
|
|
let index = e.target.dataset.index;
|
|
alerts.update(function (data) {
|
|
data.splice(index, 1)
|
|
return data;
|
|
})
|
|
}
|
|
alerts.subscribe((value) => {
|
|
alertsvar = value;
|
|
});
|
|
globals.subscribe(value => {
|
|
globalvars = value;
|
|
});
|
|
</script>
|
|
<svelte:head>{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}</svelte:head>
|
|
{#if typeof globalvars.user !== 'undefined' }
|
|
{#each alertsvar as alert, i}
|
|
<aside class="alert variant-filled-{alert.class}">
|
|
<!-- Icon -->
|
|
<div><i class="text-2xl icon icon-exclamation-triangle"></i></div>
|
|
<!-- Message -->
|
|
<p class="alert-message">{alert.text}</p>
|
|
<!-- Actions -->
|
|
<div class="alert-actions">
|
|
<i on:click={closeWarning} data-index={i} class="icon icon-close"></i>
|
|
</div>
|
|
</aside>
|
|
{/each}
|
|
{/if}
|
|
|
|
<slot />
|