Provide correct UI changes

main.js

@@ -31,8 +31,13 @@ function up(){
 
 function setIcon() {
   docker.ping((err, data) => {
+    if (lastConnectionStatus === null && data === null) {
+      down();
+    }
+
     if (lastConnectionStatus === null && data == 'OK') {
       up();
+      mb.window.webContents.send('send', 'new-docker');
     }
 
     if (lastConnectionStatus === 'OK' && data === null) {
@@ -46,14 +51,14 @@ mb.once('show', function () {
 });
 
 mb.on('ready', function ready () {
+  setIcon();
   setInterval(setIcon, 5000);
 });
 
 mb.on('show', function () {
   //send events to the page
   if (lastConnectionStatus == 'OK') {
     mb.window.webContents.send('send', 'connected');
-    mb.window.webContents.send('send', docker);
   }
 });
 

readme.md

@@ -9,20 +9,24 @@ I often forget if docker is running and this gives a quick visual.
 
 ## Status
 
-running (can make a connection)
+Running (can make a connection)
 
 ![images/up.png](images/up.png)
 
-not running (or at least cannot connect to one)
+Not running (or at least cannot connect to one)
 
 ![images/down.png](images/down.png)
 
-Stopped container list
-![images/stopped-containers.png](images/stopped-containers.png)
+*It can take a few seconds to update the status*
 
 Started container list (shows on top)
+
 ![images/started-container.png](images/started-container.png)
 
+Stopped container list
+
+![images/stopped-containers.png](images/stopped-containers.png)
+
 
 ## Usage
 
@@ -43,19 +47,20 @@ docker:
 ```
 
 ### Icon
-(Whale by Aditya Dipankar from the Noun Project)[https://thenounproject.com/search/?q=whale&i=194454]
+[Whale by Aditya Dipankar from the Noun Project](https://thenounproject.com/search/?q=whale&i=194454)
 
 ## Changelog
 
-0.0.2
+**0.0.3**
+* New icons
+* UI updates appropriately
+
+**0.0.2**
 * Try to connect to docker smartly
 
-0.0.1
+**0.0.1**
 * UI reacts to Docker events
 * Start/Stop buttons work on containers
 
 ## TODO
-
-* ui errors, better state management, etc.
-* build (icons, size, packaging, etc.)
-* configuration via ui?
+* Builds (icons, packages)

src/app.js

@@ -2,9 +2,9 @@
 
 "use strict()";
 
-var Docker       = require('dockerode');
+var Docker = require('dockerode');
 var DockerEvents = require('docker-events');
-var docker       = require('./connect');
+var docker = require('./connect');
 
 var emitter = new DockerEvents({
   docker: docker,
@@ -13,28 +13,27 @@ var emitter = new DockerEvents({
 emitter.start();
 
 emitter.on("connect", (message) => {
-  console.log('connect', message);
   update();
 });
 
 emitter.on("start", (message) => {
-  console.log('start', message);
   update();
 });
 
 emitter.on("stop", (message) => {
-  console.log('stop', message);
   update();
 });
 
-emitter.on("disconnect", (message) => console.log('disconnect', message));
+emitter.on("disconnect", (message) => {
+  update();
+});
 
 function render_container(container) {
   var exited = container.Status.substr(0, 6) === 'Exited' ? true : false;
   var button_state = exited ? "negative" : "positive";
   var button_action = exited ? "play" : "stop";
-  var name = container.Names[container.Names.length-1].substr(1);
-  var network = containers.Ports === undefined ? container.Ports[container.Ports.length-1] : false;
+  var name = container.Names[container.Names.length - 1].substr(1);
+  var network = containers.Ports === undefined ? container.Ports[container.Ports.length - 1] : false;
   var network_display = network ? `${network.Type}://${network.IP}:${network.PublicPort}->${network.PrivatePort}` : '';
 
   return `
@@ -47,46 +46,50 @@ function render_container(container) {
         </li>`;
 }
 
-function controlContainer(e){
+function controlContainer(e) {
   var command = e.srcElement.className.substr(-4);
   command = command === 'play' ? 'start' : command;
   var container = docker.getContainer(e.srcElement.id);
-  container[command](function (err, data) {
+  container[command](function(err, data) {
     console.log('error', err);
   });
 }
 
-function addEventHandlers(){
+function addEventHandlers() {
   var $containerButtons = document.querySelectorAll('.btn.icon');
 
   var x = $containerButtons.length - 1;
-  for(x; x>=0; x--){
+  for (x; x >= 0; x--) {
     $containerButtons[x].addEventListener('click', controlContainer);
   }
 }
 
 function update() {
-  docker.listContainers({all: true}, function(err, containers) {
-    var $containers  = document.getElementById('containers');
+  docker.listContainers({
+    all: true
+  }, function(err, containers) {
+    var $containers = document.getElementById('containers');
     var containerList = '<ul class="table-view" style="margin-bottom: 3rem;">';
 
-    var started = containers.filter((container) => {
-      return container.Status.substr(0, 6) === 'Exited' ? false : true;
-    });
-    var stopped = containers.filter((container) => {
-      return container.Status.substr(0, 6) === 'Exited' ? true : false;
-    });
-
-    started.forEach(function(container){
-      containerList = containerList + render_container(container);
-    });
-
-    stopped.forEach(function(container){
-      containerList = containerList + render_container(container);
-    });
+    if (!err) {
+      var started = containers.filter((container) => {
+        return container.Status.substr(0, 6) === 'Exited' ? false : true;
+      });
+      var stopped = containers.filter((container) => {
+        return container.Status.substr(0, 6) === 'Exited' ? true : false;
+      });
+
+      started.forEach(function(container) {
+        containerList = containerList + render_container(container);
+      });
+
+      stopped.forEach(function(container) {
+        containerList = containerList + render_container(container);
+      });
+    }
 
     if (containerList === '<ul class="table-view">') {
-      containerList = containerList + '<p>No containers to show</p>';
+      containerList = containerList + '<li class="table-view-cell">No containers to show</li>';
     }
 
     $containers.innerHTML = containerList + '</ul>';
@@ -96,15 +99,18 @@ function update() {
 }
 
 require('ipc').on('ping', function(message) {
-  console.log(message);
   if (message === 'connected') {
     update();
   }
+  if (message === 'new-docker') {
+    docker = require('./connect');
+    update();
+  }
 });
 
-function quit(){
-  var remote = require( 'remote' );
-  var app = remote.require( 'app' );
+function quit() {
+  var remote = require('remote');
+  var app = remote.require('app');
 
   app.quit();
 }

src/index.html

@@ -28,6 +28,9 @@
 
     <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
     <div class="content" id="containers">
+      <div class="content">
+        <p class="content-padded">It doesn't seem I can connect to a docker instance. Did you set up your $HOME_DIR/.docker-indicator file?</p>
+          </div>
     </div>
     <div class="bar bar-standard bar-footer">
       <!-- <button id="show-stopped" class="btn pull-left">Show Stopped?</button> -->