From 688ed15939f9c3ef6451699ff90f12d1ec85881f Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Sun, 7 Jul 2024 05:58:31 +0400
Subject: [PATCH] Added exporting view for a tagging profile

---
 .../settings/maintenance/[id]/+page.svelte    |  3 +
 .../maintenance/[id]/export/+page.svelte      | 61 +++++++++++++++++++
 src/styles/injectable/input.scss              |  4 +-
 3 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/settings/maintenance/[id]/export/+page.svelte

diff --git a/src/routes/settings/maintenance/[id]/+page.svelte b/src/routes/settings/maintenance/[id]/+page.svelte
index b4adccb..0701af1 100644
--- a/src/routes/settings/maintenance/[id]/+page.svelte
+++ b/src/routes/settings/maintenance/[id]/+page.svelte
@@ -64,6 +64,9 @@
             <span>Activate Profile</span>
         {/if}
     </MenuItem>
+    <MenuItem icon="file-export" href="/settings/maintenance/{profileId}/export">
+        Export Profile
+    </MenuItem>
 </Menu>
 
 <style lang="scss">
diff --git a/src/routes/settings/maintenance/[id]/export/+page.svelte b/src/routes/settings/maintenance/[id]/export/+page.svelte
new file mode 100644
index 0000000..4fbd67b
--- /dev/null
+++ b/src/routes/settings/maintenance/[id]/export/+page.svelte
@@ -0,0 +1,61 @@
+<script>
+    import {page} from "$app/stores";
+    import {goto} from "$app/navigation";
+    import {maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import FormContainer from "$components/ui/forms/FormContainer.svelte";
+    import {compressToEncodedURIComponent} from "lz-string";
+
+    const profileId = $page.params.id;
+
+    /**
+     * @type {import('$lib/extension/entities/MaintenanceProfile.js').default|undefined}
+     */
+    const profile = $maintenanceProfilesStore.find(profile => profile.id === profileId);
+
+    /** @type {string} */
+    let exportedProfile = '';
+    /** @type {string} */
+    let compressedProfile = '';
+
+    if (!profile) {
+        goto('/settings/maintenance/');
+    } else {
+        exportedProfile = JSON.stringify({
+            v: 1,
+            id: profileId,
+            name: profile?.settings.name,
+            tags: profile.settings.tags,
+        }, null, 2);
+
+        compressedProfile = compressToEncodedURIComponent(exportedProfile);
+    }
+
+    let isCompressedProfileShown = true;
+</script>
+
+<Menu>
+    <MenuItem href="/settings/maintenance/{profileId}" icon="arrow-left">
+        Back
+    </MenuItem>
+    <hr>
+    <MenuItem on:click={() => isCompressedProfileShown = !isCompressedProfileShown}>
+        Export Format:
+        {#if isCompressedProfileShown}
+            Base64-Encoded
+        {:else}
+            Raw JSON
+        {/if}
+    </MenuItem>
+    <hr>
+</Menu>
+<FormContainer>
+    <textarea readonly rows="6">{isCompressedProfileShown ? compressedProfile : exportedProfile}</textarea>
+</FormContainer>
+
+<style lang="scss">
+    textarea {
+        resize: vertical;
+    }
+</style>
diff --git a/src/styles/injectable/input.scss b/src/styles/injectable/input.scss
index 5abbe25..4ceef1e 100644
--- a/src/styles/injectable/input.scss
+++ b/src/styles/injectable/input.scss
@@ -1,6 +1,6 @@
 @use '../colors';
 
-input {
+input, textarea {
   background: colors.$input-background;
   border: 1px solid colors.$input-border;
   color: colors.$text;
@@ -8,4 +8,4 @@ input {
   font-family: monospace;
   padding: 0 6px;
   line-height: 26px;
-}
\ No newline at end of file
+}