Revision b303ba05

b/ui/templates/alt_instances.html
1
<a id="create" rel="#wizard" href="#">Create New +</a>
2

  
3
<div id="instancesview" class="standard">
4
    <a id="list" href="/instances/list">list view</a>
5
    <div class="running">
6
        {% for node in nodes %}
7
            {% if node.state == '3' %} 
8
                <div class="instance running">
9
                    <div class="actions">
10
                        <a href="#" class="action">Reboot</a>
11
                        <a href="#" class="action">Shutdown</a>
12
                        <a href="#" class="more">more &hellip;</a>
13
                    </div>
14
                    <div class="state">
15
                        <div>Running</div>
16
                        <div class="indicator" />
17
                        <div class="indicator" />
18
                        <div class="indicator" />
19
                        <div class="indicator" />
20
                    </div>
21
                    <img src="static/pc.png" />
22
                    <img class="os" src={{ node.thumb }} />
23
                    <a href="#" class="name">
24
                        <h5>Hostname: <span>{{ node.name }}</span><span class="rename"></span></h5>
25
                    </a>
26
                    <a href="#" class="ip">
27
                        <h5>IP: <span>{{ node.public_ip }}</span></h5>
28
                    </a>
29
                    <br />
30
                    <h5 class="storage">
31
                        Show: <a href="#">disks</a> | <a href="#">networks</a> | <a href="#">group</a> | uptime: 24 days
32
                    </h5>
33
                </div>
34
            {% endif %}
35
        {% endfor %}
36
    </div>
37
    <div class="seperator"></div>
38
    <div class="terminated">
39
        {% for node in nodes %}
40
            {% if node.state == '0' %}
41
                <div class="instance terminated">
42
                    <div class="actions">
43
                        <a href="#" class="action">Start</a>
44
                        <a href="#" class="action">Destroy</a>
45
                        <a href="#" class="more">more &hellip;</a>
46
                    </div>
47
                    <div class="state">
48
                        <div>Terminated</div>
49
                        <div class="indicator" />
50
                        <div class="indicator" />
51
                        <div class="indicator" />
52
                        <div class="indicator" />
53
                    </div>
54
                    <img src="static/pc.png" />
55
                    <img class="os" src={{ node.thumb }} />
56
                    <a href="#" class="name">
57
                        <h5>Hostname: <span>{{ node.name }}</span><span class="rename"></span></h5>
58
                    </a>
59
                    <a href="#" class="ip">
60
                        <h5>IP: <span>{{ node.public_ip }}</span></h5>
61
                    </a>
62
                    <br />
63
                    <h5 class="storage">
64
                        Show: <a href="#">disks</a> | <a href="#">networks</a> | <a href="#">group</a> | uptime: 24 days
65
                    </h5>
66
                </div>
67
            {% endif %}
68
        {% endfor %} 
69
    </div>
70
</div>
71

  
72
<!-- the form -->
73
<form action="#">
74
	<!-- scrollable root element -->
75
	<div class="modal" id="wizard">
76
		<!-- status bar -->
77
		<ul id="status">
78
			<li class="active"><strong>1.</strong> Image</li>
79
			<li><strong>2.</strong> Instance</li>
80
			<li><strong>3.</strong> Review</li>
81
		</ul>
82
		<!-- scrollable items -->
83
		<div class="items">
84
			<!-- pages -->
85
			<div class="page">
86
                <h2>Select an OS</h2>
87
                <ul class="tabs">
88
                    <li><a href="#">standard</a></li>
89
                    <li><a href="#">custom</a></li>
90
                </ul>
91
                <div class="panes">
92
                    <ul class="pane">
93
					    <!-- standard images -->
94
                        {% for image in images %}
95
                            {% if image.type == 'standard' %}
96
					            <li>
97
						            <label> 
98
                                        <a><div class="image">
99
                                            <img src={{ image.logo }} class="image-logo"/>
100
                                            <strong>{{ image.title }}</strong>
101
                                            <br />
102
                                            <span class="description">{{ image.description }}</span> 
103
                                            <span class="size">{{ image.size }}MB</span>
104
                                            <input class="radio" type="radio" name="image-id" id={{ image.id }} />
105
                                        </div></a>
106
						            </label>
107
					            </li>
108
                            {% endif %}
109
                        {% endfor %} 
110
				    </ul>
111
                    <ul class="pane">
112
					    <!-- custom images -->
113
                        {% for image in images %}
114
                            {% if image.type == 'custom' %}
115
					            <li>
116
						            <label> 
117
                                        <a><div class="image">
118
                                            <img src={{ image.logo }} class="image-logo"/>
119
                                            <strong>{{ image.title }}</strong>
120
                                            <br />
121
                                            <span class="description">{{ image.description }}</span> 
122
                                            <span class="size">{{ image.size }}MB</span>
123
                                            <input class="radio" type="radio" name="image-id" id={{ image.id }} />
124
                                        </div></a>
125
						            </label>
126
					            </li>
127
                            {% endif %}
128
                        {% endfor %}
129
                    </ul>
130
                </div>
131
				<button type="button" class="prev" id="cancel">Cancel</button>
132
				<button type="button" class="next right">Next &raquo;</button>
133
            </div>
134
			<div class="page">
135
				<h2>Select CPU, RAM and storage</h2>
136
                <ul>
137
                    <li>
138
                        <div class="instance-type">
139
                            <label for="small">
140
                                <input type="radio" id="small" name="instance-type" value="small" checked="true" />
141
                                <strong>small</strong>
142
                            </label>
143
                        </div>
144
                        <div class="instance-type">      
145
                            <label for="medium">
146
                                <input type="radio" id="medium" name="instance-type" value="medium" />                  
147
                                <strong>medium</strong>
148
                            </label>
149
                        </div>
150
                        <div class="instance-type">
151
                            <label for="large">
152
                                <input type="radio" id="large" name="instance-type" value="large" />
153
                                <strong>large</strong>
154
                            </label>
155
                        </div>
156
                        <div class="instance-type">
157
                            <label for="custom">
158
                                <input type="radio" name="instance-type" id="custom" value="large" />
159
                                <strong>custom</strong>
160
                            </label>
161
                        </div>
162
                    </li>
163
                    <li>
164
			            <label><strong class="sliders">CPU (cores)</strong></label>
165
                        <input type="range" id="cpu" value="1" max="8" min="1" />
166
                    </li>
167
                    <li>
168
			            <label><strong class="sliders">RAM (MB)</strong></label>
169
                        <input type="range" id="ram" value="256" max="2048" min="256" step="256" />
170
                    </li>
171
                    <li>
