From 4daae6c45109ce42a82025eeb32f747ef9b674e9 Mon Sep 17 00:00:00 2001
From: Joseph Coffland <joseph@cauldrondevelopment.com>
Date: Wed, 22 Jun 2016 14:50:13 -0700
Subject: [PATCH] Disable with overlay on disconnect

---
 src/jade/index.jade                  |  2 ++
 src/jade/templates/control-view.jade |  2 --
 src/js/app.js                        | 26 +++++++++++++++++++++-
 src/js/control-view.js               | 33 +++++++---------------------
 src/stylus/style.styl                | 17 ++++++++++++++
 5 files changed, 52 insertions(+), 28 deletions(-)

diff --git a/src/jade/index.jade b/src/jade/index.jade
index cf5fa0f..d661265 100644
--- a/src/jade/index.jade
+++ b/src/jade/index.jade
@@ -25,6 +25,8 @@ html(lang="en")
 
 
   body(v-cloak)
+    #overlay(v-if="status != 'connected'")
+      span {{status}}
     #layout
       a#menuLink.menu-link(href="#menu"): span
 
diff --git a/src/jade/templates/control-view.jade b/src/jade/templates/control-view.jade
index d90b80d..a6bb3ed 100644
--- a/src/jade/templates/control-view.jade
+++ b/src/jade/templates/control-view.jade
@@ -1,6 +1,4 @@
 script#control-view-template(type="text/x-template")
-  .status(:class="status") {{status}}
-
   #control
     .jog
       axis-control(axes="XY", :colors="['red', 'green']",
diff --git a/src/js/app.js b/src/js/app.js
index e92a07c..fd7ea04 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1,6 +1,7 @@
 'use strict'
 
 var api = require('./api');
+var Sock = require('./sock');
 
 
 module.exports = new Vue({
@@ -9,6 +10,7 @@ module.exports = new Vue({
 
   data: function () {
     return {
+      status: 'connecting',
       currentView: 'loading',
       index: -1,
       modified: false,
@@ -31,11 +33,14 @@ module.exports = new Vue({
 
 
   events: {
-    'config-changed': function () {this.modified = true;}
+    'config-changed': function () {this.modified = true;},
+    'send': function (msg) {if (this.status == 'connected') this.sock.send(msg)}
   },
 
 
   ready: function () {
+    this.connect();
+
     $.get('/config-template.json').success(function (data, status, xhr) {
       this.template = data;
 
@@ -50,6 +55,25 @@ module.exports = new Vue({
 
 
   methods: {
+    connect: function () {
+      this.sock = new Sock('//' + window.location.host + '/ws');
+
+      this.sock.onmessage = function (e) {
+        this.$broadcast('message', e.data);
+      }.bind(this);
+
+      this.sock.onopen = function (e) {
+        this.status = 'connected';
+        this.$broadcast(this.status);
+      }.bind(this);
+
+      this.sock.onclose = function (e) {
+        this.status = 'disconnected';
+        this.$broadcast(this.status);
+      }.bind(this);
+    },
+
+
     parse_hash: function () {
       var hash = location.hash.substr(1);
 
diff --git a/src/js/control-view.js b/src/js/control-view.js
index 289e6fe..6d7a160 100644
--- a/src/js/control-view.js
+++ b/src/js/control-view.js
@@ -1,7 +1,6 @@
 'use strict'
 
 var api = require('./api');
-var Sock = require('./sock');
 
 
 function is_array(x) {
@@ -16,7 +15,6 @@ module.exports = {
 
   data: function () {
     return {
-      status: 'connecting',
       mdi: '',
       file: '',
       last_file: '',
@@ -52,40 +50,25 @@ module.exports = {
     zero: function (axis) {
       console.debug('zero(' + axis + ')');
       this.send('$zero ' + axis);
+    },
+
+
+    message: function (data) {
+      if (typeof data == 'object')
+        for (var key in data)
+          this.$set('state.' + key, data[key]);
     }
   },
 
 
   ready: function () {
-    this.connect();
     this.update();
   },
 
 
   methods: {
-    connect: function () {
-      this.sock = new Sock('//' + window.location.host + '/ws');
-
-      this.sock.onmessage = function (e) {
-        var data = e.data;
-
-        if (typeof data == 'object')
-          for (var key in data)
-            this.$set('state.' + key, data[key]);
-      }.bind(this);
-
-      this.sock.onopen = function (e) {
-        this.status = 'connected';
-      }.bind(this);
-
-      this.sock.onclose = function (e) {
-        this.status = 'disconnected';
-      }.bind(this);
-    },
-
-
     send: function (msg) {
-      if (this.status == 'connected') this.sock.send(msg);
+      this.$dispatch('send', msg);
     },
 
 
diff --git a/src/stylus/style.styl b/src/stylus/style.styl
index ba98769..173a3f8 100644
--- a/src/stylus/style.styl
+++ b/src/stylus/style.styl
@@ -45,6 +45,23 @@ body
   &.connected
     color green
 
+#overlay
+  position fixed
+  top 0
+  left 0
+  width 100%
+  height 100%
+  background-color rgba(0, 0, 0, 0.7)
+  z-index 2000
+  color white
+  font-weight bold
+  font-size 24pt
+  text-align center
+  text-transform uppercase
+
+  span
+    position relative
+    top 50%
 
 #menu
   .save
-- 
2.27.0