Statistics
| Branch: | Tag: | Revision:

root / ui / src / synnefo / templates / instances.pt @ 5392ae34

History | View | Annotate | Download (9.3 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>
52
					<!-- image -->
53
					<li>
54
						<label for="${image['id']}" tal:repeat="image images">
55
                            <a>
56
                                <div class="image">
57
                                    <img tal:attributes="src image['logo']" class="image-logo" /> <strong>${image['title']}</strong><br />
58
                                    <span class="description">${image['description']}</span> 
59
                                    <span class="size">${image['size']}MB</span>
60
                                    <input class="radio" type="radio" name="image-id" id="${image['id']}" value="${image['id']}" checked="${repeat.image.start}" />
61
                                </div>
62
                            </a>
63
						</label>                            
64
					</li>
65
				</ul>
66
				<button type="button" class="prev" id="cancel">Cancel</button>
67
				<button type="button" class="next right">Next &raquo;</button>
68
            </div>
69
			<div class="page">
70
				<h2>
71
					<strong>Step 2: </strong> Instance type <b></b>
72
					<em>Select CPU cores, RAM and storage space for your instance</em>
73
				</h2>
74
                <ul>
75
                    <li>
76
                        <div class="instance-type">
77
                            <label for="small">
78
                                <input type="radio" id="small" name="instance-type" value="small" checked="true" />
79
                                <strong>small</strong>
80
                            </label>
81
                        </div>
82
                        <div class="instance-type">      
83
                            <label for="medium">
84
                                <input type="radio" id="medium" name="instance-type" value="medium" />                  
85
                                <strong>medium</strong>
86
                            </label>
87
                        </div>
88
                        <div class="instance-type">
89
                            <label for="large">
90
                                <input type="radio" id="large" name="instance-type" value="large" />
91
                                <strong>large</strong>
92

    
93
                            </label>
94
                        </div>
95
                        <div class="instance-type">
96
                            <label for="custom">
97
                                <input type="radio" name="instance-type" id="custom" value="large" />
98
                                <strong>custom</strong>
99

    
100
                            </label>
101
                        </div>
102
                    </li>
103
                    <li>
104
			            <label><strong class="sliders">CPU (cores)</strong></label>
105
                        <input type="range" id="cpu" value="1" max="8" min="1" />
106
                    </li>
107
                    <li>
108
			            <label><strong class="sliders">RAM (MB)</strong></label>
109
                        <input type="range" id="ram" value="256" max="2048" min="256" step="256" />
110
                    </li>
111
                    <li>
112
		                <label><strong class="sliders">Storage (GB)</strong></label>
113
                        <input type="range" id="storage" value="5" step="1" max="100" min="2" />
114
                    </li>
115
                    <li>
116
                        <div class="cost">
117
                            Cost per hour for this VM: 20 credits | Credits currently in account: 10.000
118
                        </div>
119
                    </li>
120
                </ul>
121
				<button type="button" class="prev">&laquo; Back</button>
122
				<button type="button" class="next right">Next &raquo;</button>
123
            </div>
124
			<div class="page">
125
				<h2>
126
					<strong>Step 3: </strong> Start VM <b></b>
127
					<em>Confirm the settings below and start your new instance</em>
128
				</h2>
129
                <ul>
130
                    <li class="required">
131
                        <label>
132
                            <strong></strong> Instance name <span>*</span><br />
133
                            <input type="text" class="text" name="instance_name" value="My Ubuntu 10.04 x86_64 server"/>
134
                        </label>
135
                    </li>
136
                    <li>
137
                        <strong>Image:</strong> <span>Ubuntu 10.04 x86_64 server</span>
138
                    </li>
139
                    <li>
140
                        <strong>CPU:</strong> <span>2 cores</span>
141
                    </li>
142
                    <li>
143
                        <strong>RAM:</strong> <span>1024MB</span>
144
                    </li>
145
                    <li>
146
                        <strong>Storage:</strong> <span>10GB</span>
147
                    </li>
148
                    <li>
149
                        <strong>Cost per hour:</strong> <span>20 credits</span>
150
                    </li>
151
                    <li>
152
                        <strong>Remaining credits:</strong> <span>10.000</span>
153
                    </li>
154
                </ul>
155
				<button type="button" class="prev">&laquo; Back</button>
156
				<button type="button" class="next right" id="start">Start VM</button>        
157
            </div>
158
		</div>
159
	</div>
160
</form>
161

    
162
<script>
163
// <![CDATA[ 
164

    
165
$(":range").rangeinput();
166

    
167
function disableSliders() {
168
    $("#cpu").attr('disabled',true);
169
    $("#ram").attr('disabled',true);
170
    $("#storage").attr('disabled',true);
171
}
172

    
173
$("#custom").click(function(event){
174
    $("#cpu").attr('disabled',false);
175
    $("#ram").attr('disabled',false);
176
    $("#storage").attr('disabled',false);
177
    $("strong.sliders").style = 'color: #778899;';
178
});
179

    
180
$("#small").click(function(event){
181
    $("#cpu").data('rangeinput').setValue(1);
182
    $("#ram").data('rangeinput').setValue(256);
183
    $("#storage").data('rangeinput').setValue(5);
184
    // disableSliders();
185
});
186

    
187
$("#medium").click(function(event){
188
    $("#cpu").data('rangeinput').setValue(4);
189
    $("#ram").data('rangeinput').setValue(1024);
190
    $("#storage").data('rangeinput').setValue(30);
191
    // disableSliders();
192
});
193

    
194
$("#large").click(function(event){
195
    $("#cpu").data('rangeinput').setValue(8);
196
    $("#ram").data('rangeinput').setValue(4096);
197
    $("#storage").data('rangeinput').setValue(80);
198
    // disableSliders();
199
});
200

    
201
$("#cancel").click(function(event){
202
    $("a#create[rel]").overlay().close();
203
});
204

    
205
$("#start").click(function(event){
206
    $("a#create[rel]").overlay().close();
207
});
208

    
209
$("a#create").click(function(event){
210
    $("#wizard").scrollable().begin();
211
});
212

    
213
$("#cpu").change(function(event){
214
    $("#custom").click();
215
});
216

    
217
$("#ram").change(function(event){
218
    $("#custom").click();
219
});
220

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

    
225
$(function() { 
226
    $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%'});
227
});
228

    
229
$(function() {
230
    var root = $("#wizard").scrollable();
231

    
232
    // some variables that we need
233
    var api = root.scrollable();
234

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

    
261
    // if tab is pressed on the next button seek to next page
262
    root.find("button.next").keydown(function(e) {
263
	    if (e.keyCode == 9) {
264
		    // seeks to next tab by executing our validation routine
265
		    api.next();
266
		    e.preventDefault();
267
	    }
268
    });
269
// ]]>
270
});
271
</script>
272