172
		                <label><strong class="sliders">Storage (GB)</strong></label>
173
                        <input type="range" id="storage" value="5" step="1" max="100" min="2" />
174
                    </li>
175
                    <li>
176
                        <div class="cost">
177
                            Cost per hour for this VM: 20 credits | Credits currently in account: 10.000
178
                        </div>
179
                    </li>
180
                </ul>
181
				<button type="button" class="prev">&laquo; Back</button>
182
				<button type="button" class="next right">Next &raquo;</button>
183
            </div>
184
			<div class="page">
185
				<h2>Confirm your settings</h2>
186
                <ul>
187
                    <li class="required">
188
                        <label>
189
                            <strong></strong> Instance name<br />
190
                            <input type="text" class="text" name="instance_name" value="My Ubuntu 10.04 x86_64 server"/>
191
                        </label>
192
                    </li>
193
                    <li>
194
                        <strong>Image:</strong> <span>Ubuntu 10.04 x86_64 server</span>
195
                    </li>
196
                    <li>
197
                        <strong>CPU:</strong> <span>2 cores</span>
198
                    </li>
199
                    <li>
200
                        <strong>RAM:</strong> <span>1024MB</span>
201
                    </li>
202
                    <li>
203
                        <strong>Storage:</strong> <span>10GB</span>
204
                    </li>
205
                    <li>
206
                        <strong>Cost per hour:</strong> <span>20 credits</span>
207
                    </li>
208
                    <li>
209
                        <strong>Remaining credits:</strong> <span>10.000</span>
210
                    </li>
211
                </ul>
212
				<button type="button" class="prev">&laquo; Back</button>
213
				<button type="button" class="next right" id="start">Create VM</button>        
214
            </div>
215
		</div>
216
	</div>
217
</form>
218

  
219
<div class="modal" id="misc">
220
    <h3>Your VM is being created!</h3>
221
    <p>Your password is:<strong> sdeEFre</strong></p>
222
    <p>Please copy this! Without it you can not connect to your VM.</p>
223
</div>
224

  
225
<script>
226
// <![CDATA[ 
227

  
228
$("#list").click(function(event){
229
    $("div#instancesview").load($("#list").attr("href"));
230
    return false;
231
});
232

  
233
$("ul.tabs").tabs("div.panes ul");
234

  
235
$(":range").rangeinput();
236

  
237
function disableSliders() {
238
    $("#cpu").attr('disabled',true);
239
    $("#ram").attr('disabled',true);
240
    $("#storage").attr('disabled',true);
241
}
242

  
243
$("#custom").click(function(event){
244
    $("#cpu").attr('disabled',false);
245
    $("#ram").attr('disabled',false);
246
    $("#storage").attr('disabled',false);
247
    $("strong.sliders").style = 'color: #778899;';
248
});
249

  
250
$("#small").click(function(event){
251
    $("#cpu").data('rangeinput').setValue(1);
252
    $("#ram").data('rangeinput').setValue(256);
253
    $("#storage").data('rangeinput').setValue(5);
254
});
255

  
256
$("#medium").click(function(event){
257
    $("#cpu").data('rangeinput').setValue(4);
258
    $("#ram").data('rangeinput').setValue(1024);
259
    $("#storage").data('rangeinput').setValue(30);
260
});
261

  
262
$("#large").click(function(event){
263
    $("#cpu").data('rangeinput').setValue(8);
264
    $("#ram").data('rangeinput').setValue(4096);
265
    $("#storage").data('rangeinput').setValue(80);
266
});
267

  
268
$("#cancel").click(function(event){
269
    $("a#create[rel]").overlay().close();
270
});
271

  
272
$("#start").click(function(event){
273
    $("a#create[rel]").overlay().close();
274

  
275
    var triggers = $("div#misc").overlay({
276
	    // some mask tweaks suitable for modal dialogs
277
	    mask: {
278
		    color: '#ebecff',
279
		    opacity: '0.9'
280
	    },
281
        top: 'center',
282
        load: 'true',
283
	    closeOnClick: 'false'  
284
    });
285
});
286

  
287
$("a#create").click(function(event){
288
    $("#wizard").scrollable().begin();
289
});
290

  
291
$("#cpu").change(function(event){
292
    $("#custom").click();
293
});
294

  
295
$("#ram").change(function(event){
296
    $("#custom").click();
297
});
298

  
299
$("#storage").change(function(event){
300
    $("#custom").click();
301
});
302

  
303
$(function() { 
304
    $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%'});
305

  
306
});
307

  
308
$(function() {
309
    var root = $("#wizard").scrollable();
310

  
311
    // some variables that we need
312
    var api = root.scrollable();
313

  
314
    // rangeinput with default configuration
315
    // validation logic is done inside the onBeforeSeek callback
316
    api.onBeforeSeek(function(event, i) {
317
	    // we are going 1 step backwards so no need for validation
318
	    if (api.getIndex() < i) {
319
             // 1. get current page
320
		     var page = root.find(".page").eq(api.getIndex()),
321
			 // 2. .. and all required fields inside the page
322
			 inputs = page.find(".required :input").removeClass("error"),
323
			 // 3. .. which are empty
324
			 empty = inputs.filter(function() {
325
				return $(this).val().replace(/\s*/g, '') == '';
326
			 });
327
		     // if there are empty fields, then
328
		    if (empty.length) {
329
			    // add a CSS class name "error" for empty & required fields
330
			    empty.addClass("error");
331
			    // cancel seeking of the scrollable by returning false
332
			    return false;
333
		    // everything is good
334
		    } 
335
	    }
336
	    // update status bar
337
	    $("#status li").removeClass("active").eq(i).addClass("active");
338
    });
339

  
340
    // if tab is pressed on the next button seek to next page
341
    root.find("button.next").keydown(function(e) {
342
	    if (e.keyCode == 9) {
343
		    // seeks to next tab by executing our validation routine
344
		    api.next();
345
		    e.preventDefault();
346
	    }
347
    });
348
// ]]>
349
});
350
</script>
351

  
/dev/null
1
<a id="create" rel="#wizard" href="#">Create New +</a>
2

  
3
<div id="instancesview" class="standard" tal:define="nodes context['nodes']">
4
    <a id="list" href="/instances/list">list view</a>
5
    <tal:running tal:repeat="node nodes">
6
    <div class="instance running" tal:condition="node['state']=='3'">
7
        <div class="actions">
8
            <a href="#" class="action">Reboot</a>
9
            <a href="#" class="action">Shutdown</a>
10
            <a href="#" class="more">more &hellip;</a>
11
        </div>
12
        
13
        <div class="state">
14
            <div>Running</div>
