wise-web-client
Version:
Based on Spine MVC framework
199 lines (183 loc) • 8.31 kB
JavaScript
// HomePageView.js
// -------
define(['jquery', 'backbone', 'handlebars', 'socketio', './BaseView',
'collections/VehiclesCollection', 'text!../../../tpl/map_component.hbr',
'json!../../../config.json', './AddVehicleModalView', './AddTaskModalView',
'./UploadSchedulerModalView'
],
function($, Backbone, Handlebars, socketio, BaseView,
VehiclesCollection, mapComponentTemplate, config,
AddVehicleModalView, AddTaskModalView, UploadSchedulerModalView) {
var View = BaseView.extend({
// The DOM Element associated with this view
el: '#compContainer',
mapComponentTemplate: Handlebars.compile(mapComponentTemplate),
socket: socketio('http://' + config.SOCKET_HOST + ':' + config.SOCKET_PORT),
vehicles: new VehiclesCollection(),
// geoJson: [],
// marker: null, //test marker
initialize: function(context) {
_.extend(this, context);
var that = this;
this.vehicles = new VehiclesCollection();
this.vehicles.bind('add', this.addMarker, this);
this.vehicles.bind('change', this.moveMarker, this);
var usView = new UploadSchedulerModalView({
parentView: this
});
var avView = new AddVehicleModalView({
parentView: this
});
var atView = new AddTaskModalView({
parentView: this
});
var deploy = function() {
var options = {
url: that.apiUrl + '/deployment',
data: JSON.stringify([{
"id": "bf879654-86bc-4057-b447-321a274d9d37"
}]),
method: 'POST'
};
that.talkToServer(options).then(
function(res) {
_.delay(function() {
res.data.map(function(item) {
L.marker([item.location.lat, item.location.lng], {
icon: L.mapbox.marker.icon({
'marker-color': "#000033",
'marker-symbol': 'bus',
"properties": {
"title": item.id
}
}),
}).addTo(that.map);
});
var notice = {
title: 'Suggested deploy locations',
text: ''
};
that.pubsub.trigger('system:notify', notice);
}, 2000);
}
);
};
// TODO: quick demo, remove later
$('#user-status').on('click', 'a[data-toggle="tooltip"]', function(e) {
var id = e.currentTarget.id;
switch (id) {
case 'us':
usView.render();
break;
case 'av':
avView.render();
break;
case 'at':
atView.render();
break;
case 'dv':
deploy(); //demo only
break;
case 'rv':
break;
case 'rt':
break;
}
$('.modal').modal('show');
});
},
// View Event Handlers
events: {
},
initMap: function() {
var options = {
url: this.apiUrl + '/fleet-status',
method: 'GET'
};
return this.talkToServer(options);
},
addMarker: function(model) {
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
model.marker = L.marker([model.get('lat'), model.get('lng')], {
icon: L.mapbox.marker.icon({
'marker-color': getRandomColor(),
'marker-symbol': 'bus',
"properties": {
"title": model.get('vehicleName')
}
}),
}).addTo(this.map);
},
loadGeoJson: function(geoJson) {
this.map.featureLayer.setGeoJSON(geoJson);
},
moveMarker: function(model) {
model.marker.setLatLng(L.latLng(model.get('lat'), model.get('lng')));
//mock real time notice
var likely = Math.floor((Math.random() * 100) + 1);
var notice = {
title: 'Possible missing task',
text: 'The vehicle ' + model.get('vehicleName') + ' likly (' + likely + '%) miss its task'
};
if (likely >= 75) {
this.pubsub.trigger('system:notify', notice);
}
},
bindSocket: function() {
var that = this;
this.socket.on('wise.notice.vehicle.update_location', function(data) {
console.log(data);
// that.marker.setLatLng(L.latLng(data.lat, data.lng));
// if not in the collection, add it
var exists = that.vehicles.findWhere({
vehicleName: data.vehicleName
});
if (!exists)
that.vehicles.add(data);
else
exists.set(data);
});
//TODO: response other's event for multi user
this.socket.on('wise.notice.vehicle.add', function(data) {
console.log(data);
}.bind(this));
this.socket.on('wise.notice.task.add', function(data) {
console.log(data);
}.bind(this));
},
// Renders the view's template to the UI
render: function() {
var that = this;
this.bindSocket();
this.$el.html(this.mapComponentTemplate());
_.defer(function() {
// init location from user's profile
var initLocation = that.session.get('userInfo').location || {
lat: -33.5694,
lng: -70.58872
};
// Provide your access token
L.mapbox.accessToken = 'pk.eyJ1IjoiaG9tZXJxdWFuIiwiYSI6Ilh2LWRfeFkifQ.n4vk9HpgpPqqX8UhLKR_Yw';
// Create a map in the div #map
that.map = L.mapbox.map('map', 'homerquan.lm8kp4je').setView([initLocation.lat, initLocation.lng], 11);
// that.initMap().then(function(res) {
// that.map.featureLayer.setGeoJSON(res.data);
// }, function(res) {
// //error handler
// });
//
});
return this;
}
});
// Returns the View class
return View;
}
);