iot/enduser_setup.html at master · ubap/iot · 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">

<head>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>WiFi Login</title>
</head>

<body>
<div id=content>
    <div id="status"></div>
    <div id="configure">
        <fieldset>
            Device id: <div id="device_id"></div>
            <h3>Connect device to your Wi-Fi</h3>
            <form action="/setwifi" method="POST">
                <button id="networks" type="button" class="utility" onclick="getApList()">Scan for networks</button>
                <div id="scan_status"></div>
                <br/>
                <label for="aplist">Access point list:</label><select id="aplist" name="aplist"
                                                                      onchange="onApSelect(this)"></select><br/>
                <input id="ssid" name="wifi_ssid" type="text" autocorrect="off" autocapitalize="none"
                       placeholder='Wi-Fi Name'/><br/>
                <input name="wifi_password" type="password" autocorrect="off" autocapitalize="none" autocomplete="off"
                       placeholder="Password"/><br/>
                <!-- You can add inputs here and have them pop up in your lua code through the file eus_params.lua -->
                <input type="submit" value="Save"/>
            </form>
        </fieldset>
    </div>
</div>
<script>
    let ANIMATION_SPEED_MS = 500;
    let NOT_EXECUTED = 1;
    let SCANNING = 2;
    let ERROR = 3;
    let SUCCESS = 4;
    let scan_status = NOT_EXECUTED;
    let SCANNING_ANIMATION = ['Scanning.', 'Scanning..', 'Scanning...'];

    function setScanStatus(status) {
        if (scan_status === status) {
            return;
        }
        scan_status = status;
        updateScanStatusIndicator();
    }

    function getScanStatusParagraph() {
        return document.getElementById("scan_status");
    }

    function setScanStatusParagraphText(text) {
        if (getScanStatusParagraph().innerText === text) {
            return;
        }
        getScanStatusParagraph().innerText = text;
    }

    function updateScanStatusIndicator() {
        if (scan_status === SCANNING) {
            getScanStatusParagraph().hidden = false;
            let state = getScanStatusParagraph().innerText;
            let nextStateIndex = SCANNING_ANIMATION.indexOf(state) + 1;
            getScanStatusParagraph().innerText = SCANNING_ANIMATION[nextStateIndex % SCANNING_ANIMATION.length];
        } else if (scan_status === NOT_EXECUTED) {
            setScanStatusParagraphText("Not executed");
        } else if (scan_status === ERROR) {
            setScanStatusParagraphText("Error");
        } else if (scan_status === SUCCESS) {
            setScanStatusParagraphText("Successfully scanned APs");
        }
    }

    function setStatusParagraphText(text) {
        let statusDiv = document.getElementById("status");
        if (statusDiv.innerText === text) {
            return
        }
        statusDiv.innerText = text;
    }

    function setDeviceIdText(text) {
        let deviceIdDiv = document.getElementById("device_id");
        if (deviceIdDiv.innerText === text) {
            return
        }
        deviceIdDiv.innerText = text;
    }

    function updateStatusIndicator() {
        fetch('/status')
            .then((response) => response.text())
            .then((text) => setStatusParagraphText(text))
            .catch((e) => {
                setStatusParagraphText("Error fetching status, it usually indicates a major failure.");
                console.log(e);
            });
    }

    function updateDeviceId() {
        fetch('/status.json')
            .then((response) => response.json())
            .then((json) => setDeviceIdText(json.deviceid))
            .catch((e) => {
                setStatusParagraphText("Error fetching deviceId, it usually indicates a major failure.");
                console.log(e);
            });
    }

    function onApSelect(select) {
        document.getElementById('ssid').value = document.getElementById("aplist").options[select.selectedIndex].innerText;
    }

    function transformApListToOptions(apList) {
        let ops = "";
        apList.forEach((ap) => {
            ops += '<option>' + ap.ssid + '</option>';
        });
        let apListSelect = document.getElementById("aplist");
        apListSelect.innerHTML = ops;
        onApSelect(apListSelect);
    }

    async function getApList() {
        if (scan_status === SCANNING) {
            return;
        }
        setScanStatus(SCANNING);
        fetch('/aplist')
            .then((response) => response.json())
            .then((json) => {
                setScanStatus(SUCCESS);
                transformApListToOptions(json);
            })
            .catch((e) => {
                setScanStatus(ERROR);
                console.log(e);
            });
    }

    function animate() {
        updateScanStatusIndicator();
        updateStatusIndicator();
        setTimeout(animate, ANIMATION_SPEED_MS);
    }

    window.onload = function () {
        animate();
        updateDeviceId();
    }
</script>
</body>

</html>