Make circle red if service is down

Author: mcbloch

assets/js/app.js

@@ -51,7 +51,7 @@ window.liveSocket = liveSocket;
 // progressbar.js@1.0.0 version is used
 // Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
 
-window.loadStatusProgressBar = function(divId) {
+window.loadStatusProgressBar = function(divId, isDown) {
   console.log(`Loading bar for id ${divId}`);
   let bar = new ProgressBar.Circle(`#${divId}`, {
     color: "#aaa",
@@ -65,7 +65,7 @@ window.loadStatusProgressBar = function(divId) {
       autoStyleContainer: false,
     },
     from: { color: "#aaa", width: 1 },
-    to: { color: "#5cb571", width: 4 }, // #333
+    to: { color: isDown ? "#d65c3a" : "#5cb571", width: 4 }, // #333
 
     // Set default step function for all animate calls
     step: function (state, circle) {

lib/zout_web/templates/project/index.html.heex

@@ -19,7 +19,7 @@
       </tr>
       <script>
         window.addEventListener("load",function(event) {
-          loadStatusProgressBar("loading-container-<%= project.id %>");
+          loadStatusProgressBar("loading-container-<%= project.id %>", <%= is_down(downtime) %>);
         });
       </script>
     <% end %>

lib/zout_web/views/project_view.ex

@@ -8,4 +8,8 @@ defmodule ZoutWeb.ProjectView do
 
   def render_status(%Downtime{status: status, start: start}),
     do: "#{status} since #{DateTime.to_iso8601(start)}"
+
+  def is_down(nil), do: false
+  def is_down(%Downtime{status: :working}), do: false
+  def is_down(_), do: true
 end