Revision b058f1fe

b/snf-cyclades-app/synnefo/ui/new_ui/ui/index.html
20 20
	<script type="text/x-handlebars">
21 21
		<header class="header">
22 22
			<nav>
23
			{{collection Okeanos.NavigationView}}
23
			{{collection Synnefo.NavigationView}}
24 24
				
25 25
			</nav>
26 26
			{{login-menu email = model.email}}
......
28 28
				<a href="index.html"><img src="images/synnefo-logo.png" alt="software logo"></a>
29 29
			</div>
30 30
		</header>
31
		<div class="body-wrapper">
31
		<div class="body-wrapper">		<section class="overlay-area-custom">
32
			<div id="vm-wizard" class="overlay-div wizard">
33
				<div class="top">
34
					<div class="numbers">
35
						<div class="row">
36
							<a href="" class="close"><span class="snf-close"></span></a>
37
							<ul class="nums">
38
								<li class="current preselected">
39
									<em><span>1</span></em>
40
									<p><strong>Select an OS</strong> Choose your preferred image</p>
41
								</li>
42
								<li>
43
									<em><span>2</span></em>
44
									<p><strong>Select CPUs, RAM and Disk Size </strong>
45
Available options are filtered based on the selected image</p>
46
								</li>
47
								<li>
48
									<em><span>3</span></em>
49
									<p><strong>Virtual machine custom options</strong>
50
Virtual machine custom options</p>
51
								</li>
52
								<li>
53
									<em><span>4</span></em>
54
									<p><strong>Confirm your settings</strong>
55
Confirm that the options you have selected are correct</p>
56
								</li>
57
							</ul>
58
						</div>
59
					</div>
60
					<div class="row menus">
61
						<nav class="sub-menu" data-step=1>
62
							<ul>
63
								<li><a href="" class="current preselected el2 firstfocus-1" data-img-type="system-images">System</a></li>
64
								<li><a href="" data-img-type="my-images">My images</a></li>
65
								<li><a href="" data-img-type="shared-images">Shared with me</a></li>
66
								<li><a href="" data-next="el1" data-img-type="public-images">Public</a></li>
67
							</ul>
68
						</nav>
69
						<nav class="sub-menu" data-step=2>
70
							<ul>
71
								<li><a href="" class="current preselected el4 firstfocus-2" data-size="small">Small</a></li>
72
								<li><a href="" data-size="medium">Medium</a></li>
73
								<li><a href="" data-size="large" data-next="el5">Large</a></li>
74
							</ul>
75
						</nav>
76
					</div>
77
				</div>
78
				<div class="middle">
79
						<div class="steps">
80
							<div class="step step-1 current preselected" id="step-1" data-step="1">
81
								<ul class="os">
82
									<li  class="current preselected system-images">
83
										<div class="row">
84
											<div class="img-col"><img src="images/os-kubuntu.png" alt=""></div>
85
											<a href="" class="name-col el1">Kubuntu</a>
86
											<div class="size-col">3.13 GB</div>
87
											<div class="btn-col"><a href="" class="wrap-a">details</a></div>
88
										</div>
89
										<div class="details">
90
											<div class="row">
91
												<h3>Image metadata</h3>
92
												<dl>
93
													<dt>Owner</dt>
94
													<dd>system</dd>
95
													<dt>OS</dt>
96
													<dd>Kubuntu</dd>
97
													<dt>Kernel</dt>
98
													<dd>4.8.2</dd>
99
													<dt>Size</dt>
100
													<dd>2.51GB</dd>
101
													<dt>Users</dt>
102
													<dd>user</dd>
103
													<dt>Root partition</dt>
104
													<dd>1</dd>
105
												</dl>
106
											</div>
107
										</div>
108
									</li>
109
									<li class="public-images">
110
										<div class="row">
111
											<div class="img-col"><img src="images/os-kubuntu.png" alt=""></div>
112
											<a href="" class="name-col">Kubuntu LTS (by Kpal)</a>
113
											<div class="size-col">10GB</div>
114
											<div class="btn-col"><a href="" class="wrap-a">details</a></div>
115
										</div>
116
										<div class="details">
117
											<div class="row">
118
												<h3>Image metadata</h3>
119
												<dl>
120
													<dt>Owner</dt>
121
													<dd>system</dd>
122
													<dt>OS</dt>
123
													<dd>Kubuntu</dd>
124
													<dt>Kernel</dt>
125
													<dd>4.8.2</dd>
126
													<dt>Size</dt>
127
													<dd>2.51GB</dd>
128
													<dt>Users</dt>
129
													<dd>user</dd>
130
													<dt>Root partition</dt>
131
													<dd>1</dd>
132
												</dl>
133
											</div>
134
										</div>
135
									</li>
136
									<li class="public-images">
137
										<div class="row">
138
											<div class="img-col"><img src="images/os-fedora.png" alt=""></div>
139
											<a href="" class="name-col">Fedora (by Athina)</a>
140
											<div class="size-col">10GB</div>
141
											<div class="btn-col"><a href="" class="wrap-a">details</a></div>
142
										</div>
143
										<div class="details">
144
											<div class="row">
145
												<h3>Image metadata</h3>
146
												<dl>
147
													<dt>Owner</dt>
148
													<dd>system</dd>
149
													<dt>OS</dt>
150
													<dd>Kubuntu</dd>
151
													<dt>Kernel</dt>
152
													<dd>4.8.2</dd>
153
													<dt>Size</dt>
154
													<dd>2.51GB</dd>
155
													<dt>Users</dt>
156
													<dd>user</dd>
157
													<dt>Root partition</dt>
158
													<dd>1</dd>
159
												</dl>
160
											</div>
161
										</div>
162
									</li>
163
									<li class="shared-images">
164
										<div class="row">
165
											<div class="img-col"><img src="images/os-fedora.png" alt=""></div>
166
											<a href="" class="name-col">Fedora (by Athina)</a>
167
											<div class="size-col">3.67 GB</div>
168
											<div class="btn-col"><a href="" class="wrap-a">details</a></div>
169
										</div>
170
										<div class="details">
171
											<div class="row">
172
												<h3>Image metadata</h3>
173
												<dl>
174
													<dt>Owner</dt>
175
													<dd>system</dd>
176
													<dt>OS</dt>
177
													<dd>Kubuntu</dd>
178
													<dt>Kernel</dt>
179
													<dd>4.8.2</dd>
180
													<dt>Size</dt>
181
													<dd>2.51GB</dd>
182
													<dt>Users</dt>
183
													<dd>user</dd>
184
													<dt>Root partition</dt>
185
													<dd>1</dd>
186
												</dl>
187
											</div>
188
										</div>
189
									</li>
190
									<li class="my-images">
191
										<div class="row">
