Update to add import/export configuration

src/edit.ts

@@ -1,6 +1,8 @@
 import { LitElement, css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
+const LAVENDER_WIDGETS = 'lavender-widgets';
+
 @customElement('lavender-configure')
 export class LavenderConfigure extends LitElement {
   static override styles = [
@@ -24,6 +26,14 @@ export class LavenderConfigure extends LitElement {
         }
       }
 
+      .buttonbar {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        flex-wrap: wrap;
+        flex-direction: row;
+      }
+
       .widgets {
         display: flex;
         flex-wrap: wrap;
@@ -63,6 +73,32 @@ export class LavenderConfigure extends LitElement {
     `
   ];
 
+  export() {
+    const downloader = this.shadowRoot?.getElementById('downloader');
+    const widgets = JSON.parse(localStorage.getItem(LAVENDER_WIDGETS) ?? '[]');
+    const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(widgets))}`;
+    downloader?.setAttribute('href', dataStr);
+    downloader?.setAttribute('download', 'lavender.json');
+    downloader?.click();
+  }
+
+  import() {
+    const importer = this.shadowRoot?.getElementById('importer') as HTMLInputElement;
+    importer?.click();
+  }
+
+  handleFiles(event: any) {
+    if (event?.target?.files?.length > 0) {
+      const file = event?.target?.files[0];
+      const reader = new FileReader();
+      reader.onload = () => {
+        localStorage.setItem(LAVENDER_WIDGETS, reader?.result as string ?? '[]');
+        window.location.replace('./index.html');
+      }
+      reader.readAsText(file);
+    }
+  }
+
   save() {
     const elems = this.shadowRoot?.children ?? null;
     const widgets = elems ? elems?.item(2)?.children : null;
@@ -86,17 +122,17 @@ export class LavenderConfigure extends LitElement {
       }
     }
 
-    localStorage.setItem('lavender-widgets', JSON.stringify(lavenderWidgets));
+    localStorage.setItem(LAVENDER_WIDGETS, JSON.stringify(lavenderWidgets));
     window.location.replace('./index.html');
   }
 
   override render() {
-    const widgetJSON = localStorage.getItem('lavender-widgets') ?? '[]';
+    const widgetJSON = localStorage.getItem(LAVENDER_WIDGETS) ?? '[]';
     const widgets = JSON.parse(widgetJSON);
 
     return html`
     <h1 class="centerit">Lavender Widget Editor</h1>
-    <button class="button" @click="${() => this.save()}">Save</button>
+    <div class="buttonbar"><button class="button" @click="${() => this.save()}">Save</button><button class="button" @click="${() => this.export()}">Export</button><button class="button" @click="${() => this.import()}">Import</button></div>
     <div class="widgets">
       ${widgets.map((widget: any) => {
       return html`
@@ -113,7 +149,9 @@ export class LavenderConfigure extends LitElement {
         <div><div>Height</div><input type="text" name="urlHeight"></div>
       </div>
     </div>
-    <button class="button" @click="${() => this.save()}">Save</button>
+    <div class="buttonbar"><button class="button" @click="${() => this.save()}">Save</button><button class="button" @click="${() => this.export()}">Export</button><button class="button" @click="${() => this.import()}">Import</button></div>
+    <a id="downloader" style="display: none"></a>
+    <input type="file" @change="${(e: any) => this.handleFiles(e)}" id="importer" style="display:none" />
     `;
   }
 }