15
            <div class="indicator" />
16
            <div class="indicator" />
17
            <div class="indicator" />
18
            <div class="indicator" />
19
        </div>
20

  
21
        <img src="static/pc.png" />
22
        <img class="os" src="static/${node['thumb']}" />
23
        <a href="#" class="name">
24
            <h5>Hostname: <span tal:replace="node['name']" /><span class="rename"></span></h5>
25
        </a>
26
        <a href="#" class="ip">
27
            <h5>IP: <span tal:replace="node['public_ip']" /></h5>
28
        </a>
29
        <br />
30
        <h5 class="storage">
31
            Show: <a href="#">disks</a> | <a href="#">networks</a> | <a href="#">group</a> | uptime: 24 days
32
        </h5>
33
    </div>
34
    </tal:running>
35
    <div class="seperator"></div>
36
    <tal:stopped tal:repeat="node nodes">
37
    <div class="instance terminated" tal:condition="node['state']=='0'">
38
        <div class="actions">
39
            <a href="#" class="action">Start</a>
40
            <a href="#" class="action">Destroy</a>
41
            <a href="#" class="more">more &hellip;</a>
42
        </div>
43
        
44
        <div class="state">
45
            <div>Terminated</div>
46
            <div class="indicator" />
47
            <div class="indicator" />
48
            <div class="indicator" />
49
            <div class="indicator" />
50
        </div>
51

  
52
        <img src="static/pc.png" />
53
        <img class="os" src="static/${node['thumb']}" />
54
        <a href="#" class="name">
55
            <h5>Hostname: <span tal:replace="node['name']" /><span class="rename"></span></h5>
56
        </a>
57
        <a href="#" class="ip">
58
            <h5>IP: <span tal:replace="node['public_ip']" /></h5>
59
        </a>
60
        <br />
61
        <h5 class="storage">
62
            Show: <a href="#">disks</a> | <a href="#">networks</a> | <a href="#">group</a> 
63
        </h5>
64
    </div>
65
    </tal:stopped>
66
</div>
67

  
68
<!-- the form -->
69
<form action="#">
70
	<!-- scrollable root element -->
71
	<div class="modal" id="wizard">
72
		<!-- status bar -->
73
		<ul id="status">
74
			<li class="active"><strong>1.</strong> Image</li>
75
			<li><strong>2.</strong> Instance</li>
76
			<li><strong>3.</strong> Review</li>
77
		</ul>
78
		<!-- scrollable items -->
79
		<div class="items">
80
			<!-- pages -->
81
			<div class="page">
82
                <h2>Select an OS</h2>
83
                <ul class="tabs">
84
                    <li><a href="#">standard</a></li>
85
                    <li><a href="#">custom</a></li>
86
                </ul>
87
                <div class="panes" tal:define="images context['images']">
88
                    <ul class="pane">
89
					    <!-- standard images -->
90
					    <li>
91
						    <label for="${image['id']}" tal:repeat="image images"> 
92
                                <a tal:condition="image['type']=='standard'">
93
                                    <div class="image">
94
                                        <img tal:attributes="src image['logo']" class="image-logo" /> <strong>${image['title']}</strong><br />
95
                                        <span class="description">${image['description']}</span> 
96
                                        <span class="size">${image['size']}MB</span>
97
                                        <input class="radio" type="radio" name="image-id" id="${image['id']}" value="${image['id']}" checked="${repeat.image.start}" />
98
                                    </div>
99
                                </a>
100
						    </label> 
101
					    </li>
102
				    </ul>
103
                    <ul class="pane">
104
					    <!-- custom images -->
105
					    <li>
106
						    <label for="${image['id']}" tal:repeat="image images"> 
107
                                <a tal:condition="image['type']=='custom'">
108
                                    <div class="image">
109
                                        <img tal:attributes="src image['logo']" class="image-logo" /> <strong>${image['title']}</strong><br />
110
                                        <span class="description">${image['description']}</span> 
111
                                        <span class="size">${image['size']}MB</span>
112
                                        <input class="radio" type="radio" name="image-id" id="${image['id']}" value="${image['id']}" checked="${repeat.image.start}" />
113
                                    </div>
114
                                </a>
115
						    </label> 
116
					    </li>
117
                    </ul>
118
                </div>
119
				<button type="button" class="prev" id="cancel">Cancel</button>
120
				<button type="button" class="next right">Next &raquo;</button>
121
            </div>
122
			<div class="page">
123
				<h2>Select CPU, RAM and storage</h2>
124
                <ul>
125
                    <li>
126
                        <div class="instance-type">
127
                            <label for="small">
128
                                <input type="radio" id="small" name="instance-type" value="small" checked="true" />
129
                                <strong>small</strong>
130
                            </label>
131
                        </div>
132
                        <div class="instance-type">      
133
                            <label for="medium">
134
                                <input type="radio" id="medium" name="instance-type" value="medium" />                  
135
                                <strong>medium</strong>
136
                            </label>
137
                        </div>
138
                        <div class="instance-type">
139
                            <label for="large">
140
                                <input type="radio" id="large" name="instance-type" value="large" />
141
                                <strong>large</strong>
142
                            </label>
143
                        </div>
144
                        <div class="instance-type">
145
                            <label for="custom">
146
                                <input type="radio" name="instance-type" id="custom" value="large" />
147
                                <strong>custom</strong>
148
                            </label>
149
                        </div>
150
                    </li>
151
                    <li>
152
			            <label><strong class="sliders">CPU (cores)</strong></label>
153
                        <input type="range" id="cpu" value="1" max="8" min="1" />
154
                    </li>
155
                    <li>
156
			            <label><strong class="sliders">RAM (MB)</strong></label>
157
                        <input type="range" id="ram" value="256" max="2048" min="256" step="256" />
158
                    </li>
159
                    <li>
160
		                <label><strong class="sliders">Storage (GB)</strong></label>
161
                        <input type="range" id="storage" value="5" step="1" max="100" min="2" />
162
                    </li>
163
                    <li>
164
                        <div class="cost">
165
                            Cost per hour for this VM: 20 credits | Credits currently in account: 10.000
166
                        </div>
167
                    </li>
168
                </ul>
169
				<button type="button" class="prev">&laquo; Back</button>
170
				<button type="button" class="next right">Next &raquo;</button>
171
            </div>
172
			<div class="page">
173
				<h2>Confirm your settings</h2>
174
                <ul>
175
                    <li class="required">
176
                        <label>
177
                            <strong></strong> Instance name<br />
178
                            <input type="text" class="text" name="instance_name" value="My Ubuntu 10.04 x86_64 server"/>