192
											<div class="img-col"><img src="images/os-windows.png" alt=""></div>
193
											<a href="" class="name-col">Windows Server 2012</a>
194
											<div class="size-col">13.66 GB</div>
195
											<div class="btn-col"><a href="" class="wrap-a">details</a></div>
196
										</div>
197
										<div class="details">
198
											<div class="row">
199
												<h3>Image metadata</h3>
200
												<dl>
201
													<dt>Owner</dt>
202
													<dd>system</dd>
203
													<dt>OS</dt>
204
													<dd>Kubuntu</dd>
205
													<dt>Kernel</dt>
206
													<dd>4.8.2</dd>
207
													<dt>Size</dt>
208
													<dd>2.51GB</dd>
209
													<dt>Users</dt>
210
													<dd>user</dd>
211
													<dt>Root partition</dt>
212
													<dd>1</dd>
213
												</dl>
214
											</div>
215
										</div>
216
									</li>
217
									<li class="system-images">
218
										<div class="row">
219
											<div class="img-col"><img src="images/os-windows.png" alt=""></div>
220
											<a href="" class="name-col">Windows Server 2012</a>
221
											<div class="size-col">13.66 GB</div>
222
											<div class="btn-col"><a href="" class="wrap-a">details</a></div>
223
										</div>
224
										<div class="details">
225
											<div class="row">
226
												<h3>Image metadata</h3>
227
												<dl>
228
													<dt>Owner</dt>
229
													<dd>system</dd>
230
													<dt>OS</dt>
231
													<dd>Kubuntu</dd>
232
													<dt>Kernel</dt>
233
													<dd>4.8.2</dd>
234
													<dt>Size</dt>
235
													<dd>2.51GB</dd>
236
													<dt>Users</dt>
237
													<dd>user</dd>
238
													<dt>Root partition</dt>
239
													<dd>1</dd>
240
												</dl>
241
											</div>
242
										</div>
243
									</li>
244
									<li class="system-images">
245
										<div class="row">
246
											<div class="img-col"><img src="images/os-windows.png" alt=""></div>
247
											<a href="" class="name-col">Windows Server 2008</a>
248
											<div class="size-col">10.79 GB</div>
249
											<div class="btn-col"><a href="" class="wrap-a" data-next="el3">details</a></div>
250
										</div>
251
										<div class="details">
252
											<div class="row">
253
												<h3>Image metadata</h3>
254
												<dl>
255
													<dt>Owner</dt>
256
													<dd>system</dd>
257
													<dt>OS</dt>
258
													<dd>Kubuntu</dd>
259
													<dt>Kernel</dt>
260
													<dd>4.8.2</dd>
261
													<dt>Size</dt>
262
													<dd>2.51GB</dd>
263
													<dt>Users</dt>
264
													<dd>user</dd>
265
													<dt>Root partition</dt>
266
													<dd>1</dd>
267
												</dl>
268
											</div>
269
										</div>
270
									</li>
271
								</ul>
272
							</div>
273
							<div class="step step-2" id="step-2" data-step=2>
274
								<div class="row">
275
									<form class="custom">
276
									  <select class="medium">
277
									    <option class="el5">Basic Project</option>
278
									    <option>Project 2</option>
279
									    <option>Project 3</option>
280
									  </select>
281
									</form>
282
									<ul class="flavor">
283
										<li>
284
											<div class="title">
285
												<span class="snf-chip-outline snf-font"></span>
286
												<h2>
287
													CPU<span> (x cores)</span>
288
													<em>Choose number of CPU cores</em>
289
												</h2>
290
												<p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p>
291
											</div>
292
											<div class="options-bar">
293
												<div class="bar">
294
													<div class="wrap">
295
														<div class="container">
296
															<!-- width percentages do not correspond to actual mesurements -->
297
															<div class="total" style="width:60%">
298
																<div class="current" style="width:30%"></div>
299
																<span>60%</span>
300
															</div>
301
														</div>
302
													</div>
303
												</div>
304
												<ul class="options with-flavor">
305
													<li><a href="" class="small current preselected  wrap-a" data-help="help text for 1">1</a></li>
306
													<li><a href="" class="medium wrap-a" data-help="help text for 2">2</a></li>
307
													<li><a href="" class="large disabled wrap-a" data-help="help text for 3">3</a></li>
308
													<li><a href="" class="disabled wrap-a" data-help="help text for 4">4</a></li>
309
												</ul>
310
											</div>
311
										</li>
312
										<li>
313
											<div class="title">
314
												<span class="snf-ram-outline snf-font"></span>
315
												<h2>
316
													Memory Size
317
													<span> (MB)</span>
318
													<em>Choose memory size</em>
319
												</h2>
320
												<p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p>
321
											</div>
322
											<div class="options-bar">
323
												<div class="bar">
324
													<div class="wrap">
325
														<div class="container">
326
															<!-- width percentages do not correspond to actual mesurements -->
327
															<div class="total" style="width:60%">
328
																<div class="current" style="width:30%"></div>
329
																<span>60%</span>
330
															</div>
331
														</div>
332
													</div>
333
												</div>
334
												<ul class="options with-flavor">
335
													<li><a href="" class="small current preselected wrap-a">1024</a></li>
336
													<li><a href="" class="medium wrap-a">2048</a></li>
337
													<li><a href="" class="large wrap-a">4096</a></li>
338
												</ul>
339
											</div>
340
										</li>
341
										<li>
342
											<div class="title">
343
												<span class="snf-volume-outline snf-font"></span>
344
												<h2>
345
													Disk Size<span> (GB)</span>
346
													<em>Choose disk size</em>
347
												</h2>
348
												<p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p>
349
											</div>
350
											<div class="options-bar">
351
												<div class="bar">
352
													<div class="wrap">
353
														<div class="container">
354
															<!-- width percentages do not correspond to actual mesurements -->
355
															<div class="total low" style="width:40%">
356
																<div class="current" style="width:80%"></div>
357
																<span>40%</span>
358
															</div>
359
														</div>
360
													</div>
361
												</div>
362
												<ul class="options with-flavor">
363
													<li><a href="" class="small current preselected wrap-a">10</a></li>
364
													<li><a href="" class="medium wrap-a">20</a></li>
365
													<li><a href="" class="large wrap-a">30</a></li>
366
													<li><a href="" class="wrap-a">40</a></li>
367
												</ul>
368
											</div>
369
										</li>
370
										<li>
371
											<div class="title">
372
												<span class="snf-volume-outline snf-font"></span>
373
												<h2>
374
													Storage
375
													<em>Select storage type</em>
376
												</h2>
377
												<p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p>
378
											</div>
379
											<div class="options-bar">
380
												<div class="bar">
381
													<div class="wrap  disabled-progress-bar">
382
														<div class="container">
