add reset button to load from save data

src/23-infoModal.ts

@@ -0,0 +1,36 @@
+class InfoModal {
+
+  constructor() {
+    const _this = this;
+    const closeBtn = document.getElementById("info-closeBtn");
+    if (closeBtn) {
+      closeBtn.onclick = ()=>{_this.setVisible(false)};
+    }
+  }
+  
+  self(): HTMLElement | null {
+    return document.getElementById("info-container");
+  }
+  
+  visible(): boolean {
+    return this.self()?.style.display != "none";
+  }
+  
+  infoMsg(): HTMLElement | null {
+    return document.getElementById("info-content");
+  }
+  
+  setMsg(s: string) {
+    const infoMsg = this.infoMsg();
+    if (infoMsg) {
+      infoMsg.innerText = s;
+    }
+  }
+  
+  setVisible(v: boolean): void {
+    const modal = this.self();
+    if (modal) {
+      modal.style.display = v ? "block" : "none";
+    }
+  }
+}

src/29-modalCollection.ts

@@ -2,15 +2,18 @@ class ModalCollection {
   createOverlay: CreateOverlayModal;
   cancel: CancelModal;
   okCancel: OKCancelModal;
+  info: InfoModal;
   
   constructor(
     createOverlay: CreateOverlayModal,
     cancel: CancelModal,
-    okCancel: OKCancelModal
+    okCancel: OKCancelModal,
+    info: InfoModal
   ) {
     this.createOverlay = createOverlay;
     this.cancel = cancel;
     this.okCancel = okCancel;
+    this.info = info;
   }
   
   closeAll(): void {

src/40-handlers.ts

@@ -62,6 +62,12 @@ class MapHandler {
           clearBtn.classList.remove("activeBtn");
         }
       } catch {}
+      try {
+        const resetBtn = document.getElementById("restore-btn");
+        if (resetBtn) {
+          resetBtn.classList.remove("activeBtn");
+        }
+      } catch {}
       try {
         const menuBtn = document.getElementById("menu-btn");
         if (menuBtn) {
@@ -217,7 +223,42 @@ class MapHandler {
           OverlayState.save(self.overlays);
           self.modals.okCancel.setVisible(false);
           MapHandler.resetMapClick();
-          // show info modal "Save complete" 
+          self.modals.info.setMsg("Save complete");
+          self.modals.info.setVisible(true);
+        }
+      }
+      const cancelBtn = self.modals.okCancel.cancelBtn();
+      if (cancelBtn) {
+        cancelBtn.onclick = () => {
+          self.modals.okCancel.setVisible(false);
+          MapHandler.resetMapClick();
+        }
+      }
+      self.modals.okCancel.setVisible(true);
+    }
+  }
+  
+  static overlayReset(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      self.modals.closeAll();
+      MapHandler.resetMapClick();
+      (e.target as HTMLElement).classList.add("activeBtn");
+      self.modals.okCancel.setMsg("Restore overlays from saved data?");
+
+      const okBtn = self.modals.okCancel.okBtn();
+      if (okBtn) {
+        okBtn.onclick = ()=> {
+          self.overlays = OverlayState.clear(self.overlays, self.map);
+          self.overlays = OverlayState.load();
+          self.overlays.markers.forEach(m=>m.add(self.map));
+          self.overlays.circles.forEach(m=>m.add(self.map));
+          self.overlays.polygons.forEach(m=>m.add(self.map));
+          self.overlays.polyline.add(self.map);
+          self.modals.okCancel.setVisible(false);
+          MapHandler.resetMapClick();
+          self.modals.info.setMsg("Restored");
+          self.modals.info.setVisible(true);
         }
       }
       const cancelBtn = self.modals.okCancel.cancelBtn();

src/99-onyx-scry.ts

@@ -31,7 +31,8 @@ function init(): void {
   const modals = new ModalCollection(
     new CreateOverlayModal(),
     new CancelModal(),
-    new OKCancelModal());
+    new OKCancelModal(),
+    new InfoModal());
 
   MapHandler.init(map, overlays, TileLayerWrapper.layers, modals);
   
@@ -41,6 +42,7 @@ function init(): void {
   
   MapHandler.setButtonClick("save-btn", MapHandler.overlaySave);
   MapHandler.setButtonClick("clear-btn", MapHandler.overlayClear);
+  MapHandler.setButtonClick("restore-btn", MapHandler.overlayReset);
   
   MapHandler.setButtonClick("tiles-btn", MapHandler.swapTiles);
 }

static/index.html

@@ -24,7 +24,8 @@
   <div id="subControls">
     <button id="tiles-btn">&Colon;</button>
   <button id="save-btn">&darr;</button>
-  <button id="clear-btn">&olarr;</button>
+  <button id="clear-btn">x</button>
+  <button id="restore-btn">&olarr;</button>
   <button id="menu-btn">&equiv;</button>
   </div>
 </div>
@@ -57,7 +58,7 @@
 
 <div id="info-container">
   <button class="closeBtn" id="info-closeBtn">x</button>
-  <div class="info-content">
+  <div id="info-content">
   </div>
 </div>
 

static/onyx-scry.js

@@ -359,11 +359,43 @@ class OKCancelModal {
         }
     }
 }
