Mirrors/headscale-ui
1
0
Fork 0
mirror of https://github.com/gurucomputing/headscale-ui.git synced 2026-01-23 10:35:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added alert for namespace parameters

Browse source
This commit is contained in:
Christopher Bisset 2022-07-05 19:38:37 +10:00
parent 29da48c76f
commit 3839860ee8
3 changed files with 21 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/lib/common/Alert.svelte
View file

@ -1,66 +1,26 @@
<script lang="ts">
import { writable } from 'svelte/store';
import { onDestroy } from 'svelte';
import { onMount } from 'svelte';
export const alert = writable('test');
import { slide } from 'svelte/transition';
import { alert } from '$lib/common/stores.js';
export let ms = 3000;
let visible = false;
let timeout: number;
onMount(async () => {
const onMessageChange = (message: string, ms: number) => {
clearTimeout(timeout);
if (!message) {
// hide Alert if message is empty
visible = false;
} else {
visible = true;
if (ms > 0) timeout = window.setTimeout(() => (visible = false), ms); // and hide it after ms milliseconds
}
};
$: onMessageChange($alert, ms); // whenever the alert store or the ms props changes run onMessageChange
onDestroy(() => clearTimeout(timeout)); // make sure we clean-up the timeout
});
const onMessageChange = (message: string, ms: number) => {
clearTimeout(timeout);
if (!message) {
// hide Alert if message is empty
visible = false;
} else {
visible = true;
if (ms > 0) timeout = window.setTimeout(() => {visible = false; $alert = ''}, ms); // and hide it after ms milliseconds
}
};
$: onMessageChange($alert, ms); // whenever the alert store or the ms props changes run onMessageChange
onDestroy(() => clearTimeout(timeout)); // make sure we clean-up the timeout
</script>
{#if visible}
<div on:click={() => (visible = false)}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
><path
d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"
/></svg
>
<div transition:slide class="absolute top-0 left-1/2 transform -translate-x-1/2 p-4 text-lg text-center shadow-xl rounded-b-lg bg-gray-200 max-w-lg" on:click={() => (visible = false)}>
<p>{$alert}</p>
</div>
{/if}
<style>
div {
position: fixed;
cursor: pointer;
margin-right: 1.5rem;
margin-left: 1.5rem;
margin-top: 1rem;
right: 0;
display: flex;
align-items: center;
border-radius: 0.2rem;
background-color: #565656;
color: #fff;
font-size: 0.875rem;
font-weight: 700;
padding: 0.5rem 1.4rem;
font-size: 1.5rem;
z-index: 100;
opacity: 95%;
}
div p {
color: #fff;
}
div svg {
height: 1.6rem;
fill: currentcolor;
width: 1.4rem;
margin-right: 0.5rem;
}
</style>

3
src/lib/common/stores.js Normal file
View file

@ -0,0 +1,3 @@
import { writable } from 'svelte/store';
export const alert = writable('');

4
src/lib/index/CreateUser.svelte
View file

@ -1,12 +1,13 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import { alert } from '$lib/common/stores.js';
// name for user creation
let userName = '';
// whether the new card html element is visible
let newUserCardVisible = false;
// The Form used for validating input
let newUserForm: HTMLFormElement;
function createUser(): void {
let headscaleURL = localStorage.getItem('headscaleURL') || '';
let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
@ -37,6 +38,7 @@
console.log(error);
});
} else {
$alert = "Use lower case letters, periods, or dashes only"
}
}
</script>