notification bubble added for ajax errors, added dynamic ajax tmeo

html/pages/about.tpl

@@ -64,6 +64,9 @@
 	</table>
 </div>
 
+
+<div class="ErrMsg hidden" id="notif"></div>
+
 </div><!-- content -->
 </div><!-- outer -->
 </body>

html/pages/fft.html

@@ -83,6 +83,9 @@
 	$().ready(page_waveform.init('fft'));
 </script>
 
+
+<div class="ErrMsg hidden" id="notif"></div>
+
 </div><!-- content -->
 </div><!-- outer -->
 </body>

html/pages/status.tpl

@@ -38,7 +38,7 @@
 		</tr>
 		<tr>
 			<th></th>
-			<td><a onclick="trigReset()" class="button btn-red">SW reset</a></td>
+			<td><a onclick="page_status.trigReset()" class="button btn-red">SW reset</a></td>
 		</tr>
 	</table>
 </div>
@@ -106,27 +106,22 @@
 	</table>
 </div>
 
-<div class="Modal hidden" id="reset-modal">
+<div class="Modal hidden no-close" id="reset-modal">
 	<div class="Dialog center">
 		<h2>The device has been reset.</h2>
-		<p>If you're connected to the AP, you'll have to re-connect.</p>
+		<p class="ap-only">If you're connected to the AP, you'll have to re-connect.</p>
-		<p>Please wait a few seconds, then refresh the page.</p>
+		<p>This dialog should close when the restart is complete, please wait around 15 seconds..</p>
-		<p><a onclick="location.reload()" class="button btn-blue">Refresh</a></p>
+		<p><a onclick="location.reload()" class="button btn-blue">Reload the page</a></p>
 	</div>
 </div>
 
 <script>
 	$().ready(page_status.init);
-
-	function trigReset() {
-		$().get(_root+'/reset.cgi', function(resp, status) {
-			if (status == 200) {
-				modal.show('#reset-modal');
-			}
-		});
-	}
 </script>
 
+
+<div class="ErrMsg hidden" id="notif"></div>
+
 </div><!-- content -->
 </div><!-- outer -->
 </body>

html/pages/wfm.html

@@ -72,6 +72,9 @@
 	$().ready(page_waveform.init('raw'));
 </script>
 
+
+<div class="ErrMsg hidden" id="notif"></div>
+
 </div><!-- content -->
 </div><!-- outer -->
 </body>

html/pages/wifi.tpl

@@ -61,6 +61,9 @@
 	</div>
 </div>
 
+
+<div class="ErrMsg hidden" id="notif"></div>
+
 </div><!-- content -->
 </div><!-- outer -->
 </body>

html_src/_end.php

@@ -1,3 +1,6 @@
+
+<div class="ErrMsg hidden" id="notif"></div>
+
 </div><!-- content -->
 </div><!-- outer -->
 </body>

html_src/gulpfile.js

@@ -27,6 +27,7 @@ elixir(function (mix) {
 		'js-src/lib/lodash.custom.js',
 		'js-src/utils.js',
 		'js-src/modal.js',
+		'js-src/notif.js',
 		'js-src/app.js',
 		'js-src/page_wifi.js',
 		'js-src/page_waveform.js',

html_src/js-src/app.js

@@ -21,4 +21,10 @@ $().ready(function () {
 	}, 1000);
 
 	modal.init();
+	notify.init();
 });
+
+
+function errorMsg(msg) {
+	notify.show(msg, 3000);
+}

html_src/js-src/lib/chibi.js

@@ -599,12 +599,20 @@
 			return cb;
 		};
 		// Basic XHR 1, no file support. Shakes fist at IE
