Statistics
| Branch: | Tag: | Revision:

root / ui / src / synnefo / templates / instances.pt @ 5ce739d1

History | View | Annotate | Download (10 kB)

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

    
3
<div id="instancesview">
4
    <a id="list" href="/instances/list">list view</a>
5
    <div class="instance running" tal:repeat="node nodes">
6

    
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 class="uptime">24 days uptime</div>
20
        </div>
21

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

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

    
169
<script>
170
// <![CDATA[ 
171

    
172
$("#list").click(function(event){
173
    $("div#instancesview").load($("#list").attr("href"));
174
    return false;
175
});
176

    
177
$("ul.tabs").tabs("div.panes ul");
178

    
179
$(":range").rangeinput();
180

    
181
function disableSliders() {
182
    $("#cpu").attr('disabled',true);
183
    $("#ram").attr('disabled',true);
184
    $("#storage").attr('disabled',true);
185
}
186

    
187
$("#custom").click(function(event){
188
    $("#cpu").attr('disabled',false);
189
    $("#ram").attr('disabled',false);
190
    $("#storage").attr('disabled',false);
191
    $("strong.sliders").style = 'color: #778899;';
192
});
193

    
194
$("#small").click(function(event){
195
    $("#cpu").data('rangeinput').setValue(1);
196
    $("#ram").data('rangeinput').setValue(256);
197
    $("#storage").data('rangeinput').setValue(5);
198
    // disableSliders();
199
});
200

    
201
$("#medium").click(function(event){
202
    $("#cpu").data('rangeinput').setValue(4);
203
    $("#ram").data('rangeinput').setValue(1024);
204
    $("#storage").data('rangeinput').setValue(30);
205
    // disableSliders();
206
});
207

    
208
$("#large").click(function(event){
209
    $("#cpu").data('rangeinput').setValue(8);
210
    $("#ram").data('rangeinput').setValue(4096);
211
    $("#storage").data('rangeinput').setValue(80);
212
    // disableSliders();
213
});
214

    
215
$("#cancel").click(function(event){
216
    $("a#create[rel]").overlay().close();
217
});
218

    
219
$("#start").click(function(event){
220
    $("a#create[rel]").overlay().close();
221
});
222

    
223
$("a#create").click(function(event){
224
    $("#wizard").scrollable().begin();
225
});
226

    
227
$("#cpu").change(function(event){
228
    $("#custom").click();
229
});
230

    
231
$("#ram").change(function(event){
232
    $("#custom").click();
233
});
234

    
235
$("#storage").change(function(event){
236
    $("#custom").click();
237
});
238

    
239
$(function() { 
240
    $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%'});
241
});
242

    
243
$(function() {
244
    var root = $("#wizard").scrollable();
245

    
246
    // some variables that we need
247
    var api = root.scrollable();
248

    
249
    // rangeinput with default configuration
250
    // validation logic is done inside the onBeforeSeek callback
251
    api.onBeforeSeek(function(event, i) {
252
	    // we are going 1 step backwards so no need for validation
253
	    if (api.getIndex() < i) {
254
             // 1. get current page
255
		     var page = root.find(".page").eq(api.getIndex()),
256
			 // 2. .. and all required fields inside the page
257
			 inputs = page.find(".required :input").removeClass("error"),
258
			 // 3. .. which are empty
259
			 empty = inputs.filter(function() {
260
				return $(this).val().replace(/\s*/g, '') == '';
261
			 });
262
		     // if there are empty fields, then
263
		    if (empty.length) {
264
			    // add a CSS class name "error" for empty & required fields
265
			    empty.addClass("error");
266
			    // cancel seeking of the scrollable by returning false
267
			    return false;
268
		    // everything is good
269
		    } 
270
	    }
271
	    // update status bar
272
	    $("#status li").removeClass("active").eq(i).addClass("active");
273
    });
274

    
275
    // if tab is pressed on the next button seek to next page
276
    root.find("button.next").keydown(function(e) {
277
	    if (e.keyCode == 9) {
278
		    // seeks to next tab by executing our validation routine
279
		    api.next();
280
		    e.preventDefault();
281
	    }
282
    });
283
// ]]>
284
});
285
</script>
286