wise-web-client
Version:
Based on Spine MVC framework
207 lines (191 loc) • 7.15 kB
JavaScript
define(['jquery', 'backbone', 'handlebars',
'./BaseView', './FileUploaderView', 'text!../../../tpl/upload_scheduler_modal.hbr',
'./AssignmentsModalView'
],
function($, Backbone, Handlebars, BaseView, FileUploaderView, template, AssignmentsModalView) {
var View = BaseView.extend({
// The DOM Element associated with this view
el: '#overlay-container',
template: Handlebars.compile(template),
// View Event Handlers
events: {
'click button#assign': 'assign',
'click button.close': 'close'
},
assign: function() {
var that = this;
//mockup for mena 360 demo
var mockupAssignments = {
vehicles: [{
name: "LS-4457",
type: "truck",
assignments: [{
id: 5,
type: "pickup"
}, {
id: 6,
type: "delivery"
}, {
id: 14,
type: "delivery"
}]
}, {
name: "HQ-3874",
type: "car",
assignments: [{
id: 2,
type: "delivery"
}, {
id: 3,
type: "delivery"
}, {
id: 8,
type: "delivery"
}, {
id: 9,
type: "pickup"
}, {
id: 10,
type: "pickup"
}, {
id: 15,
type: "pickup"
}]
}, {
name: "CC-7564",
type: "motorcycle",
assignments: [{
id: 19,
type: "pickup"
}, {
id: 7,
type: "delivery"
}, {
id: 1,
type: "pickup"
}, {
id: 4,
type: "delivery"
}, {
id: 13,
type: "pickup"
}]
}]
};
var mockupGeoJson = [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[
55.1433231,
25.0692079
],
[
55.114895,
25.04258
],
[
55.2565185,
25.189265
]
]
},
"properties": {
"marker-color": "#fc4353"
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[
55.2306668,
25.1743758
],
[
55.4356039,
25.347133
],
[
55.554245,
25.5579242
],
[
55.2448688,
25.2059569
],
[
55.149298,
25.0773347
]
]
},
"properties": {
"marker-color": "#B6FF4F"
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[
55.9721185,
25.9406711
],
[
55.3860089,
25.3193373
],
[
55.4514658,
25.2873147
],
[
55.2201298,
25.1538834
],
[
55.2721185,
25.2406711
]
]
},
"properties": {
"marker-color": "#0A1FFF"
}
}];
this.close();
_.delay(function() {
var assignmentsModalView = new AssignmentsModalView({
model: mockupAssignments
});
assignmentsModalView.render();
$('.modal').modal('show');
that.parentView.loadGeoJson(mockupGeoJson);
}, 4000);
},
// Renders the view's template to the UI
render: function() {
this.$el.html(this.template());
this.renderFileUploader();
// Maintains chainability
return this;
},
renderFileUploader: function() {
var fileUploader = new FileUploaderView({
'uploadUrl': '/api/v1/file'
});
fileUploader.render();
},
close: function() {
$('.modal').modal('hide');
}
});
// Returns the View class
return View;
}
);