179
                        </label>
180
                    </li>
181
                    <li>
182
                        <strong>Image:</strong> <span>Ubuntu 10.04 x86_64 server</span>
183
                    </li>
184
                    <li>
185
                        <strong>CPU:</strong> <span>2 cores</span>
186
                    </li>
187
                    <li>
188
                        <strong>RAM:</strong> <span>1024MB</span>
189
                    </li>
190
                    <li>
191
                        <strong>Storage:</strong> <span>10GB</span>
192
                    </li>
193
                    <li>
194
                        <strong>Cost per hour:</strong> <span>20 credits</span>
195
                    </li>
196
                    <li>
197
                        <strong>Remaining credits:</strong> <span>10.000</span>
198
                    </li>
199
                </ul>
200
				<button type="button" class="prev">&laquo; Back</button>
201
				<button type="button" class="next right" id="start">Create VM</button>        
202
            </div>
203
		</div>
204
	</div>
205
</form>
206

  
207
<div class="modal" id="misc">
208
    <h3>Your VM is being created!</h3>
209
    <p>Your password is:<strong> sdeEFre</strong></p>
210
    <p>Please copy this! Without it you can not connect to your VM.</p>
211
</div>
212

  
213
<script>
214
// <![CDATA[ 
215

  
216
$("#list").click(function(event){
217
    $("div#instancesview").load($("#list").attr("href"));
218
    return false;
219
});
220

  
221
$("ul.tabs").tabs("div.panes ul");
222

  
223
$(":range").rangeinput();
224

  
225
function disableSliders() {
226
    $("#cpu").attr('disabled',true);
227
    $("#ram").attr('disabled',true);
228
    $("#storage").attr('disabled',true);
229
}
230

  
231
$("#custom").click(function(event){
232
    $("#cpu").attr('disabled',false);
233
    $("#ram").attr('disabled',false);
234
    $("#storage").attr('disabled',false);
235
    $("strong.sliders").style = 'color: #778899;';
236
});
237

  
238
$("#small").click(function(event){
239
    $("#cpu").data('rangeinput').setValue(1);
240
    $("#ram").data('rangeinput').setValue(256);
241
    $("#storage").data('rangeinput').setValue(5);
242
});
243

  
244
$("#medium").click(function(event){
245
    $("#cpu").data('rangeinput').setValue(4);
246
    $("#ram").data('rangeinput').setValue(1024);
247
    $("#storage").data('rangeinput').setValue(30);
248
});
249

  
250
$("#large").click(function(event){
251
    $("#cpu").data('rangeinput').setValue(8);
252
    $("#ram").data('rangeinput').setValue(4096);
253
    $("#storage").data('rangeinput').setValue(80);
254
});
255

  
256
$("#cancel").click(function(event){
257
    $("a#create[rel]").overlay().close();
258
});
259

  
260
$("#start").click(function(event){
261
    $("a#create[rel]").overlay().close();
262

  
263
    var triggers = $("div#misc").overlay({
264
	    // some mask tweaks suitable for modal dialogs
265
	    mask: {
266
		    color: '#ebecff',
267
		    opacity: '0.9'
268
	    },
269
        top: 'center',
270
        load: 'true',
271
	    closeOnClick: 'false'  
272
    });
273
});
274

  
275
$("a#create").click(function(event){
276
    $("#wizard").scrollable().begin();
277
});
278

  
279
$("#cpu").change(function(event){
280
    $("#custom").click();
281
});
282

  
283
$("#ram").change(function(event){
284
    $("#custom").click();
285
});
286

  
287
$("#storage").change(function(event){
288
    $("#custom").click();
289
});
290

  
291
$(function() { 
292
    $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%'});
293

  
294
});
295

  
296
$(function() {
297
    var root = $("#wizard").scrollable();
298

  
299
    // some variables that we need
300
    var api = root.scrollable();
301

  
302
    // rangeinput with default configuration
303
    // validation logic is done inside the onBeforeSeek callback
304
    api.onBeforeSeek(function(event, i) {
305
	    // we are going 1 step backwards so no need for validation
306
	    if (api.getIndex() < i) {
307
             // 1. get current page
308
		     var page = root.find(".page").eq(api.getIndex()),
309
			 // 2. .. and all required fields inside the page
310
			 inputs = page.find(".required :input").removeClass("error"),
311
			 // 3. .. which are empty
312
			 empty = inputs.filter(function() {
313
				return $(this).val().replace(/\s*/g, '') == '';
314
			 });
315
		     // if there are empty fields, then
316
		    if (empty.length) {
317
			    // add a CSS class name "error" for empty & required fields
318
			    empty.addClass("error");
319
			    // cancel seeking of the scrollable by returning false
320
			    return false;
321
		    // everything is good
322
		    } 
323
	    }
324
	    // update status bar
325
	    $("#status li").removeClass("active").eq(i).addClass("active");
326
    });
327

  
328
    // if tab is pressed on the next button seek to next page
329
    root.find("button.next").keydown(function(e) {
330
	    if (e.keyCode == 9) {
331
		    // seeks to next tab by executing our validation routine
332
		    api.next();
333
		    e.preventDefault();
334
	    }
335
    });
336
// ]]>
337
});
338
</script>
339

  
b/ui/templates/disks.html
1
disks
/dev/null
1
disks
b/ui/templates/home.html
1
<!DOCTYPE html>
2

  
3
<head>
4
	<title>{{ project }}</title>
5
	<!-- include the Tools -->
6
	<script src="static/jquery.tools.min.js"></script>
7
	<link rel="stylesheet" type="text/css" href="static/alt-main.css"/>	
8
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css' />
9

  
10
</head>
11

  
12
<body>
13
    <div id="wrapper">
14
        <div id='user'><a href="#">username</a> &nbsp;|&nbsp; <a href="#">settings</a></div>
15
        <div id='nefo'><a href="/" class="logo"><img src="static/nefo.png"/></a></div>
16
        <div id="header">
17
            <div id="about">Greek Research and Technology Network - Cloud management web interface</div>
18
            <a href="/" class="logo">
19
                <h1>{{ project }}</h1>
20
            </a>
21
        </div>
22
        <!-- tabs -->
23
        <ul class="css-tabs">
24
	        <li><a href="alt-instances" title="manage your virtual machines" id="instances">instances</a></li>
25
	        <li><a href="disks" title="manage your storage volumes" id="disks">disks</a></li>
26
	        <li><a href="images" title="manage boot images" id="images">images</a></li>
27
	        <li><a href="networks" title="configure networking" id="networks">networks</a></li>
28
        </ul>
29
        <div class="css-panes">
