Statistics
| Branch: | Tag: | Revision:

root / ui / templates / instances.html @ de9bbf4e

History | View | Annotate | Download (13.3 kB)

1
<div id="instances" class="seperator"></div>
2

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

    
5
<div id="view-select">
6
    <a id="standard" class="current" href="/">#</a>
7
    |
8
    <a id="list" href="/instances/list">=</a>
9
</div>
10

    
11
<div id="instancesview" class="standard">
12

    
13
    <div class="running">
14
        {% for node in nodes %}
15
            {% if node.state == '3' %} 
16
                <div class="instance running">
17
                    <div class="actions">
18
                        <a href="#" class="action">Reboot</a>
19
                        <a href="#" class="action">Shutdown</a>
20
                        <a href="#" class="more">more &hellip;</a>
21
                    </div>
22
                    <div class="state">
23
                        <div>Running</div>
24
                        <div class="indicator" />
25
                        <div class="indicator" />
26
                        <div class="indicator" />
27
                        <div class="indicator" />
28
                    </div>
29
                    <img src="static/machines/{{ node.thumb }}" />
30
                    <a href="#" class="name">
31
                        <h5>Hostname: <span>{{ node.name }}</span><span class="rename"></span></h5>
32
                    </a>
33
                    <a href="#" class="ip">
34
                        <h5>IP: <span>{{ node.public_ip }}</span></h5>
35
                    </a>
36
                    <br />
37
                    <h5 class="storage">
38
                        Show: <a href="#">disks</a> | <a href="#">networks</a> | <a href="#">group</a> | uptime: 24 days
39
                    </h5>
40
                </div>
41
            {% endif %}
42
        {% endfor %}
43
    </div>
44
    <div id="mini" class="seperator"></div>
45
    <div class="terminated">
46
        {% for node in nodes %}
47
            {% if node.state == '0' %}
48
                <div class="instance terminated">
49
                    <div class="actions">
50
                        <a href="#" class="action">Start</a>
51
                        <a href="#" class="action">Destroy</a>
52
                        <a href="#" class="more">more &hellip;</a>
53
                    </div>
54
                    <div class="state">
55
                        <div>Terminated</div>
56
                        <div class="indicator" />
57
                        <div class="indicator" />
58
                        <div class="indicator" />
59
                        <div class="indicator" />
60
                    </div>
61
                    <img src="static/machines/{{ node.thumb }}" />
62
                    <a href="#" class="name">
63
                        <h5>Hostname: <span>{{ node.name }}</span><span class="rename"></span></h5>
64
                    </a>
65
                    <a href="#" class="ip">
66
                        <h5>IP: <span>{{ node.public_ip }}</span></h5>
67
                    </a>
68
                    <br />
69
                    <h5 class="storage">
70
                        Show: <a href="#">disks</a> | <a href="#">networks</a> | <a href="#">group</a> | uptime: 24 days
71
                    </h5>
72
                </div>
73
            {% endif %}
74
        {% endfor %} 
75
    </div>
76
</div>
77

    
78
<div id="instances" class="seperator"></div>
79

    
80
<!-- the form -->
81
<form action="#">
82
        <!-- scrollable root element -->
83
        <div class="modal" id="wizard">
84
                <!-- status bar -->
85
                <ul id="status">
86
                        <li class="active"><strong>1.</strong> Image</li>
87
                        <li><strong>2.</strong> Instance</li>
88
                        <li><strong>3.</strong> Review</li>
89
                </ul>
90
                <!-- scrollable items -->
91
                <div class="items">
92
                        <!-- pages -->
93
                        <div class="page">
94
                <h2>Select an OS</h2>
95
                <ul class="tabs">
96
                    <li><a href="#">standard</a></li>
97
                    <li><a href="#">custom</a></li>
98
                </ul>
99
                <div class="panes">
100
                    <ul class="pane">
101
                                            <!-- standard images -->
102
                        {% for image in images %}
103
                            {% if image.type == 'standard' %}
104
                                                    <li>
105
                                                            <label for={{ image.id }}> 
106
                                        <a><div class="image">
107
                                            <img src={{ image.logo }} class="image-logo"/>
108
                                            <strong>{{ image.title }}</strong>
109
                                            <input class="radio" type="radio" {% if  %}checked="checked"{% endif %} name="image-id" id={{ image.id }} />
110
                                            <br />
