1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
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>
|
