add reset button to load from save data

2022-08-14 21:30:47 -06:00 · 2022-08-14 21:30:47 -06:00 · 3f399947f1
commit 3f399947f1
parent 5154aff553
7 changed files with 177 additions and 9 deletions
--- a/src/23-infoModal.ts
+++ b/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";
+    }
+  }
+}
--- a/src/29-modalCollection.ts
+++ b/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 {
--- a/src/40-handlers.ts
+++ b/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();
--- a/src/99-onyx-scry.ts
+++ b/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);
 }
--- a/static/index.html
+++ b/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>

--- a/static/onyx-scry.js
+++ b/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();
--- a/static/style.css
+++ b/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%;