Add ui connection alert

2012-06-20 20:47:08 -04:00
parent 699fc9ab1b
commit aafcfbbb69
6 changed files with 62 additions and 2 deletions
@@ -1,7 +1,7 @@
 derby = require('derby')
 {get, view, ready} = derby.createApp module
 derby.use require('derby-ui-boot')
-#derby.use(require('../../ui'))
+derby.use(require('../../ui'))

 ## ROUTES ##

@@ -0,0 +1,15 @@
+.connection {
+  position: absolute;
+  text-align: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 0;
+  z-index: 99;
+}
+.connection > .alert {
+  border-top: 0;
+  border-radius: 0 0 4px 4px;
+  padding-right: 14px;
+  display: inline-block;
+}
@@ -0,0 +1,15 @@
+<connectionAlert:>
+  <div class="connection">
+    {#unless connected}
+      <p class="alert">
+        {#if canConnect}
+          Offline 
+          {#unless :self.hideReconnect}
+            &ndash; <a x-bind="click:connect">Reconnect</a>
+          {/}
+        {else}
+          Unable to reconnect &ndash; <a x-bind="click:reload">Reload</a>
+        {/}
+      </p>
+    {/}
+  </div>
@@ -0,0 +1,15 @@
+exports.create = function(model) {
+
+  this.connect = function() {
+    // Hide the reconnect link for a second after clicking it
+    model.set('hideReconnect', true)
+    setTimeout(function() {
+      model.set('hideReconnect', false)
+    }, 1000)
+    model.socket.socket.connect()
+  }
+
+  this.reload = function() {
+    window.location.reload()
+  }
+}
@@ -0,0 +1,14 @@
+var config = {
+  filename: __filename
+, styles: '../styles/ui'
+, scripts: {
+    connectionAlert: require('./connectionAlert')
+  }
+};
+
+module.exports = ui
+ui.decorate = 'derby'
+
+function ui(derby, options) {
+  derby.createLibrary(config, options)
+}
@@ -2,7 +2,8 @@
  HabitRPG

 <Header:>
-  <app:alert>
+  <body>
+  <ui:connectionAlert>
  
 <taskList: nonvoid>
  <div class="{{{type}}}s">