diff options
Diffstat (limited to 'prototypejsdemo-html.lsp')
-rw-r--r-- | prototypejsdemo-html.lsp | 164 |
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> </dt> + <dd> + <input type="button" id="applybutton" name="applybutton" value="Apply"/> + </dd> + +</dl> +</form> +</div> + +<div id="msg"></div> |