Statistics
| Branch: | Tag: | Revision:

root / ui / src / synnefo / templates / instances.pt @ 0c43c024

History | View | Annotate | Download (9 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
                </ul>
116
				<button type="button" class="prev">&laquo; Back</button>
117
				<button type="button" class="next right">Next &raquo;</button>
118

    
119
            </div>
120
			<div class="page">
121
				<h2>
122
					<strong>Step 3: </strong> Start VM <b></b>
123
					<em>Confirm the settings below and start your new instance</em>
124
				</h2>
125
                <ul>
126
                    <li class="required">
127
                        <label>
128
                            <strong></strong> Instance name <span>*</span><br />
129
                            <input type="text" class="text" name="instance_name" value="My Ubuntu 10.04 x86_64 server"/>
130
                        </label>
131
                    </li>
132
                    <li>
133
                        <strong>Image</strong> <span>Ubuntu 10.04 x86_64 server</span>
134
                    </li>
135
                    <li>
136
                        <strong>CPU</strong> <span>2 cores</span>
137
                    </li>
138
                    <li>
139
                        <strong>RAM</strong> <span>1024MB</span>
140
                    </li>
141
                    <li>
142
                        <strong>Storage</strong> <span>10GB</span>
143
                    </li>
144
                    <li>
145
                        <strong>VNC password</strong> <span>sQX9s2pl</span>
146
                    </li>
147
                </ul>
148
				<button type="button" class="prev">&laquo; Back</button>
149
				<button type="button" class="next right" id="start">Start VM</button>        
150
            </div>
151
		</div>
152
	</div>
153
</form>
154

    
155
<script>
156
// <![CDATA[ 
157

    
158
$(":range").rangeinput();
159

    
160
function disableSliders() {
161
    $("#cpu").attr('disabled',true);
162
    $("#ram").attr('disabled',true);
163
    $("#storage").attr('disabled',true);
164
}
165

    
166
$("#custom").click(function(event){
167
    $("#cpu").attr('disabled',false);
168
    $("#ram").attr('disabled',false);
169
    $("#storage").attr('disabled',false);
170
    $("strong.sliders").style = 'color: #778899;';
171
});
172

    
173
$("#small").click(function(event){
174
    $("#cpu").data('rangeinput').setValue(1);
175
    $("#ram").data('rangeinput').setValue(256);
176
    $("#storage").data('rangeinput').setValue(5);
177
    // disableSliders();
178
});
179

    
180
$("#medium").click(function(event){
181
    $("#cpu").data('rangeinput').setValue(4);
182
    $("#ram").data('rangeinput').setValue(1024);
183
    $("#storage").data('rangeinput').setValue(30);
184
    // disableSliders();
185
});
186

    
187
$("#large").click(function(event){
188
    $("#cpu").data('rangeinput').setValue(8);
189
    $("#ram").data('rangeinput').setValue(4096);
190
    $("#storage").data('rangeinput').setValue(80);
191
    // disableSliders();
192
});
193

    
194
$("#cancel").click(function(event){
195
    $("a#create[rel]").overlay().close();
196
});
197

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

    
202
$("a#create").click(function(event){
203
    $("#wizard").scrollable().begin();
204
});
205

    
206
$("#cpu").change(function(event){
207
    $("#custom").click();
208
});
209

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

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

    
218
$(function() { 
219
    $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%'});
220
});
221

    
222
$(function() {
223
    var root = $("#wizard").scrollable();
224

    
225
    // some variables that we need
226
    var api = root.scrollable();
227

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

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