From 872ac864434cf36f9af097f130e34827e268369c Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 12 Feb 2024 19:08:49 +0000 Subject: [PATCH] Add settings menu --- web/src/components/core/icon.tsx | 5 +++ web/src/components/furniture/nav.tsx | 62 +++++++++++++++++++++++++++- web/src/components/psc/progress.tsx | 14 +++++-- 3 files changed, 76 insertions(+), 5 deletions(-) diff --git a/web/src/components/core/icon.tsx b/web/src/components/core/icon.tsx index 3dc1f8f..a0b0d35 100644 --- a/web/src/components/core/icon.tsx +++ b/web/src/components/core/icon.tsx @@ -124,6 +124,11 @@ const getSvgPath = (icon: string) => { vb: "0 0 512 512", path: "M0 128C0 92.7 28.7 64 64 64H370.7c17 0 33.3 6.7 45.3 18.7L566.6 233.4c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6L416 429.3c-12 12-28.3 18.7-45.3 18.7H64c-35.3 0-64-28.7-64-64V128zm143 47c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z", }; + case 'settings': + return { + vb: "0 0 640 512", + path: "M308.5 135.3c7.1-6.3 9.9-16.2 6.2-25c-2.3-5.3-4.8-10.5-7.6-15.5L304 89.4c-3-5-6.3-9.9-9.8-14.6c-5.7-7.6-15.7-10.1-24.7-7.1l-28.2 9.3c-10.7-8.8-23-16-36.2-20.9L199 27.1c-1.9-9.3-9.1-16.7-18.5-17.8C173.9 8.4 167.2 8 160.4 8h-.7c-6.8 0-13.5 .4-20.1 1.2c-9.4 1.1-16.6 8.6-18.5 17.8L115 56.1c-13.3 5-25.5 12.1-36.2 20.9L50.5 67.8c-9-3-19-.5-24.7 7.1c-3.5 4.7-6.8 9.6-9.9 14.6l-3 5.3c-2.8 5-5.3 10.2-7.6 15.6c-3.7 8.7-.9 18.6 6.2 25l22.2 19.8C32.6 161.9 32 168.9 32 176s.6 14.1 1.7 20.9L11.5 216.7c-7.1 6.3-9.9 16.2-6.2 25c2.3 5.3 4.8 10.5 7.6 15.6l3 5.2c3 5.1 6.3 9.9 9.9 14.6c5.7 7.6 15.7 10.1 24.7 7.1l28.2-9.3c10.7 8.8 23 16 36.2 20.9l6.1 29.1c1.9 9.3 9.1 16.7 18.5 17.8c6.7 .8 13.5 1.2 20.4 1.2s13.7-.4 20.4-1.2c9.4-1.1 16.6-8.6 18.5-17.8l6.1-29.1c13.3-5 25.5-12.1 36.2-20.9l28.2 9.3c9 3 19 .5 24.7-7.1c3.5-4.7 6.8-9.5 9.8-14.6l3.1-5.4c2.8-5 5.3-10.2 7.6-15.5c3.7-8.7 .9-18.6-6.2-25l-22.2-19.8c1.1-6.8 1.7-13.8 1.7-20.9s-.6-14.1-1.7-20.9l22.2-19.8zM112 176a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM504.7 500.5c6.3 7.1 16.2 9.9 25 6.2c5.3-2.3 10.5-4.8 15.5-7.6l5.4-3.1c5-3 9.9-6.3 14.6-9.8c7.6-5.7 10.1-15.7 7.1-24.7l-9.3-28.2c8.8-10.7 16-23 20.9-36.2l29.1-6.1c9.3-1.9 16.7-9.1 17.8-18.5c.8-6.7 1.2-13.5 1.2-20.4s-.4-13.7-1.2-20.4c-1.1-9.4-8.6-16.6-17.8-18.5L583.9 307c-5-13.3-12.1-25.5-20.9-36.2l9.3-28.2c3-9 .5-19-7.1-24.7c-4.7-3.5-9.6-6.8-14.6-9.9l-5.3-3c-5-2.8-10.2-5.3-15.6-7.6c-8.7-3.7-18.6-.9-25 6.2l-19.8 22.2c-6.8-1.1-13.8-1.7-20.9-1.7s-14.1 .6-20.9 1.7l-19.8-22.2c-6.3-7.1-16.2-9.9-25-6.2c-5.3 2.3-10.5 4.8-15.6 7.6l-5.2 3c-5.1 3-9.9 6.3-14.6 9.9c-7.6 5.7-10.1 15.7-7.1 24.7l9.3 28.2c-8.8 10.7-16 23-20.9 36.2L315.1 313c-9.3 1.9-16.7 9.1-17.8 18.5c-.8 6.7-1.2 13.5-1.2 20.4s.4 13.7 1.2 20.4c1.1 9.4 8.6 16.6 17.8 18.5l29.1 6.1c5 13.3 12.1 25.5 20.9 36.2l-9.3 28.2c-3 9-.5 19 7.1 24.7c4.7 3.5 9.5 6.8 14.6 9.8l5.4 3.1c5 2.8 10.2 5.3 15.5 7.6c8.7 3.7 18.6 .9 25-6.2l19.8-22.2c6.8 1.1 13.8 1.7 20.9 1.7s14.1-.6 20.9-1.7l19.8 22.2zM464 304a48 48 0 1 1 0 96 48 48 0 1 1 0-96z", + }; case 'mastodon': return { vb: "0 0 512 512", diff --git a/web/src/components/furniture/nav.tsx b/web/src/components/furniture/nav.tsx index 0004e10..94daa37 100644 --- a/web/src/components/furniture/nav.tsx +++ b/web/src/components/furniture/nav.tsx @@ -1,5 +1,5 @@ -import { component$ } from "@builder.io/qwik"; +import { $, component$ } from "@builder.io/qwik"; import Icon from "~/components/core/icon"; import { data } from '~/mock-data'; import type { Section } from '~/types/PSC'; @@ -11,6 +11,21 @@ export default component$(() => { const { theme, setTheme } = useTheme(); + const themes = [ + 'dark', 'light', 'night', 'cupcake', + 'bumblebee', 'corporate', 'synthwave', 'retro', + 'valentine', 'halloween', 'aqua', 'lofi', + 'fantasy', 'dracula' + ]; + + const deleteAllData = $(() => { + const isConfirmed = confirm('Are you sure you want to delete all local data? This will erase your progress.'); + if (isConfirmed) { + localStorage.clear(); + location.reload(); + } + }); + return ( <> @@ -66,6 +81,13 @@ export default component$(() => { +
  • +

    ((document.getElementById('settings_modal') || {}) as HTMLDialogElement).showModal()} + class="cursor-pointer tooltip flex tooltip-bottom" data-tip="Settings"> + +

    +
    • @@ -138,6 +160,44 @@ export default component$(() => { + + +
    +
    +

    Settings

    + About +
    +
    +
    + + +
    +
    + + +
    + +
    +
    +     ); }); diff --git a/web/src/components/psc/progress.tsx b/web/src/components/psc/progress.tsx index 53ed5ef..5416d77 100644 --- a/web/src/components/psc/progress.tsx +++ b/web/src/components/psc/progress.tsx @@ -20,13 +20,14 @@ export default component$(() => { const [checkedItems] = useLocalStorage('PSC_PROGRESS', {}); // Ignored items, from local storage const [ignoredItems] = useLocalStorage('PSC_IGNORED', {}); + // Local storage for closing and ignoring the welcome dialog + const [ignoreDialog, setIgnoreDialog] = useLocalStorage('PSC_CLOSE_WELCOME', false); // Store to hold calculated progress results const totalProgress = useSignal({ completed: 0, outOf: 0 }); // Ref to the radar chart canvas const radarChart = useSignal(); // Completion data for each section const sectionCompletion = useSignal([]); - const [ignoreDialog, setIgnoreDialog] = useLocalStorage('PSC_CLOSE_WELCOME', false); /** * Calculates the users progress over specified sections. @@ -340,8 +341,11 @@ export default component$(() => { { checklists.value.map((section: Section, index: number) => (

  • @@ -349,7 +353,9 @@ export default component$(() => { {section.title}

    - +