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