Statistics
| Branch: | Tag: | Revision:

root / ui / templates / alt_instances.html @ e690c75d

History | View | Annotate | Download (13.2 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
    <div class="running">
13
        {% for node in nodes %}
14
            {% if node.state == '3' %} 
15
                <div class="instance running">
16
                    <div class="actions">
17
                        <a href="#" class="action">Reboot</a>
18
                        <a href="#" class="action">Shutdown</a>
19
                        <a href="#" class="more">more &hellip;</a>
20
                    </div>
21
                    <div class="state">
22
                        <div>Running</div>
23
                        <div class="indicator" />
24
                        <div class="indicator" />
25
                        <div class="indicator" />
26
                        <div class="indicator" />
27
                    </div>
28
                    <img src="static/pc.png" />
29
                    <img class="os" src={{ 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/pc.png" />
62
                    <img class="os" src={{ node.thumb }} />
63
                    <a href="#" class="name">
64
                        <h5>Hostname: <span>{{ node.name }}</span><span class="rename"></span></h5>
65
                    </a>
66
                    <a href="#" class="ip">
67
                        <h5>IP: <span>{{ node.public_ip }}</span></h5>
68
                    </a>
69
                    <br />
70
                    <h5 class="storage">
71
                        Show: <a href="#">disks</a> | <a href="#">networks</a> | <a href="#">group</a> | uptime: 24 days
72
                    </h5>
73
                </div>
74
            {% endif %}
75
        {% endfor %} 
76
    </div>
77
</div>
78

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

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

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

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

238
$("#list").click(function(event){
239
    $("div#instancesview").load($("#list").attr("href"));
240
    return false;
241
});
242

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

245
$(":range").rangeinput();
246

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

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

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

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

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

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

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

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

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

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

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

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

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

316
});
317

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

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

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

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