mesh-map/addSample.html at main · kallanreed/mesh-map · 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
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">

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

<body>
  <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">
      <label for="path">Path:</label>
      <input type="text" id="path" name="path">
    </div>
    <div class="form-item">
      <label for="snr">SNR:</label>
      <input type="text" id="snr" name="snr">
    </div>
    <div class="form-item">
      <label for="rssi">RSSI:</label>
      <input type="text" id="rssi" name="rssi">
    </div>
    <div class="form-item">
      <label for="observed">Observed:</label>
      <input type="checkbox" id="observed" name="observed">
    </div>
    <div class="form-item">
      <button tabindex="0" id="submit" name="submit">Submit</button>
    </div>
  </div>
  <div id="status">
  </div>

  <script type="module">
    import { parseLocation } from '/content/shared.js'
    const $ = (id) => document.getElementById(id);
    const locTxt = $('loc');
    const pathTxt = $('path');
    const snrTxt = $('snr');
    const rssiTxt = $('rssi');
    const observedCB = $('observed');
    const statusDiv = $('status');

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

    function clearForm() {
      locTxt.value = '';
      pathTxt.value = '';
      snrTxt.value = '';
      rssiTxt.value = '';
      observedCB.checked = false;
    }

    async function putSample() {
      const [latVal, lonVal] = locTxt.value.split(/\s*,?\s+/)
      const [lat, lon] = parseLocation(latVal, lonVal);
      const pathVal = pathTxt.value;
      const snrVal = snrTxt.value;
      const rssiVal = rssiTxt.value;
      const payload = {
        lat: lat,
        lon: lon,
        path: pathVal !== "" ? pathVal.split(',') : [],
        snr: snrVal !== "" ? Number(snrVal) : null,
        rssi: rssiVal !== "" ? Number(rssiVal) : null,
        observed: observedCB.checked
      };

      setStatus('');

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

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

    async function tryPutSample() {
      try {
        await putSample();
      } catch (error) {
        setStatus(error);
      }
    }

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

</html>