cleanup

public/views/partials/module.hbs

@@ -6,7 +6,7 @@
 					<h6 class="float-left ml-2 mt-1 card-title">
 						{{#blk "cardTitle2"}}{{{startCase this}}}{{/blk}}
 					</h6>
-					<div class="float-right mr-2" data-cmd="moduleToggle">
+					<div class="float-right mr-2" data-cmd="Grid.moduleToggle">
 						{{> toggle }}
 					</div>				
 					{{#blk "cardHeader"}}{{/blk}}

public/views/partials/scripts.hbs

@@ -1,4 +1,4 @@
-  <script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="veload-test" ></script>
+  {{!-- <script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="veload-test" ></script> --}}
   <script src="/js/main.js"></script>
 
 {{#if (production)}}

public/views/partials/settings.hbs

@@ -43,7 +43,7 @@
 				\{{#each allMods as |value|}}
 					<div class="row" >
 						<div class="col-lg-5">\{{value.[1]}}</div><div class="col-lg-3">
-							<button type="button" class="btn btn-xs btn-toggle active" data-name='\{{value.[0]}}' data-cmd='moduleToggle' data-toggle="button" aria-pressed="false" autocomplete="off">
+							<button type="button" class="btn btn-xs btn-toggle active" data-name='\{{value.[0]}}' data-cmd='Grid.moduleToggle' data-toggle="button" aria-pressed="false" autocomplete="off">
 								<div class="handle"></div>
 							</button>
 						</div>

src/js/main.js

@@ -1,33 +1,31 @@
-//init logging
-import { Rollbar } from './modules/Rollbar.js';
-
-import './modules/HandlebarsHelpers.js';
-
 import V from './modules/Veload.js';
 
-if (window.location.hostname == 'veload.bike'){
-	Rollbar();
-}
+$(async function(){
+	if (window.location.hostname == 'veload.bike'){
+		//init logging
+		var Rollbar = await import('./modules/Rollbar.js');
+		Rollbar();
+	}
+});
 
 $(async function(){
+	import('./modules/PhotoRefresher.js');
 	if (window.location.pathname == '/dashboard'){
 		await import('./modules/LocalPoller.js');
 		await import('./modules/SettingsPane.js');
 		await import('./modules/DataListeners.js');
-
 		await import('./modules/Goals.js');
-		let ride = await import('./modules/RideListeners.js');
-		let conn = await import('./modules/ConnectionStatus.js');
-
-		ride.RideListeners();
-		conn.ConnectionStatus();
+		await import('./modules/RideListeners.js');
+		await import('./modules/ConnectionStatus.js');
+		await import('./modules/Charts.js');
+		await import('./modules/Voice.js');
+		await import('./modules/Map.js');
 
 		V.loadInterface();
 		V.loadProfile();
 	} else {
 		import('./modules/DownloadLink.js');
 		import('./modules/Weather.js');
-		$('body').removeClass('loading');
+		V.notLoading();
 	}
-	import('./modules/PhotoRefresher.js');
 });

src/js/modules/Charts.js

@@ -4,18 +4,9 @@ import { EE } from './EventBus.js';
 import moment from 'moment';
 import Options from './Options.js';
 
-EE.once('Veload.loaded',Charts);
 async function Charts(){
-	if ($('[data-chart]').length){
-		await import('chart.js');
-		await import('chartjs-plugin-streaming');
-		await import('chartjs-plugin-zoom');
-		await import('chartjs-plugin-annotation');
-		await import('./Gauge.js');
-
-		initializeLineCharts();
-		initializeGaugeCharts();
-	}
+	EE.once('Veload.loaded',init);
+	EE.on('Grid.addedModule',init);
 
 	EE.on('Veload.clear',function(){
 		var chart = $('.grid-item:has([data-chart])');
@@ -27,6 +18,19 @@ async function Charts(){
 		});
 	});
 }
+
+async function init(){
+	if ($('[data-chart]').length){
+		await import('chart.js');
+		await import('chartjs-plugin-streaming');
+		await import('chartjs-plugin-zoom');
+		await import('chartjs-plugin-annotation');
+		await import('./Gauge.js');
+
+		initializeLineCharts();
+		initializeGaugeCharts();
+	}
+};
 function getTypicalLimits(param){
 	var lim = [0];
 	var max = 0;
@@ -155,4 +159,4 @@ function initializeLineCharts(){
 		EE.emit(`${_.capitalize(name)}.initialized`);
 	});
 }
-export { Charts };
+export let charts = new Charts();

src/js/modules/ConnectionStatus.js

@@ -10,4 +10,4 @@ function ConnectionStatus(){
 	});
 }
 
-export { ConnectionStatus };
+export let cs = new ConnectionStatus();

src/js/modules/EventBus.js

@@ -1,8 +1,4 @@
 import EventEmitter from 'eventemitter3';
 const EE = new EventEmitter();
 
-EE.on('uncaughtException', function (err) {
-    console.error(err);
-});
-
-export { EE }
+export { EE };

src/js/modules/Grid.js

@@ -4,6 +4,12 @@ import '../../third_party/gridster/jquery.gridster.min.js';
 import Options from './Options.js';
 
 function Grid(){
+	var self = this;
+	['Grid.moduleToggle'].forEach(function(eventName){
+		EE.on(eventName,function(el){
+			self[eventName.split('.')[1]](el);
+		});
+	});
 	this.margX = 10;
 	this.margY = 10;
 	this.cols = 6;
@@ -20,10 +26,10 @@ Grid.prototype.moduleToggle = function(ele){
 	var el = e.closest('[data-name]');
 	if (e.closest('.btn-toggle').hasClass('active')){
 		this.enableModule(el.data('name'));
-		this.saveLayout();
 	} else {
 		this.disableModule(el);
 	}
+	this.saveLayout();
 };
 Grid.prototype.disableModule = function(mod){
 	var self = this;
@@ -73,6 +79,8 @@ Grid.prototype.enableModule = function(mod,cnf){
 			}
 
 			$('.grid').data('grid').add_widget(comp,config.size_x,config.size_y,config.col,config.row);
+			EE.emit(`Grid.addedModule`,mod);
+
 			if (jcomp.data('script') === true && !window[_.upperFirst(mod)]){
 				$.getScript(`/js/_${mod}.js`,function(){
 					//call constructor if necessary
@@ -208,4 +216,7 @@ Grid.prototype.listenForFinish = function(finishedEvent){
 		}
 	});
 };
-export let grid = new Grid();
+
+let grid = new Grid();
+grid.initGrid();
+export { grid };

src/js/modules/Map.js

@@ -22,7 +22,6 @@ Map.prototype.init = async function(){
 	await import('../../../node_modules/leaflet-providers/leaflet-providers.js');
 	omni = await import('@mapbox/leaflet-omnivore');
 	geolib = await import('geolib');
-
 	this.create();
 	this.listen();
 	EE.emit('Map.initialized');
@@ -48,6 +47,7 @@ Map.prototype.listen = function(){
 			self[eventName.split('.')[1]](el);
 		});
 	});
+	EE.on('Veload.choosingRoute',self.pickTrackGUI);
 	EE.on('Veload.locationUpdated',function(){
 		var l = V.points[V.points.length - 1];
 		self.get().flyTo(l,14,{
@@ -227,4 +227,12 @@ Map.prototype.stravaLoader = function(){
 	});
 };
 
+//this is here specifically for List.js, which freaks out on whitespace
+$.fn.cleanWhitespace = function(){
+	this.contents().filter(
+		function(){ return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
+		.remove();
+	return this;
+};
+
 export let map = new Map();

src/js/modules/RideListeners.js

@@ -12,4 +12,4 @@ function RideListeners(){
 	});
 }
 
-export { RideListeners };
+export let rideListeners = new RideListeners();

src/js/modules/SettingsPane.js

@@ -6,7 +6,12 @@ import Modals from './Modals.js';
 import { grid } from './Grid.js';
 
 function SettingsPane(){
-	EE.on('SettingsPane.show',this.show);
+	var self = this;
+	['SettingsPane.addCustomModule','SettingsPane.show'].forEach(function(eventName){
+		EE.on(eventName,function(el){
+			self[eventName.split('.')[1]](el);
+		});
+	});
 	if (!(this instanceof SettingsPane)){
 		return new SettingsPane();
 	}

src/js/modules/Templates.js

@@ -1,3 +1,5 @@
+import './HandlebarsHelpers.js';
+
 var els = $('[id$="-temp"]');
 var temps = [];
 const Templates = {

src/js/modules/Veload.js

@@ -7,24 +7,20 @@ import setColors from './ColorControls.js';
 import Options from './Options.js';
 import Modals from './Modals.js';
 import Templates from './Templates.js';
-import { Charts } from './Charts.js';
 import { EE } from './EventBus.js';
 import { grid } from './Grid.js';
-import { map } from './Map.js';
 import './Utils.Trail.js';
 
 function Veload(){
 	var self = this;
 	this.status = {};
+	this.user = {};
+	this.status = {};
 	['rTrail','points','rTrailPopped'].forEach(function(e){
 		self[e] = [];
 	});
 
-	['user','status','athlete','refresher','photos'].forEach(function(e){
-		self[e] = '';
-	});
 	window.V = this;
-	window.Veload = window.V;
 	EE.emit('Veload.initialized');
 	if (!(this instanceof Veload)){
 		return new Veload();
@@ -52,8 +48,8 @@ Veload.prototype.start = function(){
 		});
 	} else {
 		$('body').append(Templates.get('start')());
-		V.map = map;
-		map.pickTrackGUI();
+		EE.emit('Veload.choosingRoute');
+
 		EE.once('Map.trackLoading',function(){
 			Modals.unpop();
 			Modals.pop({
@@ -177,30 +173,27 @@ Veload.prototype.loaded = function(){
 //first thing loaded
 Veload.prototype.loadInterface = async function(){
 	var self = this;
-	if (window.location.pathname == '/dashboard'){
-		self.loadDash();
-
-		//wait until modules loaded before showing loaded
-		EE.once('Grid.modulesLoaded',function(){
-			self.notLoading();
-		});
+	//wait until modules loaded before showing loaded
+	EE.once('Grid.modulesLoaded',function(){
+		self.notLoading();
+	});
 
-		EE.on('Veload.loaded',function(){
-			$('[data-ride="carousel"]').carousel();
-			setColors();
-		});
-	}
+	EE.on('Veload.loaded',function(){
+		$('[data-ride="carousel"]').carousel();
+		$('[data-tooltip="tooltip"],[data-toggle="tooltip"]').tooltip();
+		setColors();
+	});
 
 	//enable each module
 	self.getUser(function(data){
-		if (data.layout){
+		if (data.layout){ //user has been here before
 			_.forEach(data.layout[0],function(obj){
 				grid.enableModule(obj.name,obj);
 			});
 
 			//html is ready to play
 			self.loaded();
-		} else {
+		} else { //initialize a dashboard
 			$.getJSON(Options.urls.remote.modules,function(modules){
 				_.forEach(modules,function(mod){
 					grid.enableModule(mod);
@@ -216,11 +209,9 @@ Veload.prototype.loadInterface = async function(){
 
 //second thing loaded
 Veload.prototype.loadProfile = function(){
-	var self = this;
 	$.getJSON(Options.urls.remote.athlete,function(data){
 		$('body').removeClass('loggedout').addClass('loggedin');
-		self.athlete = data;
-		$('#profile button').html('<img class="img-fluid rounded-circle" style="max-width:36px" src="' + self.athlete.profile + '" />');
+		$('#profile button').html('<img class="img-fluid rounded-circle" style="max-width:36px" src="' + data.profile + '" />');
 	});
 };
 Veload.prototype.getUser = function(callback){
@@ -242,12 +233,6 @@ Veload.prototype.getUser = function(callback){
 		}
 	});
 };
-//third thing loaded
-Veload.prototype.loadDash = async function(){
-	await import('./Voice.js');
-	grid.initGrid();
-	$('[data-tooltip="tooltip"],[data-toggle="tooltip"]').tooltip();
-};
 
 //===============HELPERS===================
 $.fn.loader = function(height = 64,width = 64,clear = false){
@@ -260,12 +245,6 @@ $.fn.loader = function(height = 64,width = 64,clear = false){
 function loadAni(height = 64,width = 64){
 	return `<span style='height:${height}px;width:${width}px' class='spin'/>`;
 }
-$.fn.cleanWhitespace = function(){
-	this.contents().filter(
-		function(){ return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
-		.remove();
-	return this;
-};
 
 let V = new Veload();