mbirth/php-owntracks-recorder
Archived
1
0
Fork 0
Code Issues 1 Pull Requests Activity

Convert UI JavaScript to CoffeeScript for better readability.

Browse Source
This commit is contained in:
Markus Birth
2018-04-26 01:12:41 +02:00
parent 9db8d26899
commit b51fc4a0c5
5 changed files with 130 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
/assets/*.js.map
/bower_components/
/vendor/
config.inc.php

159
assets/index.js
View File

@ -14,165 +14,6 @@ var marker_start_icons = [];
var marker_finish_icons = [];
var marker_icons = [];
function updateDateNav(_dateFrom, _dateTo){
console.log("updateDateNav : INIT");
if(typeof _dateFrom == "undefined") { _dateFrom = window.dateFrom; }
if(typeof _dateTo == "undefined") { _dateTo = window.dateTo; }
var diff = _dateTo.diff(_dateFrom, 'days');
//if(dateTo.isSame(dateFrom)){ diff = diff+1; }
var datePrevTo = moment(_dateFrom).subtract(1, 'days');;
var datePrevFrom = moment(datePrevTo).subtract(diff, 'days');
var dateNextFrom = moment(_dateTo).add(1, 'days');
var dateNextTo = moment(dateNextFrom).add(diff, 'days');
//disable Next button
if(dateNextFrom.isAfter(moment())){
$('#nextButton').addClass('disabled');
}else{
$('#nextButton').removeClass('disabled');
}
//disable today button
if(dateNextFrom.isSame(moment())){
$('#todayButton').addClass('disabled');
$('#livemap_on').removeClass('disabled');
}else{
$('#todayButton').removeClass('disabled');
$('#livemap_on').addClass('disabled');
}
}
function gotoDate(_dateFrom, _dateTo, pushState){
console.log("gotoDate : INIT");
var _dateFrom = (typeof _dateFrom !== 'undefined') ? moment(_dateFrom) : moment();
var _dateTo = (typeof _dateTo !== 'undefined') ? moment(_dateTo) : moment();
var pushState = (typeof pushState !== 'undefined') ? pushState : true;
window.dateFrom = _dateFrom;
window.dateTo = _dateTo;
$('#dateFrom').val(moment(window.dateFrom).format('YYYY-MM-DD'));
$('#dateTo').val(moment(window.dateTo).format('YYYY-MM-DD'));
//push selected dates in window.history stack
if (pushState) {
var data = {
dateFrom: moment(window.dateFrom).format('YYYY-MM-DD'),
dateTo: moment(window.dateTo).format('YYYY-MM-DD')
};
var url = window.location.pathname + '?dateFrom=' + data.dateFrom + '&dateTo=' + data.dateTo;
console.log('Pushing state: %o with data: %o', url, data);
window.history.pushState(data, '', url);
}
updateDateNav();
mapMarkers();
return false;
}
function gotoAccuracy()
{
console.log("gotoAccuracy : INIT");
var _accuracy = parseInt($('#accuracy').val());
if (_accuracy != window.accuracy) {
Cookies.set('accuracy', _accuracy);
console.log("Accuracy cookie = " + Cookies.get('accuracy'));
//location.href='./?dateFrom='+moment(dateFrom).format('YYYY-MM-DD') + '&dateTo=' + moment(dateTo).format('YYYY-MM-DD') + '&accuracy=' + _accuracy + '&trackerID=' + trackerID;
window.accuracy = _accuracy;
mapMarkers();
} else {
$('#configCollapse').collapse('hide');
}
return false;
}
function changeTrackerID()
{
console.log("changeTrackerID : INIT");
var _trackerID = $('#trackerID_selector').val();
if (_trackerID != window.trackerID) {
Cookies.set('trackerID', _trackerID);
console.log("changeTrackerID : INFO trackerID cookie = " + Cookies.get('trackerID'));
window.trackerID = _trackerID;
drawMap();
} else {
$('#configCollapse').collapse('hide');
}
return false;
}
function handlePopState(event)
{
console.log("handlePopState : INIT");
console.log(event);
if (event.state) {
return gotoDate(event.state.dateFrom, event.state.dateTo, false);
}
}
function initUI() {
console.log("initUI : INIT");
var _GET = new URLSearchParams(window.location.search);
window.dateFrom = moment();
window.dateTo = moment();
if (_GET.has('dateFrom')) {
window.dateFrom = moment(_GET.get('dateFrom'));
}
if (_GET.has('dateTo')) {
window.dateTo = moment(_GET.get('dateTo'));
}
$('#dateFrom').val(window.dateFrom.format('YYYY-MM-DD'));
$('#dateTo').val(window.dateTo.format('YYYY-MM-DD'));
//date params event handlers
updateDateNav();
$('.input-daterange').datepicker({
format: 'yyyy-mm-dd',
language: window.datepicker_language,
endDate: '0d',
});
$('.input-daterange').datepicker().on('hide', function(e) {
return gotoDate($('#dateFrom').val(), $('#dateTo').val());
});
//accuracy event handlers
$('#accuracy').change(function(){
gotoAccuracy();
});
$('#accuracySubmit').click(function(){
gotoAccuracy();
});
$('#trackerID_selector').change(function(){
changeTrackerID();
});
$('#configCollapse').on('show.bs.collapse', function (e) {
$('#configButton').removeClass( "btn-default" ).addClass( "btn-primary" ).addClass( "active" );
})
$('#configCollapse').on('hide.bs.collapse', function (e) {
$('#configButton').addClass( "btn-default" ).removeClass( "btn-primary" ).removeClass( "active" );
})
//setup history popupstate event handler
window.onpopstate = handlePopState;
}
function initMap()
{
console.log("initMap : INIT");

125
assets/main.coffee Normal file
View File

@ -0,0 +1,125 @@
window.handlePopState = (event) ->
console.log 'handlePopState: %o', event
if event.state
return gotoDate event.state.dateFrom, event.state.dateTo, false
window.updateDateNav = (_dateFrom, _dateTo) ->
console.log 'updateDateNav: %o, %o', _dateFrom, _dateTo
_dateFrom ?= window.dateFrom
_dateTo ?= window.dateTo
diff = _dateTo.diff _dateFrom, 'days'
# if(dateTo.isSame(dateFrom)){ diff = diff+1; }
datePrevTo = moment(_dateFrom).subtract 1, 'days'
datePrevFrom = moment(datePrevTo).subtract diff, 'days'
dateNextFrom = moment(_dateTo).add 1, 'days'
dateNextTo = moment(dateNextFrom).add diff, 'days'
# disable Next button
if dateNextFrom.isAfter(moment())
$('#nextButton').addClass 'disabled'
else
$('#nextButton').removeClass 'disabled'
# disable today button
if dateNextFrom.isSame(moment())
$('#todayButton').addClass 'disabled'
$('#livemap_on').removeClass 'disabled'
else
$('#todayButton').removeClass 'disabled'
$('#livemap_on').addClass 'disabled'
window.gotoDate = (_dateFrom, _dateTo, pushState) ->
console.log 'gotoDate: %o, %o, %o', _dateFrom, _dateTo, pushState
_dateFrom = if _dateFrom? then moment(_dateFrom) else moment()
_dateTo = if _dateTo? then moment(_dateTo) else moment()
pushState = pushState ? true
window.dateFrom = _dateFrom
window.dateTo = _dateTo
$('#dateFrom').val moment(window.dateFrom).format('YYYY-MM-DD')
$('#dateTo').val moment(window.dateTo).format('YYYY-MM-DD')
# push selected dates in window.history stack
if pushState
data =
dateFrom: moment(window.dateFrom).format 'YYYY-MM-DD'
dateTo: moment(window.dateTo).format 'YYYY-MM-DD'
url = "#{window.location.pathname}?dateFrom=#{data.dateFrom}&dateTo=#{data.dateTo}"
console.log 'Pushing state: %o with data: %o', url, data
window.history.pushState data, '', url
updateDateNav()
mapMarkers()
return false
window.gotoAccuracy = ->
console.log 'gotoAccuracy'
_accuracy = parseInt $('#accuracy').val()
if _accuracy != window.accuracy
Cookies.set 'accuracy', _accuracy
console.log 'Accuracy cookie = %o', Cookies.get 'accuracy'
# location.href='./?dateFrom='+moment(dateFrom).format('YYYY-MM-DD') + '&dateTo=' + moment(dateTo).format('YYYY-MM-DD') + '&accuracy=' + _accuracy + '&trackerID=' + trackerID;
window.accuracy = _accuracy
mapMarkers()
else
$('#configCollapse').collapse 'hide'
return false
window.changeTrackerID = ->
console.log 'changeTrackerID'
_trackerID = $('#trackerID_selector').val()
if _trackerID != window.trackerID
Cookies.set 'trackerID', _trackerID
console.log 'changeTrackerID: trackerID cookie = %o', Cookies.get 'trackerID'
window.trackerID = _trackerID
drawMap()
else
$('#configCollapse').collapse 'hide'
return false
window.initUI = ->
console.log 'BEGIN: initUI'
_GET = new URLSearchParams window.location.search
window.dateFrom = if _GET.has 'dateFrom' then moment _GET.get 'dateFrom' else moment()
window.dateTo = if _GET.has 'dateTo' then moment _GET.get 'dateTo' else moment()
$('#dateFrom').val window.dateFrom.format 'YYYY-MM-DD'
$('#dateTo').val window.dateTo.format 'YYYY-MM-DD'
# date params event handlers
updateDateNav()
$('.input-daterange').datepicker
format: 'yyyy-mm-dd'
language: window.datepicker_language
endDate: '0d'
$('.input-daterange').datepicker().on 'hide', (e) ->
return gotoDate $('#dateFrom').val(), $('#dateTo').val()
# accuracy event handlers
$('#accuracy').change -> gotoAccuracy()
$('#accuracySubmit').click -> gotoAccuracy()
$('#trackerID_selector').change -> changeTrackerID()
$('#configCollapse').on 'show.bs.collapse', (e) ->
$('#configButton').removeClass('btn-default').addClass('btn-primary').addClass('active')
$('#configCollapse').on 'hide.bs.collapse', (e) ->
$('#configButton').addClass('btn-default').removeClass('btn-primary').removeClass('active')
# setup history popupstate event handler
window.onpopstate = window.handlePopState

5
composer.json
View File

@ -14,10 +14,11 @@
},
"scripts": {
"post-install-cmd": [
"bower install"
"bower install",
"@coffee"
],
"coffee": [
"bower_components/coffeescript/bin/coffee -c assets/*.coffee"
"bower_components/coffeescript/bin/coffee -m -c assets/*.coffee"
]
}
}

1
templates/index.mustache
View File

@ -8,6 +8,7 @@
{{>index_assets}}
<!-- our scripts -->
<script type="text/javascript" src="assets/main.js"></script>
<script type="text/javascript" src="assets/index.js"></script>
<link rel="stylesheet" href="assets/style.css"/>
<title>Your Own Tracks</title>