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

basic create device scaffold

Browse source
This commit is contained in:
Christopher Bisset 2022-07-10 09:06:31 +10:00
parent 6115f8875b
commit 8a4a43d591
2 changed files with 15 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,10 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import { alert } from '$lib/common/stores.js';
// whether the new card html element is visible
let newDeviceCardVisible = false;
</script>
<!-- html -->
<div in:fade class="p-4"><button on:click={() => (newDeviceCardVisible = true)} class="btn-primary bg-teal-700 hover:bg-teal-900 " type="button">+ New Device</button></div>

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

@ -1,6 +1,7 @@
<!-- typescript -->
<script lang="ts">
import DeviceCard from '$lib/devices/DeviceCard.svelte';
import CreateDevice from '$lib/devices/CreateDevice.svelte';
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
@ -38,6 +39,7 @@
// return the api data
response.json().then((data) => {
headscaleDevices = data.machines;
console.log(headscaleDevices);
});
} else {
headscaleAPITest = 'failed';
@ -54,11 +56,12 @@
<!-- html -->
{#if componentLoaded}
<div in:fade class="px-4 py-4">
<h1 class="text-2xl bold green-400 mb-4">Device View</h1>
<div in:fade class="px-4 pt-4">
<h1 class="text-2xl bold">Device View</h1>
</div>
{#if headscaleAPITest === 'succeeded'}
<!-- instantiate device based components -->
<CreateDevice/>
{#each headscaleDevices as device}
<DeviceCard device={device} />
{/each}