From a5ed48bda0839092282166beb4093cdcc56aeb5c Mon Sep 17 00:00:00 2001
From: Christopher Bisset <chris@gurucomputing.com.au>
Date: Sat, 10 Sep 2022 13:17:10 +1000
Subject: [PATCH] added toggle to show groups page under dev settings

---
 src/lib/common/Stores.svelte        |  6 +++++-
 src/lib/common/nav.svelte           | 13 +++++++++++++
 src/lib/common/stores.js            |  4 ++++
 src/lib/settings/DevSettings.svelte |  3 ++-
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/lib/common/Stores.svelte b/src/lib/common/Stores.svelte
index 2c5713d..69f3130 100644
--- a/src/lib/common/Stores.svelte
+++ b/src/lib/common/Stores.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
-	import { deviceSortStore, deviceSortDirectionStore, userSortStore, sortDirectionStore, themeStore } from '$lib/common/stores.js';
+	import { deviceSortStore, deviceSortDirectionStore, userSortStore, sortDirectionStore, themeStore, showACLPagesStore } from '$lib/common/stores.js';
 	import { URLStore } from '$lib/common/stores.js';
 	import { APIKeyStore } from '$lib/common/stores.js';
 	import { preAuthHideStore } from '$lib/common/stores.js';
@@ -33,5 +33,9 @@
 		preAuthHideStore.set((localStorage.getItem('headscalePreAuthHide') || 'false') == 'true');
 		preAuthHideStore.subscribe((val) => localStorage.setItem('headscalePreAuthHide', val ? 'true' : 'false'));
 		
+		// dev setting stores
+		showACLPagesStore.set((localStorage.getItem('showACLPages') || 'false') == 'true');
+		showACLPagesStore.subscribe((val) => localStorage.setItem('showACLPages', val ? 'true' : 'false'));
+		
 	});
 </script>
diff --git a/src/lib/common/nav.svelte b/src/lib/common/nav.svelte
index 45b1aab..4300ade 100644
--- a/src/lib/common/nav.svelte
+++ b/src/lib/common/nav.svelte
@@ -3,6 +3,7 @@
 	import { fade } from 'svelte/transition';
 	import { writable } from 'svelte/store';
 	import { base } from '$app/paths';
+	import { showACLPagesStore } from './stores';
 
 	// navigation bar variables
 	let navExpanded = writable('');
@@ -46,6 +47,18 @@
 				</svg>
 				<span class="indent-4">User View</span>
 			</a>
+			{#if $showACLPagesStore}
+				<a href="{base}/groups.html" class="nav-item">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
+						/>
+					</svg>
+					<span class="indent-4">Group View</span>
+				</a>
+			{/if}
 			<a href="{base}/devices.html" class="nav-item">
 				<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 					<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
diff --git a/src/lib/common/stores.js b/src/lib/common/stores.js
index 1ad46a4..865caca 100644
--- a/src/lib/common/stores.js
+++ b/src/lib/common/stores.js
@@ -18,6 +18,10 @@ export const sortDirectionStore = writable('ascending');
 // stores preauth key preference
 export const preAuthHideStore = writable(false);
 
+// Dev Setting Stores
+// Shows or Hides ACL Settings
+export const showACLPagesStore = writable(false);
+
 // 
 // Normal Stores (global scope, saves until refresh)
 // 
diff --git a/src/lib/settings/DevSettings.svelte b/src/lib/settings/DevSettings.svelte
index fa643ef..ae1d721 100644
--- a/src/lib/settings/DevSettings.svelte
+++ b/src/lib/settings/DevSettings.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { showACLPagesStore } from '$lib/common/stores';
 	import { fade } from 'svelte/transition';
 
 	let showDevSettings = false;
@@ -7,6 +8,6 @@
 <div class="inline-block"><h1 class="text-2xl bold text-primary mb-4">Developer Flags<input type="checkbox" class="toggle toggle-sm tooltip ml-2 align-middle" data-tip="To enable development features. Only check this if you're a developer or like being confused" bind:checked={showDevSettings} /></h1></div>
 {#if showDevSettings}
 	<div in:fade>
-    <h2 class="text-xl bold text-secondary mb-2 ml-2">ACL Pages <input type="checkbox" class="toggle toggle-sm ml-2 align-middle" /></h2>
+    <h2 class="text-xl bold text-secondary mb-2 ml-2">ACL Pages <input bind:checked={$showACLPagesStore} type="checkbox" class="toggle toggle-sm ml-2 align-middle" /></h2>
   </div>
 {/if}