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