Statistics
| Branch: | Tag: | Revision:

root / ui / src / synnefo / templates / instances.pt @ c3a16d9b

History | View | Annotate | Download (9.7 kB)

1

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

    
4
<div class="instance running" tal:repeat="node nodes">
5

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

    
21
    <img src="static/server.png" />
22
    <a href="#" class="name">
23
        <h3> <span tal:replace="node['name']" /><span class="rename">(rename)</span></h3>
24
    </a>
25
    <a href="#" class="ip">
26
        <h5><span tal:replace="node['public_ip']" /><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

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

    
167
<script>
168
// <![CDATA[ 
169

    
170
$("ul.tabs").tabs("div.panes ul");
171

    
172
$(":range").rangeinput();
173

    
174
function disableSliders() {
175
    $("#cpu").attr('disabled',true);
176
    $("#ram").attr('disabled',true);
177
    $("#storage").attr('disabled',true);
178
}
179

    
180
$("#custom").click(function(event){
181
    $("#cpu").attr('disabled',false);
182
    $("#ram").attr('disabled',false);
183
    $("#storage").attr('disabled',false);
184
    $("strong.sliders").style = 'color: #778899;';
185
});
186

    
187
$("#small").click(function(event){
188
    $("#cpu").data('rangeinput').setValue(1);
189
    $("#ram").data('rangeinput').setValue(256);
190
    $("#storage").data('rangeinput').setValue(5);
191
    // disableSliders();
192
});
193

    
194
$("#medium").click(function(event){
195
    $("#cpu").data('rangeinput').setValue(4);
196
    $("#ram").data('rangeinput').setValue(1024);
197
    $("#storage").data('rangeinput').setValue(30);
198
    // disableSliders();
199
});
200

    
201
$("#large").click(function(event){
202
    $("#cpu").data('rangeinput').setValue(8);
203
    $("#ram").data('rangeinput').setValue(4096);
204
    $("#storage").data('rangeinput').setValue(80);
205
    // disableSliders();
206
});
207

    
208
$("#cancel").click(function(event){
209
    $("a#create[rel]").overlay().close();
210
});
211

    
212
$("#start").click(function(event){
213
    $("a#create[rel]").overlay().close();
214
});
215

    
216
$("a#create").click(function(event){
217
    $("#wizard").scrollable().begin();
218
});
219

    
220
$("#cpu").change(function(event){
221
    $("#custom").click();
222
});
223

    
224
$("#ram").change(function(event){
225
    $("#custom").click();
226
});
227

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

    
232
$(function() { 
233
    $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%'});
234
});
235

    
236
$(function() {
237
    var root = $("#wizard").scrollable();
238

    
239
    // some variables that we need
240
    var api = root.scrollable();
241

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

    
268
    // if tab is pressed on the next button seek to next page
269
    root.find("button.next").keydown(function(e) {
270
	    if (e.keyCode == 9) {
271
		    // seeks to next tab by executing our validation routine
272
		    api.next();
273
		    e.preventDefault();
274
	    }
275
    });
276
// ]]>
277
});
278
</script>
279