Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (9.2 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="instance-type">Cost:</div>
117
                    </li>
118
                    <li>
119
                        <div class="instance-type">Remaining:</div>
120
                    </li>
121
                </ul>
122
				<button type="button" class="prev">&laquo; Back</button>
123
				<button type="button" class="next right">Next &raquo;</button>
124
            </div>
125
			<div class="page">
126
				<h2>
127
					<strong>Step 3: </strong> Start VM <b></b>
128
					<em>Confirm the settings below and start your new instance</em>
129
				</h2>
130
                <ul>
131
                    <li class="required">
132
                        <label>
133
                            <strong></strong> Instance name <span>*</span><br />
134
                            <input type="text" class="text" name="instance_name" value="My Ubuntu 10.04 x86_64 server"/>
135
                        </label>
136
                    </li>
137
                    <li>
138
                        <strong>Image:</strong> <span>Ubuntu 10.04 x86_64 server</span>
139
                    </li>
140
                    <li>
141
                        <strong>CPU:</strong> <span>2 cores</span>
142
                    </li>
143
                    <li>
144
                        <strong>RAM:</strong> <span>1024MB</span>
145
                    </li>
146
                    <li>
147
                        <strong>Storage:</strong> <span>10GB</span>
148
                    </li>
149
                    <li>
150
                        <strong>Cost:</strong> <span>100 credits, 300 remaining</span>
151
                    </li>
152
                </ul>
153
				<button type="button" class="prev">&laquo; Back</button>
154
				<button type="button" class="next right" id="start">Start VM</button>        
155
            </div>
156
		</div>
157
	</div>
158
</form>
159

    
160
<script>
161
// <![CDATA[ 
162

    
163
$(":range").rangeinput();
164

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

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

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

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

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

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

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

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

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

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

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

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

    
227
$(function() {
228
    var root = $("#wizard").scrollable();
229

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

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

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