Sort devices by name

Author: andig

assets/index.html

@@ -42,7 +42,7 @@
 			<h1>Measurements</h1>
 			<div id="data">
 				<p>${ message }</p>
-				<table class="metertable table table-striped" v-for="(m, idx) in meters">
+				<table class="metertable table table-striped" v-for="(m, idx) in sortedMeters">
 					<thead class="thead-dark">
 						<tr class="d-flex">
 							<th class="col-3">${ idx }</th>

assets/js/app.js

@@ -5,6 +5,18 @@ var dataapp = new Vue({
 		meters: {},
 		message: 'Loading...'
 	},
+	computed: {
+		// return meters sorted by name
+		sortedMeters: function() {
+			var devs = Object.keys(this.meters);
+			devs.sort();
+			var res = {};
+			devs.forEach(function(key) {
+				res[key] = this.meters[key];
+			}, this);
+			return res;
+		}
+	},
 	methods: {
 		// populated returns true if it was called with any non-null argumnt
 		populated: function () {
@@ -72,7 +84,6 @@ function updateTime(data) {
 function updateStatus(status) {
 	var id = status["Device"]
 	status["Status"] = status["Online"] ? "online" : "offline"
-	console.log(status)
 
 	// update data table
 	var dict = statusapp.meters[id] || {}