Some issues and improvements

- refactored stateStorage to EventEmitter

- ignore compiled files

- fixed state for clients arrangement

- style panic-state on mainpage

- fixed min and max-width on clients

master/public/js/index.js

@@ -11,11 +11,12 @@ global.socket = require('socket.io-client')(full);
 
 var socketEvents = require('../../lib/socketEvents');
 
+var stateStorage = require('./lib/stateStorage');
 var clientState = require('./lib/clientState');
 var Group = require('./model/group');
 
-window.showSettings = true;
 window.arrangeClients = false;
+
 var clientPool;
 
 var doc = window.document.documentElement;
@@ -63,9 +64,9 @@ function makeHTML(clientPool) {
     var html = require('./views/main')({
             id: 'all',
             title: headline,
-            settings: window.showSettings,
-            editable: !window.showSettings,
-            arrangeClients: window.arrangeClients,
+            settings: stateStorage.show,
+            editable: stateStorage.editable,
+            arrangeClients: stateStorage.arrangeClients,
             groups: groups,
             up: groups.reduce(function (carry, group) {
                 return carry || !!group.up;
@@ -79,11 +80,18 @@ function makeHTML(clientPool) {
     $('.js-clients').empty().append(html);
 }
 
-function toggleShowSettings() {
+stateStorage.on('show', function (state) {
     $(doc)
-        .toggleClass('show-settings', !window.showSettings)
-        .toggleClass('hidden-settings', window.showSettings);
-}
+        .toggleClass('show-settings', state)
+        .toggleClass('hidden-settings', state);
+    makeHTML(clientPool);
+    showClients();
+});
+
+stateStorage.on('arrangeClients', function (state) {
+    $(doc).toggleClass('arrange-clients', state);
+    $('.js-clients-arrange').toggleClass('active', state);
+});
 
 function showClients() {
     var show = location.hash.indexOf('clients') > -1;
@@ -134,8 +142,6 @@ $(function () {
         $waiting.toggleClass('active', clientPool.groups.length <= 0 && clientPool.clients.length <= 0);
 
         makeHTML(clientPool);
-        toggleShowSettings();
-
         showClients();
     });
 
@@ -150,10 +156,7 @@ $(function () {
 
     $(document.body)
         .on('click', '.js-settings', function (event) {
-            window.showSettings = !window.showSettings;
-            makeHTML(clientPool);
-            toggleShowSettings();
-            showClients();
+            stateStorage.show = !stateStorage.show;
         })
         .on('click', '.js-add-group', function (event) {
             $waiting.toggleClass('active', true);
@@ -164,9 +167,7 @@ $(function () {
             $(this).toggleClass('active');
         })
         .on('click', '.js-clients-arrange', function (event) {
-            window.arrangeClients = !window.arrangeClients;
-            $(doc).toggleClass('arrange-clients', window.arrangeClients);
-            $(this).toggleClass('active', window.arrangeClients);
+            stateStorage.arrangeClients = !stateStorage.arrangeClients;
         })
         .on('click', '.js-add-schedule', function (event) {
             var $inputGroup = $(this).parents('.input-group').first();
@@ -254,7 +255,6 @@ $(function () {
                 case 'switch-panic':
                     $(event.target).parents('.clients').first().find('.client').each(function (client) {
                         var id = $(this).attr('client');
-                        console.debug($this, this);
                         socket.emit(socketEvents.CLIENT_CHANGEPANICSTATE, {
                             id: id,
                             panicState: $this.data('type') == 'off'

master/public/js/lib/stateStorage.js

@@ -0,0 +1,49 @@
+var util = require('util');
+var EventEmitter = require('events').EventEmitter;
+function StateStorage() {
+    var showSettings = true;
+    var arrangeClients = false;
+    var editable = false;
+
+    Object.defineProperties(this, {
+        show: {
+            enumerable: true,
+            get: function () {
+                return showSettings;
+            },
+            set: function (val) {
+                showSettings = val;
+                if (showSettings == true) {
+                    this.arrangeClients = false;
+                }
+
+                this.emit('show', showSettings);
+            }
+        },
+        arrangeClients: {
+            enumerable: true,
+            get: function () {
+                return arrangeClients;
+            },
+            set: function (val) {
+                arrangeClients = val;
+
+                this.emit('change');
+                this.emit('arrangeClients', arrangeClients);
+
+            }
+        },
+        editable: {
+            enumerable: true,
+            get: function () {
+                return !showSettings;
+            }
+        }
+    });
+}
+
+util.inherits(StateStorage, EventEmitter);
+
+var stateStorage = new StateStorage();
+
+module.exports = stateStorage;

master/public/js/model/group.js

@@ -1,5 +1,7 @@
 var Client = require('./client');
 var clientState = require('../lib/clientState');
+var stateStorage = require('../lib/stateStorage');
+
 
 function Group(group, poolClients) {
 
@@ -94,7 +96,7 @@ function Group(group, poolClients) {
         isAvailable: {
             enumerable: true,
             get: function () {
-                return (this.isUndefined && clients.length > 0) || !window.showSettings || clients.length > 0;
+                return (this.isUndefined && clients.length > 0 && stateStorage.show) || clients.length > 0;
             }
         }
     });

master/public/js/views/main.js

@@ -1,15 +1,16 @@
 var hogan = require("hogan");
 
 var str =
-    '<div class="clients-groups js-groups">\
+    '<header class="clients-main">\
+        <a href="#" class="btn btn-link btn-sm btn-back-main"><i class="fa fa-fw fa-arrow-left"></i></a> \
+        {{> heading}}\
+    </header>\
+    <div class="clients-groups js-groups">\
         {{#groups}}\
             {{> group}}\
         {{/groups}}\
     </div>\
-    <header class="clients-main">\
-        {{> heading}}\
-    </header>\
-    <div class="clients-groups-toggle"><a class="btn btn-default" href="#clients"><i class="fa fa-cog"></i> Details</a></div>';
+    <div class="clients-groups-toggle"><a class="btn btn-sm btn-link" href="#clients">Details<i class="fa fa-fw fa-arrow-right"></i></a></div>';
 
 var template = hogan.compile(str);
 var partial = {

master/public/stylesheets/clients.less

@@ -3,6 +3,16 @@
   display: flex;
   flex-direction: column;
 
+  .show-clients & {
+    margin: 0 auto 30px;
+    min-width: 290px;
+    max-width: 560px;
+  }
+
+  .hidden-clients & {
+    height: 100vh;
+  }
+
   @import "clients/group";
 
   input {
@@ -55,17 +65,68 @@
   &-main {
     margin-bottom: 15px;
     order: 1;
+
+    .hidden-clients & {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .headline, .config {
+        display: none !important;
+      }
+
+      .pull-right {
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+      }
+
+      .btn-group {
+        top: 15vmin;
+        .btn-size {
+          .btn-sm;
+        }
+      }
+
+      .panic-state {
+        width: 50vmin;
+        height: 50vmin;
+        border-radius: 100%;
+        i {
+          font-size: 20vmin;
+        }
+      }
+
+    }
+
+    .btn-back-main {
+      .hidden-clients & {
+        display: none;
+      }
+    }
   }
 
   &-waiting {
     display: none;
     align-items: center;
+    justify-content: center;
+    position: relative;
+    z-index: @zindex-modal;
+
+    width: 100vw;
+    height: 100vh;
+    background: @body-bg;
 
     span {
       font-size: 22px;
       margin-left: .7em;
     }
 
+    i {
+      text-shadow: none;
+    }
+
     &.active {
       display: flex;
       ~ .clients {

master/public/stylesheets/common.less

@@ -3,15 +3,8 @@
 html, body {
 }
 
-body {
-  padding: 30px 0;
-}
-
-.container {
-  margin: 0 auto;
-  min-width: 290px;
-  max-width: 560px;
-}
+//.container {
+//}
 
 .heading {
   h1, .h3 {

master/public/stylesheets/style.less

@@ -1,8 +1,9 @@
-@import "../../../node_modules/bootstrap/less/bootstrap";
+@import "vendor/bootstrap";
 @import "../../../node_modules/bootstrap/less/theme";
 @import "../../../node_modules/font-awesome/less/font-awesome";
-
 @import "common";
 @import "clients";
 @import "client";
-@fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts"; // for referencing Bootstrap CDN font files directly
+
+@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts";
+// for referencing Bootstrap CDN font files directly

master/public/stylesheets/vendor/bootstrap.less

@@ -0,0 +1,56 @@
+/*!
+ * Bootstrap v3.3.5 (http://getbootstrap.com)
+ * Copyright 2011-2015 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+// Core variables and mixins
+@import "../../../../node_modules/bootstrap/less/variables.less";
+@import "../../../../node_modules/bootstrap/less/mixins.less";
+
+// Reset and dependencies
+@import "../../../../node_modules/bootstrap/less/normalize.less";
+//@import "../../../../node_modules/bootstrap/less/print.less";
+//@import "../../../../node_modules/bootstrap/less/glyphicons.less";
+
+// Core CSS
+@import "../../../../node_modules/bootstrap/less/scaffolding.less";
+@import "../../../../node_modules/bootstrap/less/type.less";
+//@import "../../../../node_modules/bootstrap/less/code.less";
+//@import "../../../../node_modules/bootstrap/less/grid.less";
+//@import "../../../../node_modules/bootstrap/less/tables.less";
+@import "../../../../node_modules/bootstrap/less/forms.less";
+@import "../../../../node_modules/bootstrap/less/buttons.less";
+
+// Components
+@import "../../../../node_modules/bootstrap/less/component-animations.less";
+//@import "../../../../node_modules/bootstrap/less/dropdowns.less";
+@import "../../../../node_modules/bootstrap/less/button-groups.less";
+@import "../../../../node_modules/bootstrap/less/input-groups.less";
+//@import "../../../../node_modules/bootstrap/less/navs.less";
+//@import "../../../../node_modules/bootstrap/less/navbar.less";
+//@import "../../../../node_modules/bootstrap/less/breadcrumbs.less";
+//@import "../../../../node_modules/bootstrap/less/pagination.less";
+//@import "../../../../node_modules/bootstrap/less/pager.less";
+@import "../../../../node_modules/bootstrap/less/labels.less";
+//@import "../../../../node_modules/bootstrap/less/badges.less";
+//@import "../../../../node_modules/bootstrap/less/jumbotron.less";
+//@import "../../../../node_modules/bootstrap/less/thumbnails.less";
+//@import "../../../../node_modules/bootstrap/less/alerts.less";
+//@import "../../../../node_modules/bootstrap/less/progress-bars.less";
+//@import "../../../../node_modules/bootstrap/less/media.less";
+//@import "../../../../node_modules/bootstrap/less/list-group.less";
+@import "../../../../node_modules/bootstrap/less/panels.less";
+@import "../../../../node_modules/bootstrap/less/responsive-embed.less";
+@import "../../../../node_modules/bootstrap/less/wells.less";
+@import "../../../../node_modules/bootstrap/less/close.less";
+
+// Components w/ JavaScript
+//@import "../../../../node_modules/bootstrap/less/modals.less";
+//@import "../../../../node_modules/bootstrap/less/tooltip.less";
+//@import "../../../../node_modules/bootstrap/less/popovers.less";
+//@import "../../../../node_modules/bootstrap/less/carousel.less";
+
+// Utility classes
+@import "../../../../node_modules/bootstrap/less/utilities.less";
+@import "../../../../node_modules/bootstrap/less/responsive-utilities.less";

master/views/index.hbs

@@ -1,3 +1,4 @@
-<section class="clients-waiting active"><i class="fa fa-cog fa-spin fa-2x"></i> <span>Waiting for Clients…</span></section>
+<section class="clients-waiting active">
+    <div><i class="fa fa-cog fa-spin fa-2x"></i> <span>Waiting for Clients…</span></div></section>
 <section class="clients js-clients">
 </section>