mesh-map-docker/addRepeater.html at main · deftdev/mesh-map-docker · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Add Repeater</title>
  <link rel="stylesheet" type="text/css" href="content/forms.css" />
</head>

<body>
  <div>
    <div class="form-item">
      <label for="id">Id:</label>
      <input type="text" id="id" name="id">
    </div>
    <div class="form-item">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
    </div>
    <div class="form-item">
      <label for="loc">Location:</label>
      <input type="text" id="loc" name="loc" placeholder="(LAT) (LON)">
    </div>
    <div class="form-item">
      <button tabindex="0" id="submit" name="submit" onclick="putRepeater()">Submit</button>
    </div>
  </div>
  <div id="status">
  </div>

  <script type="module">
    import { parseLocation } from '/content/shared.js'
    const $ = (id) => document.getElementById(id);
    const idTxt = $('id');
    const nameTxt = $('name');
    const locTxt = $('loc');
    const statusDiv = $('status');

    function setStatus(msg) {
      msg = msg ?? "";
      statusDiv.innerText = msg
      if (msg !== "") {
        setTimeout(setStatus, 3000);
      }
    }

    function clearForm() {
      idTxt.value = '';
      nameTxt.value = '';
      locTxt.value = '';
    }

    async function putRepeater() {
      const idVal = idTxt.value;
      const nameVal = nameTxt.value;
      const [lat, lon] = locTxt.value.split(/\s*,?\s+/)

      if (idVal.length !== 2) {
        setStatus("Invalid id");
        return;
      }

      const payload = {
        id: idVal,
        name: nameVal,
        lat: lat,
        lon: lon,
      };

      console.log(`putting ${payload}`);
      setStatus('');

      const resp = await fetch('/put-repeater', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
      });

      if (!resp.ok) {
        setStatus('HTTP error ' + resp.status);
      } else {
        setStatus(`Repeater saved! ${[idVal, lat, lon]}`);
        clearForm();
      }
    }

    async function tryPutRepeater() {
      try {
        await putRepeater();
      } catch (error) {
        setStatus(error);
      }
    }

    $('submit').addEventListener('click', tryPutRepeater);
  </script>
</body>

</html>