Setting and resetting active maintenance profile using stores

2025-12-24 07:12:57 +00:00 · 2024-03-23 03:12:24 +04:00
parent 98ae8ef1c0
commit 659d9d4e73
3 changed files with 134 additions and 61 deletions
--- a/src/routes/settings/maintenance/+page.svelte
+++ b/src/routes/settings/maintenance/+page.svelte
@@ -1,28 +1,46 @@
 <script>
-  import Menu from "$components/ui/menu/Menu.svelte";
-  import MenuLink from "$components/ui/menu/MenuLink.svelte";
-  import {maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
-  import {onDestroy} from "svelte";
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import MenuLink from "$components/ui/menu/MenuLink.svelte";
+    import {activeProfileStore, maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
+    import {onDestroy} from "svelte";

-  /** @type {import('$lib/extension/entities/MaintenanceProfile.js').default[]} */
-  let profiles = [];
+    /** @type {import('$lib/extension/entities/MaintenanceProfile.js').default[]} */
+    let profiles = [];
+    /** @type {string|null} */
+    let activeProfileId = null;

-  const unsubscribeFromProfiles = maintenanceProfilesStore.subscribe(updatedProfiles => {
-    profiles = updatedProfiles.sort(
-      (a, b) => b.settings.name.localeCompare(a.settings.name)
-	);
-  });
+    const unsubscribeFromProfiles = maintenanceProfilesStore.subscribe(updatedProfiles => {
+        profiles = updatedProfiles.sort(
+                (a, b) => b.settings.name.localeCompare(a.settings.name)
+        );
+    });

-  onDestroy(unsubscribeFromProfiles);
+    const unsubscribeFromActiveProfile = activeProfileStore.subscribe(profileId => {
+        activeProfileId = profileId;
+    });
+
+    function resetActiveProfile() {
+        activeProfileStore.set(null);
+    }
+
+    onDestroy(() => {
+        unsubscribeFromProfiles();
+        unsubscribeFromActiveProfile();
+    });
 </script>

 <Menu>
-	<MenuLink icon="arrow-left" href="/">Back</MenuLink>
-	<MenuLink icon="plus" href="/settings/maintenance/new/edit">Create New</MenuLink>
-	{#if profiles.length}
-		<hr>
-	{/if}
-	{#each profiles as profile}
-		<MenuLink href="/settings/maintenance/{profile.id}">{profile.settings.name}</MenuLink>
-	{/each}
+    <MenuLink icon="arrow-left" href="/">Back</MenuLink>
+    <MenuLink icon="plus" href="/settings/maintenance/new/edit">Create New</MenuLink>
+    {#if profiles.length}
+        <hr>
+    {/if}
+    {#each profiles as profile}
+        <MenuLink href="/settings/maintenance/{profile.id}"
+                  icon="{activeProfileId === profile.id ? 'tag' : null}">
+            {profile.settings.name}
+        </MenuLink>
+    {/each}
+    <hr>
+    <MenuLink href="#" on:click={resetActiveProfile}>Reset Active Profile</MenuLink>
 </Menu>
--- a/src/routes/settings/maintenance/[id]/+page.svelte
+++ b/src/routes/settings/maintenance/[id]/+page.svelte
@@ -1,56 +1,79 @@
 <script>
-  import Menu from "$components/ui/menu/Menu.svelte";
-  import MenuLink from "$components/ui/menu/MenuLink.svelte";
-  import {page} from "$app/stores";
-  import {goto} from "$app/navigation";
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import MenuLink from "$components/ui/menu/MenuLink.svelte";
+    import {page} from "$app/stores";
+    import {goto} from "$app/navigation";

-  import {onDestroy} from "svelte";
-  import {maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
+    import {onDestroy} from "svelte";
+    import {activeProfileStore, maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";

-  const profileId = $page.params.id;
-  /** @type {import('$lib/extension/entities/MaintenanceProfile.js').default|null} */
-  let profile = null;
+    const profileId = $page.params.id;
+    /** @type {import('$lib/extension/entities/MaintenanceProfile.js').default|null} */
+    let profile = null;
+    let isActiveProfile = false;

-  if (profileId === 'new') {
-    goto('/maintenance/profiles/new/edit');
-  }
-
-  const unsubscribeFromProfiles = maintenanceProfilesStore.subscribe(profiles => {
-    const resolvedProfile = profiles.find(p => p.id === profileId);
-
-    if (resolvedProfile) {
-      profile = resolvedProfile;
-      return;
+    if (profileId === 'new') {
+        goto('/maintenance/profiles/new/edit');
    }

-    console.warn(`Profile ${profileId} not found.`);
-    goto('/settings/maintenance');
-  });
+    const unsubscribeFromProfiles = maintenanceProfilesStore.subscribe(profiles => {
+        const resolvedProfile = profiles.find(p => p.id === profileId);

-  onDestroy(unsubscribeFromProfiles);
+        if (resolvedProfile) {
+            profile = resolvedProfile;
+            return;
+        }
+
+        console.warn(`Profile ${profileId} not found.`);
+        goto('/settings/maintenance');
+    });
+
+    const unsubscribeFromActiveProfile = activeProfileStore.subscribe(activeProfileId => {
+        isActiveProfile = activeProfileId === profileId;
+    })
+
+    function activateProfile() {
+        if (isActiveProfile) {
+            return;
+        }
+
+        activeProfileStore.set(profileId);
+    }
+
+    onDestroy(() => {
+        unsubscribeFromProfiles();
+        unsubscribeFromActiveProfile();
+    });
 </script>

 <Menu>
-	<MenuLink href="/settings/maintenance" icon="arrow-left">Back</MenuLink>
-	<hr>
+    <MenuLink href="/settings/maintenance" icon="arrow-left">Back</MenuLink>
+    <hr>
 </Menu>
 {#if profile}
-	<div>
-		<strong>Profile:</strong><br>
-		{profile.settings.name}
-	</div>
-	<div>
-		<strong>Focused Tags:</strong>
-		<div class="tags-list">
-			{#each profile.settings.tags as tagName}
-				<span class="tag">{tagName}</span>
-			{/each}
-		</div>
-	</div>
+    <div>
+        <strong>Profile:</strong><br>
+        {profile.settings.name}
+    </div>
+    <div>
+        <strong>Focused Tags:</strong>
+        <div class="tags-list">
+            {#each profile.settings.tags as tagName}
+                <span class="tag">{tagName}</span>
+            {/each}
+        </div>
+    </div>
 {/if}
 <Menu>
-	<hr>
-	<MenuLink icon="wrench" href="/settings/maintenance/{profileId}/edit">Edit Profile</MenuLink>
+    <hr>
+    <MenuLink icon="wrench" href="/settings/maintenance/{profileId}/edit">Edit Profile</MenuLink>
+    <MenuLink icon="tag" href="#" on:click={activateProfile}>
+        {#if isActiveProfile}
+            <span>Profile is Active</span>
+        {:else}
+            <span>Activate Profile</span>
+        {/if}
+    </MenuLink>
 </Menu>
 <style>
    .tags-list {
--- a/src/stores/maintenance-profiles-store.js
+++ b/src/stores/maintenance-profiles-store.js
@@ -1,7 +1,12 @@
 import {writable} from "svelte/store";
 import MaintenanceProfile from "$lib/extension/entities/MaintenanceProfile.js";
+import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.js";

-/** @type {import('svelte/store').Writable<MaintenanceProfile[]>} */
+/**
+ * Store for working with maintenance profiles in the Svelte popup.
+ *
+ * @type {import('svelte/store').Writable<MaintenanceProfile[]>}
+ */
 export const maintenanceProfilesStore = writable([]);

 MaintenanceProfile.readAll().then(profiles => {
@@ -10,4 +15,31 @@ MaintenanceProfile.readAll().then(profiles => {

 MaintenanceProfile.subscribe(profiles => {
  maintenanceProfilesStore.set(profiles);
-});
+});
+
+/**
+ * Store for the active maintenance profile ID.
+ *
+ * @type {import('svelte/store').Writable<string|null>}
+ */
+export const activeProfileStore = writable(null);
+
+const maintenanceSettings = new MaintenanceSettings();
+
+maintenanceSettings.resolveActiveProfileId().then(activeProfileId => {
+  activeProfileStore.set(activeProfileId);
+});
+
+MaintenanceSettings.subscribe(settings => {
+  activeProfileStore.set(settings.activeProfileId || null);
+});
+
+let lastActiveProfileId = null;
+
+activeProfileStore.subscribe(profileId => {
+  if (profileId === lastActiveProfileId) {
+    return;
+  }
+
+  void maintenanceSettings.setActiveProfileId(profileId);
+})