30
	        <div class="pane" style="display:block"></div>
31
	        <div class="pane"></div>
32
	        <div class="pane"></div>
33
	        <div class="pane"></div>
34
        </div>
35
    </div>
36
    <!-- activate tabs with JavaScript -->
37
    <script>
38
		$(function() {
39
            if ($("link").attr("href") == "static/alt-main.css") {
40
			    $('ul.css-tabs li').hover(function(){
41
				    $(this).find('a').animate({top:'-3px'},{queue:false,duration:150});
42
			    }, function(){
43
				    $(this).find('a').animate({top:'0px'},{queue:false,duration:150});
44
			    });
45
            }
46
		});
47
        $(function() {
48
	        $("ul.css-tabs").tabs("div.css-panes div.pane", {	
49
		        effect: 'ajax',
50
		        onBeforeClick: function(event, i) {
51
			        // get the pane to be opened
52
			        var pane = this.getPanes().eq(i);
53

  
54
			        // load it with a page specified in the tab's href attribute
55
			        pane.load(this.getTabs().eq(i).attr("href"));
56
		        }
57
	        });
58
        });
59
        $("ul.css-tabs a").tooltip({effect: 'fade', predelay: 1000, delay: 2, position: 'top center', opacity: 0.8});
60
    </script>
61
</body>
62
</html>
63

  
/dev/null
1
<!DOCTYPE html>
2
<html xmlns:tal="http://xml.zope.org/namespaces/tal">
3

  
4
<head>
5
	<title>${context['project']}</title>
6
	<!-- include the Tools -->
7
	<script src="static/jquery.tools.min.js"></script>
8
	<link rel="stylesheet" type="text/css" href="static/alt-main.css"/>	
9
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css' />
10

  
11
</head>
12

  
13
<body>
14
    <div id="wrapper">
15
        <div id='user'><a href="#">username</a> &nbsp;|&nbsp; <a href="#">settings</a></div>
16
        <div id='nefo'><a href="/" class="logo"><img src="static/nefo.png"/></a></div>
17
        <div id="header">
18
            <div id="about">Greek Research and Technology Network - Cloud management web interface</div>
19
            <a href="/" class="logo">
20
                <h1>${context['project']}</h1>
21
            </a>
22
        </div>
23
        <!-- tabs -->
24
        <ul class="css-tabs">
25
	        <li><a href="alt-instances" title="manage your virtual machines" id="instances">instances</a></li>
26
	        <li><a href="disks" title="manage your storage volumes" id="disks">disks</a></li>
27
	        <li><a href="images" title="manage boot images" id="images">images</a></li>
28
	        <li><a href="networks" title="configure networking" id="networks">networks</a></li>
29
        </ul>
30
        <div class="css-panes">
31
	        <div class="pane" style="display:block"></div>
32
	        <div class="pane"></div>
33
	        <div class="pane"></div>
34
	        <div class="pane"></div>
35
        </div>
36
    </div>
37
    <!-- activate tabs with JavaScript -->
38
    <script>
39
		$(function() {
40
            if ($("link").attr("href") == "static/alt-main.css") {
41
			    $('ul.css-tabs li').hover(function(){
42
				    $(this).find('a').animate({top:'-3px'},{queue:false,duration:150});
43
			    }, function(){
44
				    $(this).find('a').animate({top:'0px'},{queue:false,duration:150});
45
			    });
46
            }
47
		});
48
        $(function() {
49
	        $("ul.css-tabs").tabs("div.css-panes div.pane", {	
50
		        effect: 'ajax',
51
		        onBeforeClick: function(event, i) {
52
			        // get the pane to be opened
53
			        var pane = this.getPanes().eq(i);
54

  
55
			        // load it with a page specified in the tab's href attribute
56
			        pane.load(this.getTabs().eq(i).attr("href"));
57
		        }
58
	        });
59
        });
60
        $("ul.css-tabs a").tooltip({effect: 'fade', predelay: 1000, delay: 2, position: 'top center', opacity: 0.8});
61
    </script>
62
</body>
63
</html>
64

  
b/ui/templates/images.html
1
images
/dev/null
1
images
/dev/null
1
test
b/ui/templates/instances.html
1
<a id="create" rel="#wizard" href="#">Create New +</a>
2

  
3
<div id="instancesview" class="standard">
4
    <a id="list" href="/instances/list">list view</a>
5
    {% for node in nodes %}
6
        {% if node.state == '3' %}        
7
            <div class="instance running">
8
                <div class="actions">
9
                    <a href="#" class="action">reboot</a>
10
                    <a href="#" class="action">shutdown</a>
11
                    <a href="#" class="more">more &hellip;</a>
12
                </div>
13
                <div class="state">
14
                    <div>Running</div>
15
                    <div class="indicator" />
16
                    <div class="indicator" />
17
                    <div class="indicator" />
18
                    <div class="indicator" />
19
                    <div class="uptime">24 days uptime</div>
20
                </div>
21
                <img src="static/server.png" />
22
                <a href="#" class="name">
23
                    <h3><span>{{ node.name }}</span><span class="rename">rename</span></h3>
24
                </a>
25
                <a href="#" class="ip">
26
                    <h5><span>{{ node.public_ip }}</span><span class="configure">configure networking</span></h5>
27
                </a>
28
                <a href="#" class="storage">
29
                    <h5>34GB of total storage in 3 volumes <span class="configure">configure storage</span></h5>
30
                </a>
31
                </div>
32
            </div>
33
        {% endif %}
34
    {% endfor %}
35
</div>
36

  
37
<!-- the form -->
38
<form action="#">
39
	<!-- scrollable root element -->
40
	<div class="modal" id="wizard">
41
		<!-- status bar -->
42
		<ul id="status">
43
			<li class="active"><strong>1.</strong> Select image</li>
44
			<li><strong>2.</strong> Instance type</li>
45
			<li><strong>3.</strong> Review</li>
46
		</ul>
47
		<!-- scrollable items -->
48
		<div class="items">
49
			<!-- pages -->
50
			<div class="page">
51
                <h2>
52
					<strong>Step 1: </strong> Select image
53
					<em>Select an OS image to boot from</em>
54
				</h2>
55
                <ul class="tabs">
56
                    <li><a href="#">standard</a></li>
57
                    <li><a href="#">custom</a></li>
58
                </ul>
59
                <div class="panes" tal:define="images context['images']">
60
                    <ul class="pane">
61
					    <!-- standard images -->
62
					    <li>
63
						    <label for="${image['id']}" tal:repeat="image images"> 
64
                                <a tal:condition="image['type']=='standard'">
65
                                    <div class="image">
