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