added tag functionality

src/lib/common/apiFunctions.svelte

@@ -69,6 +69,39 @@
 			});
 	}
 
+	export async function updateTags(deviceID: string, tags: string[]): Promise<any> {
+		// variables in local storage
+		let headscaleURL = localStorage.getItem('headscaleURL') || '';
+		let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
+
+		// endpoint url for editing users
+		let endpointURL = '/api/v1/machine/' + deviceID + '/tags';
+
+		await fetch(headscaleURL + endpointURL, {
+			method: 'POST',
+			headers: {
+				Accept: 'application/json',
+				Authorization: `Bearer ${headscaleAPIKey}`
+			},
+			body: JSON.stringify({
+				tags: tags
+			})
+		})
+			.then((response) => {
+				if (response.ok) {
+					return response;
+				} else {
+					return response.text().then((text) => {
+						throw JSON.parse(text).message;
+					});
+				}
+			})
+			.catch((error) => {
+				throw error;
+			});
+	}
+
+
 	export async function removeUser(currentUsername: string): Promise<any> {
 		// variables in local storage
 		let headscaleURL = localStorage.getItem('headscaleURL') || '';
@@ -166,7 +199,6 @@
 		await headscaleDeviceResponse.json().then((data) => {
 			headscaleDevices = data.machines;
 		});
-		// console.log(headscaleDevices);
 		return headscaleDevices;
 	}
 

src/lib/devices/DeviceCard/DeviceTags.svelte

@@ -1,17 +1,47 @@
-<script>
+<script lang='ts'>
 	import NewDeviceTag from './DeviceTags/NewDeviceTag.svelte';
 	import { Device } from '$lib/common/classes';
-
+	import { updateTags, getDevices } from '$lib/common/apiFunctions.svelte';
+	import { fade } from 'svelte/transition';
+	import { headscaleDeviceStore, alertStore } from '$lib/common/stores.js';
 	export let device = new Device();
+
+	function updateTagsAction(tag: String) {
+		let tagList = device.forcedTags;
+		// remove tag we're trying to remove
+		tagList = tagList.filter(element => element !== tag); 
+
+		updateTags(device.id, tagList).then((response) => {
+			// refresh devices after editing
+			getDevices()
+				.then((devices) => {
+					$headscaleDeviceStore = devices;
+				})
+				.catch((error) => {
+					$alertStore = error;
+				});
+		})
+    .catch((error) => {
+      $alertStore = error;
+    });
+	}
 </script>
 
-<span><NewDeviceTag /></span>
+<span><NewDeviceTag {device}/></span>
 
 {#each device.forcedTags as tag}
-	<span class="mb-1 mr-1 btn btn-xs btn-primary normal-case">{tag.replace("tag:","")}</span>
+	<span in:fade class="mb-1 mr-1 btn btn-xs btn-primary normal-case">{tag.replace("tag:","")}
+	<!-- Cancel symbol -->
+	<button on:click|stopPropagation={() => {updateTagsAction(tag)}}
+	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">
+		<path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+	</svg></button
+>
+	</span>
 {/each}
 
 {#each device.validTags as tag}
-	<span class="mb-1 mr-1 btn btn-xs btn-secondary normal-case">{tag.replace("tag:","")}</span>
+	<span in:fade class="mb-1 mr-1 btn btn-xs btn-secondary normal-case">{tag.replace("tag:","")}</span>
 {/each}
 

src/lib/devices/DeviceCard/DeviceTags/NewDeviceTag.svelte

@@ -1,20 +1,51 @@
 <script>
+	import { updateTags, getDevices } from '$lib/common/apiFunctions.svelte';
+	import { Device } from '$lib/common/classes';
 	import { fade } from 'svelte/transition';
+	import { headscaleDeviceStore, alertStore } from '$lib/common/stores.js';
+
 	let editingTag = false;
+	let newTag = '';
+	export let device = new Device();
+
+	function updateTagsAction() {
+		let tagList = device.forcedTags;
+		tagList.push(`tag:${newTag}`);
+    // 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;
+    });
+	}
 </script>
 
-<div
+<button
 	on:click|stopPropagation={() => {
 		editingTag = true;
 	}}
 	class="btn btn-xs border-dotted border-2 btn-primary opacity-60 normal-case"
 >
 	{#if !editingTag}
-		<span>+ tag</span>
+		<span in:fade>+ tag</span>
 	{:else}
 		<!-- svelte-ignore a11y-autofocus -->
-		<form on:submit|preventDefault={() => {console.log("hi");}}>
-			<input autofocus class="bg-primary w-16" />
+		<form
+			on:submit|preventDefault={updateTagsAction}
+		>
+			<input bind:value={newTag} autofocus required class="bg-primary w-16" />
 			<button in:fade class="ml-1">
 				<!-- checkmark symbol -->
 				<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">
@@ -27,6 +58,7 @@
 				in:fade
 				on:click|stopPropagation={() => {
 					editingTag = false;
+          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">
@@ -35,4 +67,4 @@
 			>
 		</form>
 	{/if}
-</div>
+</button>