Statistics
| Branch: | Tag: | Revision:

root / ui / templates / alt_instances.html @ ffe60d9d

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/pc.png" />
30
                    <img class="os" src={{ node.thumb }} />
31
                    <a href="#" class="name">
32
                        <h5>Hostname: <span>{{ node.name }}</span><span class="rename"></span></h5>
33
                    </a>
34
                    <a href="#" class="ip">
35
                        <h5>IP: <span>{{ node.public_ip }}</span></h5>
36
                    </a>
37
                    <br />
38
                    <h5 class="storage">
39
                        Show: <a href="#">disks</a> | <a href="#">networks</a> | <a href="#">group</a> | uptime: 24 days
40
                    </h5>
41
                </div>
42
            {% endif %}
43
        {% endfor %}
44
    </div>
45
    <div id="mini" class="seperator"></div>
46
    <div class="terminated">
47
        {% for node in nodes %}
48
            {% if node.state == '0' %}
49
                <div class="instance terminated">
50
                    <div class="actions">
51
                        <a href="#" class="action">Start</a>
52
                        <a href="#" class="action">Destroy</a>
53
                        <a href="#" class="more">more &hellip;</a>
54
                    </div>
55
                    <div class="state">
56
                        <div>Terminated</div>
57
                        <div class="indicator" />
58
                        <div class="indicator" />
59
                        <div class="indicator" />
60
                        <div class="indicator" />
61
                    </div>
62
                    <img src="static/pc.png" />
63
                    <img class="os" src={{ node.thumb }} />
64
                    <a href="#" class="name">
65
                        <h5>Hostname: <span>{{ node.name }}</span><span class="rename"></span></h5>
66
                    </a>
67
                    <a href="#" class="ip">
68
                        <h5>IP: <span>{{ node.public_ip }}</span></h5>
69
                    </a>
70
                    <br />
71
                    <h5 class="storage">
72
                        Show: <a href="#">disks</a> | <a href="#">networks</a> | <a href="#">group</a> | uptime: 24 days
73
                    </h5>
74
                </div>
75
            {% endif %}
76
        {% endfor %} 
77
    </div>
78
</div>
79

    
80
<div id="instances" class="seperator"></div>
81

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

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

    
236
<script>
237
// <![CDATA[ 
238

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

246
$("ul.tabs").tabs("div.panes ul");
247

248
$(":range").rangeinput();
249

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

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

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

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

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

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

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

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

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

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

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

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

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

319
});
320

321
$(function() {
322
    var root = $("#wizard").scrollable();
323

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

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

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