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

added toggle to show groups page under dev settings

Browse source
This commit is contained in:
Christopher Bisset 2022-09-10 13:17:10 +10:00
parent b29c79fe90
commit a5ed48bda0
4 changed files with 24 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/lib/common/Stores.svelte
View file

@ -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>

13
src/lib/common/nav.svelte
View file

@ -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" />

4
src/lib/common/stores.js
View file

@ -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)
//

3
src/lib/settings/DevSettings.svelte
View file

@ -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}