111
                                            <span class="description">{{ image.description }}</span> 
112
                                            <span class="size">{{ image.size }}MB</span>
113
                                            
114
                                        </div></a>
115
                                                            </label>
116
                                                    </li>
117
                            {% endif %}
118
                        {% endfor %} 
119
                                    </ul>
120
                    <ul class="pane">
121
                                            <!-- custom images -->
122
                        {% for image in images %}
123
                            {% if image.type == 'custom' %}
124
                                                    <li>
125
                                                            <label for={{ image.id }}> 
126
                                        <a><div class="image">
127
                                            <img src={{ image.logo }} class="image-logo"/>
128
                                            <strong>{{ image.title }}</strong>
129
                                            <input class="radio" type="radio" name="image-id" id={{ image.id }} />
130
                                            <br />
131
                                            <span class="description">{{ image.description }}</span> 
132
                                            <span class="size">{{ image.size }}MB</span>
133
                                        </div></a>
134
                                                            </label>
135
                                                    </li>
136
                            {% endif %}
137
                        {% endfor %}
138
                    </ul>
139
                </div>
140
                                <button type="button" class="prev" id="cancel">Cancel</button>
141
                                <button type="button" class="next right">Next &raquo;</button>
142
            </div>
143
                        <div class="page">
144
                                <h2>Select CPU, RAM and storage</h2>
145
                <ul>
146
                    <li>
147
                        <div class="instance-type">
148
                            <label for="small">
149
                                <input type="radio" id="small" name="instance-type" value="small" checked="true" />
150
                                <strong>small</strong>
151
                            </label>
152
                        </div>
153
                        <div class="instance-type">      
154
                            <label for="medium">
155
                                <input type="radio" id="medium" name="instance-type" value="medium" />                  
156
                                <strong>medium</strong>
157
                            </label>
158
                        </div>
159
                        <div class="instance-type">
160
                            <label for="large">
161
                                <input type="radio" id="large" name="instance-type" value="large" />
162
                                <strong>large</strong>
163
                            </label>
164
                        </div>
165
                        <div class="instance-type">
166
                            <label for="custom">
167
                                <input type="radio" name="instance-type" id="custom" value="large" />
168
                                <strong>custom</strong>
169
                            </label>
170
                        </div>
171
                    </li>
172
                    <li>
173
                                    <label><strong class="sliders">CPU (cores)</strong></label>
174
                        <input type="range" id="cpu" value="1" max="8" min="1" />
175
                    </li>
176
                    <li>
177
                                    <label><strong class="sliders">RAM (MB)</strong></label>
178
                        <input type="range" id="ram" value="256" max="2048" min="256" step="256" />
179
                    </li>
180
                    <li>
181
                                <label><strong class="sliders">Storage (GB)</strong></label>
182
                        <input type="range" id="storage" value="5" step="1" max="100" min="2" />
183
                    </li>
184
                    <li>
185
                        <div class="cost">
186
                            Cost per hour: 20 credits | Credits currently in account: 10.000
187
                        </div>
188
                    </li>
189
                </ul>
190
                                <button type="button" class="prev">&laquo; Back</button>
191
                                <button type="button" class="next right">Next &raquo;</button>
192
            </div>
193
                        <div class="page">
194
                                <h2>Confirm your settings</h2>
195
                <ul>
196
                    <li class="required">
197
                        <label>
198
                            <strong>Instance name</strong>
199
                            <input type="text" class="text" name="instance_name" value="My Ubuntu 10.04 x86_64 server"/>
200
                        </label>
201
                    </li>
202
                    <li>
203
                        <strong>Image:</strong> <span>Ubuntu 10.04 x86_64 server</span>
204
                    </li>
205
                    <li>
206
                        <strong>CPU:</strong> <span>2 cores</span>
207
                    </li>
208
                    <li>
209
                        <strong>RAM:</strong> <span>1024MB</span>
210
                    </li>
211
                    <li>
212
                        <strong>Storage:</strong> <span>10GB</span>
213
                    </li>
214
                    <li>
215
                        <strong>Cost per hour:</strong> <span>20 credits</span>
216
                    </li>
217
                    <li>
218
                        <strong>Remaining credits:</strong> <span>10.000</span>
219
                    </li>
220
                </ul>
221
                                <button type="button" class="prev">&laquo; Back</button>
222
                                <button type="button" class="next right" id="start">Create VM</button>        
