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