-		cb.ajax = function (url, method, callback) {
+		cb.ajax = function (url, method, callback, options) {
 			var xhr,
 				query = serializeData(nodes),
 				type = (method) ? method.toUpperCase() : 'GET',
 				timestamp = '_ts=' + (+new Date());
 
+			var opts = Chartist.extend({}, {
+				nocache: true,
+				timeout: 5000,
+				loader: true,
+			}, options);
+
+			console.log('ajax to = '+opts.timeout);
+
 			if (query && (type === 'GET')) {
 				url += (url.indexOf('?') === -1) ? '?' + query : '&' + query;
 				query = null;
@@ -614,18 +622,23 @@
 
 			if (xhr) {
 				// prevent caching
-				url += (url.indexOf('?') === -1) ? '?' + timestamp : '&' + timestamp;
+				if (opts.nocache)
+					url += (url.indexOf('?') === -1) ? '?' + timestamp : '&' + timestamp;
 
-				$('#loader').addClass('show');
+				if (opts.loader)
+					$('#loader').addClass('show');
 
 				// Douglas Crockford: "Synchronous programming is disrespectful and should not be employed in applications which are used by people"
 				xhr.open(type, url, true);
 
-				xhr.timeout = 15000; // a default value. TODO way to set it for the caller
+				xhr.timeout = opts.timeout;
 
 				xhr.onreadystatechange = function () {
 					if (xhr.readyState === 4) {
-						$('#loader').removeClass('show');
+
+						if (opts.loader)
+							$('#loader').removeClass('show');
+
 						if (callback && xhr.status != 0) { // xhr.status 0 means "aborted"
 							callback(xhr.responseText, xhr.status);
 						}
@@ -634,7 +647,7 @@
 
 				xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
 
-				if (type === 'POST' || type === 'PUT') {
+				if (type === 'POST') {
 					xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 				}
 
@@ -644,12 +657,12 @@
 			return cb;
 		};
 		// Alias to cb.ajax(url, 'get', callback)
-		cb.get = function (url, callback) {
+		cb.get = function (url, callback, opts) {
-			return cb.ajax(url, 'get', callback);
+			return cb.ajax(url, 'get', callback, opts);
 		};
 		// Alias to cb.ajax(url, 'post', callback)
-		cb.post = function (url, callback) {
+		cb.post = function (url, callback, opts) {
-			return cb.ajax(url, 'post', callback);
+			return cb.ajax(url, 'post', callback, opts);
 		};
 
 		return cb;

html_src/js-src/modal.js

@@ -21,6 +21,7 @@ var modal = (function () {
 	modal.init = function () {
 		// close modal by click outside the dialog
 		$('.Modal').on('click', function () {
+			if ($(this).hasClass('no-close')) return; // this is a no-close modal
 			modal.hide(this);
 		});
 

html_src/js-src/notif.js

@@ -0,0 +1,29 @@
+var notify = (function () {
+	var nt = {};
+	var sel = '#notif';
+
+	nt.show = function (message, timeout) {
+		$(sel).html(message);
+		modal.show(sel);
+
+		if (!_.isUndefined(timeout)) {
+			setTimeout(nt.hide, timeout);
+		}
+	};
+
+	nt.hide = function () {
+		var $m = $(sel);
+		$m.removeClass('visible');
+		setTimeout(function () {
+			$m.addClass('hidden');
+		}, 250); // transition time
+	};
+
+	nt.init = function() {
+		$(sel).on('click', function() {
+			nt.hide(this);
+		});
+	};
+
+	return nt;
+})();

html_src/js-src/page_status.js

@@ -1,14 +1,43 @@
 var page_status = (function() {
 	var st = {};
+	st.j = {};
+
+	var updateTime = 10000;
+
+	var updateInhibited = false;
+
+	st.trigReset = function() {
+		var modal_sel = '#reset-modal';
+		$().get(_root + '/reset.cgi', function(resp, status) {
+			if (status == 200) {
+
+				modal.show(modal_sel);
+				updateInhibited = true;
+
+				var ping_i = setInterval(function() {
+					$().get(_root+'/ping.cgi', function(resp, code){
+						if (code == 200) {
+							// device is ready
+							modal.hide(modal_sel);
+							requestUpdate();
+							clearInterval(ping_i);
+							updateInhibited = false;
+						}
+					}, {timeout: 500});
+				}, 1000);
+			}
+		});
+	};
 
 	function onUpdate(resp, status) {
 		if (status != 200) {
 			// bad response
-			console.error('Update failed.');
+			errorMsg('Update failed.');
 		} else {
 			try {
 				// OK
 				var j = JSON.parse(resp);
+				st.j = j; // store for global access
 
 				$('.sta-only').toggle(j.sta);
 				$('.ap-only').toggle(j.ap);
@@ -38,11 +67,13 @@ var page_status = (function() {
 				}
 				// chip ID & macs don't change
 			} catch(e) {
-				console.error(e);
+				errorMsg(e);
 			}
 		}
 
-		setTimeout(requestUpdate, 10000);
+		if (!updateInhibited) {
+			setTimeout(requestUpdate, updateTime);
+		}
 	}
 
 	function requestUpdate() {
@@ -51,7 +82,6 @@ var page_status = (function() {
 
 	st.init = function() {
 		requestUpdate();
-		setTimeout(requestUpdate, 10000);
 	};
 
 	return st;

html_src/js-src/page_waveform.js

@@ -137,7 +137,7 @@ var page_waveform = (function () {
 		readoutPending = false;
 
 		if (status != 200) {
-			console.error("Request failed.");
+			errorMsg("Request failed.");
 
 			if (autoReload)
 				toggleAutoReload(); // turn it off.
@@ -145,7 +145,7 @@ var page_waveform = (function () {
 		} else {
 			var j = JSON.parse(resp);
 			if (!j.success) {
-				console.error("Sampling / readout failed.");
+				errorMsg("Sampling / readout failed.");
 
 				if (autoReload)
 					toggleAutoReload(); // turn it off.
@@ -165,13 +165,18 @@ var page_waveform = (function () {
 
 		readoutPending = true;
 
+		var n = $('#count').val();
+		var fs = $('#freq').val();
+
 		var url = _root+'/api/{fmt}.json?n={n}&fs={fs}'.format({
-			fmt: dataFormat,
+			fmt: dataFormat, // fft or raw
-			n: $('#count').val(),
+			n: n,
-			fs: $('#freq').val()
+			fs: fs
 		});
 
-		$().get(url, onRxData);
+		$().get(url, onRxData, {
+			timeout: (1000/fs)*n+1500
+		});
 
 		return true;
 	}

html_src/page_status.php

@@ -15,7 +15,7 @@
 		</tr>
 		<tr>
 			<th></th>
-			<td><a onclick="trigReset()" class="button btn-red">SW reset</a></td>
+			<td><a onclick="page_status.trigReset()" class="button btn-red">SW reset</a></td>
 		</tr>
 	</table>
 </div>
@@ -83,25 +83,17 @@
 	</table>
 </div>
 
-<div class="Modal hidden" id="reset-modal">
+<div class="Modal hidden no-close" id="reset-modal">
 	<div class="Dialog center">
 		<h2>The device has been reset.</h2>
-		<p>If you're connected to the AP, you'll have to re-connect.</p>
+		<p class="ap-only">If you're connected to the AP, you'll have to re-connect.</p>
-		<p>Please wait a few seconds, then refresh the page.</p>
+		<p>This dialog should close when the restart is complete, please wait around 15 seconds..</p>
-		<p><a onclick="location.reload()" class="button btn-blue">Refresh</a></p>
+		<p><a onclick="location.reload()" class="button btn-blue">Reload the page</a></p>
 	</div>
 </div>
 
 <script>
 	$().ready(page_status.init);
-
-	function trigReset() {
-		$().get(_root+'/reset.cgi', function(resp, status) {
-			if (status == 200) {
-				modal.show('#reset-modal');
-			}
-		});
-	}
 </script>
 
 <?php include "_end.php"; ?>

html_src/sass/layout/_modal.scss

@@ -39,3 +39,31 @@
 		margin-bottom: 0;
 	}
 }
+
+// "toast"
+.ErrMsg {
+	position: fixed;
+	bottom: dist(2);
+	padding: dist(-1) dist(0);
+	left: 50%;
+	@include translate(-50%,0);
+	-webkit-font-smoothing: subpixel-antialiased;
+	-webkit-transform: translateZ(0) scale(1.0, 1.0);
+
+	background: #d03e42;
+	color: white;
+	text-shadow: 0 0 2px black;
+	box-shadow: 0 0 6px 0 rgba(black, .6);
+	border-radius: 5px;
+
+	max-width: 80%;
+
+	@include media($phone) {
+		width: calc(100% - #{dist(0)});
+	}
+
+	transition: opacity .5s;
+	opacity: 0;
+	&.visible { opacity: 1 }
+	&.hidden { display: none }
+}