From b51fc4a0c5b38787fc05d3991646465fa46ec11b Mon Sep 17 00:00:00 2001 From: Markus Birth Date: Thu, 26 Apr 2018 01:12:41 +0200 Subject: [PATCH] Convert UI JavaScript to CoffeeScript for better readability. --- .gitignore | 1 + assets/index.js | 159 --------------------------------------- assets/main.coffee | 125 ++++++++++++++++++++++++++++++ composer.json | 5 +- templates/index.mustache | 1 + 5 files changed, 130 insertions(+), 161 deletions(-) create mode 100644 assets/main.coffee diff --git a/.gitignore b/.gitignore index b206c98..f4d0625 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +/assets/*.js.map /bower_components/ /vendor/ config.inc.php diff --git a/assets/index.js b/assets/index.js index f54a1f2..7e4df2c 100644 --- a/assets/index.js +++ b/assets/index.js @@ -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"); diff --git a/assets/main.coffee b/assets/main.coffee new file mode 100644 index 0000000..b510c1b --- /dev/null +++ b/assets/main.coffee @@ -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 diff --git a/composer.json b/composer.json index 12861f8..aba686c 100644 --- a/composer.json +++ b/composer.json @@ -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" ] } } diff --git a/templates/index.mustache b/templates/index.mustache index 536b3dd..3eefe18 100644 --- a/templates/index.mustache +++ b/templates/index.mustache @@ -8,6 +8,7 @@ {{>index_assets}} + Your Own Tracks