66
                                        <img tal:attributes="src image['logo']" class="image-logo" /> <strong>${image['title']}</strong><br />
67
                                        <span class="description">${image['description']}</span> 
68
                                        <span class="size">${image['size']}MB</span>
69
                                        <input class="radio" type="radio" name="image-id" id="${image['id']}" value="${image['id']}" checked="${repeat.image.start}" />
70
                                    </div>
71
                                </a>
72
						    </label> 
73
					    </li>
74
				    </ul>
75
                    <ul class="pane">
76
					    <!-- custom images -->
77
					    <li>
78
						    <label for="${image['id']}" tal:repeat="image images"> 
79
                                <a tal:condition="image['type']=='custom'">
80
                                    <div class="image">
81
                                        <img tal:attributes="src image['logo']" class="image-logo" /> <strong>${image['title']}</strong><br />
82
                                        <span class="description">${image['description']}</span> 
83
                                        <span class="size">${image['size']}MB</span>
84
                                        <input class="radio" type="radio" name="image-id" id="${image['id']}" value="${image['id']}" checked="${repeat.image.start}" />
85
                                    </div>
86
                                </a>
87
						    </label> 
88
					    </li>
89
                    </ul>
90
                </div>
91
				<button type="button" class="prev" id="cancel">Cancel</button>
92
				<button type="button" class="next right">Next &raquo;</button>
93
            </div>
94
			<div class="page">
95
				<h2>
96
					<strong>Step 2: </strong> Instance type <b></b>
97
					<em>Select CPU cores, RAM and storage space for your instance</em>
98
				</h2>
99
                <ul>
100
                    <li>
101
                        <div class="instance-type">
102
                            <label for="small">
103
                                <input type="radio" id="small" name="instance-type" value="small" checked="true" />
104
                                <strong>small</strong>
105
                            </label>
106
                        </div>
107
                        <div class="instance-type">      
108
                            <label for="medium">
109
                                <input type="radio" id="medium" name="instance-type" value="medium" />                  
110
                                <strong>medium</strong>
111
                            </label>
112
                        </div>
113
                        <div class="instance-type">
114
                            <label for="large">
115
                                <input type="radio" id="large" name="instance-type" value="large" />
116
                                <strong>large</strong>
117
                            </label>
118
                        </div>
119
                        <div class="instance-type">
120
                            <label for="custom">
121
                                <input type="radio" name="instance-type" id="custom" value="large" />
122
                                <strong>custom</strong>
123
                            </label>
124
                        </div>
125
                    </li>
126
                    <li>
127
			            <label><strong class="sliders">CPU (cores)</strong></label>
128
                        <input type="range" id="cpu" value="1" max="8" min="1" />
129
                    </li>
130
                    <li>
131
			            <label><strong class="sliders">RAM (MB)</strong></label>
132
                        <input type="range" id="ram" value="256" max="2048" min="256" step="256" />
133
                    </li>
134
                    <li>
135
		                <label><strong class="sliders">Storage (GB)</strong></label>
136
                        <input type="range" id="storage" value="5" step="1" max="100" min="2" />
137
                    </li>
138
                    <li>
139
                        <div class="cost">
140
                            Cost per hour for this VM: 20 credits | Credits currently in account: 10.000
141
                        </div>
142
                    </li>
143
                </ul>
144
				<button type="button" class="prev">&laquo; Back</button>
145
				<button type="button" class="next right">Next &raquo;</button>
146
            </div>
147
			<div class="page">
148
				<h2>
149
					<strong>Step 3: </strong> Review <b></b>
150
					<em>Confirm the settings below and create your new instance</em>
151
				</h2>
152
                <ul>
153
                    <li class="required">
154
                        <label>
155
                            <strong></strong> Instance name <span>*</span><br />
156
                            <input type="text" class="text" name="instance_name" value="My Ubuntu 10.04 x86_64 server"/>
157
                        </label>
158
                    </li>
159
                    <li>
160
                        <strong>Image:</strong> <span>Ubuntu 10.04 x86_64 server</span>
161
                    </li>
162
                    <li>
163
                        <strong>CPU:</strong> <span>2 cores</span>
164
                    </li>
165
                    <li>
166
                        <strong>RAM:</strong> <span>1024MB</span>
167
                    </li>
168
                    <li>
169
                        <strong>Storage:</strong> <span>10GB</span>
170
                    </li>
171
                    <li>
172
                        <strong>Cost per hour:</strong> <span>20 credits</span>
173
                    </li>
174
                    <li>
175
                        <strong>Remaining credits:</strong> <span>10.000</span>
176
                    </li>
177
                </ul>
178
				<button type="button" class="prev">&laquo; Back</button>
179
				<button type="button" class="next right" id="start">Create VM</button>        
180
            </div>
181
		</div>
182
	</div>
183
</form>
184

  
185
<div class="modal" id="misc">
186
    <h3>Your VM is being created!</h3>
187
    <p>Your password is:<strong> sdeEFre</strong></p>
188
    <p>Please copy this! Without it you can not connect to your VM.</p>
