all repos — onyx @ c75b07fc3208cab7ce8c5ac6a2d1d22ef4b4a99d

minimal map annotation and location data sharing tool

src/20-createOverlayModal.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
class CreateOverlayModal {

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

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

  radiusField(): string {
    return (document.getElementById("createOverlay-radius") 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";
    }
  }
  
  clearInputs(): void {
    const name = document.getElementById("createOverlay-name") as HTMLInputElement;
    const desc = document.getElementById("createOverlay-desc") as HTMLInputElement;
    const radius = document.getElementById("createOverlay-radius") as HTMLInputElement;
    
    if (name?.value) {
      name.value = "";
    }
    if (desc?.value) {
      desc.value = "";
    }
    if (Number(radius?.value) != 500) {
      radius.value = "500";
    }
  }
  
  setState(state: OverlayType, args: any): void {
    const _this = this;
    const title = this.title()
    const radiusContainer = _this.radiusContainer();
    const submitBtn = _this.submitBtn();
    
    _this.clearInputs();
    
    if (radiusContainer) {
      radiusContainer.style.display = state == OverlayType.CIRCLE ? "block" : "none";
    }
    
    switch (state) {
      case OverlayType.POINT:
        if (title) {
          title.innerHTML = "Add Marker";
        }

        if (submitBtn) {
          submitBtn.onclick = () => {
            const name = TextUtils.encodeHTML(_this.nameField());
            const desc = TextUtils.encodeHTML(_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:
        if (title) {
          title.innerHTML = "Add Circle";
        }
        if (submitBtn) {
          submitBtn.onclick = () => {
            const radius = _this.radiusField();
            const name = TextUtils.encodeHTML(_this.nameField());
            const desc = TextUtils.encodeHTML(_this.descField());
            const circle = new Circle(name, desc, args.latlng, {radius: Number(radius) || 500});
            circle.add(args.map);
            args.overlays.circles.push(circle);
            _this.setVisible(false);
          }
        }
        break;
      case OverlayType.POLYGON:
        break;
    }
  }
}