all repos — onyx @ cd2f0ab2ecf8763f37ef3988ef01313a7529ace2

minimal map annotation and location data sharing tool

src/20-modal.ts (raw)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
class Modal {

  constructor() {
    const _this = this;
    const closeBtn = document.getElementById("modalCloseBtn");
    if (closeBtn) {
      closeBtn.onclick = ()=>{_this.setVisible(false)};
    }
  }

  self(): HTMLElement | null {
    return document.getElementById("modal-container");
  }
  
  title(): HTMLElement | null{
    return document.getElementById("modal-title");
  }
  
  content(): HTMLElement | null {
    return document.getElementById("modal-content");
  }
  
  submitBtn(): HTMLElement | null {
    return document.getElementById("modal-submitBtn");
  }
  
  nameField(): string { 
    return (document.getElementById("modal-name") as HTMLInputElement)?.value ?? "";
  }
  
  descField(): string {
    return (document.getElementById("modal-desc") as HTMLInputElement)?.value ?? "";
  }

  visible(): boolean {
    return this.self()?.style.display != "none";
  }
  
  setVisible(v: boolean): void {
    const modal = this.self();
    if (modal) {
      modal.style.display = v ? "block" : "none";
    }
  }
  
  setState(state: OverlayType, args: any): void {
    const _this = this;
    switch (state) {
      case OverlayType.POINT:
        const title = this.title()
        if (title) {
          title.innerHTML = "Add Marker";
        }
        fetch("/static/pointModal.html")
          .then(r=>r.text())
          .then(t=> {
            const content = _this.content();
            if (content) { content.innerHTML = t; }
            const submitBtn = _this.submitBtn();
            if (submitBtn) {
              submitBtn.onclick = () => {
                const name = _this.nameField();
                const desc = _this.descField();
                const point = new Marker(name, desc, args.latlng, {title: name, alt: name});
                point.add(args.map);
                args.overlays.markers.push(point);
                _this.setVisible(false);
              }
            }
          });

        break;
      case OverlayType.CIRCLE:
        break;
      case OverlayType.POLYGON:
        break;
    }
  }
}