189
</div>
190

  
191
<script>
192
// <![CDATA[ 
193

  
194
$("#list").click(function(event){
195
    $("div#instancesview").load($("#list").attr("href"));
196
    return false;
197
});
198

  
199
$("ul.tabs").tabs("div.panes ul");
200

  
201
$(":range").rangeinput();
202

  
203
function disableSliders() {
204
    $("#cpu").attr('disabled',true);
205
    $("#ram").attr('disabled',true);
206
    $("#storage").attr('disabled',true);
207
}
208

  
209
$("#custom").click(function(event){
210
    $("#cpu").attr('disabled',false);
211
    $("#ram").attr('disabled',false);
212
    $("#storage").attr('disabled',false);
213
    $("strong.sliders").style = 'color: #778899;';
214
});
215

  
216
$("#small").click(function(event){
217
    $("#cpu").data('rangeinput').setValue(1);
218
    $("#ram").data('rangeinput').setValue(256);
219
    $("#storage").data('rangeinput').setValue(5);
220
});
221

  
222
$("#medium").click(function(event){
223
    $("#cpu").data('rangeinput').setValue(4);
224
    $("#ram").data('rangeinput').setValue(1024);
225
    $("#storage").data('rangeinput').setValue(30);
226
});
227

  
228
$("#large").click(function(event){
229
    $("#cpu").data('rangeinput').setValue(8);
230
    $("#ram").data('rangeinput').setValue(4096);
231
    $("#storage").data('rangeinput').setValue(80);
232
});
233

  
234
$("#cancel").click(function(event){
235
    $("a#create[rel]").overlay().close();
236
});
237

  
238
$("#start").click(function(event){
239
    $("a#create[rel]").overlay().close();
240

  
241
    var triggers = $("div#misc").overlay({
242
	    // some mask tweaks suitable for modal dialogs
243
	    mask: {
244
		    color: '#ebecff',
245
		    opacity: '0.9'
246
	    },
247
        top: 'center',
248
        load: 'true',
249
	    closeOnClick: 'false'  
250
    });
251
});
252

  
253
$("a#create").click(function(event){
254
    $("#wizard").scrollable().begin();
255
});
256

  
257
$("#cpu").change(function(event){
258
    $("#custom").click();
259
});
260

  
261
$("#ram").change(function(event){
262
    $("#custom").click();
263
});
264

  
265
$("#storage").change(function(event){
266
    $("#custom").click();
267
});
268

  
269
$(function() { 
270
    $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%'});
271

  
272
});
273

  
274
$(function() {
275
    var root = $("#wizard").scrollable();
276

  
277
    // some variables that we need
278
    var api = root.scrollable();
279

  
280
    // rangeinput with default configuration
281
    // validation logic is done inside the onBeforeSeek callback
282
    api.onBeforeSeek(function(event, i) {
283
	    // we are going 1 step backwards so no need for validation
284
	    if (api.getIndex() < i) {
285
             // 1. get current page
286
		     var page = root.find(".page").eq(api.getIndex()),
287
			 // 2. .. and all required fields inside the page
288
			 inputs = page.find(".required :input").removeClass("error"),
289
			 // 3. .. which are empty
290
			 empty = inputs.filter(function() {
291
				return $(this).val().replace(/\s*/g, '') == '';
292
			 });
293
		     // if there are empty fields, then
294
		    if (empty.length) {
295
			    // add a CSS class name "error" for empty & required fields
296
			    empty.addClass("error");
297
			    // cancel seeking of the scrollable by returning false
298
			    return false;
299
		    // everything is good
300
		    } 
301
	    }
302
	    // update status bar
303
	    $("#status li").removeClass("active").eq(i).addClass("active");
304
    });
305

  
306
    // if tab is pressed on the next button seek to next page
307
    root.find("button.next").keydown(function(e) {
308
	    if (e.keyCode == 9) {
309
		    // seeks to next tab by executing our validation routine
310
		    api.next();
311
		    e.preventDefault();
312
	    }
313
    });
314
// ]]>
315
});
316
</script>
317

  
/dev/null
1
<a id="create" rel="#wizard" href="#">Create New +</a>
2

  
3
<div id="instancesview" class="standard" tal:define="nodes context['nodes']">
4
    <a id="list" href="/instances/list">list view</a>
5
    <div class="instance running" tal:repeat="node nodes">
6
        <div tal:condition="node['state']=='3'" tal:omit-tag="">
7

  
8
        <div class="actions">
9
            <a href="#" class="action">reboot</a>
10
            <a href="#" class="action">shutdown</a>
11
            <a href="#" class="more">more &hellip;</a>
12
        </div>
13
        
14
        <div class="state">
15
            <div>Running</div>
16
            <div class="indicator" />
17
            <div class="indicator" />
18
            <div class="indicator" />
19
            <div class="indicator" />
20
            <div class="uptime">24 days uptime</div>
21
        </div>
22

  
23
        <img src="static/server.png" />
24
        <a href="#" class="name">
25
            <h3> <span tal:replace="node['name']" /><span class="rename">rename</span></h3>
26
        </a>
27
        <a href="#" class="ip">
28
            <h5><span tal:replace="node['public_ip']" /><span class="configure">configure networking</span></h5>
29
        </a>
30
        <a href="#" class="storage">
31
            <h5>34GB of total storage in 3 volumes <span class="configure">configure storage</span></h5>
32
        </a>
33
        </div>
34
    </div>
35
</div>
36

  
37
<!-- the form -->
38
<form action="#">
39
	<!-- scrollable root element -->
40
	<div class="modal" id="wizard">
41
		<!-- status bar -->
42
		<ul id="status">
43
			<li class="active"><strong>1.</strong> Select image</li>
44
			<li><strong>2.</strong> Instance type</li>
45
			<li><strong>3.</strong> Review</li>
46
		</ul>
47
		<!-- scrollable items -->
48
		<div class="items">
49
			<!-- pages -->
50
			<div class="page">
51
                <h2>
52
					<strong>Step 1: </strong> Select image
53
					<em>Select an OS image to boot from</em>
54
				</h2>
55
                <ul class="tabs">
56
                    <li><a href="#">standard</a></li>
57
                    <li><a href="#">custom</a></li>
58
                </ul>
59
                <div class="panes" tal:define="images context['images']">
60
                    <ul class="pane">
61
					    <!-- standard images -->
62
					    <li>
63
						    <label for="${image['id']}" tal:repeat="image images"> 
64
                                <a tal:condition="image['type']=='standard'">
65
                                    <div class="image">
66
                                        <img tal:attributes="src image['logo']" class="image-logo" /> <strong>${image['title']}</strong><br />
67
                                        <span class="description">${image['description']}</span> 
68
                                        <span class="size">${image['size']}MB</span>
69
                                        <input class="radio" type="radio" name="image-id" id="${image['id']}" value="${image['id']}" checked="${repeat.image.start}" />
70
                                    </div>
71
                                </a>
72
						    </label> 
73
					    </li>
74
				    </ul>
75
                    <ul class="pane">
76
					    <!-- custom images -->
77
					    <li>
78
						    <label for="${image['id']}" tal:repeat="image images"> 
79
                                <a tal:condition="image['type']=='custom'">
80
                                    <div class="image">
81
                                        <img tal:attributes="src image['logo']" class="image-logo" /> <strong>${image['title']}</strong><br />
82
                                        <span class="description">${image['description']}</span> 
83
                                        <span class="size">${image['size']}MB</span>
84
                                        <input class="radio" type="radio" name="image-id" id="${image['id']}" value="${image['id']}" checked="${repeat.image.start}" />
85
                                    </div>
86
                                </a>
87
						    </label> 
88
					    </li>
89
                    </ul>
90
                </div>
91
				<button type="button" class="prev" id="cancel">Cancel</button>
92
				<button type="button" class="next right">Next &raquo;</button>
93
            </div>
94
			<div class="page">
95
				<h2>
96
					<strong>Step 2: </strong> Instance type <b></b>
97
					<em>Select CPU cores, RAM and storage space for your instance</em>
98
				</h2>
99
                <ul>
100
                    <li>
101
                        <div class="instance-type">
102
                            <label for="small">