223
            </div>
224
                </div>
225
        </div>
226
</form>
227

    
228
<div class="modal" id="misc">
229
    <h3>Your VM is being created!</h3>
230
    <p>Your password is:<strong> sdeEFre</strong></p>
231
    <p>Please copy this! Without it you can not connect to your VM.</p>
232
</div>
233

    
234
<script>
235
// <![CDATA[ 
236

237
$("#list").click(function(event){
238
    $("div#instancesview").load($("#list").attr("href"));
239
    $("a#standard")[0].className += ' activelink'
240
    this.style.color = '#5f8dd3';
241
    return false;
242
});
243

244
$("ul.tabs").tabs("div.panes ul");
245

246
$(":range").rangeinput({progress:true});
247

248
function disableSliders() {
249
    $("#cpu").attr('disabled',true);
250
    $("#ram").attr('disabled',true);
251
    $("#storage").attr('disabled',true);
252
}
253

254
$("#custom").click(function(event){
255
    $("#cpu").attr('disabled',false);
256
    $("#ram").attr('disabled',false);
257
    $("#storage").attr('disabled',false);
258
    $("strong.sliders").style = 'color: #778899;';
259
});
260

261
$("#small").click(function(event){
262
    $("#cpu").data('rangeinput').setValue(1);
263
    $("#ram").data('rangeinput').setValue(256);
264
    $("#storage").data('rangeinput').setValue(5);
265
});
266

267
$("#medium").click(function(event){
268
    $("#cpu").data('rangeinput').setValue(4);
269
    $("#ram").data('rangeinput').setValue(1024);
270
    $("#storage").data('rangeinput').setValue(30);
271
});
272

273
$("#large").click(function(event){
274
    $("#cpu").data('rangeinput').setValue(8);
275
    $("#ram").data('rangeinput').setValue(4096);
276
    $("#storage").data('rangeinput').setValue(80);
277
});
278

279
$("#cancel").click(function(event){
280
    $("a#create[rel]").overlay().close();
281
});
282

283
$("#start").click(function(event){
284
    $("a#create[rel]").overlay().close();
285

286
    var triggers = $("div#misc").overlay({
287
            // some mask tweaks suitable for modal dialogs
288
            mask: {
289
                    color: '#ebecff',
290
                    opacity: '0.9'
291
            },
292
        top: 'center',
293
        load: 'true',
294
            closeOnClick: 'false'  
295
    });
296
});
297

298
$("a#create").click(function(event){
299
    $("#wizard").scrollable().begin();
300
});
301

302
$("#cpu").change(function(event){
303
    $("#custom").click();
304
});
305

306
$("#ram").change(function(event){
307
    $("#custom").click();
308
});
309

310
$("#storage").change(function(event){
311
    $("#custom").click();
312
});
313

314
$(function() { 
315
    $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%'});
316

317
});
318

319
$(function() {
320
    var root = $("#wizard").scrollable();
321

322
    // some variables that we need
323
    var api = root.scrollable();
324

325
    // rangeinput with default configuration
326
    // validation logic is done inside the onBeforeSeek callback
327
    api.onBeforeSeek(function(event, i) {
328
            // we are going 1 step backwards so no need for validation
329
            if (api.getIndex() < i) {
330
             // 1. get current page
331
                     var page = root.find(".page").eq(api.getIndex()),
332
                         // 2. .. and all required fields inside the page
333
                         inputs = page.find(".required :input").removeClass("error"),
334
                         // 3. .. which are empty
335
                         empty = inputs.filter(function() {
336
                                return $(this).val().replace(/\s*/g, '') == '';
337
                         });
338
                     // if there are empty fields, then
339
                    if (empty.length) {
340
                            // add a CSS class name "error" for empty & required fields
341
                            empty.addClass("error");
342
                            // cancel seeking of the scrollable by returning false
343
                            return false;
344
                    // everything is good
345
                    } 
346
            }
347
            // update status bar
348
            $("#status li").removeClass("active").eq(i).addClass("active");
349
    });
350

351
    // if tab is pressed on the next button seek to next page
352
    root.find("button.next").keydown(function(e) {
353
            if (e.keyCode == 9) {
354
                    // seeks to next tab by executing our validation routine
355
                    api.next();
356
                    e.preventDefault();
357
            }
358
    });
359
// ]]>
360
});
361
</script>
362