git.haldean.org sousvide / 3ebf0b6
Add loading indicator Will Haldean Brown 8 years ago
3 changed file(s) with 69 addition(s) and 8 deletion(s). Raw diff Collapse all Expand all
2323 </div>
2424 </div>
2525 <div id="buttonbar">
26 <a id="button_enable" href="/enable">Enabled</a>
27 <a id="button_disable" href="/disable">Disabled</a>
26 <a id="button_enable" href="#">Enabled</a>
27 <a id="button_disable" href="#">Disabled</a>
2828 </div>
2929 </div>
30 <div id="loader">&deg;</div>
3031
3132 <section style="display:none;">
3233 <h2>timers</h2>
8888 color: #FFB213;
8989 }
9090
91 #loader {
92 font-family: Norwester, monospace;
93 font-size: 128pt;
94 color: #FFB213;
95 position: absolute;
96 top: 32pt;
97 left: 48pt;
98 display: none;
99
100 -moz-animation-direction: alternate;
101 -moz-animation-duration: .3s;
102 -moz-animation-iteration-count: infinite;
103 -moz-animation-name: loader-anim;
104
105 -webkit-animation-direction: alternate;
106 -webkit-animation-duration: .3s;
107 -webkit-animation-iteration-count: infinite;
108 -webkit-animation-name: loader-anim;
109 }
110
111 @-moz-keyframes loader-anim {
112 from {
113 opacity: 0.0;
114 }
115
116 to {
117 opacity: 1.0;
118 }
119 }
120
121 @-webkit-keyframes loader-anim {
122 from {
123 opacity: 0.0;
124 }
125
126 to {
127 opacity: 1.0;
128 }
129 }
130
91131 h1 {
92132 font-size: 12pt;
93133 margin: 0;
11 var MAX_TEMP_STORE = 60 * 60 * 3;
22 var temps = new Array();
33
4 var loader
45 var tempElem, absErrElem, targetElem, heatingElem, plotElem, accErrElem
56 var targetDisplayElem, targetChangeElem, targetInputElem
67 var pInputElem, iInputElem, dInputElem
89 var timerElem, timerAudio
910
1011 var enableButton, disableButton
12
13 var loadUntilTrue = undefined;
1114
1215 function primeTempCache() {
1316 $.ajax({
4043 }
4144
4245 function displayData(data) {
46 if (loadUntilTrue && loadUntilTrue(data)) {
47 $(loader).css('display', 'none')
48 loadUntilTrue = undefined
49 }
50
4351 var temp = data.Temp,
4452 target = data.Target,
4553 err = temp - target;
140148 }
141149 }
142150
143 function attachRequest(elem, path, data) {
151 function attachRequest(elem, path, blinkUntil) {
144152 $(elem).click(function(e) {
145 // add spinnery thing
153 e.preventDefault();
154 loadUntilTrue = blinkUntil
155
156 loader.style.webkitAnimationName = ""
157 loader.style.mozAnimationName = ""
158 loader.style.webkitAnimationName = "loader-anim"
159 loader.style.mozAnimationName = "loader-anim"
160 $(loader).css('display', 'block')
161
146162 $.ajax({
147163 url: path,
148 data: data,
149164 type: 'html',
150165 success: function(resp) {
151166 console.log("got response to " + path + ": " + resp);
152167 }
153168 })
154 e.preventDefault();
155169 });
156170 console.log("sent onclick for elem to " + path)
157171 }
162176 targetElem = document.getElementById('target')
163177
164178 enableButton = document.getElementById('button_enable')
165 attachRequest(enableButton, "/enable");
179 attachRequest(enableButton, "/enable", function(data) {
180 return data.Enabled
181 })
166182 disableButton = document.getElementById('button_disable')
167 attachRequest(disableButton, "/disable");
183 attachRequest(disableButton, "/disable", function(data) {
184 return !data.Enabled
185 })
186
187 loader = document.getElementById('loader')
168188
169189 heatingElem = document.getElementById('heating')
170190 plotElem = document.getElementById('plot')