103
                                <input type="radio" id="small" name="instance-type" value="small" checked="true" />
104
                                <strong>small</strong>
105
                            </label>
106
                        </div>
107
                        <div class="instance-type">      
108
                            <label for="medium">
109
                                <input type="radio" id="medium" name="instance-type" value="medium" />                  
110
                                <strong>medium</strong>
111
                            </label>
112
                        </div>
113
                        <div class="instance-type">
114
                            <label for="large">
115
                                <input type="radio" id="large" name="instance-type" value="large" />
116
                                <strong>large</strong>
117
                            </label>
118
                        </div>
119
                        <div class="instance-type">
120
                            <label for="custom">
121
                                <input type="radio" name="instance-type" id="custom" value="large" />
122
                                <strong>custom</strong>
123
                            </label>
124
                        </div>
125
                    </li>
126
                    <li>
127
			            <label><strong class="sliders">CPU (cores)</strong></label>
128
                        <input type="range" id="cpu" value="1" max="8" min="1" />
129
                    </li>
130
                    <li>
131
			            <label><strong class="sliders">RAM (MB)</strong></label>
132
                        <input type="range" id="ram" value="256" max="2048" min="256" step="256" />
133
                    </li>
134
                    <li>
135
		                <label><strong class="sliders">Storage (GB)</strong></label>
136
                        <input type="range" id="storage" value="5" step="1" max="100" min="2" />
137
                    </li>
138
                    <li>
139
                        <div class="cost">
140
                            Cost per hour for this VM: 20 credits | Credits currently in account: 10.000
141
                        </div>
142
                    </li>
143
                </ul>
144
				<button type="button" class="prev">&laquo; Back</button>
145
				<button type="button" class="next right">Next &raquo;</button>
146
            </div>
147
			<div class="page">
148
				<h2>
149
					<strong>Step 3: </strong> Review <b></b>
150
					<em>Confirm the settings below and create your new instance</em>
151
				</h2>
152
                <ul>
153
                    <li class="required">
154
                        <label>
155
                            <strong></strong> Instance name <span>*</span><br />
156
                            <input type="text" class="text" name="instance_name" value="My Ubuntu 10.04 x86_64 server"/>
157
                        </label>
158
                    </li>
159
                    <li>
160
                        <strong>Image:</strong> <span>Ubuntu 10.04 x86_64 server</span>
161
                    </li>
162
                    <li>
163
                        <strong>CPU:</strong> <span>2 cores</span>
164
                    </li>
165
                    <li>
166
                        <strong>RAM:</strong> <span>1024MB</span>
167
                    </li>
168
                    <li>
169
                        <strong>Storage:</strong> <span>10GB</span>
170
                    </li>
171
                    <li>
172
                        <strong>Cost per hour:</strong> <span>20 credits</span>
173
                    </li>
174
                    <li>
175
                        <strong>Remaining credits:</strong> <span>10.000</span>
176
                    </li>
177
                </ul>
178
				<button type="button" class="prev">&laquo; Back</button>
179
				<button type="button" class="next right" id="start">Create VM</button>        
180
            </div>
181
		</div>
182
	</div>
183
</form>
184

  
185
<div class="modal" id="misc">
186
    <h3>Your VM is being created!</h3>
187
    <p>Your password is:<strong> sdeEFre</strong></p>
188
    <p>Please copy this! Without it you can not connect to your VM.</p>
189
</div>
190

  
191
<script>
192
// <![CDATA[ 
193

  
194
$("#list").click(function(event){
195
    $("div#instancesview").load($("#list").attr("href"));
196
    return false;
197
});
198

  
199
$("ul.tabs").tabs("div.panes ul");
200

  
201
$(":range").rangeinput();
202

  
203
function disableSliders() {
204
    $("#cpu").attr('disabled',true);
205
    $("#ram").attr('disabled',true);
206
    $("#storage").attr('disabled',true);
207
}
208

  
209
$("#custom").click(function(event){
210
    $("#cpu").attr('disabled',false);
211
    $("#ram").attr('disabled',false);
212
    $("#storage").attr('disabled',false);
213
    $("strong.sliders").style = 'color: #778899;';
214
});
215

  
216
$("#small").click(function(event){
217
    $("#cpu").data('rangeinput').setValue(1);
218
    $("#ram").data('rangeinput').setValue(256);
219
    $("#storage").data('rangeinput').setValue(5);
220
});
221

  
222
$("#medium").click(function(event){
223
    $("#cpu").data('rangeinput').setValue(4);
224
    $("#ram").data('rangeinput').setValue(1024);
225
    $("#storage").data('rangeinput').setValue(30);
226
});
227

  
228
$("#large").click(function(event){
229
    $("#cpu").data('rangeinput').setValue(8);
230
    $("#ram").data('rangeinput').setValue(4096);
231
    $("#storage").data('rangeinput').setValue(80);
232
});
233

  
234
$("#cancel").click(function(event){
235
    $("a#create[rel]").overlay().close();
236
});
237

  
238
$("#start").click(function(event){
239
    $("a#create[rel]").overlay().close();
240

  
241
    var triggers = $("div#misc").overlay({
242
	    // some mask tweaks suitable for modal dialogs
243
	    mask: {
244
		    color: '#ebecff',
245
		    opacity: '0.9'
246
	    },
247
        top: 'center',
248
        load: 'true',
249
	    closeOnClick: 'false'  
250
    });
251
});
252

  
253
$("a#create").click(function(event){
254
    $("#wizard").scrollable().begin();
255
});
256

  
257
$("#cpu").change(function(event){
258
    $("#custom").click();
259
});
260

  
261
$("#ram").change(function(event){
262
    $("#custom").click();
263
});
264

  
265
$("#storage").change(function(event){
266
    $("#custom").click();
267
});
268

  
269
$(function() { 
270
    $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%'});
271

  
272
});
273

  
274
$(function() {
275
    var root = $("#wizard").scrollable();
276

  
277
    // some variables that we need
278
    var api = root.scrollable();
279

  
280
    // rangeinput with default configuration
281
    // validation logic is done inside the onBeforeSeek callback
282
    api.onBeforeSeek(function(event, i) {
283
	    // we are going 1 step backwards so no need for validation
284
	    if (api.getIndex() < i) {
285
             // 1. get current page
286
		     var page = root.find(".page").eq(api.getIndex()),
287
			 // 2. .. and all required fields inside the page
288
			 inputs = page.find(".required :input").removeClass("error"),
289
			 // 3. .. which are empty
290
			 empty = inputs.filter(function() {
... This diff was truncated because it exceeds the maximum size that can be displayed.

Also available in: Unified diff