+class InfoModal {
+    constructor() {
+        const _this = this;
+        const closeBtn = document.getElementById("info-closeBtn");
+        if (closeBtn) {
+            closeBtn.onclick = () => { _this.setVisible(false); };
+        }
+    }
+    self() {
+        return document.getElementById("info-container");
+    }
+    visible() {
+        var _a;
+        return ((_a = this.self()) === null || _a === void 0 ? void 0 : _a.style.display) != "none";
+    }
+    infoMsg() {
+        return document.getElementById("info-content");
+    }
+    setMsg(s) {
+        const infoMsg = this.infoMsg();
+        if (infoMsg) {
+            infoMsg.innerText = s;
+        }
+    }
+    setVisible(v) {
+        const modal = this.self();
+        if (modal) {
+            modal.style.display = v ? "block" : "none";
+        }
+    }
+}
 class ModalCollection {
-    constructor(createOverlay, cancel, okCancel) {
+    constructor(createOverlay, cancel, okCancel, info) {
         this.createOverlay = createOverlay;
         this.cancel = cancel;
         this.okCancel = okCancel;
+        this.info = info;
     }
     closeAll() {
         this.createOverlay.setVisible(false);
@@ -430,13 +462,20 @@ class MapHandler {
                 }
             }
             catch (_e) { }
+            try {
+                const resetBtn = document.getElementById("restore-btn");
+                if (resetBtn) {
+                    resetBtn.classList.remove("activeBtn");
+                }
+            }
+            catch (_f) { }
             try {
                 const menuBtn = document.getElementById("menu-btn");
                 if (menuBtn) {
                     menuBtn.classList.remove("activeBtn");
                 }
             }
-            catch (_f) { }
+            catch (_g) { }
         }
     }
     static addMarker(e) {
@@ -571,7 +610,40 @@ class MapHandler {
                     OverlayState.save(self.overlays);
                     self.modals.okCancel.setVisible(false);
                     MapHandler.resetMapClick();
-                    // show info modal "Save complete" 
+                    self.modals.info.setMsg("Save complete");
+                    self.modals.info.setVisible(true);
+                };
+            }
+            const cancelBtn = self.modals.okCancel.cancelBtn();
+            if (cancelBtn) {
+                cancelBtn.onclick = () => {
+                    self.modals.okCancel.setVisible(false);
+                    MapHandler.resetMapClick();
+                };
+            }
+            self.modals.okCancel.setVisible(true);
+        }
+    }
+    static overlayReset(e) {
+        const self = MapHandler.instance;
+        if (self) {
+            self.modals.closeAll();
+            MapHandler.resetMapClick();
+            e.target.classList.add("activeBtn");
+            self.modals.okCancel.setMsg("Restore overlays from saved data?");
+            const okBtn = self.modals.okCancel.okBtn();
+            if (okBtn) {
+                okBtn.onclick = () => {
+                    self.overlays = OverlayState.clear(self.overlays, self.map);
+                    self.overlays = OverlayState.load();
+                    self.overlays.markers.forEach(m => m.add(self.map));
+                    self.overlays.circles.forEach(m => m.add(self.map));
+                    self.overlays.polygons.forEach(m => m.add(self.map));
+                    self.overlays.polyline.add(self.map);
+                    self.modals.okCancel.setVisible(false);
+                    MapHandler.resetMapClick();
+                    self.modals.info.setMsg("Restored");
+                    self.modals.info.setVisible(true);
                 };
             }
             const cancelBtn = self.modals.okCancel.cancelBtn();
@@ -639,13 +711,14 @@ function init() {
     overlays.circles.forEach(m => m.add(map));
     overlays.polygons.forEach(m => m.add(map));
     overlays.polyline.add(map);
-    const modals = new ModalCollection(new CreateOverlayModal(), new CancelModal(), new OKCancelModal());
+    const modals = new ModalCollection(new CreateOverlayModal(), new CancelModal(), new OKCancelModal(), new InfoModal());
     MapHandler.init(map, overlays, TileLayerWrapper.layers, modals);
     MapHandler.setButtonClick("addPoint-btn", MapHandler.markerCollect);
     MapHandler.setButtonClick("addCircle-btn", MapHandler.circleCollect);
     MapHandler.setButtonClick("addPolygon-btn", MapHandler.polygonCollect);
     MapHandler.setButtonClick("save-btn", MapHandler.overlaySave);
     MapHandler.setButtonClick("clear-btn", MapHandler.overlayClear);
+    MapHandler.setButtonClick("restore-btn", MapHandler.overlayReset);
     MapHandler.setButtonClick("tiles-btn", MapHandler.swapTiles);
 }
 init();

static/style.css

@@ -226,6 +226,18 @@ button.negative-btn:hover {
   max-width: fit-content;
 }
 
+#info-content {
+  float: left;
+  line-height: 200%;
+}
+
+#info-container button.closeBtn {
+  font-size: 150%;
+  padding: 0;
+  margin-left: 1ch;
+  
+}
+
 #import-export-container {
   position: fixed;
   width: 100%;