383
															<!-- width percentages do not correspond to actual mesurements -->
384
															<div class="total" style="width:100%">
385
																<div class="current" style="width:0%"></div>
386
																<span></span>
387
															</div>
388
														</div>
389
													</div>
390
												</div>
391
												<ul class="options vm-storage-selection">
392
													<li><a href="" class="current preselected wrap-a">DRBD</a></li>
393
													<li><a href="" data-next="el3" class="wrap-a">Archipelago</a></li>
394
												</ul>
395
											</div>
396
										</li>
397
									</ul>
398
								</div>
399
							</div>
400
							<div class="step step-3" id="step-3" data-step=3>
401
								<div class="advanced-conf-step">
402
									<div class="adv-main row">
403
										<div class="name">
404
											<h2>Machine name</h2>
405
											<span class="input">
406
												<input type="text" placeholder="My Ubuntu Server" class="el7">
407
											</span>
408
										</div>
409
										<div class="expand-btn">
410
											<a class="expand-arrow" href="">
411
												Advanced Configuration
412
												<span class="snf-arrow-down preselected"></span>
413
											</a>
414
										</div>
415
									</div>
416
									<div class="advanced-conf-options">
417
										<div class="ssh-keys-area area">
418
											<div class="row">
419
												<h2>Public SSH keys</h2>
420
												<p>Your account contains the following SSH public keys. Select one or more to activate in your new machine. You will then be able to ssh with the corresponding private key without a password.</p>
421
												<ul>
422
													<li class="trigger-checkbox">
423
														<h3>My public key long name one </h3>
424
														<a href="" class="check">
425
															<span class="snf-checkbox-unchecked"></span>
426
														</a>
427
													</li>
428
													<li class="trigger-checkbox">
429
														<h3>Other public key </h3>
430
														<a href="" class="check">
431
															<span class="snf-checkbox-unchecked"></span>
432
														</a>
433
													</li>
434
													<li class="trigger-checkbox">
435
														<h3>My public key long name one </h3>
436
														<a href="" class="check">
437
															<span class="snf-checkbox-unchecked"></span>
438
														</a>
439
													</li>
440
												</ul>
441
												<div>
442
													<a href="" class="btn5 wrap-a" data-reveal-id="sshkeys-wizard" title="set data-reveal-id: sshkeys-wizard">manage ssh keys</a>
443
												</div>
444
											</div>
445
										</div>
446
										<div class="networks-area area">
447
											<h2 class="row">Networks</h2>
448
											<ul>
449
												<li class="trigger-checkbox row has-more select-net">
450
													<h3 class="">
451
														<span class="net-icons">
452
															<span class="temp-line line1"></span>
453
															<span class="snf-www"></span>
454
															<span class="snf-network-full"></span>
455
														</span>
456
														Public Network
457
													</h3>
458
													<a href="" class="check"><span class="snf-checkbox-checked prechecked"></span></a>
459
												</li>
460
												<li class="more">
461
													<div class="row">
462
														<div class="trigger-checkbox clearfix">
463
															<h3>192.168.2.3</h3>
464
															<a href="" class="check"><span class="snf-checkbox-checked prechecked"></span></a>
465
														</div>
466
														<div class="trigger-checkbox clearfix">
467
															<h3>192.168.2.3</h3>
468
															<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
469
														</div>
470
														<div class="trigger-checkbox clearfix">
471
															<h3>192.168.2.3</h3>
472
															<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
473
														</div>
474
														<div>
475
															<a href="" class="btn5 wrap-a">allocate ip</a>
476
														</div>
477
													</div>
478
												</li>
479
												<li class="trigger-checkbox row select-net">
480
													<h3 class="net-name">
481
														<span class="net-icons">
482
															<span class="temp-line line1"></span>
483
															<span class="temp-line line2"></span>
484
															<span class="snf-www"></span>
485
															<span class="snf-router-outline"></span>
486
															<span class="snf-network-full"></span>
487
														</span>
488
														Routed Network
489
													</h3>
490
													<a href="" class="check">
491
														<span class="snf-checkbox-unchecked"></span>
492
													</a>
493
												</li>
494
												<li class="trigger-checkbox row select-net">
495
													<h3 class="net-name">
496
														<span class="net-icons">
497
															<span class="snf-network-full"></span>
498
														</span>
499
														Private Network 1
500
													</h3>
501
													<a href="" class="check">
502
														<span class="snf-checkbox-unchecked"></span>
503
													</a>
504
												</li>
505
												<li class="trigger-checkbox row select-net">
506
													<h3 class="net-name">
507
														<span class="net-icons">
508
															<span class="snf-network-full"></span>
509
														</span>
510
														Private Network 2
511
													</h3>
512
													<a href="" class="check">
513
														<span class="snf-checkbox-unchecked"></span>
514
													</a>
515
												</li>
516
											</ul>
517
										</div>
518
										<div class="tags-area area">
519
											<div class="row">
520
												<h2>Tags</h2>
521
												<p>Dude use your tags like you eat your cereal.<br>You can color code them as well</p>
522
												<ul>
523
													<li>
524
														<h3>My tags</h3>
525
														<span>select</span>
526
													</li>
527
													<li class="trigger-checkbox">
528
														<h3>
529
															<span class="tag-demo tag4"></span>
530
															Operating system
531
														</h3>
532
														<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
533
													</li>
534
													<li class="trigger-checkbox">
535
														<h3>
536
															<span class="tag-demo tag5"></span>
537
															Pirate PC1
538
														</h3>
539
														<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
540
													</li>
541
													<li class="trigger-checkbox">
542
														<h3>
543
															<span class="tag-demo tag6"></span>
544
															Pirate PC1
545
														</h3>
546
														<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
547
													</li>
548
												</ul>
549
												<div ><a class="btn5 show-add-tag wrap-a" href="" id="show-add-tag">add new Tag</a></div>
550
												<div class="snf-color-picker">
551
													<form action="#" method="post">
552
														<div id="picker-1">
553
															<div class="farbtastic">
554
																<div class="color" style="background-color: rgb(255, 0, 21);"></div>
555
																<div class="wheel"></div>
556
																<div class="overlay"></div>
557
																<div class="h-marker marker" style="left: 90px; top: 13px;"></div>
558
																<div class="sl-marker marker" style="left: 87px; top: 114px;"></div>
559
															</div>
560
														</div>
561
														<div class="form-item">
562
															<input type="text" id="color-1" class="color-preview" name="color" value="#16C1E9" disabled>
563
															<span class="input"><input class="tag_name" type="text" placeholder="My Tag"></span>
564
														</div>
565
													</form>
566
													<div class="btns">
567
														<a class="btn5 wrap-a" href="">OK</a>
568
														<a class="btn5 hide-add-tag wrap-a" href="">CANCEL</a>
569
													</div>
