Mercurial > templog

diff web/views/set.tpl @ 486:bb713e6d0e48

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
merge
author Matt Johnston <matt@ucc.asn.au>
date Fri, 07 Feb 2014 08:00:10 +0800
parents d68af9e84485
children ae5efca89001
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/views/set.tpl	Fri Feb 07 08:00:10 2014 +0800
@@ -0,0 +1,293 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=8,minimum-scale=0.1">
+<script src="jquery-2.1.0.min.js"></script>
+<script>
+%include riot.min.js
+</script>
+
+<style type="text/css">
+span.no_selection {
+    -webkit-user-select: none; // webkit (safari, chrome) browsers
+    -moz-user-select: none; // mozilla browsers
+    -khtml-user-select: none; // webkit (konqueror) browsers
+}
+
+body {
+    font-family: "sans-serif";
+}
+
+input {
+    border: 2px solid transparent;
+    border-radius: 4px;
+    background-color: white;
+    border-color: black;
+    padding: 0;
+    font-size: 80%;
+}
+
+input[type="button"] {
+    width: 4em;
+    height: 4em;
+    margin-left: 0.5em;
+}
+
+input[type="submit"] {
+    width: 10em;
+    height: 4em;
+    margin-top: 1em;
+    align: center;
+}
+
+input[type="text"] {
+    height: 4em;
+    text-align: center;
+}
+
+#savebox {
+    align: center;
+    width: 100%;
+}
+
+.onbutton {
+    background-color: #cdf;
+}
+
+.modified {
+    color: #d00;
+    font-weight: bold;
+}
+
+.existing {
+    margin-top: 1em;
+    font-size: 70%;
+}
+
+</style>
+<title>Set templog</title>
+</head>
+
+
+<script type="html/num_input">
+<div id="{id}">
+<span class="existing">{title} <span id="oldvalue">{oldvaluetext}{unit}</span></span>
+<br/>
+<input type="text" class="input" name="input_{name}" />
+<input type="button" class="button_down" value="-"/>
+<input type="button" class="button_up" value="+"/>
+</div>
+</script>
+
+<script type="html/yesno_button">
+<div id="{id}">
+<span class="existing">{title} <span id="oldvalue">{oldvaluetext}</span></span>
+<br/>
+<input type="button" class="button_no" value="No"/>
+<input type="button" class="button_yes" value="Yes"/>
+</div>
+</script>
+
+<script>
+
+function Setter(params, csrf_blob) {
+    var self = $.observable(this);
+
+    self.params = params;
+    self.csrf_blob = csrf_blob
+
+    $.each(self.params, function(idx, param) {
+        param.id = "param_id_" + idx;
+        param.oldvalue = param.value
+        if (typeof(param.oldvalue) == "boolean")
+        {
+            param.oldvaluetext = param.oldvalue ? "Yes" : "No";
+        }
+        else
+        {
+            param.oldvaluetext = param.oldvalue;
+        }
+    });
+
+    self.edit = function(param, newvalue) {
+        param.value = newvalue;
+        params[param.name] = param;
+        self.trigger("edit", param);
+    }
+
+    self.adjust = function(param, updown) {
+        // XXX increment
+        param.value += (param.amount*updown);
+        self.trigger("edit", param);
+    }
+
+    self.save = function() {
+        self.trigger("status", "Saving...")
+
+        var post_json = {};
+        post_json.csrf_blob = self.csrf_blob;
+        post_json.params =
+            self.params.map(function(v, idx, array) {
+                return {
+                    name: v.name,
+                    value: v.value
+                };
+            });
+
+        var post_data = {data: JSON.stringify(post_json)};
+
+        var req = $.ajax({type: "POST",
+            url: "setparams",
+            data: post_data});
+
+        req.done(function(data, status, hdr) {
+            self.trigger("status", "Saved")
+        });
+
+        req.fail(function(data, status, hdr) {
+            self.trigger("status", 
+                "Failed: " + status + "\n" + hdr.responseText)
+        });
+    }
+}
+
+(function() { 'use strict';
+
+var params = {{!inline_data}};
+var csrf_blob = "{{!csrf_blob}}";
+window.setter = new Setter(params, csrf_blob);
+
+var number_template = $("[type='html/num_input']").html();
+var button_template = $("[type='html/yesno_button']").html();
+
+setter.on("add", add);
+
+setter.on("edit", function(param)
+{
+    var el = $("#" + param.id);
+    if (param.kind === "number")
+    {
+        set_text_state(el, param);
+    }
+    else if (param.kind === "yesno")
+    {
+        set_button_state(el, param.value);
+    }
+    var same;
+    switch (typeof(param.oldvalue))
+    {
+        case "boolean":
+            same = ((!param.value) == (!param.oldvalue));
+            break;
+        case "number":
+            same = Math.abs(param.value - param.oldvalue) < 1e-3 * param.amount;
+            break;
+        default:
+            same = (param.value === param.oldvalue);
+    }
+
+    $("#oldvalue", el).toggleClass("modified", !same);
+});
+
+setter.on("status", function(status) {
+    $('#status').text(status)
+})
+
+var root;
+
+window.onload = function() {
+    // clear list and add new ones
+    root = $("#paramlist");
+
+    root.empty() && $.each(setter.params, function (idx, p) {
+        add(p);
+    })
+
+    $("#savebutton").click(function() {
+        setter.save();
+    })
+}
+
+function set_text_state(el, param)
+{
+    var input = $(".input", el);
+    var s = Number(param.value).toFixed(param.digits)
+    input.text(s).val(s)
+}
+
+function set_button_state(el, value)
+{
+    $(".button_yes", el).toggleClass("onbutton", value);
+    $(".button_no", el).toggleClass("onbutton", !value);
+}
+
+function add(param)
+{
+    if (param.kind === "number")
+    {
+        var el = $($.render(number_template, param)).appendTo(root);
+        var input = $(".input", el);
+
+        input.keyup(function(e) {
+            if (e.which == 13)
+            {
+                setter.edit(param, Number(this.value));
+            }
+        });
+
+        input.blur(function(e) {
+            setter.edit(param, Number(this.value));
+        });
+
+        $(".button_up", el).click(function() {
+            setter.adjust(param, 1);
+            this.blur()
+        });
+        $(".button_down", el).click(function() {
+            setter.adjust(param, -1);
+            this.blur()
+        });
+
+        set_text_state(el, param);
+    }
+    else if (param.kind === "yesno")
+    {
+        var el = $($.render(button_template, param)).appendTo(root);
+        var button_yes = $(".button_yes", el);
+        var button_no = $(".button_no", el);
+
+        button_yes.click(function() {
+            setter.edit(param, true);
+            this.blur()
+        })
+
+        button_no.click(function() {
+            setter.edit(param, false);
+            this.blur()
+        })
+
+        set_button_state(el, param.value);
+    }
+}
+
+})()
+
+</script>
+
+<body>
+
+<section id="paramlist">
+</section>
+
+<div id="savebox">
+<input type="button" id="savebutton" value="Save"/>
+
+<div id="status">
+</div>
+</div>
+
+
+</body>
+
+</html>