Mercurial > templog
annotate web/views/set.tpl @ 302:ef407d48cbe5
add step attribute for numbers
| author | Matt Johnston <matt@ucc.asn.au> |
|---|---|
| date | Tue, 23 Jul 2019 22:44:12 +0800 |
| parents | f7261dd970da |
| children |
| rev | line source |
|---|---|
| 182 | 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> | |
| 3 <head> | |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| 189 | 5 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1"> |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
6 <script src="jquery-2.1.0.min.js"></script> |
| 188 | 7 <script src="jquery.mobile.custom.min.js"></script> |
| 182 | 8 <script> |
| 9 %include riot.min.js | |
| 10 </script> | |
| 286 | 11 <meta name="theme-color" content="#fff"> |
| 182 | 12 |
| 13 <style type="text/css"> | |
| 14 span.no_selection { | |
| 15 -webkit-user-select: none; // webkit (safari, chrome) browsers | |
| 16 -moz-user-select: none; // mozilla browsers | |
| 17 -khtml-user-select: none; // webkit (konqueror) browsers | |
| 18 } | |
| 19 | |
| 20 body { | |
| 189 | 21 font-family: sans-serif; |
| 182 | 22 } |
| 23 | |
|
291
f7261dd970da
- replace ssl client certs with cookies
Matt Johnston <matt@ucc.asn.au>
parents:
289
diff
changeset
|
24 a { |
|
f7261dd970da
- replace ssl client certs with cookies
Matt Johnston <matt@ucc.asn.au>
parents:
289
diff
changeset
|
25 color: #000; |
|
f7261dd970da
- replace ssl client certs with cookies
Matt Johnston <matt@ucc.asn.au>
parents:
289
diff
changeset
|
26 } |
|
f7261dd970da
- replace ssl client certs with cookies
Matt Johnston <matt@ucc.asn.au>
parents:
289
diff
changeset
|
27 |
| 182 | 28 input { |
| 29 border: 2px solid transparent; | |
| 30 border-radius: 4px; | |
| 31 background-color: white; | |
| 32 border-color: black; | |
| 33 padding: 0; | |
| 189 | 34 font-size: 30pt; |
| 35 height: 34pt; | |
| 289 | 36 vertical-align: middle; |
| 37 line-height: 1em; | |
| 182 | 38 } |
| 39 | |
| 40 input[type="button"] { | |
| 189 | 41 width: 34pt; |
| 42 margin-left: 4pt; | |
| 43 -webkit-appearance: none; | |
| 44 -moz-appearance: none; | |
| 45 background:#fff; | |
| 182 | 46 } |
| 47 | |
| 48 input[type="submit"] { | |
| 49 margin-top: 1em; | |
| 50 align: center; | |
| 189 | 51 width: 10em; |
| 182 | 52 } |
| 53 | |
| 188 | 54 input[type="text"], input[type="number"] { |
| 182 | 55 text-align: center; |
| 189 | 56 width: 4em; |
| 182 | 57 } |
| 58 | |
| 185 | 59 #savebox { |
| 189 | 60 vertical-align: center; |
| 185 | 61 width: 100%; |
| 62 } | |
| 63 | |
| 189 | 64 input[type="button"].onbutton { |
| 65 background: #ccc; | |
| 66 } | |
| 67 | |
| 68 input[type="button"].yesno { | |
| 69 width: 2.5em; | |
| 70 } | |
| 71 | |
| 72 input[type="button"]#savebutton { | |
| 73 width: 5em; | |
| 182 | 74 } |
| 75 | |
| 184 | 76 .modified { |
| 77 color: #d00; | |
| 78 font-weight: bold; | |
| 79 } | |
| 80 | |
| 182 | 81 .existing { |
| 189 | 82 margin-top: 10pt; |
| 182 | 83 } |
| 84 | |
| 194 | 85 span.inputrow { |
| 86 //vertical-align: center; | |
| 87 } | |
| 88 | |
|
291
f7261dd970da
- replace ssl client certs with cookies
Matt Johnston <matt@ucc.asn.au>
parents:
289
diff
changeset
|
89 #mailauth { |
|
f7261dd970da
- replace ssl client certs with cookies
Matt Johnston <matt@ucc.asn.au>
parents:
289
diff
changeset
|
90 display: none; |
|
f7261dd970da
- replace ssl client certs with cookies
Matt Johnston <matt@ucc.asn.au>
parents:
289
diff
changeset
|
91 } |
|
f7261dd970da
- replace ssl client certs with cookies
Matt Johnston <matt@ucc.asn.au>
parents:
289
diff
changeset
|
92 |
| 182 | 93 </style> |
| 94 <title>Set templog</title> | |
| 95 </head> | |
| 96 | |
| 97 | |
| 98 <script type="html/num_input"> | |
| 99 <div id="{id}"> | |
| 184 | 100 <span class="existing">{title} <span id="oldvalue">{oldvaluetext}{unit}</span></span> |
| 182 | 101 <br/> |
| 194 | 102 <span class="inputrow"> |
|
302
ef407d48cbe5
add step attribute for numbers
Matt Johnston <matt@ucc.asn.au>
parents:
291
diff
changeset
|
103 <input type="number" class="input" name="input_{name}" step="{numberstep}"/> |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
104 <input type="button" class="button_down" value="-"/> |
|
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
105 <input type="button" class="button_up" value="+"/> |
| 194 | 106 </span> |
| 182 | 107 </div> |
| 108 </script> | |
| 109 | |
| 110 <script type="html/yesno_button"> | |
| 111 <div id="{id}"> | |
| 184 | 112 <span class="existing">{title} <span id="oldvalue">{oldvaluetext}</span></span> |
| 182 | 113 <br/> |
| 194 | 114 <span class="inputrow"> |
| 189 | 115 <input type="button" class="button_no yesno" value="No"/> |
| 116 <input type="button" class="button_yes yesno" value="Yes"/> | |
| 194 | 117 </span> |
| 182 | 118 </div> |
| 119 </script> | |
| 120 | |
| 121 <script> | |
| 122 | |
| 185 | 123 function Setter(params, csrf_blob) { |
| 182 | 124 var self = $.observable(this); |
| 125 | |
| 126 self.params = params; | |
| 185 | 127 self.csrf_blob = csrf_blob |
| 182 | 128 |
| 129 $.each(self.params, function(idx, param) { | |
| 130 param.id = "param_id_" + idx; | |
| 184 | 131 param.oldvalue = param.value |
| 132 if (typeof(param.oldvalue) == "boolean") | |
| 133 { | |
| 134 param.oldvaluetext = param.oldvalue ? "Yes" : "No"; | |
| 135 } | |
| 225 | 136 else if (param.kind == "number") |
| 137 { | |
| 138 param.oldvaluetext = Number(param.oldvalue).toFixed(param.digits) | |
|
302
ef407d48cbe5
add step attribute for numbers
Matt Johnston <matt@ucc.asn.au>
parents:
291
diff
changeset
|
139 param.numberstep = 0.1**param.digits |
| 225 | 140 } |
| 184 | 141 else |
| 142 { | |
| 143 param.oldvaluetext = param.oldvalue; | |
| 144 } | |
| 182 | 145 }); |
| 146 | |
| 184 | 147 self.edit = function(param, newvalue) { |
| 148 param.value = newvalue; | |
| 182 | 149 params[param.name] = param; |
| 150 self.trigger("edit", param); | |
| 151 } | |
| 152 | |
| 153 self.adjust = function(param, updown) { | |
| 154 // XXX increment | |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
155 param.value += (param.amount*updown); |
| 182 | 156 self.trigger("edit", param); |
| 157 } | |
| 158 | |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
159 self.save = function() { |
| 185 | 160 self.trigger("status", "Saving...") |
| 161 | |
| 162 var post_json = {}; | |
| 163 post_json.csrf_blob = self.csrf_blob; | |
| 164 post_json.params = | |
| 165 self.params.map(function(v, idx, array) { | |
| 166 return { | |
| 167 name: v.name, | |
| 168 value: v.value | |
| 169 }; | |
| 170 }); | |
| 171 | |
| 172 var post_data = {data: JSON.stringify(post_json)}; | |
| 173 | |
| 174 var req = $.ajax({type: "POST", | |
| 188 | 175 url: "set/update", |
| 185 | 176 data: post_data}); |
| 177 | |
| 178 req.done(function(data, status, hdr) { | |
| 179 self.trigger("status", "Saved") | |
| 180 }); | |
| 181 | |
| 182 req.fail(function(data, status, hdr) { | |
| 183 self.trigger("status", | |
| 194 | 184 "Failed: " + data.status + ' ' |
| 185 + data.statusText + ' ' + data.responseText) | |
| 185 | 186 }); |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
187 } |
| 182 | 188 } |
| 189 | |
| 190 (function() { 'use strict'; | |
| 191 | |
| 192 var params = {{!inline_data}}; | |
| 185 | 193 var csrf_blob = "{{!csrf_blob}}"; |
| 189 | 194 var allowed = {{allowed}}; |
| 185 | 195 window.setter = new Setter(params, csrf_blob); |
| 182 | 196 |
| 197 var number_template = $("[type='html/num_input']").html(); | |
| 198 var button_template = $("[type='html/yesno_button']").html(); | |
| 199 | |
| 200 setter.on("add", add); | |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
201 |
| 182 | 202 setter.on("edit", function(param) |
| 203 { | |
| 204 var el = $("#" + param.id); | |
| 205 if (param.kind === "number") | |
| 206 { | |
| 184 | 207 set_text_state(el, param); |
| 182 | 208 } |
| 209 else if (param.kind === "yesno") | |
| 210 { | |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
211 set_button_state(el, param.value); |
| 182 | 212 } |
| 184 | 213 var same; |
| 214 switch (typeof(param.oldvalue)) | |
| 215 { | |
| 216 case "boolean": | |
| 217 same = ((!param.value) == (!param.oldvalue)); | |
| 218 break; | |
| 219 case "number": | |
| 220 same = Math.abs(param.value - param.oldvalue) < 1e-3 * param.amount; | |
| 221 break; | |
| 222 default: | |
| 223 same = (param.value === param.oldvalue); | |
| 224 } | |
| 225 | |
| 226 $("#oldvalue", el).toggleClass("modified", !same); | |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
227 }); |
|
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
228 |
| 185 | 229 setter.on("status", function(status) { |
| 230 $('#status').text(status) | |
| 231 }) | |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
232 |
| 185 | 233 var root; |
| 182 | 234 |
| 185 | 235 window.onload = function() { |
| 236 // clear list and add new ones | |
| 237 root = $("#paramlist"); | |
| 182 | 238 |
| 185 | 239 root.empty() && $.each(setter.params, function (idx, p) { |
| 240 add(p); | |
| 241 }) | |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
242 |
| 189 | 243 if (!allowed) { |
| 244 $("#savebutton").attr("disabled", true); | |
| 245 $('#status').text("No cert") | |
|
291
f7261dd970da
- replace ssl client certs with cookies
Matt Johnston <matt@ucc.asn.au>
parents:
289
diff
changeset
|
246 $('#mailauth').show(); |
| 189 | 247 } |
| 248 | |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
249 $("#savebutton").click(function() { |
|
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
250 setter.save(); |
|
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
251 }) |
| 185 | 252 } |
| 182 | 253 |
| 184 | 254 function set_text_state(el, param) |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
255 { |
|
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
256 var input = $(".input", el); |
| 184 | 257 var s = Number(param.value).toFixed(param.digits) |
| 258 input.text(s).val(s) | |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
259 } |
|
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
260 |
|
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
261 function set_button_state(el, value) |
| 182 | 262 { |
| 184 | 263 $(".button_yes", el).toggleClass("onbutton", value); |
| 264 $(".button_no", el).toggleClass("onbutton", !value); | |
| 182 | 265 } |
| 266 | |
| 267 function add(param) | |
| 268 { | |
| 269 if (param.kind === "number") | |
| 270 { | |
| 271 var el = $($.render(number_template, param)).appendTo(root); | |
| 272 var input = $(".input", el); | |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
273 |
|
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
274 input.keyup(function(e) { |
|
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
275 if (e.which == 13) |
|
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
276 { |
| 184 | 277 setter.edit(param, Number(this.value)); |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
278 } |
|
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
279 }); |
|
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
280 |
| 184 | 281 input.blur(function(e) { |
| 282 setter.edit(param, Number(this.value)); | |
| 283 }); | |
| 284 | |
| 191 | 285 $(".button_up", el).on("vmousedown", function(e) { |
| 286 e.preventDefault(); | |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
287 setter.adjust(param, 1); |
| 184 | 288 this.blur() |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
289 }); |
| 191 | 290 $(".button_down", el).on("vmousedown", function(e) { |
| 291 e.preventDefault(); | |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
292 setter.adjust(param, -1); |
| 184 | 293 this.blur() |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
294 }); |
|
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
295 |
| 184 | 296 set_text_state(el, param); |
| 182 | 297 } |
| 298 else if (param.kind === "yesno") | |
| 299 { | |
| 300 var el = $($.render(button_template, param)).appendTo(root); | |
| 301 var button_yes = $(".button_yes", el); | |
| 302 var button_no = $(".button_no", el); | |
| 303 | |
| 191 | 304 button_yes.on("vmousedown", function(e) { |
| 184 | 305 setter.edit(param, true); |
| 306 this.blur() | |
| 182 | 307 }) |
| 308 | |
| 191 | 309 button_no.on("vmousedown", function(e) { |
| 184 | 310 setter.edit(param, false); |
| 311 this.blur() | |
| 182 | 312 }) |
| 313 | |
|
183
177f616893e6
param editor roughly working
Matt Johnston <matt@ucc.asn.au>
parents:
182
diff
changeset
|
314 set_button_state(el, param.value); |
| 182 | 315 } |
| 316 } | |
| 317 | |
| 318 })() | |
| 319 | |
| 188 | 320 |
| 321 | |
| 182 | 322 </script> |
| 323 | |
| 185 | 324 <body> |
| 325 | |
| 326 <section id="paramlist"> | |
| 327 </section> | |
| 328 | |
| 189 | 329 <span id="savebox"> |
| 185 | 330 <input type="button" id="savebutton" value="Save"/> |
| 189 | 331 <span id="status"></span> |
|
291
f7261dd970da
- replace ssl client certs with cookies
Matt Johnston <matt@ucc.asn.au>
parents:
289
diff
changeset
|
332 <span id="mailauth"> <a href="mailto:{{email}}?Subject=Allow%20Templog&body=Hash%20is%20{{cookie_hash}}">Email</a> |
|
f7261dd970da
- replace ssl client certs with cookies
Matt Johnston <matt@ucc.asn.au>
parents:
289
diff
changeset
|
333 </span> |
| 189 | 334 </span> |
| 185 | 335 |
| 336 | |
| 337 </body> | |
| 338 | |
| 182 | 339 </html> |