570
													<a href="" id="hide-add-tag-dummy" style="position:relative;top:50px">&nbsp;</a>
571
												</div>
572
											</div>
573
										</div>
574
									</div>
575
								</div>
576
	<!-- end step 3 -->				</div>
577
							<div class="step step-4" id="step-4" data-step=4>
578
								<div class="summary">
579
									<div class="row">
580
										<div class="wrap">
581
											<dl>
582
												<dt><span class="snf-pc-full snf-font"></span>Machine name</dt>
583
												<dd>handsome frank</dd>
584
											</dl>
585
										</div>
586
									</div>
587
									<div class="row">
588
										<div class="wrap">
589
											<dl>
590
												<dt>Image</dt>
591
												<dd>Fedora</dd>
592
												<dt>Name</dt>
593
												<dd>Debian Base</dd>
594
												<dt>Desciption</dt>
595
												<dd>open suse description open suse description open suse description open suse description open suse description</dd>
596
												<dt>os</dt>
597
												<dd>Debian</dd>
598
												<dt>Size</dt>
599
												<dd>10.4GB</dd>
600
												<dt>GUI</dt>
601
												<dd>No GUI</dd>
602
												<dt>Kernel</dt>
603
												<dd>2.3.4</dd>
604
											</dl>
605
										</div>
606
									</div>
607
									<div class="row">
608
										<div class="wrap">
609
											<h2>Flavor</h2>
610
											<dl>
611
												<dt><span class="snf-chip-outline snf-font"></span>CPUs</dt>
612
												<dd>4x</dd>
613
												<dt><span class="snf-ram-outline snf-font"></span>Memory</dt>
614
												<dd>512 MB</dd>
615
												<dt><span class="snf-volume-outline snf-font"></span>Disk</dt>
616
												<dd>4GB</dd>
617
												<dt><span class="snf-volume-outline snf-font"></span>Storage Type</dt>
618
												<dd>DRBD</dd>
619
											</dl>
620
										</div>
621
									</div>
622
									<div class="row">
623
										<div class="wrap">
624
											<dl>
625
												<dt>Machine Tags</dt>
626
												<dd>Database server</dd>
627
												<dt>SSH Keys</dt>
628
												<dd>
629
													my public key 1<br>
630
													my public key 3<br>
631
												</dd>
632
												<dt>IPs</dt>
633
												<dd>192.168.1.3<br>192.168.1.3</dd>
634
												<dt>Private networks</dt>
635
												<dd>No private networks selected</dd>
636
											</dl>
637
										</div>
638
									</div>
639
								</div>
640
							</div>
641
						</div>
642
					</div>
643
				<div class="bottom">
644
					<div class="row">
645
						<a href="" class="nav prev el3"><span>CANCEL</span></a>
646
						<a href="" class="nav next" data-step="1" data-next="el2"><span>NEXT</span></a>
647
					</div>
648
				</div>
649
			</div>
650
		</section>
32 651
			<section class="actions-bar clearfix">
33 652
				<h2>{{pageTitle}}</h2>
34 653
				<div class="rt-actions">
......
57 676
			</section>
58 677
		</div>
59 678
	</script>
60
	<script type="text/x-handlebars" data-template-name="nets">
61
		<h2>nets</h2>
62
	</script>
63
	<script type="text/x-handlebars" data-template-name="elems">
64
		<h2>{{other}}</h2>
65
		<div {{bind-attr class=":entities :grid-view"}}>
66
		<ul class="items-list">
67
			<li>Add New...</li>
