root / ui / templates / instances.html @ ec06b07c
History | View | Annotate | Download (14 kB)
1 | edda4d30 | Markos Gogoulos | {% load i18n %} |
---|---|---|---|
2 | edda4d30 | Markos Gogoulos | |
3 | e55b8703 | Christodoulos Psaltis | <div id="instances" class="seperator"></div> |
4 | e55b8703 | Christodoulos Psaltis | |
5 | edda4d30 | Markos Gogoulos | <a id="create" rel="#wizard" href="#">{% trans "Create New +" %}</a> |
6 | ec06b07c | Dimitris Moraitis | <a id="notify" rel="#misc" href="#"></a> |
7 | e55b8703 | Christodoulos Psaltis | <div id="view-select"> |
8 | ec06b07c | Dimitris Moraitis | <a id="standard" class="current" href="/instances">#</a> |
9 | e55b8703 | Christodoulos Psaltis | | |
10 | e55b8703 | Christodoulos Psaltis | <a id="list" href="/instances/list">=</a> |
11 | e55b8703 | Christodoulos Psaltis | </div>
|
12 | e55b8703 | Christodoulos Psaltis | |
13 | ec06b07c | Dimitris Moraitis | |
14 | ec06b07c | Dimitris Moraitis | |
15 | b303ba05 | Christodoulos Psaltis | <div id="instancesview" class="standard"> |
16 | e55b8703 | Christodoulos Psaltis | |
17 | ec06b07c | Dimitris Moraitis | <div class="instance" id="instance-template" style="display:none"> |
18 | ec06b07c | Dimitris Moraitis | <div class="state"> |
19 | ec06b07c | Dimitris Moraitis | <div class="status">Running</div> |
20 | ec06b07c | Dimitris Moraitis | <div class="indicator"></div> |
21 | ec06b07c | Dimitris Moraitis | <div class="indicator"></div> |
22 | ec06b07c | Dimitris Moraitis | <div class="indicator"></div> |
23 | ec06b07c | Dimitris Moraitis | <div class="indicator"></div> |
24 | ec06b07c | Dimitris Moraitis | </div>
|
25 | ec06b07c | Dimitris Moraitis | <img class="logo" src="static/machines/ubuntu.png" /> |
26 | ec06b07c | Dimitris Moraitis | <a href="#" class="name"> |
27 | ec06b07c | Dimitris Moraitis | <h5>Hostname: <span class="name">node.name</span><span class="rename"></span></h5> |
28 | ec06b07c | Dimitris Moraitis | </a>
|
29 | ec06b07c | Dimitris Moraitis | <a href="#" class="ip"> |
30 | ec06b07c | Dimitris Moraitis | <h5>IP: <span class="public">node.public_ip</span></h5> |
31 | ec06b07c | Dimitris Moraitis | </a>
|
32 | ec06b07c | Dimitris Moraitis | <h5 class="storage"> |
33 | ec06b07c | Dimitris Moraitis | Show: <a href="#">disks</a> | <a href="#">networks</a> | <a href="#">group</a> |
34 | ec06b07c | Dimitris Moraitis | </h5>
|
35 | ec06b07c | Dimitris Moraitis | <div class="actions"> |
36 | ec06b07c | Dimitris Moraitis | <a href="#" class="action">Reboot</a> |
37 | ec06b07c | Dimitris Moraitis | <a href="#" class="action">Shutdown</a> |
38 | ec06b07c | Dimitris Moraitis | <a href="#" class="more">more …</a> |
39 | ec06b07c | Dimitris Moraitis | </div>
|
40 | ec06b07c | Dimitris Moraitis | </div>
|
41 | ec06b07c | Dimitris Moraitis | |
42 | 89976b6c | Christodoulos Psaltis | <div class="running"> |
43 | ea3cb4e4 | Christodoulos Psaltis | </div>
|
44 | e55b8703 | Christodoulos Psaltis | <div id="mini" class="seperator"></div> |
45 | ea3cb4e4 | Christodoulos Psaltis | <div class="terminated"> |
46 | 89976b6c | Christodoulos Psaltis | </div>
|
47 | cc7c5902 | Dimitris Moraitis | </div>
|
48 | cc7c5902 | Dimitris Moraitis | |
49 | e55b8703 | Christodoulos Psaltis | <div id="instances" class="seperator"></div> |
50 | e55b8703 | Christodoulos Psaltis | |
51 | cc7c5902 | Dimitris Moraitis | <!-- the form -->
|
52 | cc7c5902 | Dimitris Moraitis | <form action="#"> |
53 | cc7c5902 | Dimitris Moraitis | <!-- scrollable root element -->
|
54 | cc7c5902 | Dimitris Moraitis | <div class="modal" id="wizard"> |
55 | cc7c5902 | Dimitris Moraitis | <!-- status bar -->
|
56 | cc7c5902 | Dimitris Moraitis | <ul id="status"> |
57 | e55b8703 | Christodoulos Psaltis | <li class="active"><strong>1.</strong> Image</li> |
58 | e55b8703 | Christodoulos Psaltis | <li><strong>2.</strong> Instance</li> |
59 | cc7c5902 | Dimitris Moraitis | <li><strong>3.</strong> Review</li> |
60 | cc7c5902 | Dimitris Moraitis | </ul>
|
61 | cc7c5902 | Dimitris Moraitis | <!-- scrollable items -->
|
62 | cc7c5902 | Dimitris Moraitis | <div class="items"> |
63 | cc7c5902 | Dimitris Moraitis | <!-- pages -->
|
64 | cc7c5902 | Dimitris Moraitis | <div class="page"> |
65 | e55b8703 | Christodoulos Psaltis | <h2>Select an OS</h2> |
66 | cc7c5902 | Dimitris Moraitis | <ul class="tabs"> |
67 | cc7c5902 | Dimitris Moraitis | <li><a href="#">standard</a></li> |
68 | cc7c5902 | Dimitris Moraitis | <li><a href="#">custom</a></li> |
69 | cc7c5902 | Dimitris Moraitis | </ul>
|
70 | 89976b6c | Christodoulos Psaltis | <div class="panes"> |
71 | ec06b07c | Dimitris Moraitis | <li id="image-template" style="display:none"> |
72 | ec06b07c | Dimitris Moraitis | <label for="image.id"> |
73 | ec06b07c | Dimitris Moraitis | <a><div class="image"> |
74 | ec06b07c | Dimitris Moraitis | <img src="static/os_logos/image.logo" class="image-logo"/> |
75 | ec06b07c | Dimitris Moraitis | <strong class="image-title">image.title</strong> |
76 | ec06b07c | Dimitris Moraitis | <input class="radio" type="radio" name="image-id" id="image-id" /> |
77 | ec06b07c | Dimitris Moraitis | <br /> |
78 | ec06b07c | Dimitris Moraitis | <span class="description">image.description</span> |
79 | ec06b07c | Dimitris Moraitis | <span class="size">?? MB</span> |
80 | ec06b07c | Dimitris Moraitis | |
81 | ec06b07c | Dimitris Moraitis | </div></a> |
82 | ec06b07c | Dimitris Moraitis | </label>
|
83 | ec06b07c | Dimitris Moraitis | </li>
|
84 | ec06b07c | Dimitris Moraitis | <ul class="pane" id="standard-images"> |
85 | cc7c5902 | Dimitris Moraitis | <!-- standard images -->
|
86 | cc7c5902 | Dimitris Moraitis | </ul>
|
87 | ec06b07c | Dimitris Moraitis | <ul class="pane" id="custom-images"> |
88 | cc7c5902 | Dimitris Moraitis | <!-- custom images -->
|
89 | ec06b07c | Dimitris Moraitis | |
90 | cc7c5902 | Dimitris Moraitis | </ul>
|
91 | cc7c5902 | Dimitris Moraitis | </div>
|
92 | cc7c5902 | Dimitris Moraitis | <button type="button" class="prev" id="cancel">Cancel</button> |
93 | cc7c5902 | Dimitris Moraitis | <button type="button" class="next right">Next »</button> |
94 | cc7c5902 | Dimitris Moraitis | </div>
|
95 | cc7c5902 | Dimitris Moraitis | <div class="page"> |
96 | e55b8703 | Christodoulos Psaltis | <h2>Select CPU, RAM and storage</h2> |
97 | cc7c5902 | Dimitris Moraitis | <ul>
|
98 | cc7c5902 | Dimitris Moraitis | <li>
|
99 | cc7c5902 | Dimitris Moraitis | <div class="instance-type"> |
100 | cc7c5902 | Dimitris Moraitis | <label for="small"> |
101 | cc7c5902 | Dimitris Moraitis | <input type="radio" id="small" name="instance-type" value="small" checked="true" /> |
102 | cc7c5902 | Dimitris Moraitis | <strong>small</strong> |
103 | cc7c5902 | Dimitris Moraitis | </label>
|
104 | cc7c5902 | Dimitris Moraitis | </div>
|
105 | cc7c5902 | Dimitris Moraitis | <div class="instance-type"> |
106 | cc7c5902 | Dimitris Moraitis | <label for="medium"> |
107 | cc7c5902 | Dimitris Moraitis | <input type="radio" id="medium" name="instance-type" value="medium" /> |
108 | cc7c5902 | Dimitris Moraitis | <strong>medium</strong> |
109 | cc7c5902 | Dimitris Moraitis | </label>
|
110 | cc7c5902 | Dimitris Moraitis | </div>
|
111 | cc7c5902 | Dimitris Moraitis | <div class="instance-type"> |
112 | cc7c5902 | Dimitris Moraitis | <label for="large"> |
113 | cc7c5902 | Dimitris Moraitis | <input type="radio" id="large" name="instance-type" value="large" /> |
114 | cc7c5902 | Dimitris Moraitis | <strong>large</strong> |
115 | cc7c5902 | Dimitris Moraitis | </label>
|
116 | cc7c5902 | Dimitris Moraitis | </div>
|
117 | cc7c5902 | Dimitris Moraitis | <div class="instance-type"> |
118 | cc7c5902 | Dimitris Moraitis | <label for="custom"> |
119 | cc7c5902 | Dimitris Moraitis | <input type="radio" name="instance-type" id="custom" value="large" /> |
120 | cc7c5902 | Dimitris Moraitis | <strong>custom</strong> |
121 | cc7c5902 | Dimitris Moraitis | </label>
|
122 | cc7c5902 | Dimitris Moraitis | </div>
|
123 | cc7c5902 | Dimitris Moraitis | </li>
|
124 | cc7c5902 | Dimitris Moraitis | <li>
|
125 | cc7c5902 | Dimitris Moraitis | <label><strong class="sliders">CPU (cores)</strong></label> |
126 | cc7c5902 | Dimitris Moraitis | <input type="range" id="cpu" value="1" max="8" min="1" /> |
127 | cc7c5902 | Dimitris Moraitis | </li>
|
128 | cc7c5902 | Dimitris Moraitis | <li>
|
129 | cc7c5902 | Dimitris Moraitis | <label><strong class="sliders">RAM (MB)</strong></label> |
130 | cc7c5902 | Dimitris Moraitis | <input type="range" id="ram" value="256" max="2048" min="256" step="256" /> |
131 | cc7c5902 | Dimitris Moraitis | </li>
|
132 | cc7c5902 | Dimitris Moraitis | <li>
|
133 | cc7c5902 | Dimitris Moraitis | <label><strong class="sliders">Storage (GB)</strong></label> |
134 | cc7c5902 | Dimitris Moraitis | <input type="range" id="storage" value="5" step="1" max="100" min="2" /> |
135 | cc7c5902 | Dimitris Moraitis | </li>
|
136 | cc7c5902 | Dimitris Moraitis | <li>
|
137 | cc7c5902 | Dimitris Moraitis | <div class="cost"> |
138 | e55b8703 | Christodoulos Psaltis | Cost per hour: 20 credits | Credits currently in account: 10.000 |
139 | cc7c5902 | Dimitris Moraitis | </div>
|
140 | cc7c5902 | Dimitris Moraitis | </li>
|
141 | cc7c5902 | Dimitris Moraitis | </ul>
|
142 | cc7c5902 | Dimitris Moraitis | <button type="button" class="prev">« Back</button> |
143 | cc7c5902 | Dimitris Moraitis | <button type="button" class="next right">Next »</button> |
144 | cc7c5902 | Dimitris Moraitis | </div>
|
145 | cc7c5902 | Dimitris Moraitis | <div class="page"> |
146 | e55b8703 | Christodoulos Psaltis | <h2>Confirm your settings</h2> |
147 | cc7c5902 | Dimitris Moraitis | <ul>
|
148 | cc7c5902 | Dimitris Moraitis | <li class="required"> |
149 | cc7c5902 | Dimitris Moraitis | <label>
|
150 | e55b8703 | Christodoulos Psaltis | <strong>Instance name</strong> |
151 | cc7c5902 | Dimitris Moraitis | <input type="text" class="text" name="instance_name" value="My Ubuntu 10.04 x86_64 server"/> |
152 | cc7c5902 | Dimitris Moraitis | </label>
|
153 | cc7c5902 | Dimitris Moraitis | </li>
|
154 | cc7c5902 | Dimitris Moraitis | <li>
|
155 | cc7c5902 | Dimitris Moraitis | <strong>Image:</strong> <span>Ubuntu 10.04 x86_64 server</span> |
156 | cc7c5902 | Dimitris Moraitis | </li>
|
157 | cc7c5902 | Dimitris Moraitis | <li>
|
158 | cc7c5902 | Dimitris Moraitis | <strong>CPU:</strong> <span>2 cores</span> |
159 | cc7c5902 | Dimitris Moraitis | </li>
|
160 | cc7c5902 | Dimitris Moraitis | <li>
|
161 | cc7c5902 | Dimitris Moraitis | <strong>RAM:</strong> <span>1024MB</span> |
162 | cc7c5902 | Dimitris Moraitis | </li>
|
163 | cc7c5902 | Dimitris Moraitis | <li>
|
164 | cc7c5902 | Dimitris Moraitis | <strong>Storage:</strong> <span>10GB</span> |
165 | cc7c5902 | Dimitris Moraitis | </li>
|
166 | cc7c5902 | Dimitris Moraitis | <li>
|
167 | cc7c5902 | Dimitris Moraitis | <strong>Cost per hour:</strong> <span>20 credits</span> |
168 | cc7c5902 | Dimitris Moraitis | </li>
|
169 | cc7c5902 | Dimitris Moraitis | <li>
|
170 | cc7c5902 | Dimitris Moraitis | <strong>Remaining credits:</strong> <span>10.000</span> |
171 | cc7c5902 | Dimitris Moraitis | </li>
|
172 | cc7c5902 | Dimitris Moraitis | </ul>
|
173 | cc7c5902 | Dimitris Moraitis | <button type="button" class="prev">« Back</button> |
174 | cc7c5902 | Dimitris Moraitis | <button type="button" class="next right" id="start">Create VM</button> |
175 | cc7c5902 | Dimitris Moraitis | </div>
|
176 | cc7c5902 | Dimitris Moraitis | </div>
|
177 | cc7c5902 | Dimitris Moraitis | </div>
|
178 | cc7c5902 | Dimitris Moraitis | </form>
|
179 | cc7c5902 | Dimitris Moraitis | |
180 | cc7c5902 | Dimitris Moraitis | <div class="modal" id="misc"> |
181 | cc7c5902 | Dimitris Moraitis | <h3>Your VM is being created!</h3> |
182 | cc7c5902 | Dimitris Moraitis | <p>Your password is:<strong> sdeEFre</strong></p> |
183 | cc7c5902 | Dimitris Moraitis | <p>Please copy this! Without it you can not connect to your VM.</p> |
184 | cc7c5902 | Dimitris Moraitis | </div>
|
185 | cc7c5902 | Dimitris Moraitis | |
186 | cc7c5902 | Dimitris Moraitis | <script>
|
187 | cc7c5902 | Dimitris Moraitis | // <![CDATA[
|
188 | ec06b07c | Dimitris Moraitis | var image_tags = {
|
189 | ec06b07c | Dimitris Moraitis | 1: 'archlinux',
|
190 | ec06b07c | Dimitris Moraitis | 2: 'centos',
|
191 | ec06b07c | Dimitris Moraitis | 3: 'debian',
|
192 | ec06b07c | Dimitris Moraitis | 4: 'freebsd',
|
193 | ec06b07c | Dimitris Moraitis | 5: 'gentoo',
|
194 | ec06b07c | Dimitris Moraitis | 6: 'netbsd',
|
195 | ec06b07c | Dimitris Moraitis | 7: 'openbsd',
|
196 | ec06b07c | Dimitris Moraitis | 8: 'redhat',
|
197 | ec06b07c | Dimitris Moraitis | 9: 'slackware',
|
198 | ec06b07c | Dimitris Moraitis | 10: 'suse',
|
199 | ec06b07c | Dimitris Moraitis | 11: 'ubuntu',
|
200 | ec06b07c | Dimitris Moraitis | 12: 'windows',
|
201 | ec06b07c | Dimitris Moraitis | };
|
202 | ec06b07c | Dimitris Moraitis | |
203 | ec06b07c | Dimitris Moraitis | function update() {
|
204 | ec06b07c | Dimitris Moraitis | |
205 | ec06b07c | Dimitris Moraitis | $("div.running").text('');
|
206 | ec06b07c | Dimitris Moraitis | $("div.terminated").text('');
|
207 | ec06b07c | Dimitris Moraitis | $("ul#standard-images").text('');
|
208 | ec06b07c | Dimitris Moraitis | $("ul#custom-images").text('');
|
209 | ec06b07c | Dimitris Moraitis | |
210 | ec06b07c | Dimitris Moraitis | $.ajax({
|
211 | ec06b07c | Dimitris Moraitis | url: '/api/v1.0/servers/detail',
|
212 | ec06b07c | Dimitris Moraitis | type: "GET",
|
213 | ec06b07c | Dimitris Moraitis | // async: false,
|
214 | ec06b07c | Dimitris Moraitis | dataType: "json",
|
215 | ec06b07c | Dimitris Moraitis | success: function(data) {
|
216 | ec06b07c | Dimitris Moraitis | $.each(data.servers, function(i,server){
|
217 | ec06b07c | Dimitris Moraitis | var instance = $('#instance-template').clone().attr("id",server.id).fadeIn("slow");
|
218 | ec06b07c | Dimitris Moraitis | instance.find("a.name span.name").text(server.name);
|
219 | ec06b07c | Dimitris Moraitis | instance.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'.png');
|
220 | ec06b07c | Dimitris Moraitis | instance.find("img.list-logo").attr("src","static/os_logos/"+image_tags[server.imageId]+'.png');
|
221 | ec06b07c | Dimitris Moraitis | instance.find("a.ip span.public").text(String(server.addresses.public));
|
222 | cc7c5902 | Dimitris Moraitis | |
223 | ec06b07c | Dimitris Moraitis | if (server.status == 'BUILD'){
|
224 | ec06b07c | Dimitris Moraitis | instance.find("div.status").text('Building');
|
225 | ec06b07c | Dimitris Moraitis | instance.appendTo("div.running");
|
226 | ec06b07c | Dimitris Moraitis | } else if (server.status == 'ACTIVE') {
|
227 | ec06b07c | Dimitris Moraitis | instance.find("div.status").text('Running');
|
228 | ec06b07c | Dimitris Moraitis | instance.appendTo("div.running");
|
229 | ec06b07c | Dimitris Moraitis | } else if (server.status == 'SUSPENDED') {
|
230 | ec06b07c | Dimitris Moraitis | instance.find("div.status").text('Terminated');
|
231 | ec06b07c | Dimitris Moraitis | instance.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'-off.png');
|
232 | ec06b07c | Dimitris Moraitis | instance.appendTo("div.terminated");
|
233 | ec06b07c | Dimitris Moraitis | } else {
|
234 | ec06b07c | Dimitris Moraitis | instance.find("div.status").text('Unknown');
|
235 | ec06b07c | Dimitris Moraitis | instance.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'-off.png');
|
236 | ec06b07c | Dimitris Moraitis | instance.appendTo("div.terminated");
|
237 | ec06b07c | Dimitris Moraitis | }
|
238 | ec06b07c | Dimitris Moraitis | |
239 | ec06b07c | Dimitris Moraitis | |
240 | ec06b07c | Dimitris Moraitis | });
|
241 | ec06b07c | Dimitris Moraitis | }
|
242 | ec06b07c | Dimitris Moraitis | });
|
243 | ec06b07c | Dimitris Moraitis | |
244 | ec06b07c | Dimitris Moraitis | $.ajax({
|
245 | ec06b07c | Dimitris Moraitis | url: '/api/v1.0/images/detail',
|
246 | ec06b07c | Dimitris Moraitis | type: "GET",
|
247 | ec06b07c | Dimitris Moraitis | // async: false,
|
248 | ec06b07c | Dimitris Moraitis | dataType: "json",
|
249 | ec06b07c | Dimitris Moraitis | success: function(data) {
|
250 | ec06b07c | Dimitris Moraitis | $.each(data.images, function(i,image){
|
251 | ec06b07c | Dimitris Moraitis | var img = $('#image-template').clone().attr("id","img-"+image.id).fadeIn("slow");
|
252 | ec06b07c | Dimitris Moraitis | img.find("label").attr('for',"img-radio-" + image.id);
|
253 | ec06b07c | Dimitris Moraitis | img.find(".image-title").text(image.name);
|
254 | ec06b07c | Dimitris Moraitis | img.find("input.radio").attr('id',"img-radio-" + image.id);
|
255 | ec06b07c | Dimitris Moraitis | if (i==0) img.find("input.radio").attr("checked","checked");
|
256 | ec06b07c | Dimitris Moraitis | img.find("img.image-logo").attr('src','static/os_logos/'+image_tags[image.id]+'.png');
|
257 | ec06b07c | Dimitris Moraitis | if (image.serverId) {
|
258 | ec06b07c | Dimitris Moraitis | img.appendTo("ul#custom-images");
|
259 | ec06b07c | Dimitris Moraitis | } else {
|
260 | ec06b07c | Dimitris Moraitis | img.appendTo("ul#standard-images");
|
261 | ec06b07c | Dimitris Moraitis | }
|
262 | ec06b07c | Dimitris Moraitis | });
|
263 | ec06b07c | Dimitris Moraitis | }
|
264 | ec06b07c | Dimitris Moraitis | });
|
265 | ec06b07c | Dimitris Moraitis | }
|
266 | ec06b07c | Dimitris Moraitis | update();
|
267 | cc7c5902 | Dimitris Moraitis | $("#list").click(function(event){
|
268 | ec06b07c | Dimitris Moraitis | $("div.standard#instancesview").load($("#list").attr("href"));
|
269 | e55b8703 | Christodoulos Psaltis | $("a#standard")[0].className += ' activelink'
|
270 | e55b8703 | Christodoulos Psaltis | this.style.color = '#5f8dd3';
|
271 | ec06b07c | Dimitris Moraitis | update();
|
272 | ec06b07c | Dimitris Moraitis | return false;
|
273 | ec06b07c | Dimitris Moraitis | });
|
274 | ec06b07c | Dimitris Moraitis | |
275 | ec06b07c | Dimitris Moraitis | $("a#standard").click(function(event){
|
276 | ec06b07c | Dimitris Moraitis | href=$("a#standard").attr("href");
|
277 | ec06b07c | Dimitris Moraitis | $("div.pane#instances-pane").load(href);
|
278 | ec06b07c | Dimitris Moraitis | //$("a#standard")[0].className += ' activelink'
|
279 | ec06b07c | Dimitris Moraitis | //this.style.color = '#5f8dd3';
|
280 | cc7c5902 | Dimitris Moraitis | return false;
|
281 | cc7c5902 | Dimitris Moraitis | });
|
282 | cc7c5902 | Dimitris Moraitis | |
283 | cc7c5902 | Dimitris Moraitis | $("ul.tabs").tabs("div.panes ul");
|
284 | cc7c5902 | Dimitris Moraitis | |
285 | 3141976d | Christodoulos Psaltis | $(":range").rangeinput({progress:true});
|
286 | cc7c5902 | Dimitris Moraitis | |
287 | cc7c5902 | Dimitris Moraitis | function disableSliders() {
|
288 | cc7c5902 | Dimitris Moraitis | $("#cpu").attr('disabled',true);
|
289 | cc7c5902 | Dimitris Moraitis | $("#ram").attr('disabled',true);
|
290 | cc7c5902 | Dimitris Moraitis | $("#storage").attr('disabled',true);
|
291 | cc7c5902 | Dimitris Moraitis | }
|
292 | cc7c5902 | Dimitris Moraitis | |
293 | cc7c5902 | Dimitris Moraitis | $("#custom").click(function(event){
|
294 | cc7c5902 | Dimitris Moraitis | $("#cpu").attr('disabled',false);
|
295 | cc7c5902 | Dimitris Moraitis | $("#ram").attr('disabled',false);
|
296 | cc7c5902 | Dimitris Moraitis | $("#storage").attr('disabled',false);
|
297 | cc7c5902 | Dimitris Moraitis | $("strong.sliders").style = 'color: #778899;';
|
298 | cc7c5902 | Dimitris Moraitis | });
|
299 | cc7c5902 | Dimitris Moraitis | |
300 | cc7c5902 | Dimitris Moraitis | $("#small").click(function(event){
|
301 | cc7c5902 | Dimitris Moraitis | $("#cpu").data('rangeinput').setValue(1);
|
302 | cc7c5902 | Dimitris Moraitis | $("#ram").data('rangeinput').setValue(256);
|
303 | cc7c5902 | Dimitris Moraitis | $("#storage").data('rangeinput').setValue(5);
|
304 | cc7c5902 | Dimitris Moraitis | });
|
305 | cc7c5902 | Dimitris Moraitis | |
306 | cc7c5902 | Dimitris Moraitis | $("#medium").click(function(event){
|
307 | cc7c5902 | Dimitris Moraitis | $("#cpu").data('rangeinput').setValue(4);
|
308 | cc7c5902 | Dimitris Moraitis | $("#ram").data('rangeinput').setValue(1024);
|
309 | cc7c5902 | Dimitris Moraitis | $("#storage").data('rangeinput').setValue(30);
|
310 | cc7c5902 | Dimitris Moraitis | });
|
311 | cc7c5902 | Dimitris Moraitis | |
312 | cc7c5902 | Dimitris Moraitis | $("#large").click(function(event){
|
313 | cc7c5902 | Dimitris Moraitis | $("#cpu").data('rangeinput').setValue(8);
|
314 | cc7c5902 | Dimitris Moraitis | $("#ram").data('rangeinput').setValue(4096);
|
315 | cc7c5902 | Dimitris Moraitis | $("#storage").data('rangeinput').setValue(80);
|
316 | cc7c5902 | Dimitris Moraitis | });
|
317 | cc7c5902 | Dimitris Moraitis | |
318 | cc7c5902 | Dimitris Moraitis | $("#cancel").click(function(event){
|
319 | cc7c5902 | Dimitris Moraitis | $("a#create[rel]").overlay().close();
|
320 | cc7c5902 | Dimitris Moraitis | });
|
321 | cc7c5902 | Dimitris Moraitis | |
322 | cc7c5902 | Dimitris Moraitis | $("#start").click(function(event){
|
323 | cc7c5902 | Dimitris Moraitis | |
324 | ec06b07c | Dimitris Moraitis | var triggers = $("a#notify").overlay({
|
325 | cc7c5902 | Dimitris Moraitis | // some mask tweaks suitable for modal dialogs
|
326 | cc7c5902 | Dimitris Moraitis | mask: {
|
327 | cc7c5902 | Dimitris Moraitis | color: '#ebecff',
|
328 | cc7c5902 | Dimitris Moraitis | opacity: '0.9'
|
329 | cc7c5902 | Dimitris Moraitis | },
|
330 | cc7c5902 | Dimitris Moraitis | top: 'center',
|
331 | ec06b07c | Dimitris Moraitis | closeOnClick: false,
|
332 | ec06b07c | Dimitris Moraitis | oneInstance: false,
|
333 | ec06b07c | Dimitris Moraitis | load: true
|
334 | cc7c5902 | Dimitris Moraitis | });
|
335 | ec06b07c | Dimitris Moraitis | $("#wizard").hide();
|
336 | ec06b07c | Dimitris Moraitis | update();
|
337 | ec06b07c | Dimitris Moraitis | $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%', oneInstance: false, closeOnClick: false});
|
338 | cc7c5902 | Dimitris Moraitis | });
|
339 | cc7c5902 | Dimitris Moraitis | |
340 | cc7c5902 | Dimitris Moraitis | $("a#create").click(function(event){
|
341 | cc7c5902 | Dimitris Moraitis | $("#wizard").scrollable().begin();
|
342 | cc7c5902 | Dimitris Moraitis | });
|
343 | cc7c5902 | Dimitris Moraitis | |
344 | cc7c5902 | Dimitris Moraitis | $("#cpu").change(function(event){
|
345 | cc7c5902 | Dimitris Moraitis | $("#custom").click();
|
346 | cc7c5902 | Dimitris Moraitis | });
|
347 | cc7c5902 | Dimitris Moraitis | |
348 | cc7c5902 | Dimitris Moraitis | $("#ram").change(function(event){
|
349 | cc7c5902 | Dimitris Moraitis | $("#custom").click();
|
350 | cc7c5902 | Dimitris Moraitis | });
|
351 | cc7c5902 | Dimitris Moraitis | |
352 | cc7c5902 | Dimitris Moraitis | $("#storage").change(function(event){
|
353 | cc7c5902 | Dimitris Moraitis | $("#custom").click();
|
354 | cc7c5902 | Dimitris Moraitis | });
|
355 | cc7c5902 | Dimitris Moraitis | |
356 | cc7c5902 | Dimitris Moraitis | $(function() {
|
357 | ec06b07c | Dimitris Moraitis | $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%', oneInstance: false, closeOnClick: false});
|
358 | cc7c5902 | Dimitris Moraitis | });
|
359 | cc7c5902 | Dimitris Moraitis | |
360 | cc7c5902 | Dimitris Moraitis | $(function() {
|
361 | cc7c5902 | Dimitris Moraitis | var root = $("#wizard").scrollable();
|
362 | cc7c5902 | Dimitris Moraitis | |
363 | cc7c5902 | Dimitris Moraitis | // some variables that we need
|
364 | cc7c5902 | Dimitris Moraitis | var api = root.scrollable();
|
365 | cc7c5902 | Dimitris Moraitis | |
366 | cc7c5902 | Dimitris Moraitis | // rangeinput with default configuration
|
367 | cc7c5902 | Dimitris Moraitis | // validation logic is done inside the onBeforeSeek callback
|
368 | cc7c5902 | Dimitris Moraitis | api.onBeforeSeek(function(event, i) {
|
369 | cc7c5902 | Dimitris Moraitis | // we are going 1 step backwards so no need for validation
|
370 | cc7c5902 | Dimitris Moraitis | if (api.getIndex() < i) {
|
371 | cc7c5902 | Dimitris Moraitis | // 1. get current page
|
372 | cc7c5902 | Dimitris Moraitis | var page = root.find(".page").eq(api.getIndex()),
|
373 | cc7c5902 | Dimitris Moraitis | // 2. .. and all required fields inside the page
|
374 | cc7c5902 | Dimitris Moraitis | inputs = page.find(".required :input").removeClass("error"),
|
375 | cc7c5902 | Dimitris Moraitis | // 3. .. which are empty
|
376 | cc7c5902 | Dimitris Moraitis | empty = inputs.filter(function() {
|
377 | cc7c5902 | Dimitris Moraitis | return $(this).val().replace(/\s*/g, '') == '';
|
378 | cc7c5902 | Dimitris Moraitis | });
|
379 | cc7c5902 | Dimitris Moraitis | // if there are empty fields, then
|
380 | cc7c5902 | Dimitris Moraitis | if (empty.length) {
|
381 | cc7c5902 | Dimitris Moraitis | // add a CSS class name "error" for empty & required fields
|
382 | cc7c5902 | Dimitris Moraitis | empty.addClass("error");
|
383 | cc7c5902 | Dimitris Moraitis | // cancel seeking of the scrollable by returning false
|
384 | cc7c5902 | Dimitris Moraitis | return false;
|
385 | cc7c5902 | Dimitris Moraitis | // everything is good
|
386 | cc7c5902 | Dimitris Moraitis | }
|
387 | cc7c5902 | Dimitris Moraitis | }
|
388 | cc7c5902 | Dimitris Moraitis | // update status bar
|
389 | cc7c5902 | Dimitris Moraitis | $("#status li").removeClass("active").eq(i).addClass("active");
|
390 | cc7c5902 | Dimitris Moraitis | });
|
391 | cc7c5902 | Dimitris Moraitis | |
392 | cc7c5902 | Dimitris Moraitis | // if tab is pressed on the next button seek to next page
|
393 | cc7c5902 | Dimitris Moraitis | root.find("button.next").keydown(function(e) {
|
394 | cc7c5902 | Dimitris Moraitis | if (e.keyCode == 9) {
|
395 | cc7c5902 | Dimitris Moraitis | // seeks to next tab by executing our validation routine
|
396 | cc7c5902 | Dimitris Moraitis | api.next();
|
397 | cc7c5902 | Dimitris Moraitis | e.preventDefault();
|
398 | cc7c5902 | Dimitris Moraitis | }
|
399 | cc7c5902 | Dimitris Moraitis | });
|
400 | cc7c5902 | Dimitris Moraitis | // ]]>
|
401 | cc7c5902 | Dimitris Moraitis | });
|
402 | cc7c5902 | Dimitris Moraitis | </script>
|