Disable with overlay on disconnect

diff --git a/src/jade/index.jade b/src/jade/index.jade
index cf5fa0fa855a58e6e2ba3031cc83d593481c9101..d6612659a302e24d7cda39e6aa31ee237be8de8e 100644 (file)
--- 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 d90b80dcd6ee14d9408c7bd9c431e6af9e4b9040..a6bb3ed1d1b6e1dee8113968cf48df2c45ea22d6 100644 (file)
--- 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 e92a07c2e888e9bf244533601ae6621c8c806a89..fd7ea04093696456bcab1e3f61539787b17b7150 100644 (file)
--- 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 289e6fe89ec59530d69d6922ac151e191d5e3f21..6d7a160e83dbef6c536aaafd9ebd936b4104b046 100644 (file)
--- 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 ba9876997ea39b3c72600020438e64f837777167..173a3f83b7034e1ec3a2f145e46eec2fc5dc7736 100644 (file)
--- 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