68
			{{#each}}
69
				{{view Okeanos.ElemView}}
70
			{{/each}}
71
		</ul>
72
		</div>
73
	</script>
74 679

  
75
	<script type="text/x-handlebars" data-template-name="elem">
76
		<ul class="side-actions">
77
			<li>
78
				<a href="vm_details.html" data-tooltip title="view details" class="details has-tip">i</a>
79
			</li>
80
			<li>
81
				<a href="#" title="connect to machine" data-tooltip data-reveal-id="vm-connect" class="has-tip">
82
					<span class="snf-thunder-full"></span>
83
				</a>
84
			</li>
85
			<li class="more-actions">
86
				<a href="#" title="">...</a>
87
				<ul class="many">
88
					{{#each setAvailableActions}}
89
						<li>
90
							{{actionBtns-simple actionLabel=this.description elementID=controller.id action= this.description param=controller.id}}
91
						</li>
92
					{{/each}}
93
				</ul>
94
			</li>
95
			<li class="bottom">
96
				<a href="" title=""><span ></span></a>
97
				<ul class="options">
98
					<li class="selected"><a href="">My awesome project</a></li>
99
					<li><a href="">Project 1</a></li>
100
					<li><a href="">Project 2</a></li>
101
					<li><a href="">Project 3</a></li>
102
					<li><a href="">Project 4</a></li>
103
				</ul>
104
				<ul>
105
					<li>My awesome project</li>
106
					<li><a href="" class="reassign">Reassign<span class="arrow-right"></span></a></li>
107
				</ul>
108
			</li>
109
		</ul>
110
		<div class="container">
111
			<a href="" class="check">
112
				<span class="snf-checkbox-unchecked"></span>
113
			</a>
114
			<div class="img-wrap">
115
				<span {{bind-attr class="parentController.icon :snf-font"}}></span>
116
				{{#if parentController.hasOS}}
117
					<span {{bind-attr class="os :os"}}></span>
118
				{{/if}}
119
			</div>
120
			<h4>{{icon}}</h4>
121
			<div class="actions">
122
				<a href="" data-reveal-id="vm-connect" data-tooltip title="connect" class="connect has-tip"><span class="snf-thunder-full"></span></a>
123
				<a href="vm_details.html" data-tooltip title="view vm details" class="snf-info-outline has-tip">i</a>
124
			</div>
125
			<div class="tags">
126
			</div>
127
			<div class= "status">
128
				<span class="state">{{parentController.icon}}</span>
129
				<span class="state">{{status}}</span>
130
				<span class="logs">{{name}}</span>
131
			</div>
132
			<div class="info"><a {{bind-attr href=hostname}} title="">{{hostname}}</a></div>
133
		</div>
134
	</script>
135
	
136

  
137
	<script type="text/x-handlebars" data-template-name="volumes">
138
		<h2>volumes</h2>
139
	</script>
140 680
	<script type="text/x-handlebars" data-template-name="pithos">
141 681
		<h2>pithos</h2>
142 682
	</script>
143
	<script type="text/x-handlebars" data-template-name="snapshots">
144
		<h2>shapshots</h2>
145
	</script>
146
	<script type="text/x-handlebars" data-template-name="images">
147
		<h2>images</h2>
148
	</script>
149 683
	<script type="text/x-handlebars" data-template-name="ips">
150 684
		<h2>ips</h2>
151 685
	</script>
......
162 696
	<script src="javascripts/custom.modernizr.js"></script>
163 697
	<script src="javascripts/jquery.js"></script>
164 698
	<script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>
165
	<script src="javascripts/handlebars-1.1.2.js"></script>
166
	<script src="javascripts/ember-1.3.0.js"></script>
167
  	<script src="javascripts/ember-data.js"></script>
168 699
	<script src="javascripts/underscore-min.js"></script>
169 700
  	<script src="javascripts/okeanos.js"></script>
170 701
  	<!-- templates must be loaded before we use it  -->
171
  	<script src="javascripts/templates.js"></script>
172
  	<script src="javascripts/okeanos-ember.js"></script>
173 702
	<script src="javascripts/foundation/foundation.js"></script>
174 703
	<script src="javascripts/foundation/foundation.alerts.js"></script>
175 704
	
......
205 734
	<!-- fabrastic.js used for the color picker --> 
206 735
	<script type="text/javascript" src="javascripts/farbtastic.js"></script>
207 736

  
737
	<script src="javascripts/handlebars-1.1.2.js"></script>
738
	<script src="javascripts/ember-1.3.0.js"></script>
739
	<script src="javascripts/ember-data.js"></script>
740
	<script src="javascripts/templates.js"></script>
741
	<script src="javascripts/okeanos-ember.js"></script>
208 742
  <script>
209 743
    $(document).foundation();
210 744
    $(document).ready(function() {
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/okeanos-ember.js
1 1
/* Init Application */
2 2

  
3
window.Okeanos = Ember.Application.create({
3
window.Synnefo = Ember.Application.create({
4 4
	currentPath: 'vms',
5 5
	 LOG_TRANSITIONS: true, // To have Ember write out transition events to the log (it can be helpful to see exactly what is going on with the router)
6 6
});
7 7

  
8
Okeanos.ApplicationAdapter = DS.FixtureAdapter.extend();;Ember.Inflector.inflector.uncountable('account');
8
Synnefo.ApplicationAdapter = DS.FixtureAdapter.extend();;Ember.Inflector.inflector.uncountable('account');
9 9

  
10
Okeanos.Account = DS.Model.extend({
10
Synnefo.Account = DS.Model.extend({
11 11
	email: DS.attr('string')
12 12
});
13 13

  
14 14
// CHECK can i use a single obj and not an array of obj
15
Okeanos.Account.FIXTURES = {
15
Synnefo.Account.FIXTURES = {
16 16
	id: 001,
17 17
	email: "athina@mail.com"
18 18
};
19 19

  
20 20

  
21 21

  
22
Okeanos.Vm = DS.Model.extend({
22
Synnefo.Vm = DS.Model.extend({
23 23
	// id: DS.attr('number'), 	we do not define it ;)
24 24
	name: DS.attr('string'),
25 25
	hostname: DS.attr('string'),
......
27 27
	os: DS.attr()
28 28
});
29 29

  
30
Okeanos.Vm.FIXTURES = 
30
Synnefo.Vm.FIXTURES =
31 31
[{
32 32
	id: 125355,
33 33
	name: "web-server",
......
43 43
	os: "fedora"
44 44
}];
45 45

  
46
Okeanos.Net = DS.Model.extend({
46
Synnefo.Network = DS.Model.extend({
47 47
	name: DS.attr('string'),
48 48
	status: DS.attr('string'),
49
	vms: DS.attr(),
50
	ips: DS.attr()
51 49
});
52 50

  
53
Okeanos.Net.FIXTURES = 
51
Synnefo.Network.FIXTURES =
54 52
[{
55
	
53
  id: 11,
54
  name: 'Network-1',
55
  status: 'running'
56
},
57
{
58
  id: 22,
59
  name: 'Network-2',
60
  status: 'error'
61
}];
62

  
63

  
64
Synnefo.Volume = DS.Model.extend({
65
  name: DS.attr('string'),
66
  status: DS.attr('string'),
67
});
68

  
69
Synnefo.Volume.FIXTURES =
70
[{
71
  id: 111,
72
  name: 'Volume-1',
73
  status: 'running'
74
},
75
{
76
  id: 222,
77
  name: 'Volume-2',
78
  status: 'building'
79
}];
80

  
81
Synnefo.Snapshot = DS.Model.extend({
82
  name: DS.attr('string'),
83
  status: DS.attr('string'),
84
});
85

  
86
Synnefo.Snapshot.FIXTURES =
87
[{
88
  id: 33,
89
  name: 'Snapshot-1',
90
  status: 'running'
91
},
92
{
93
  id: 44,
94
  name: 'Snapshot-2',
95
  status: 'building'
56 96
}];
57 97

  
58 98

  
99
Synnefo.UserImage = DS.Model.extend({
100
  name: DS.attr('string'),
101
  status: DS.attr('string'),
102
});
103

  
104
Synnefo.UserImage.FIXTURES =
105
[{
106
  id: 55,
107
  name: 'Image-1',
108
  status: 'running'
109
},
110
{
111
  id: 66,
112
  name: 'Image-2',
113
  status: 'running'
114
}];
59 115

  
60 116

  
61
Okeanos.places = [{
117
Synnefo.conf = {
118
  sectors: [{
62 119
  	destination: "vms",
63 120
  	title: "Virtual Machines",
64 121
  	icon: "snf-pc-outline"
......
98 155
  	destination: "sshkeys",
99 156
  	title: "SSh Keys",
100 157
  	icon: "snf-key-outline"
101
  }];
102

  
103

  
104
  Okeanos.AllActions = [{
105
  	description:'start',
106
  	'snf-components':['vms'],
107
  	'enabled-status': ['off'],
108
  	action: 'is this a function?'
109
},
110
 {
111
 	description:'destroyElement',
112
 	'snf-components': ['vms', 'nets'],
113
 	'enabled-status': ['all'],
114
 	action: 'is this a function?',
115
},
116
{
117
 	description:'shutdown',
118
 	'snf-components': ['vms'],
119
 	'enabled-status': ['running'],
120
 	action: 'is this a function?'
121
},
122
{
123
 	description:'add machine',
124
 	'snf-components': ['nets'],
125
 	'enabled-status': ['active'],
126
 	action: 'is this a function?'
127
},
128
{
129
 	description:'action for all',
130
 	'snf-components': ['vms', 'nets'],
131
 	'enabled-status': ['all'],
132
 	action: 'is this a function?'
133
}];/* Mapping */
134

  
135
Okeanos.Router.map(function() {
136

  
137
for(var i=0; i<Okeanos.places.length; i++)
138
	this.resource(Okeanos.places[i].destination);
158
  }],
159
  userActions: [{
160
    description:'start',
161
    'snf-components':['vms'],
162
    'enabled-status': ['off'],
163
    action: 'is this a function?'
164
  },
165
  {
166
    description:'destroyElement',
167
    'snf-components': ['vms', 'nets'],
168
    'enabled-status': ['all'],
169
    action: 'is this a function?',
170
  },
171
  {
172
    description:'shutdown',
173
    'snf-components': ['vms'],
174
    'enabled-status': ['running'],
175
    action: 'is this a function?'
176
  },
177
  {
178
    description:'add machine',
179
    'snf-components': ['nets'],
180
    'enabled-status': ['active'],
181
    action: 'is this a function?'
182
  },
183
  {
184
    description:'action for all',
185
    'snf-components': ['vms', 'nets'],
186
    'enabled-status': ['all'],
187
    action: 'is this a function?'
188
}]
189
};
190
;/* Mapping */
191

  
192
Synnefo.Router.map(function() {
193
// I defined the above resource to extend its Route
194
this.resource('sections', {'path':'/'});
195
for(var i=0; i<Synnefo.conf.sectors.length; i++)
196
	this.resource(Synnefo.conf.sectors[i].destination/*, function() {
197
		this.route('grid');
198
		this.route('list');
199
	}*/);
139 200
});
140 201

  
141 202

  
142 203
/* Routes */
143 204

  
144
Okeanos.ApplicationRoute = Ember.Route.extend({
205
Synnefo.ApplicationRoute = Ember.Route.extend({
145 206
	model: function() {
146
		
147 207
		return {email: 'athina@mail.com'};
208
	},
209
	redirect: function() {
210
		//  have to set vm navigation icon full
211
		this.transitionTo('vms');
148 212
	}
149 213
});
150 214

  
151
Okeanos.VmsRoute = Ember.Route.extend({
215
Synnefo.SectionsRoute = Ember.Route.extend({
216
	modelName: undefined,
152 217
	model: function() {
153
		return this.store.find('vm');
218
		return this.store.find(this.modelName);
154 219
	},
155 220
	renderTemplate: function(controller) {
156
		this.render('snfElems', {controller: controller})
221
		this.render('snfElems', {controller: controller});
157 222
	}
158 223
});
159 224

  
160
Okeanos.NetsRoute = Ember.Route.extend({
161
	model: function() {
162
		return [{id: '1', name:'net1', status: 'active'}, {id: '2', name:'net2', status: 'error'}];
163
	},
164
	renderTemplate: function(controller) {
165
		this.render('snfElems', {controller: controller})
166
	}
225
Synnefo.VmsRoute = Synnefo.SectionsRoute.extend({
226
	modelName: 'vm'
227
});
228

  
229
Synnefo.NetsRoute = Synnefo.SectionsRoute.extend({
230
	modelName: 'network'
231
});
232

  
233
Synnefo.VolumesRoute = Synnefo.SectionsRoute.extend({
234
	modelName: 'volume'
235
});
236

  
237
Synnefo.SnapshotsRoute = Synnefo.SectionsRoute.extend({
238
	modelName: 'snapshot'
239
});
240

  
241
Synnefo.ImagesRoute = Synnefo.SectionsRoute.extend({
242
	modelName: 'userImage'
167 243
});
168 244

  
169 245

  
246

  
247

  
248

  
170 249
/* Controllers */
171 250

  
172
Okeanos.ApplicationController = Ember.Controller.extend({
251
Synnefo.ApplicationController = Ember.Controller.extend({
173 252
	updateCurrentPath: function() {
174 253
		// we need the set because ElemsController gets the value of current path in every transition
175
		Okeanos.set('currentPath', this.get('currentPath'))
254
		Synnefo.set('currentPath', this.get('currentPath'))
176 255
		return this.get('currentPath');
177 256
	}.observes('currentPath'),
178 257
	actions: {
179 258
		test: function() {
180
			console.log('This is test from Okeanos.ApplicationController');
259
			console.log('This is test from Synnefo.ApplicationController');
181 260
			return 0;
182 261
		}
183 262
	},
184 263

  
185 264
	pageTitle : function() {
186 265
		var currentPath =this.get('currentPath');
187
		if(currentPath!== 'index') return Okeanos.places.findBy('destination', this.get('currentPath')).title;
266
		if(currentPath!== 'index') return Synnefo.conf.sectors.findBy('destination', this.get('currentPath')).title;
188 267
			else return 'Home';
189 268
	}.property('currentPath'),
190 269

  
......
192 271
});
193 272

  
194 273

  
195
Okeanos.ElemsController = Ember.ArrayController.extend({
274

  
275
Synnefo.ElemsController = Ember.ArrayController.extend({
196 276
	type: undefined,
197 277
	itemController: function(){
198 278
		var type = this.type;
199 279
		return type.substring(0, type.length - 1);
200 280
	}.property(),
201 281
	icon: function() {
202
		return	Okeanos.places.findBy('destination', this.get('type')).icon.replace('outline', 'full');
282
		// should this be placed in ElemsView?
283
		return	Synnefo.conf.sectors.findBy('destination', this.get('type')).icon.replace('outline', 'full');
203 284
	}.property(),
204 285
	hasOS: function(){
205
			if(Okeanos.get('currentPath') == "vms")
286
			if(Synnefo.get('currentPath') == "vms")
206 287
				return true;
207 288
			else return false;
208 289
	}.property(),
209 290
		hasTags: function(){
210
			if(Okeanos.get('currentPath') == "vms")
291
			if(Synnefo.get('currentPath') == "vms")
211 292
				return true;
212 293
			else return false;
213 294
	}.property(),
214 295
});
215 296

  
216
Okeanos.VmsController = Okeanos.ElemsController.extend({
297
Synnefo.VmsController = Synnefo.ElemsController.extend({
217 298
	type: 'vms'
218 299
});
219 300

  
220 301

  
221
Okeanos.NetsController = Okeanos.ElemsController.extend({
302
Synnefo.NetsController = Synnefo.ElemsController.extend({
222 303
	type: 'nets'
223 304
});
224 305

  
306
Synnefo.VolumesController = Synnefo.ElemsController.extend({
307
	type: 'volumes'
308
});
309

  
310

  
311
Synnefo.SnapshotsController = Synnefo.ElemsController.extend({
312
	type: 'snapshots'
313
});
314

  
315
Synnefo.ImagesController = Synnefo.ElemsController.extend({
316
	type: 'images'
317
});
318

  
319

  
225 320

  
226
Okeanos.ElemController = Ember.ObjectController.extend({
321
Synnefo.ElemController = Ember.ObjectController.extend({
227 322
	needs: [],
228
	actionsList: Okeanos.AllActions,
323
	actionsList: Synnefo.conf.userActions,
229 324
	setAvailableActions: function() {
230 325
		var parent = this.needs;
231 326
		var self = this;
......
247 342
	}
248 343
});
249 344

  
250
Okeanos.VmController = Okeanos.ElemController.extend({
345
Synnefo.VmController = Synnefo.ElemController.extend({
251 346
	needs: ['vms']
252 347
});
253 348

  
254
Okeanos.NetController = Okeanos.ElemController.extend({
349
Synnefo.NetController = Synnefo.ElemController.extend({
255 350
	needs: ['nets']
256 351
});
257 352

  
353
Synnefo.VolumeController = Synnefo.ElemController.extend({
354
	needs: ['volumes']
355
});
356

  
357
Synnefo.SnapshotController = Synnefo.ElemController.extend({
358
	needs: ['snapshots']
359
});
360

  
361
Synnefo.ImageController = Synnefo.ElemController.extend({
362
	needs: ['images']
363
});
364

  
258 365

  
259 366
/* Views */
260 367

  
261
Okeanos.NavIconView = Ember.View.extend({
368
Synnefo.NavIconView = Ember.View.extend({
262 369
	tagName: 'span',
263 370
	click: function(e) {
264 371
		var parentEl = this.$().parent('a');
......
270 377

  
271 378
});
272 379

  
273
Okeanos.NavigationView = Ember.CollectionView.extend({
380
Synnefo.NavigationView = Ember.CollectionView.extend({
274 381
  tagName: "ul",
275 382
  classNames: ['icons-nav'],
276 383

  
277
  content: Okeanos.places,
384
  content: Synnefo.conf.sectors,
278 385
  itemViewClass: Ember.View.extend({
279
    template: Ember.TEMPLATES["navigationItem"]
386
    templateName: "navigationItem"
280 387
  }),
281 388
});
282 389

  
283 390

  
284
Okeanos.ElemView = Ember.View.extend({
391
Synnefo.ElemView = Ember.View.extend({
285 392
	// templateName: 'elem',
286 393
	addNewBtn: false,
287
	template: Ember.TEMPLATES['snfElem'],
394
	templateName: 'snfElem',
288 395
	tagName: 'li',
289 396
	selectable: true,
290 397
	initSelect: 'unchecked',
......
298 405
	}.property('controller.status')
299 406
});
300 407

  
301
Okeanos.ImgWrapView = Ember.View.extend({
302
	template: Ember.TEMPLATES['img-wrap'],
408
Synnefo.ImgWrapView = Ember.View.extend({
409
	templateName: 'img-wrap',
303 410
	classNames: ['img-wrap'],
304 411
	icon: function() {
305
		var addNewBtn = this.get('parentView').get('addNewBtn');
306
		console.log('addNewBtn: ' + addNewBtn);
412
		var parentView = this.get('parentView');
413
		var addNewBtn = parentView.get('addNewBtn');
307 414
		if(addNewBtn)
308
			return this.get('parentView').get('icon');
415
			return parentView.get('icon');
309 416
		else
310
			return this.get('parentView').get('controller').get('parentController').get('icon');
417
			return parentView.get('controller').get('parentController').get('icon');
311 418
	}.property()
312 419
});
313 420

  
314

  
315
// to evala ws view gt thelw na kanw diaxeirisi tou interaction tou xristi
316
Okeanos.ElementSidebarView = Ember.View.extend({
317
	tagName: 'ul',
318
	classNames: ['side-actions'],
319
	template: Ember.TEMPLATES['elementSidebar']
421
Synnefo.NameView = Ember.View.extend({
422
	templateName: 'name',
423
	tagName: 'h4',
424
	name: function() {
425
		// the name may be defined inside the parent view or in its model or controller
426
		return this.get('parentView').get('controller').get('name');
427
	}.property()
320 428
});
321 429

  
430
// to be changed
431
Synnefo.ImmediateActionView = Ember.View.extend({
432
	templateName: 'actions',
433
	classNames: ['actions']
434
})
435

  
322 436
/* Components */
323 437

  
324
Okeanos.Btn1Component = Ember.Component.extend({
438
Synnefo.Btn1Component = Ember.Component.extend({
325 439
	tagName: 'a',
326 440
	click: function() {
327 441
		this.sendAction("action", this.get('param'));
328 442
	}
329 443
});
330 444

  
331
Okeanos.AddNewComponent = Ember.Component.extend({
332
	template: Ember.TEMPLATES['snfElem'],
445
Synnefo.AddNewComponent = Ember.Component.extend({
446
	templateName: 'snfElem',
333 447
	addNewBtn: true,
334 448
	selectable: false,
335 449
	icon: function() {
336
		baseIcon = Okeanos.places.findBy('destination', this.get('type')).icon;
450
		baseIcon = Synnefo.conf.sectors.findBy('destination', this.get('type')).icon;
337 451
		return	baseIcon.replace('outline', 'create-full');
338 452
	}.property(),
339 453
	tagName: 'li',
340 454
	status: 'add-new',
341 455
	classNameBindings: ['status'],
342
	attributeBindings: ['data-status'],
456
	attributeBindings: ['data-status, data-reveal-id'],
457
	'data-reveal-id': function(){
458
		if(addNewBtn)
459
			return /*this.get('type').substring(0, type.length - 1)+*/'-wizard';
460
		else
461
			return undefined;
462
	}.property(),
343 463
	'data-status': function() {
344 464
		return this.status;
345 465
	}.property(),
346 466
	name: function() {
347
		var msg = 'Add New ';
467
		var msg = 'Create New ';
348 468
		var btnType = this.get('type')
349
		if(btnType === 'vms')
350
			return msg + 'Machine';
351
		else if(btnType === 'nets')
352
			return msg + 'Network';
353
	}.property()
354

  
469
		switch(btnType){
470
			case 'vms':
471
				return msg + 'Machine';
472
			case 'nets':
473
				return msg + 'Network';
474
			case 'volumes':
475
				return msg + 'Volume';
476
			case 'snapshots':
477
				return msg + 'Snapshot';
478
			case 'images':
479
				return '+ Upload New Image';
480
		}
481
	}.property(),
482
		click: function (e) {
483
			console.log('clicked create new');
484
			console.log($('.wizard').length);
485
	        e.preventDefault();
486
	        $('.overlay-area-custom').fadeIn(100);
487
	        $('body').addClass('with-overlay');
488

  
489
			$('#vm-wizard').foundation('reveal', 'open');
490
	        $('#vm-wizard').fadeIn('slow');
491
		}
355 492
});
356 493

  
357
Okeanos.LoginMenuComponent = Ember.Component.extend({
494
Synnefo.LoginMenuComponent = Ember.Component.extend({
358 495
	classNames: ['login'],
359 496
	didInsertElement: function() {
360 497
		console.log('didInsertElement');
......
369 506
	}
370 507
});
371 508

  
372
Okeanos.SnfCheckboxComponent = Ember.Component.extend({
509
Synnefo.SnfCheckboxComponent = Ember.Component.extend({
373 510
	tagName: 'a',
374 511
	classNames: ['check'],
512
	templateName: 'components/select-btn',
375 513
	initState: function() {
376 514
		return this.get('initState');
377 515
	}.property(),
378
	template: Ember.TEMPLATES['snf-checkbox'],
379 516
	didInsertElement: function() {
380
		var domRef = this.$();
517
		var el = this.$();
381 518
		var self =this;
382 519
		this.setInitClasses();
383
		domRef.click(function(e) {
520
		el.click(function(e) {
384 521
            e.preventDefault();
385 522
            e.stopPropagation();
386
            self.changeState(domRef);
523
            self.changeState(el);
387 524
            // ui.entitiesActionsEnabled();
388
            console.log(self.get('elementID'))
389 525
        });
390 526
	},
391 527
	setInitClasses: function() {
......
420 556
        $(area).find('.snf-radio-checked').not('.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked');
421 557
        $(area).find('.snf-radio-unchecked.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked');
422 558
    },
423
});
559
});
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/okeanos-ember/app.js
1 1
/* Init Application */
2 2

  
3
window.Okeanos = Ember.Application.create({
3
window.Synnefo = Ember.Application.create({
4 4
	currentPath: 'vms',
5 5
	 LOG_TRANSITIONS: true, // To have Ember write out transition events to the log (it can be helpful to see exactly what is going on with the router)
6 6
});
7 7

  
8
Okeanos.ApplicationAdapter = DS.FixtureAdapter.extend();
8
Synnefo.ApplicationAdapter = DS.FixtureAdapter.extend();
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/okeanos-ember/ember-all.js
1 1
/* Mapping */
2 2

  
3
Okeanos.Router.map(function() {
4

  
5
for(var i=0; i<Okeanos.places.length; i++)
6
	this.resource(Okeanos.places[i].destination);
3
Synnefo.Router.map(function() {
4
// I defined the above resource to extend its Route
5
this.resource('sections', {'path':'/'});
6
for(var i=0; i<Synnefo.conf.sectors.length; i++)
7
	this.resource(Synnefo.conf.sectors[i].destination/*, function() {
8
		this.route('grid');
9
		this.route('list');
10
	}*/);
7 11
});
8 12

  
9 13

  
10 14
/* Routes */
11 15

  
12
Okeanos.ApplicationRoute = Ember.Route.extend({
16
Synnefo.ApplicationRoute = Ember.Route.extend({
13 17
	model: function() {
14
		
15 18
		return {email: 'athina@mail.com'};
19
	},
20
	redirect: function() {
21
		//  have to set vm navigation icon full
22
		this.transitionTo('vms');
16 23
	}
17 24
});
18 25

  
19
Okeanos.VmsRoute = Ember.Route.extend({
26
Synnefo.SectionsRoute = Ember.Route.extend({
27
	modelName: undefined,
20 28
	model: function() {
21
		return this.store.find('vm');
29
		return this.store.find(this.modelName);
22 30
	},
23 31
	renderTemplate: function(controller) {
24
		this.render('snfElems', {controller: controller})
32
		this.render('snfElems', {controller: controller});
25 33
	}
26 34
});
27 35

  
28
Okeanos.NetsRoute = Ember.Route.extend({
29
	model: function() {
30
		return [{id: '1', name:'net1', status: 'active'}, {id: '2', name:'net2', status: 'error'}];
31
	},
32
	renderTemplate: function(controller) {
33
		this.render('snfElems', {controller: controller})
34
	}
36
Synnefo.VmsRoute = Synnefo.SectionsRoute.extend({
37
	modelName: 'vm'
35 38
});
36 39

  
40
Synnefo.NetsRoute = Synnefo.SectionsRoute.extend({
41
	modelName: 'network'
42
});
43

  
44
Synnefo.VolumesRoute = Synnefo.SectionsRoute.extend({
45
	modelName: 'volume'
46
});
47

  
48
Synnefo.SnapshotsRoute = Synnefo.SectionsRoute.extend({
49
	modelName: 'snapshot'
50
});
51

  
52
Synnefo.ImagesRoute = Synnefo.SectionsRoute.extend({
53
	modelName: 'userImage'
54
});
55

  
56

  
57

  
58

  
37 59

  
38 60
/* Controllers */
39 61

  
40
Okeanos.ApplicationController = Ember.Controller.extend({
62
Synnefo.ApplicationController = Ember.Controller.extend({
41 63
	updateCurrentPath: function() {
42 64
		// we need the set because ElemsController gets the value of current path in every transition
43
		Okeanos.set('currentPath', this.get('currentPath'))
65
		Synnefo.set('currentPath', this.get('currentPath'))
44 66
		return this.get('currentPath');
45 67
	}.observes('currentPath'),
46 68
	actions: {
47 69
		test: function() {
48
			console.log('This is test from Okeanos.ApplicationController');
70
			console.log('This is test from Synnefo.ApplicationController');
49 71
			return 0;
50 72
		}
51 73
	},
52 74

  
53 75
	pageTitle : function() {
54 76
		var currentPath =this.get('currentPath');
55
		if(currentPath!== 'index') return Okeanos.places.findBy('destination', this.get('currentPath')).title;
77
		if(currentPath!== 'index') return Synnefo.conf.sectors.findBy('destination', this.get('currentPath')).title;
56 78
			else return 'Home';
57 79
	}.property('currentPath'),
58 80

  
......
60 82
});
61 83

  
62 84

  
63
Okeanos.ElemsController = Ember.ArrayController.extend({
85

  
86
Synnefo.ElemsController = Ember.ArrayController.extend({
64 87
	type: undefined,
65 88
	itemController: function(){
66 89
		var type = this.type;
67 90
		return type.substring(0, type.length - 1);
68 91
	}.property(),
69 92
	icon: function() {
70
		return	Okeanos.places.findBy('destination', this.get('type')).icon.replace('outline', 'full');
93
		// should this be placed in ElemsView?
94
		return	Synnefo.conf.sectors.findBy('destination', this.get('type')).icon.replace('outline', 'full');
71 95
	}.property(),
72 96
	hasOS: function(){
73
			if(Okeanos.get('currentPath') == "vms")
97
			if(Synnefo.get('currentPath') == "vms")
74 98
				return true;
75 99
			else return false;
76 100
	}.property(),
77 101
		hasTags: function(){
78
			if(Okeanos.get('currentPath') == "vms")
102
			if(Synnefo.get('currentPath') == "vms")
79 103
				return true;
80 104
			else return false;
... This diff was truncated because it exceeds the maximum size that can be displayed.

Also available in: Unified diff