Light devices now ordered by label

assets/javascripts/app.js

@@ -21,6 +21,11 @@
 		mounted: function() {
 			this.authenticate();
 		},
+		computed: {
+			ordered_lights: function () {
+				return _.orderBy(this.lights, 'label');
+			}
+		},
 		methods: {
 			authenticate: function() {
 

electron.js

@@ -34,44 +34,46 @@ const create_window = () => {
 		app_window = null;
 	});
 
-	Menu.setApplicationMenu( Menu.buildFromTemplate([
-		{
-			label: 'Edit',
-			submenu: [
-				{role: 'undo'},
-				{role: 'redo'},
-				{type: 'separator'},
-				{role: 'cut'},
-				{role: 'copy'},
-				{role: 'paste'},
-				{role: 'delete'},
-				{role: 'selectall'}
-			]
-		},
-		{
-			label: 'View',
-			submenu: [
-				{role: 'reload'},
-				{role: 'togglefullscreen'}
-			]
-		},
-		{
-			role: 'window',
-			submenu: [
-				{role: 'minimize'},
-				{role: 'close'}
-			]
-		},
-		{
-			role: 'help',
-			submenu: [
-				{
-					label: 'Learn More',
-					click: () => { require('electron').shell.openExternal('/~https://github.com/thelevicole/lifx-desktop-app'); }
-				}
-			]
-		}
-	]) );
+	if (false) {
+		Menu.setApplicationMenu( Menu.buildFromTemplate([
+			{
+				label: 'Edit',
+				submenu: [
+					{role: 'undo'},
+					{role: 'redo'},
+					{type: 'separator'},
+					{role: 'cut'},
+					{role: 'copy'},
+					{role: 'paste'},
+					{role: 'delete'},
+					{role: 'selectall'}
+				]
+			},
+			{
+				label: 'View',
+				submenu: [
+					{role: 'reload'},
+					{role: 'togglefullscreen'}
+				]
+			},
+			{
+				role: 'window',
+				submenu: [
+					{role: 'minimize'},
+					{role: 'close'}
+				]
+			},
+			{
+				role: 'help',
+				submenu: [
+					{
+						label: 'Learn More',
+						click: () => { require('electron').shell.openExternal('/~https://github.com/thelevicole/lifx-desktop-app'); }
+					}
+				]
+			}
+		]) );
+	}
 };
 
 app.on('ready', create_window);

gulpfile.js

@@ -43,6 +43,8 @@ function minify_js(scripts, destination, file, run_babel) {
 			gutil.log( gutil.colors.red('[Error]'), err.toString() );
 		})
 		.pipe( gulp.dest(destination) );
+
+	return src;
 }
 
 // Compile sass
@@ -61,6 +63,7 @@ gulp.task('stylesheets', function() {
 // Minify JS
 gulp.task('javascripts', function() {
 	return Promise.all([
+		minify_js('./node_modules/lodash/lodash.js', public+'js', 'lodash.js'),
 		minify_js('./node_modules/jquery/dist/jquery.js', public+'js', 'jquery.js'),
 		minify_js('./node_modules/vue/dist/vue.min.js', public+'js', 'vue.js'),
 		minify_js(source+'javascripts/vendor/Lifx.js', public+'js', 'lifx.js', true),

index.html

@@ -31,7 +31,7 @@ <h3>An access token is required</h3>
 			<div v-if="!light">
 				<div id="bulbs" class="text-center" v-if="lights.length">
 					<h1>Lights</h1>
-					<light-switch v-for="light in lights" :key="light.id" :data="light"/>
+					<light-switch v-for="light in ordered_lights" :key="light.id" :data="light"/>
 				</div>
 				<h1 v-if="!lights.length" class="text-center text-white">Loading...</h1>
 			</div>
@@ -78,10 +78,11 @@ <h1 v-if="!lights.length" class="text-center text-white">Loading...</h1>
 	</script>
 
 	<script>
-		window.jQuery = window.$ = require('./js/jquery.js');
-		window.Vue = require('./js/vue.js');
+		window.jQuery	= window.$ = require('./js/jquery.js');
+		window._		= require('./js/lodash.js');
+		window.Vue		= require('./js/vue.js');
+		window.Lifx		= require('./js/lifx.js');
 		require('./renderer.js');
-		window.Lifx = require('./js/lifx.js');
 		require('./js/color-picker.js');
 		require('./js/app.js');
 	</script>

package.json

@@ -25,7 +25,8 @@
     "gulp-svgmin": "^1.2.4",
     "gulp-uglify-es": "^1.0.1",
     "gulp-util": "^3.0.8",
-    "jquery": "^3.3.1"
+    "jquery": "^3.3.1",
+    "lodash": "^4.17.5"
   },
   "dependencies": {}
 }