Mirrors/headscale-ui
1
0
Fork 0
mirror of https://github.com/gurucomputing/headscale-ui.git synced 2026-07-18 00:46:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added html elements for device sorting

Browse source
This commit is contained in:
Christopher Bisset 2022-07-30 10:01:41 +10:00
parent 573b75c02e
commit 4fa17a8285
5 changed files with 48 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/lib/devices/CreateDevice.svelte
View file

@ -6,7 +6,7 @@
import { base } from '$app/paths';
// whether the new card html element is visible
let newDeviceCardVisible = false;
export let newDeviceCardVisible = false;
let newDeviceForm: HTMLFormElement;
let newDeviceKey = '';
let selectedUser = '';
@ -39,14 +39,6 @@
</script>
<!-- html -->
<!-- device creation visibility button -->
<div class="p-4">
{#if newDeviceCardVisible == false}
<button on:click={() => (newDeviceCardVisible = true)} class="btn btn-primary btn-sm capitalize" type="button">+ New Device</button>
{:else}
<button on:click={() => (newDeviceCardVisible = false)} class="btn btn-secondary btn-sm capitalize" type="button">- Hide New Device</button>
{/if}
</div>
{#if newDeviceCardVisible == true}
<div in:fade out:fade={{ duration: newDeviceCardVisible ? 0 : 500 }} class="p-2 max-w-screen-lg border border-dashed border-base-content mx-4 rounded-md text-sm text-base-content shadow mb-10">

10
src/lib/devices/DeviceCard.svelte
View file

@ -1,8 +1,8 @@
<script lang="ts">
import { Device } from '$lib/common/classes';
import { fade, slide } from 'svelte/transition';
import { slide } from 'svelte/transition';
import DeviceRoutes from './DeviceCard/DeviceRoutes.svelte';
import DeviceTags from './DeviceCard/DeviceTags.svelte';
import DeviceTags from './DeviceCard/DeviceTags.svelte';
import MoveDevice from './DeviceCard/MoveDevice.svelte';
import RemoveDevice from './DeviceCard/RemoveDevice.svelte';
import RenameDevice from './DeviceCard/RenameDevice.svelte';
@ -19,10 +19,8 @@ import DeviceTags from './DeviceCard/DeviceTags.svelte';
{device.id}: {device.givenName}
{/if}
<RenameDevice bind:cardEditing {device} />
<DeviceTags {device}></DeviceTags>
</span
>
<DeviceTags {device} />
</span>
<div class="grow min-w-fit">
<RemoveDevice {device} />
<button type="button">

41
src/lib/devices/DeviceCard/DeviceTags/NewDeviceTag.svelte
View file

@ -11,24 +11,25 @@
function updateTagsAction() {
let tagList = device.forcedTags;
tagList.push(`tag:${newTag}`);
// remove duplicates
tagList = [...new Set(tagList)];
// remove duplicates
tagList = [...new Set(tagList)];
updateTags(device.id, tagList).then((response) => {
editingTag = false;
newTag = '';
// refresh devices after editing
getDevices()
.then((devices) => {
$headscaleDeviceStore = devices;
})
.catch((error) => {
$alertStore = error;
});
})
.catch((error) => {
$alertStore = error;
});
updateTags(device.id, tagList)
.then((response) => {
editingTag = false;
newTag = '';
// refresh devices after editing
getDevices()
.then((devices) => {
$headscaleDeviceStore = devices;
})
.catch((error) => {
$alertStore = error;
});
})
.catch((error) => {
$alertStore = error;
});
}
</script>
@ -42,9 +43,7 @@
<span>+ tag</span>
{:else}
<!-- svelte-ignore a11y-autofocus -->
<form
on:submit|preventDefault={updateTagsAction}
>
<form on:submit|preventDefault={updateTagsAction}>
<input bind:value={newTag} autofocus required class="bg-primary w-16" />
<button in:fade class="ml-1">
<!-- checkmark symbol -->
@ -58,7 +57,7 @@
in:fade
on:click|stopPropagation={() => {
editingTag = false;
newTag = '';
newTag = '';
}}
class="ml-1"
><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

10
src/lib/devices/SortDevices.svelte
View file

@ -1,5 +1,5 @@
<div class="btn-group">
<button class="btn btn-sm btn-active">ID</button>
<button class="btn btn-sm capitalize">Device Name</button>
<button class="btn btn-sm capitalize">Last Seen</button>
</div>
<span class="btn-group">
<button class="btn btn-sm btn-active">ID</button>
<button class="btn btn-sm capitalize">Device Name</button>
<button class="btn btn-sm capitalize">Last Seen</button>
</span>

19
src/routes/devices.html.svelte
View file

@ -9,6 +9,8 @@
import { getUsers, getDevices } from '$lib/common/apiFunctions.svelte';
import { base } from '$app/paths';
let newDeviceCardVisible = false;
//
// Component Variables
//
@ -50,7 +52,22 @@
</div>
{#if $apiTestStore === 'succeeded'}
<!-- instantiate device based components -->
<table><tr><td><CreateDevice /></td><td><SortDevices /></td></tr></table>
<table>
<tr
><td
><!-- device creation visibility button -->
<div class="p-4">
{#if newDeviceCardVisible == false}
<button on:click={() => (newDeviceCardVisible = true)} class="btn btn-primary btn-sm capitalize" type="button">+ New Device</button>
{:else}
<button on:click={() => (newDeviceCardVisible = false)} class="btn btn-secondary btn-sm capitalize" type="button">- Hide New Device</button>
{/if}
</div></td
><td><SortDevices /></td></tr
>
</table>
<CreateDevice bind:newDeviceCardVisible />
{#each $headscaleDeviceStore as device}
<DeviceCard {device} />
{/each}