Move automation.loadLabelTemplate to default_template property (#55),…

… add reset button
MultiMote · Nov 22, 2024 · f5085ee · f5085ee
1 parent 377cea8
commit f5085ee
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 33 deletions.
diff --git a/src/lib/ImageEditor.svelte b/src/lib/ImageEditor.svelte
@@ -259,7 +259,16 @@
       backgroundColor: "#fff",
     });
 
-    ImageEditorObjectHelper.addText(fabricCanvas, $tr("editor.default_text"));
+    const defaultTemplate = LocalStoragePersistence.loadDefaultTemplate();
+    try {
+      if (defaultTemplate !== null) {
+        onLoadRequested(defaultTemplate);
+      } else {
+        ImageEditorObjectHelper.addText(fabricCanvas, $tr("editor.default_text"));
+      }
+    } catch (e) {
+      Toasts.error(e);
+    }
     undo.push(fabricCanvas, labelProps);
 
     // force close dropdowns on touch devices
@@ -324,14 +333,6 @@
     });
 
     if ($automation !== undefined) {
-      if ($automation.loadLabelTemplate !== undefined) {
-        try {
-          onLoadRequested($automation.loadLabelTemplate);
-        } catch (e) {
-          Toasts.error(e);
-        }
-      }
-
       if ($automation.startPrint !== undefined) {
         if ($automation.startPrint === "immediately") {
           openPreview();

diff --git a/src/lib/SavedLabelsMenu.svelte b/src/lib/SavedLabelsMenu.svelte
@@ -9,7 +9,6 @@
   import Dropdown from "bootstrap/js/dist/dropdown";
   import { FileUtils } from "../utils/file_utils";
   import type { fabric } from "fabric";
-  import { automation } from "../stores";
 
   export let onRequestLabelTemplate: () => ExportedLabelTemplate;
   export let onLoadRequested: (label: ExportedLabelTemplate) => void;
@@ -20,6 +19,7 @@
   let selectedIndex: number = -1;
   let title: string = "";
   let usedSpace: number = 0;
+  let customDefaultTemplate: boolean = LocalStoragePersistence.hasCustomDefaultTemplate();
 
   const calcUsedSpace = () => {
     usedSpace = LocalStoragePersistence.usedSpace();
@@ -83,12 +83,14 @@
     const label = onRequestLabelTemplate();
     label.title = title;
     label.thumbnailBase64 = undefined;
+    LocalStoragePersistence.saveDefaultTemplate(label);
+    customDefaultTemplate = true;
+    calcUsedSpace();
+  };
 
-    automation.update((prev) => ({
-      ...prev,
-      loadLabelTemplate: label,
-    }));
-
+  const onRemoveDefaultClicked = () => {
+    LocalStoragePersistence.saveDefaultTemplate(undefined);
+    customDefaultTemplate = false;
     calcUsedSpace();
   };
 
@@ -202,9 +204,16 @@
       </div>
 
       <div class="d-flex gap-1 flex-wrap justify-content-end">
-        <button class="btn btn-sm text-secondary make-default" on:click={onMakeDefaultClicked}>
-          {$tr("params.saved_labels.make_default")}
-        </button>
+        <div class="btn-group btn-group-sm make-default">
+          <button class="btn text-secondary" on:click={onMakeDefaultClicked}>
+            {$tr("params.saved_labels.make_default")}
+          </button>
+          {#if customDefaultTemplate}
+            <button class="btn text-secondary" on:click={onRemoveDefaultClicked}>
+              <MdIcon icon="close" />
+            </button>
+          {/if}
+        </div>
 
         <button class="btn btn-sm btn-secondary" on:click={onSaveClicked}>
           <MdIcon icon="save" />

diff --git a/src/stores.ts b/src/stores.ts
@@ -1,4 +1,4 @@
-import { get, writable } from "svelte/store";
+import { get, readable, writable } from "svelte/store";
 import type { AutomationProps, ConnectionState, ConnectionType } from "./types";
 import {
   NiimbotBluetoothClient,
@@ -24,7 +24,7 @@ export const heartbeatData = writable<HeartbeatData>();
 export const printerInfo = writable<PrinterInfo>();
 export const printerMeta = writable<PrinterModelMeta | undefined>();
 export const heartbeatFails = writable<number>(0);
-export const automation = writable<AutomationProps | undefined>(
+export const automation = readable<AutomationProps | undefined>(
   (() => {
     try {
       return LocalStoragePersistence.loadAutomation() ?? undefined;
@@ -35,16 +35,6 @@ export const automation = writable<AutomationProps | undefined>(
   })()
 );
 
-let automationLoaded = false;
-automation.subscribe((val: AutomationProps | undefined) => {
-  // ignore first event that fires immediately after subscribe
-  if (!automationLoaded) {
-    automationLoaded = true;
-    return;
-  }
-  LocalStoragePersistence.saveAutomation(val);
-});
-
 export const initClient = (connectionType: ConnectionType) => {
   printerClient.update((prevClient: NiimbotAbstractClient) => {
     let newClient: NiimbotAbstractClient = prevClient;

diff --git a/src/types.ts b/src/types.ts
@@ -69,9 +69,7 @@ export const AutomationPropsSchema = z.object({
   /** Connect to MAC or device id. Works only for Capacitor BLE connection. */
   autoConnectDeviceId: z.string().optional(),
   /** immediately - just open print preview dialog */
-  startPrint: z.enum(["after_connect", "immediately"]).optional(),
-  /** Load label template on page load */
-  loadLabelTemplate: ExportedLabelTemplateSchema.optional(),
+  startPrint: z.enum(["after_connect", "immediately"]).optional()
 });
 
 export type LabelProps = z.infer<typeof LabelPropsSchema>;

diff --git a/src/utils/persistence.ts b/src/utils/persistence.ts
@@ -225,4 +225,22 @@ export class LocalStoragePersistence {
   static loadAutomation(): AutomationProps | null {
     return this.loadAndValidateObject("automation", AutomationPropsSchema);
   }
+
+  /**
+   * @throws {z.ZodError}
+   */
+  static saveDefaultTemplate(value?: ExportedLabelTemplate) {
+    this.validateAndSaveObject("default_template", value, ExportedLabelTemplateSchema);
+  }
+
+  /**
+   * @throws {z.ZodError}
+   */
+  static loadDefaultTemplate(): ExportedLabelTemplate | null {
+    return this.loadAndValidateObject("default_template", ExportedLabelTemplateSchema);
+  }
+
+  static hasCustomDefaultTemplate(): boolean {
+    return "default_template" in localStorage;
+  }
 }