summaryrefslogtreecommitdiffstats
path: root/prototypejsdemo-html.lsp
diff options
context:
space:
mode:
Diffstat (limited to 'prototypejsdemo-html.lsp')
-rw-r--r--prototypejsdemo-html.lsp164
1 files changed, 164 insertions, 0 deletions
diff --git a/prototypejsdemo-html.lsp b/prototypejsdemo-html.lsp
new file mode 100644
index 0000000..c9c1ee2
--- /dev/null
+++ b/prototypejsdemo-html.lsp
@@ -0,0 +1,164 @@
+<? local ctl = ... ?>
+
+<script type="text/javascript" src="/static/prototype.js">
+</script>
+
+<script type="text/javascript">
+
+function check_ip(event)
+{
+ var el = event.element();
+ var url = 'check_ipv4';
+ var params = 'address='+el.value;
+ var ajax = new Ajax.Updater({
+ success: el.id + '_status'
+ }, url, {
+ method: 'post',
+ parameters: params,
+ onFailure: report_error
+ });
+}
+
+function report_error(request)
+{
+ $F('address_result') = "Error";
+}
+
+function enable_disable_if()
+{
+ if ($('ifenable').checked) {
+ $('interface_form').enable();
+ } else {
+ $('interface_form').disable();
+ }
+}
+
+function submit_form(event)
+{
+ var el = event.element();
+ var f = $('interface_form');
+ var params = f.serialize();
+ alert('TODO: submitting ' + params);
+/* var ajax = new Ajax.Updater('interface_form', 'write', {
+ parameters: params
+ });
+*/
+}
+
+function loadform(interface)
+{
+ var url = 'load'; /* the action in controller.lua */
+ var ajax = new Ajax.Request(url, {
+ parameters: 'ifname=' + interface,
+ method: 'post',
+ onSuccess: function(transport) {
+ var resp = transport.responseText;
+ var json = resp.evalJSON(true);
+ $('ifname').update(interface);
+ $('ifenable').checked = json.ifenable;
+ $('iftype').value = json.iftype;
+ $('address').value = json.address;
+ $('mask').value = json.mask;
+ $('gateway').value = json.gateway;
+ $('msg') = resp;
+ }
+ });
+}
+
+/* event handler for 'iface' select box */
+function select_iface(event)
+{
+ var el = event.element();
+ $('msg').update('Loading interface '+el.value);
+ loadform(el.value);
+}
+
+/* event handler for 'iface' select box */
+function select_iface_type(event)
+{
+ var el = event.element();
+ if (el.value == 'static') {
+ $('address').enable();
+ $('mask').enable();
+ $('gateway').enable();
+ } else {
+ $('address').disable();
+ $('mask').disable();
+ $('gateway').disable();
+ }
+}
+
+
+// the 'ifenable' element does not exist until page is loaded
+Event.observe(window, 'load', function() {
+ $('ifenable').observe('click', enable_disable_if);
+
+ $('address').observe('keypress', check_ip);
+ $('mask').observe('keypress', check_ip);
+ $('gateway').observe('keypress', check_ip);
+ $('applybutton').observe('click', submit_form);
+ $('iface').observe('click', select_iface);
+ $('iftype').observe('click', select_iface_type);
+
+ loadform('eth0');
+
+ enable_disable_if();
+});
+
+</script>
+
+<h1>PrototypeJS Demo</h1>
+
+<div id="interface-example">
+
+<h2 id="ifname"></h2>
+
+
+<dl>
+ <!-- this should be generated -->
+ <dt><label for="iface">Select Interface:</label></dt>
+ <dd><select name="iface" id="iface">
+ <option value="eth0">eth0</option>
+ <option value="dummy0">dummy0</option>
+ <option value="lo">lo</option>
+ </select></dd>
+
+ <dt><label for="ifenable">Enable:</label></dt>
+ <dd><input type="checkbox" name="ifenable" id="ifenable"/>
+
+ </dd>
+</dl>
+
+<form id="interface_form" action="write">
+
+<dl>
+ <dt><label for="iftype">Type:</label></dt>
+ <dd><select name="iftype" id="iftype">
+ <option value="none"> -- Please select interface type --</option>
+ <option value="dhcp">DHCP</option>
+ <option value="static">Static IP Address</option>
+ </select>
+ </dd>
+
+ <dt><label for="address">Adress:</label></dt>
+ <dd><input type="text" name="address" id="address"/>
+ <span id="address_status"></span></dd>
+
+ <dt><label for="mask">Netmask:</label></dt>
+ <dd><input type="text" name="mask" id="mask"/>
+ <span id="mask_status"></span></dd>
+
+ <dt><label for="gateway">Gateway:</label></dt>
+ <dd><input type="text" name="gateway" id="gateway"/>
+ <span id="gateway_status"></span></dd>
+
+ <dt>&nbsp;</dt>
+ <dd>
+ <input type="button" id="applybutton" name="applybutton" value="Apply"/>
+ </dd>
+
+</dl>
+</form>
+</div>
+
+<div id="msg"></div>