ITHO-CVU-controller-in-MicroPython/index.html at main · erikdelange/ITHO-CVU-controller-in-MicroPython · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <title> ITHO CVU </title>
    <style>
      label { display: inline-block; width:170px; }
      input[type=time] { display: inline-block; width:100px; }
    </style>
  </head>

  <body>
    <div class="w3-container" style="width:fit-content; max-width:500px;">
      <h2> ITHO CVU Control </h2>
      <div class="w3-panel w3-border">
        <h3 onclick="accordion('Control')" style="cursor: pointer;"> Control </h3>
        <div id="Control" class="w3-hide w3-show">
          <div class="w3-bar w3-padding-small" title="Set fan speed">
            <input type="button" class="w3-button w3-border w3-light-gray" style="width:32%;" name="button" value="High" onclick="onButtonClick(event)">
            <input type="button" class="w3-button w3-border w3-light-gray" style="width:32%;" name="button" value="Medium" onclick="onButtonClick(event)">
            <input type="button" class="w3-button w3-border w3-light-gray" style="width:32%;" name="button" value="Low" onclick="onButtonClick(event)">
          </div>
          <div class="w3-bar w3-padding-small" title="Run fan at maximum speed for this many minutes">
            <input type="button" class="w3-button w3-border w3-light-gray" style="width:32%;" name="button" value="10 Min" onclick="onButtonClick(event)">
            <input type="button" class="w3-button w3-border w3-light-gray" style="width:32%;" name="button" value="20 Min" onclick="onButtonClick(event)">
            <input type="button" class="w3-button w3-border w3-light-gray" style="width:32%;" name="button" value="30 Min" onclick="onButtonClick(event)">
          </div>
          <br>
          <label class="w3-left w3-padding-small w3-margin-bottom" style="width:200px" id="datetime" name="datetime" value="abc">dd-mm-yyyy hh:mm:ss</label>
        </div>
      </div>

      <div class="w3-panel w3-border">
        <h3 onclick="accordion('Program')" style="cursor: pointer;"> Program </h3>
        <div id="Program" class="w3-hide w3-show">
          <label> Start Medium / Auto </label>
          <input class="w3-input w3-margin-bottom" id="start_medium" name="start_medium" type="time" value="08:00" onchange="onInputEvent(event)">
          <br>
          <label> Start Low </label>
          <input class="w3-input w3-margin-bottom" id="start_low" name="start_low" type="time" value="23:00" onchange="onInputEvent(event)">
        </div>
      </div>

      <div class="w3-panel w3-border">
        <h3 onclick="accordion('Advanced')" style="cursor: pointer;"> Advanced </h3>
        <div id="Advanced" class="w3-hide">
          <input type="button" class="w3-button w3-padding-small w3-border w3-light-gray" style="width:80px" name="button" value="Join" title="To join press button within 2 minutes after powering on the CVE" onclick="onButtonClick(event)">
          <input type="button" class="w3-button w3-padding-small w3-border w3-light-gray" style="width:80px" name="button" value="Leave" title="To leave press button within 2 minutes after powering on the CVE" onclick="onButtonClick(event)">
          <input type="button" class="w3-button w3-padding-small w3-border w3-light-gray w3-right" style="width:80px" id="reset" name="reset" value="Reset" onclick="onReset(event)">
          <br><br>
        </div>
      </div>
    </div>

    <script>
      "use strict";

      // Helper function to show an accordion section
      function accordion(id) {
        var x = document.getElementById(id);
        if (x.className.indexOf("w3-show") == -1) {
          x.className += " w3-show";
        } else {
          x.className = x.className.replace(" w3-show", "");
        }
      }

      // Helper functions for fetch()
      function validateResponse(response) {
        if (!response.ok) {
          return Promise.reject({
                  status: response.status,
                  statusText: response.statusText
          });
        }
        return response;
      }

      function readResponseAsJSON(response) {
        return response.json();
      }

      function readResponseAsBlob(response) {
        return response.blob();
      }

      function readResponseAsText(response) {
        return response.text();
      }

      function logError(error) {
        console.log("fetch error:", error);
      }
      // End of helper functions

      function onReset() {
        fetch("/api/reset")
          .then(validateResponse)
          .catch(logError);
      }

      function onInputEvent(event) {
        // Send changed clock program settings to the server
        var element = event.target;
        fetch("/api/set?".concat(element.name, "=", element.value))
          .then(validateResponse)
          .catch(logError);
      }

      function onButtonClick(event) {
        // Send button command to server
        var element = event.target;
        fetch("/api/click?".concat(element.name, "=", element.value))
          .then(validateResponse)
          .catch(logError);
      }

      function onLoadEvent() {
        // Load current clock program
        fetch("/api/init")
          .then(validateResponse)
          .then(readResponseAsJSON)
          .then(data => {
            console.log("/api/init data:", data);
            for (var key in data) {
              document.getElementById(key).value = data[key];
            }
          })
          .catch(logError);

        // Setup datetime event listener
        const datetimeEventSource = new EventSource("/api/datetime");

        datetimeEventSource.addEventListener("datetime", (event) => {
          document.getElementById("datetime").innerText = event.data;
        });

        datetimeEventSource.onerror = (event) => {
          console.log(datetimeEventSource.url, "error");
          datetimeEventSource.close();
        };
      }

      window.onload = onLoadEvent();
    </script>
  </body>
</html>