root / snf-cyclades-app / synnefo / ui / new_ui / ui / javascripts / okeanos-ember / ember-all.js @ 9a7cf420
History | View | Annotate | Download (11.9 kB)
1 |
/* Mapping */
|
---|---|
2 |
|
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 |
this.route('create'); |
11 |
}); |
12 |
}); |
13 |
|
14 |
|
15 |
/* Routes */
|
16 |
|
17 |
Synnefo.ApplicationRoute = Ember.Route.extend({ |
18 |
model: function() { |
19 |
return {email: 'athina@mail.com'}; |
20 |
}, |
21 |
redirect: function() { |
22 |
// have to set vm navigation icon full
|
23 |
this.transitionTo('vms'); |
24 |
}, |
25 |
}); |
26 |
|
27 |
Synnefo.SectionsRoute = Ember.Route.extend({ |
28 |
modelName: undefined, |
29 |
model: function() { |
30 |
return this.store.find(this.modelName); |
31 |
}, |
32 |
renderTemplate: function(controller) { |
33 |
this.render('snfElems', {controller: controller}); |
34 |
}, |
35 |
actions: {
|
36 |
openWizard: function() { |
37 |
var wizardType = this.routeName; |
38 |
this.transitionTo(wizardType+'.create') |
39 |
} |
40 |
} |
41 |
}); |
42 |
|
43 |
Synnefo.CreateRoute = Ember.Route.extend({ |
44 |
model: function(){ |
45 |
return [{name: 'vm-wizard'}] |
46 |
}, |
47 |
renderTemplate: function(controller) { |
48 |
this.render('wizard',{controller: controller}); |
49 |
}, |
50 |
/* beforeModel: function() {
|
51 |
this._super();
|
52 |
console.log('beforeModel ',this.get('router.url'))
|
53 |
this.previousRoute = this.get('router.url'); // should return the current path but some times it returns the path where the user was before (when i dont type the url of the wizard)
|
54 |
},
|
55 |
previousRoute: undefined,*/
|
56 |
actions: {
|
57 |
closeWizard: function() { |
58 |
history.back(); |
59 |
} |
60 |
} |
61 |
}); |
62 |
|
63 |
Synnefo.VmsRoute = Synnefo.SectionsRoute.extend({ |
64 |
modelName: 'vm' |
65 |
}); |
66 |
|
67 |
Synnefo.NetworksRoute = Synnefo.SectionsRoute.extend({ |
68 |
modelName: 'network' |
69 |
}); |
70 |
|
71 |
Synnefo.VolumesRoute = Synnefo.SectionsRoute.extend({ |
72 |
modelName: 'volume' |
73 |
}); |
74 |
|
75 |
Synnefo.SnapshotsRoute = Synnefo.SectionsRoute.extend({ |
76 |
modelName: 'snapshot' |
77 |
}); |
78 |
|
79 |
Synnefo.ImagesRoute = Synnefo.SectionsRoute.extend({ |
80 |
modelName: 'userImage' |
81 |
}); |
82 |
|
83 |
Synnefo.VmsCreateRoute = Synnefo.CreateRoute.extend({ |
84 |
model: function() { |
85 |
return Synnefo.conf.wizards.findBy('name', 'vm-wizard').data; |
86 |
} |
87 |
}); |
88 |
|
89 |
Synnefo.NetworksCreateRoute = Synnefo.CreateRoute.extend({}); |
90 |
|
91 |
Synnefo.VolumesCreateRoute = Synnefo.CreateRoute.extend({}); |
92 |
|
93 |
Synnefo.SnapshotsCreateRoute = Synnefo.CreateRoute.extend({}); |
94 |
|
95 |
Synnefo.ImagesCreateRoute = Synnefo.CreateRoute.extend({}); |
96 |
|
97 |
|
98 |
|
99 |
|
100 |
/* Controllers */
|
101 |
|
102 |
Synnefo.ApplicationController = Ember.Controller.extend({ |
103 |
updateCurrentPath: function() { |
104 |
// we need the set because ElemsController gets the value of current path in every transition
|
105 |
Synnefo.set('currentPath', this.get('currentPath')) |
106 |
return this.get('currentPath'); |
107 |
}.observes('currentPath'),
|
108 |
|
109 |
pageTitle : function() { |
110 |
var currentPath =this.get('currentPath'); |
111 |
if(currentPath!== 'index') return Synnefo.conf.sectors.findBy('destination', this.get('currentPath')).title; |
112 |
else return 'Home'; |
113 |
}.property('currentPath'),
|
114 |
|
115 |
// name: "okeanos application",
|
116 |
}); |
117 |
|
118 |
|
119 |
|
120 |
Synnefo.ElemsController = Ember.ArrayController.extend({ |
121 |
type: undefined, |
122 |
itemController: function(){ |
123 |
var type = this.type; |
124 |
return type.substring(0, type.length - 1); |
125 |
}.property(), |
126 |
icon: function() { |
127 |
// should this be placed in ElemsView?
|
128 |
return Synnefo.conf.sectors.findBy('destination', this.get('type')).icon.replace('outline', 'full'); |
129 |
}.property(), |
130 |
hasOS: function(){ |
131 |
console.log('hasOS ', Synnefo.get('currentPath')) |
132 |
if(Synnefo.get('currentPath') === "vms" || Synnefo.get('currentPath') === "vms.index") |
133 |
return true; |
134 |
else return false; |
135 |
}.property(), |
136 |
hasTags: function(){ |
137 |
if(Synnefo.get('currentPath') == "vms" || Synnefo.get('currentPath') === "vms.index") |
138 |
return true; |
139 |
else return false; |
140 |
}.property(), |
141 |
}); |
142 |
|
143 |
Synnefo.VmsController = Synnefo.ElemsController.extend({ |
144 |
type: 'vms' |
145 |
}); |
146 |
|
147 |
|
148 |
Synnefo.NetworksController = Synnefo.ElemsController.extend({ |
149 |
type: 'networks' |
150 |
}); |
151 |
|
152 |
Synnefo.VolumesController = Synnefo.ElemsController.extend({ |
153 |
type: 'volumes' |
154 |
}); |
155 |
|
156 |
|
157 |
Synnefo.SnapshotsController = Synnefo.ElemsController.extend({ |
158 |
type: 'snapshots' |
159 |
}); |
160 |
|
161 |
Synnefo.ImagesController = Synnefo.ElemsController.extend({ |
162 |
type: 'images' |
163 |
}); |
164 |
|
165 |
|
166 |
Synnefo.VmsCreateController = Ember.ObjectController.extend({}); |
167 |
|
168 |
Synnefo.ElemController = Ember.ObjectController.extend({ |
169 |
needs: [],
|
170 |
actionsList: Synnefo.conf.userActions,
|
171 |
setAvailableActions: function() { |
172 |
var parent = this.needs; |
173 |
var self = this; |
174 |
return this.actionsList.filter(function(el) { |
175 |
return _.contains(el['snf-components'], self.get('controllers.'+parent).type) &&( _.contains(el['enabled-status'], self.get('model.status')) || _.contains(el['enabled-status'], 'all')); |
176 |
}) |
177 |
}.property(), |
178 |
createBtn: false, |
179 |
actions: {
|
180 |
shutdown: function(param) { |
181 |
this.set('model.status', 'shutting'); |
182 |
}, |
183 |
destroyElement: function(param) { |
184 |
var element = this.get('model'); |
185 |
element.deleteRecord(); |
186 |
element.save(); |
187 |
} |
188 |
} |
189 |
}); |
190 |
|
191 |
Synnefo.VmController = Synnefo.ElemController.extend({ |
192 |
needs: ['vms'] |
193 |
}); |
194 |
|
195 |
Synnefo.NetworkController = Synnefo.ElemController.extend({ |
196 |
needs: ['networks'] |
197 |
}); |
198 |
|
199 |
Synnefo.VolumeController = Synnefo.ElemController.extend({ |
200 |
needs: ['volumes'] |
201 |
}); |
202 |
|
203 |
Synnefo.SnapshotController = Synnefo.ElemController.extend({ |
204 |
needs: ['snapshots'] |
205 |
}); |
206 |
|
207 |
Synnefo.ImageController = Synnefo.ElemController.extend({ |
208 |
needs: ['images'] |
209 |
}); |
210 |
|
211 |
|
212 |
Synnefo.CreateController = Ember.ArrayController.extend({ |
213 |
actions: {
|
214 |
moveNext: function() { |
215 |
console.log('move to next step');
|
216 |
} |
217 |
} |
218 |
}); |
219 |
|
220 |
Synnefo.VmsCreateController =Synnefo.CreateController.extend({ |
221 |
|
222 |
}); |
223 |
|
224 |
|
225 |
/* Views */
|
226 |
|
227 |
Synnefo.ApplicationView = Ember.View.extend({ |
228 |
classNames: ['content'] |
229 |
}) |
230 |
|
231 |
Synnefo.NavIconView = Ember.View.extend({ |
232 |
tagName: 'span', |
233 |
click: function() { |
234 |
var parentEl = this.$().parent('a'); |
235 |
var currentEl = this.$().parents('li').siblings('li').find('a.current'); |
236 |
|
237 |
ui.replaceClass(currentEl, 'full', 'outline', 'snf-'); |
238 |
ui.replaceClass(parentEl, 'outline', 'full', 'snf-'); |
239 |
} |
240 |
|
241 |
}); |
242 |
|
243 |
Synnefo.NavigationView = Ember.CollectionView.extend({ |
244 |
tagName: "ul", |
245 |
classNames: ['icons-nav'], |
246 |
|
247 |
content: Synnefo.conf.sectors,
|
248 |
itemViewClass: Ember.View.extend({
|
249 |
templateName: "navigationItem" |
250 |
}), |
251 |
}); |
252 |
|
253 |
|
254 |
Synnefo.WizardHeadersView = Ember.CollectionView.extend({ |
255 |
tagName: 'ul', |
256 |
classNames:['nums'], |
257 |
content: Synnefo.conf.wizards.findBy('name', 'vm-wizard').data[0].stepsHeadlines, |
258 |
counter: 0, |
259 |
itemViewClass: Ember.View.extend({
|
260 |
templateName: 'wizardStepHeader', |
261 |
classNameBindings: ['isCurrent:current', 'isFirst:preselected'], |
262 |
index: undefined, |
263 |
isCurrent: false, |
264 |
isFirst: false, |
265 |
init: function() { |
266 |
this._super();
|
267 |
console.log('init');
|
268 |
var prevIndex = this.get('parentView').get('counter'); |
269 |
prevIndex++; |
270 |
console.log('prevIndex', prevIndex)
|
271 |
this.get('parentView').set('counter', prevIndex); |
272 |
this.set('index', prevIndex); |
273 |
if(prevIndex === 1) { |
274 |
this.set('isFirst', true); |
275 |
this.set('isCurrent', true); |
276 |
} |
277 |
console.log('current', this.isCurrent) |
278 |
}, |
279 |
didInsertElement: function() { |
280 |
} |
281 |
}), |
282 |
}); |
283 |
|
284 |
|
285 |
Synnefo.ElemView = Ember.View.extend({ |
286 |
// templateName: 'elem',
|
287 |
addNewBtn: false, |
288 |
templateName: 'snfElem', |
289 |
tagName: 'li', |
290 |
selectable: true, |
291 |
initSelect: 'unchecked', |
292 |
classNameBindings: ['status'], |
293 |
attributeBindings: ['data-status'], |
294 |
'data-status': function() { |
295 |
return this.status; |
296 |
}.property(), |
297 |
status: function() { |
298 |
return this.get('controller.status'); |
299 |
}.property('controller.status')
|
300 |
}); |
301 |
|
302 |
Synnefo.ImgWrapView = Ember.View.extend({ |
303 |
templateName: 'img-wrap', |
304 |
classNames: ['img-wrap'], |
305 |
icon: function() { |
306 |
var parentView = this.get('parentView'); |
307 |
var addNewBtn = parentView.get('addNewBtn'); |
308 |
if(addNewBtn)
|
309 |
return parentView.get('icon'); |
310 |
else
|
311 |
return parentView.get('controller').get('parentController').get('icon'); |
312 |
}.property() |
313 |
}); |
314 |
|
315 |
Synnefo.NameView = Ember.View.extend({ |
316 |
templateName: 'name', |
317 |
tagName: 'h4', |
318 |
name: function() { |
319 |
// the name may be defined inside the parent view or in its model or controller
|
320 |
return this.get('parentView').get('controller').get('name'); |
321 |
}.property() |
322 |
}); |
323 |
|
324 |
// to be changed
|
325 |
Synnefo.ImmediateActionView = Ember.View.extend({ |
326 |
templateName: 'actions', |
327 |
classNames: ['actions'] |
328 |
}) |
329 |
|
330 |
/* Components */
|
331 |
|
332 |
Synnefo.Btn1Component = Ember.Component.extend({ |
333 |
tagName: 'a', |
334 |
click: function() { |
335 |
this.sendAction("action", this.get('param')); |
336 |
}, |
337 |
content: undefined // will be set if we want to print a message inside the span |
338 |
}); |
339 |
|
340 |
Synnefo.BtnsSpanComponent = Ember.Component.extend({ |
341 |
tagName: 'a', |
342 |
templateName: 'components/btns-span', |
343 |
click: function() { |
344 |
this.sendAction("action"); |
345 |
} |
346 |
}) |
347 |
|
348 |
Synnefo.Close1Component = Synnefo.BtnsSpanComponent.extend({ |
349 |
classNames: ['close'], |
350 |
}); |
351 |
|
352 |
// there's another close to modals
|
353 |
|
354 |
Synnefo.Cancel1Component = Synnefo.BtnsSpanComponent.extend({ |
355 |
classNames: ['nav', 'prev'], |
356 |
// classNameBindings: ['el3'], the element that should be focused when the user goes to the next step
|
357 |
content: 'CANCEL' |
358 |
}); |
359 |
|
360 |
Synnefo.Next1Component = Synnefo.BtnsSpanComponent.extend({ |
361 |
classNames: ['nav', 'next'], |
362 |
// classNameBindings: ['el3'], the element that should be focused when the user goes to the next step
|
363 |
content: 'NEXT' |
364 |
}); |
365 |
|
366 |
Synnefo.AddNewComponent = Ember.Component.extend({ |
367 |
templateName: 'snfElem', |
368 |
addNewBtn: true, |
369 |
selectable: false, |
370 |
icon: function() { |
371 |
baseIcon = Synnefo.conf.sectors.findBy('destination', this.get('type')).icon; |
372 |
return baseIcon.replace('outline', 'create-full'); |
373 |
}.property(), |
374 |
tagName: 'li', |
375 |
status: 'add-new', |
376 |
classNameBindings: ['status'], |
377 |
attributeBindings: ['data-status, data-reveal-id'], |
378 |
'data-reveal-id': function(){ |
379 |
if(addNewBtn)
|
380 |
return /*this.get('type').substring(0, type.length - 1)+*/'-wizard'; |
381 |
else
|
382 |
return undefined; |
383 |
}.property(), |
384 |
'data-status': function() { |
385 |
return this.status; |
386 |
}.property(), |
387 |
name: function() { |
388 |
var msg = 'Create New '; |
389 |
var btnType = this.get('type') |
390 |
switch(btnType){
|
391 |
case 'vms': |
392 |
return msg + 'Machine'; |
393 |
case 'networks': |
394 |
return msg + 'Network'; |
395 |
case 'volumes': |
396 |
return msg + 'Volume'; |
397 |
case 'snapshots': |
398 |
return msg + 'Snapshot'; |
399 |
case 'images': |
400 |
return '+ Upload New Image'; |
401 |
} |
402 |
}.property(), |
403 |
click: function () { |
404 |
this.sendAction('action'); |
405 |
} |
406 |
}); |
407 |
|
408 |
Synnefo.LoginMenuComponent = Ember.Component.extend({ |
409 |
classNames: ['login'], |
410 |
didInsertElement: function() { |
411 |
var self = this.$(); |
412 |
self.mouseenter(function(e){
|
413 |
self.find('ul').stop(true, true).slideDown(200); |
414 |
}); |
415 |
self.mouseleave(function(e){
|
416 |
self.find('ul').stop(true, true).slideUp(200); |
417 |
}); |
418 |
|
419 |
} |
420 |
}); |
421 |
|
422 |
Synnefo.SnfCheckboxComponent = Ember.Component.extend({ |
423 |
tagName: 'a', |
424 |
classNames: ['check'], |
425 |
templateName: 'components/select-btn', |
426 |
initState: function() { |
427 |
return this.get('initState'); |
428 |
}.property(), |
429 |
didInsertElement: function() { |
430 |
var el = this.$(); |
431 |
var self =this; |
432 |
this.setInitClasses();
|
433 |
el.click(function(e) {
|
434 |
e.preventDefault(); |
435 |
e.stopPropagation(); |
436 |
self.changeState(el); |
437 |
// ui.entitiesActionsEnabled();
|
438 |
}); |
439 |
}, |
440 |
setInitClasses: function() { |
441 |
var self =this.$(); |
442 |
switch(this.initState){ |
443 |
case 'unchecked': { |
444 |
this.uncheck(self);
|
445 |
break;
|
446 |
} |
447 |
case 'prechecked': { |
448 |
self.find('span').addClass('prechecked') |
449 |
this.check(self);
|
450 |
break;
|
451 |
} |
452 |
} |
453 |
}, |
454 |
// used to be in ui.checkbox
|
455 |
changeState : function(checkbox_link) { |
456 |
$(checkbox_link).find('.snf-checkbox-unchecked, .snf-checkbox-checked').toggleClass('snf-checkbox-unchecked snf-checkbox-checked'); |
457 |
$(checkbox_link).closest('li').toggleClass('selected'); |
458 |
}, |
459 |
check : function(checkbox_link) { |
460 |
$(checkbox_link).find('span').removeClass('snf-checkbox-unchecked').addClass('snf-checkbox-checked'); |
461 |
$(checkbox_link).closest('li').addClass('selected'); |
462 |
}, |
463 |
uncheck : function(checkbox_link) { |
464 |
$(checkbox_link).find('span').removeClass('snf-checkbox-checked').addClass('snf-checkbox-unchecked'); |
465 |
$(checkbox_link).closest('li').removeClass('selected'); |
466 |
}, |
467 |
|
468 |
reset: function(area) { |
469 |
$(area).find('.snf-radio-checked').not('.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked'); |
470 |
$(area).find('.snf-radio-unchecked.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked'); |
471 |
}, |
472 |
}); |