New version of slack powered by Backbone
This commit is contained in:
Martin Donnelly
parent
24aa88ecba
commit
f239a62572
101
app/app.js
101
app/app.js
@ -97,88 +97,6 @@
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let getNextTrainTime = function(toStation, fromStation) {
|
||||
let url = '/getnexttraintimes?from=' + fromStation + '&to=' + toStation;
|
||||
let target = fromStation + toStation;
|
||||
$.ajax({ 'GET',
|
||||
u
|
||||
type:rl: url,
|
||||
data: '',
|
||||
dataType: 'json',
|
||||
|
||||
timeout: 10000,
|
||||
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
'Access-Control-Allow-Methods': 'PUT, GET, POST, DELETE, OPTIONS',
|
||||
'Access-Control-Allow-Headers': 'Content-Type'
|
||||
},
|
||||
success: function(data) {
|
||||
updateTrain(target, data);
|
||||
},
|
||||
error: function(xhr, type) {
|
||||
console.log('ajax error');
|
||||
console.log(xhr);
|
||||
console.log(type);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var updateTrain = function(n, obj) {
|
||||
let elm = $('#' + n);
|
||||
|
||||
let output, status;
|
||||
|
||||
output = (obj.eta == 'On Time') ? obj.eta : obj.sta;
|
||||
status = (obj.eta == 'On Time') ? 'delayed' : 'ontime';
|
||||
|
||||
elm.html(output);
|
||||
elm.removeClass('delayed').removeClass('ontime').addClass( status);
|
||||
//elm.addClass( status);
|
||||
};
|
||||
|
||||
let getTrainsCB = function(results) {
|
||||
let dest$ = $('#trainResults');
|
||||
let html = new EJS({url: '/template/trains.ejs'}).render(results);
|
||||
|
||||
dest$.empty();
|
||||
dest$.append(html);
|
||||
dest$.toggle();
|
||||
};
|
||||
|
||||
let getTrains = function(from, to) {
|
||||
let url = '/gettrains?from=' + from + '&to=' + to;
|
||||
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: url,
|
||||
data: '',
|
||||
dataType: 'json',
|
||||
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
'Access-Control-Allow-Methods': 'PUT, GET, POST, DELETE, OPTIONS',
|
||||
'Access-Control-Allow-Headers': 'Content-Type'
|
||||
|
||||
},
|
||||
success: function(data) {
|
||||
getTrainsCB(data);
|
||||
},
|
||||
error: function(xhr, type) {
|
||||
console.log('ajax error');
|
||||
console.log(xhr);
|
||||
console.log(type);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
let formatPassword = function(data) {
|
||||
let dest$ = $('#passwordOut');
|
||||
let html = new EJS({url: '/template/password.ejs'}).render(data);
|
||||
@ -217,15 +135,15 @@
|
||||
|
||||
tick();
|
||||
get_weather();
|
||||
getNextTrainTime('dbe', 'glq');
|
||||
getNextTrainTime('glq', 'dbe');
|
||||
// getNextTrainTime('dbe', 'glq');
|
||||
// getNextTrainTime('glq', 'dbe');
|
||||
|
||||
// start 15 minute timer
|
||||
|
||||
_fastTimer = setInterval(function() {
|
||||
|
||||
getNextTrainTime('dbe', 'glq');
|
||||
getNextTrainTime('glq', 'dbe');
|
||||
// getNextTrainTime('dbe', 'glq');
|
||||
// getNextTrainTime('glq', 'dbe');
|
||||
}, (60000));
|
||||
|
||||
_slowTimer = setInterval(function() {
|
||||
@ -233,22 +151,11 @@
|
||||
get_weather();
|
||||
}, (60000 * 15));
|
||||
|
||||
$('#dbeglq').on('click', function() {
|
||||
self.trigger('getTrains', 'dbe', 'glq');
|
||||
});
|
||||
|
||||
$('#glqdbe').on('click', function() {
|
||||
self.trigger('getTrains', 'glq', 'dbe');
|
||||
});
|
||||
|
||||
$('#newPassword').on('click', function() {
|
||||
generatePassword();
|
||||
});
|
||||
|
||||
this.bind('getTrains', function(start, end) {
|
||||
getTrains(start, end);
|
||||
});
|
||||
|
||||
document.title = 'Slack';
|
||||
})();
|
||||
|
||||
|
||||
@ -7,72 +7,235 @@
|
||||
*/
|
||||
|
||||
let TrainModel = Backbone.Model.extend({
|
||||
initialize: function() {
|
||||
console.log(this.get('to'));
|
||||
let fromStation = this.get('from');
|
||||
let toStation = this.get('to');
|
||||
let url = '/getnexttraintimes?from=' + fromStation + '&to=' + toStation;
|
||||
let target = fromStation + toStation;
|
||||
this.set('url', url);
|
||||
this.set('target', target);
|
||||
this.update();
|
||||
}, update: function() {
|
||||
this.getTrain();
|
||||
initialize: function () {
|
||||
console.log(this.get('to'));
|
||||
let fromStation = this.get('from');
|
||||
let toStation = this.get('to');
|
||||
let url = '/getnexttraintimes?from=' + fromStation + '&to=' + toStation;
|
||||
let routeUrl = '/gettrains?from=' + fromStation + '&to=' + toStation;
|
||||
let target = fromStation + toStation;
|
||||
this.set('url', url);
|
||||
this.set('routeUrl', routeUrl);
|
||||
this.set('target', target);
|
||||
this.set('visible', false);
|
||||
this.update();
|
||||
},
|
||||
getTrain: function() {
|
||||
update: function () {
|
||||
this.getTrain();
|
||||
const now = new Date;
|
||||
const mod = 60000 - (now.getTime() % 60000);
|
||||
|
||||
let trainUpdateFn = function () {
|
||||
this.update();
|
||||
};
|
||||
setTimeout(trainUpdateFn.bind(this), mod + 10);
|
||||
},
|
||||
getTrain: function () {
|
||||
let url = this.get('url');
|
||||
let self = this;
|
||||
console.log(url);
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: url,
|
||||
data: '',
|
||||
dataType: 'json',
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
type: 'GET',
|
||||
url: url,
|
||||
data: '',
|
||||
dataType: 'json',
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
'Access-Control-Allow-Methods': 'PUT, GET, POST, DELETE, OPTIONS',
|
||||
'Access-Control-Allow-Headers': 'Content-Type'
|
||||
},
|
||||
success: function(data) {
|
||||
console.log(data);
|
||||
},
|
||||
success: function (data) {
|
||||
/*
|
||||
console.log(data);
|
||||
*/
|
||||
self.set('trainData', data);
|
||||
},
|
||||
error: function(xhr, type) {
|
||||
},
|
||||
error: function (xhr, type) {
|
||||
console.log('ajax error');
|
||||
console.log(xhr);
|
||||
console.log(type);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getRoute: function () {
|
||||
let url = this.get('routeUrl');
|
||||
let self = this;
|
||||
|
||||
if (this.get('visible') === true) {
|
||||
this.set('visible', false);
|
||||
} else {
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: url,
|
||||
data: '',
|
||||
dataType: 'json',
|
||||
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
'Access-Control-Allow-Methods': 'PUT, GET, POST, DELETE, OPTIONS',
|
||||
'Access-Control-Allow-Headers': 'Content-Type'
|
||||
|
||||
},
|
||||
success: function (data) {
|
||||
// getTrainsCB(data);
|
||||
console.log('Got', data);
|
||||
|
||||
self.set('route', data);
|
||||
self.set('visible', true);
|
||||
},
|
||||
error: function (xhr, type) {
|
||||
console.log('ajax error');
|
||||
console.log(xhr);
|
||||
console.log(type);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
let Train = Backbone.View.extend({
|
||||
tagName: 'div',
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'render');
|
||||
this.model.bind('change', this.render);
|
||||
this.$traininfo = $('#traininfo');
|
||||
this.$traintext = $('#traintext');
|
||||
},
|
||||
render: function() {
|
||||
console.log('Train:Render');
|
||||
let ws = '';
|
||||
let data = this.model.get('data');
|
||||
console.log(this.model);
|
||||
let TrainView = Backbone.View.extend({
|
||||
tagName: 'div',
|
||||
initialize: function () {
|
||||
_.bindAll(this, 'render');
|
||||
this.model.bind('change', this.render);
|
||||
this.$trains = $('#trains');
|
||||
this.$traininfo = $('#traininfo');
|
||||
this.$traintext = $('#trainResults');
|
||||
this.$el = this.$trains;
|
||||
this.initView();
|
||||
},
|
||||
events: {
|
||||
'click': 'showTrains'
|
||||
},
|
||||
render: function () {
|
||||
console.log('render!!');
|
||||
let output, status;
|
||||
let obj = this.model.get('trainData');
|
||||
let visible = this.model.get('visible');
|
||||
let route = this.model.get('route');
|
||||
|
||||
if (data.length > 0) {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
ws = ws + '<div class="mui-row"><div class="mui-col-md-12"><strong>' + data[i].title + '</strong></div></div>';
|
||||
ws = ws + '<div class="mui-row"><div class="mui-col-md-12">' + data[i].description + '</div></div>';
|
||||
}
|
||||
output = (obj.eta.toLowerCase() === 'on time') ? obj.sta : obj.eta;
|
||||
status = (obj.eta.toLowerCase() === 'on time') ? 'ontime' : 'delayed';
|
||||
|
||||
this.$traintext.empty().html(ws);
|
||||
this.$traininfo.removeClass('mui--hide').addClass('mui--show');
|
||||
} else {
|
||||
this.$traininfo.removeClass('mui--show').addClass('mui--hide');
|
||||
this.$button.html(output);
|
||||
this.$button.removeClass('delayed').removeClass('ontime').addClass(status);
|
||||
|
||||
console.log('visible', visible);
|
||||
|
||||
/*
|
||||
<div><%=locationName%> TO <%=filterLocationName%></div>
|
||||
<table class="mui-table mui-table-bordered">
|
||||
<tr><th>Destination</th>
|
||||
<th>Time</th>
|
||||
<th>Status</th>
|
||||
<th>Platform</th></tr>
|
||||
|
||||
<% trainServices.forEach(function (item) { %>
|
||||
<tr>
|
||||
<td><%=item.destination[0].locationName%></td>
|
||||
<td><%=item.sta%></td>
|
||||
<td><%=item.eta%></td>
|
||||
<td><%=item.platform%></td>
|
||||
</tr>
|
||||
<% }) %>
|
||||
|
||||
</table>
|
||||
*/
|
||||
console.log('route', route);
|
||||
if (visible) {
|
||||
let ws = `<div>${route.locationName} TO ${route.filterLocationName}</div>
|
||||
<table class="mui-table mui-table-bordered">
|
||||
<tr><th>Destination</th>
|
||||
<th>Time</th>
|
||||
<th>Status</th>
|
||||
<th>Platform</th></tr>
|
||||
`;
|
||||
|
||||
console.log(typeof route.trainServices === 'object' && route.trainServices !== null);
|
||||
if (typeof route.trainServices === 'object' && route.trainServices !== null) {
|
||||
for (item of route.trainServices) {
|
||||
console.log(item);
|
||||
let dest = item.destination[0];
|
||||
let via = dest.via !== null ? `<em>${dest.via}</em>` : '';
|
||||
let platform = item.platform !== null ? item.platform : '💠';
|
||||
let time = item.sta !== null ? item.sta : `D ${item.std}`;
|
||||
let status = item.eta !== null ? item.eta : item.etd;
|
||||
// ws = ws + `<div class="mui-row"><div class="mui-col-md-12"><strong>${dest.locationName}</strong> ${via}</div></div>`;
|
||||
// ws = ws + '<div class="mui-row"><div class="mui-col-md-12">' + item.sta + '</div></div>';
|
||||
|
||||
if (!item.isCancelled) {
|
||||
ws = ws + `<tr>
|
||||
<td>${dest.locationName} ${via}</td>
|
||||
<td>${time}</td>
|
||||
<td>${status}</td>
|
||||
<td>${platform}</td>
|
||||
</tr>`;
|
||||
} else {
|
||||
ws = ws + `<tr>
|
||||
<td>${dest.locationName} ${via}</td>
|
||||
<td>${time}</td>
|
||||
<td colspan="2">❌ ${item.cancelReason}</td>
|
||||
|
||||
</tr>`;
|
||||
}
|
||||
console.log('item', item);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof route.busServices === 'object' && route.busServices !== null) {
|
||||
for (item of route.busServices) {
|
||||
console.log(item);
|
||||
let dest = item.destination[0];
|
||||
let via = dest.via !== null ? `<em>${dest.via}</em>` : '';
|
||||
let platform = item.platform !== null ? item.platform : '';
|
||||
let time = item.sta !== null ? item.sta : `D ${item.std}`;
|
||||
let status = item.eta !== null ? item.eta : item.etd;
|
||||
|
||||
// ws = ws + `<div class="mui-row"><div class="mui-col-md-12"><strong>${dest.locationName} Bus</strong> ${via}</div></div>`;
|
||||
// ws = ws + '<div class="mui-row"><div class="mui-col-md-12">' + item.sta + '</div></div>';
|
||||
ws = ws + `<tr>
|
||||
<td>🚌 ${dest.locationName} ${via}</td>
|
||||
<td>${time}</td>
|
||||
<td>${status}</td>
|
||||
<td>${platform}</td>
|
||||
</tr>`;
|
||||
console.log('item', item);
|
||||
}
|
||||
}
|
||||
|
||||
ws = ws + '</table>';
|
||||
this.$traintext.empty().html(ws);
|
||||
this.$traintext.removeClass('mui--hide').addClass('mui--show');
|
||||
|
||||
} else {
|
||||
this.$traintext.removeClass('mui--show').addClass('mui--hide');
|
||||
}
|
||||
},
|
||||
initView: function () {
|
||||
//el: $('#myView').get(0)
|
||||
let self = this;
|
||||
let target = this.model.get('target');
|
||||
let html = `<span>${target.toUpperCase()}: <button class="mui-btn mui-btn--flat" id="${target}"></button></span>`;
|
||||
this.$html = $(html);
|
||||
this.$html.on('click', function () {
|
||||
console.log(self)
|
||||
self.model.getRoute();
|
||||
});
|
||||
this.$trains.append(this.$html);
|
||||
|
||||
// this.el = `#${target}`;
|
||||
|
||||
this.$button = $(`#${target}`);
|
||||
|
||||
|
||||
let cevent = `click #$(target)`;
|
||||
this.events[cevent] = "showTrains";
|
||||
},
|
||||
showTrains: function () {
|
||||
console.log('Show train');
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
16
gulpfile.js
16
gulpfile.js
@ -22,9 +22,17 @@ let dest = 'live';
|
||||
|
||||
|
||||
let fontOptions = { };
|
||||
|
||||
/*
|
||||
<script src="libs/ejs.js"></script>
|
||||
<script src="libs/underscore.js"></script>
|
||||
<script src="libs/backbone.js"></script>
|
||||
<script src="js/modules/bitcoin.js"></script>
|
||||
<script src="js/modules/fx.js"></script>
|
||||
<script src="js/modules/train.js"></script>
|
||||
<script src="app.js"></script>
|
||||
*/
|
||||
gulp.task('appJS', function() {
|
||||
return gulp.src(['app/app.js'])
|
||||
return gulp.src(['app/js/modules/bitcoin.js','app/js/modules/fx.js','app/js/modules/train.js','app/app.js'])
|
||||
.pipe(stripDebug())
|
||||
.pipe(jshint('.jshintrc'))
|
||||
.pipe(jshint.reporter('default'))
|
||||
@ -57,7 +65,9 @@ gulp.task('vendor', function() {
|
||||
return gulp.src([
|
||||
'app/libs/zepto.min.js',
|
||||
'app/libs/microevent.js',
|
||||
'app/libs/ejs.js'
|
||||
'app/libs/ejs.js',
|
||||
'app/libs/underscore.js',
|
||||
'app/libs/backbone.js'
|
||||
])
|
||||
.pipe(concat('vendor.js'))
|
||||
.pipe(uglify({mangle: false}))
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -229,8 +229,8 @@
|
||||
<div class="mui--text-title mui-text-black">Travel <span id="fx"></div>
|
||||
<!-- Travel -->
|
||||
<div id="trains"></div>
|
||||
<span>DBEGLQ: <button class="mui-btn mui-btn--flat" id="dbeglq"></button></span> <span>GLQDBE: <button class="mui-btn mui-btn--flat" id="glqdbe"></button></span>
|
||||
<div id='trainResults' style='display:none'></div>
|
||||
<!--<span>DBEGLQ: <button class="mui-btn mui-btn--flat" id="dbeglq"></button></span> <span>GLQDBE: <button class="mui-btn mui-btn--flat" id="glqdbe"></button></span>-->
|
||||
<div id='trainResults' class="mui--hide"></div>
|
||||
<ul>
|
||||
<li>
|
||||
<a href='http://www.journeycheck.com/firstscotrail'>Journey Check</a>
|
||||
@ -379,11 +379,17 @@
|
||||
this.bitcoin = new Bitcoin({model: new BitcoinModel()});
|
||||
this.fx = new FxView({model: new FxModel()});
|
||||
|
||||
dbeglqModel = new TrainModel({from:'dbe', to:'glq'});
|
||||
// dbeglqModel = new TrainModel({from:'dbe', to:'glq'});
|
||||
/*
|
||||
glqdbeModel = new TrainModel({from:'glq', to:'dbe'});
|
||||
glqhymModel = new TrainModel({from:'glq', to:'hym'});
|
||||
hymglqModel = new TrainModel({from:'hym', to:'glq'});
|
||||
*/
|
||||
|
||||
dbqglqView = new TrainView({model: new TrainModel({from:'dbe', to:'glq'})});
|
||||
glqdbeView = new TrainView({model: new TrainModel({from:'glq', to:'dbe'})});
|
||||
glqhymView = new TrainView({model: new TrainModel({from:'glq', to:'hym'})});
|
||||
hymglqView = new TrainView({model: new TrainModel({from:'hym', to:'glq'})});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -130,7 +130,7 @@ app.route('/poly').get(polys);
|
||||
});*/
|
||||
|
||||
app.get('/slack', function(req, res) {
|
||||
res.render('pages/slack');
|
||||
res.render('pages/slackV2');
|
||||
});
|
||||
|
||||
app.get('/temp', function(req, res) {
|
||||
@ -146,6 +146,7 @@ const tfile = 'fb-token.json';
|
||||
//
|
||||
|
||||
|
||||
/*
|
||||
const fitbit = new Fitbit(config.fitbit);
|
||||
|
||||
// In a browser, http://localhost:4000/fitbit to authorize a user for the first time.
|
||||
@ -184,6 +185,7 @@ jsonfile.readFile('./fb-token.json', function(err, obj) {
|
||||
fitbit.setToken(obj);
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
|
||||
// });
|
||||
|
||||
Loading…
Reference in New Issue
Block a user