Make circle red if service is down

ZeusWPI · Jun 2, 2022 · e3c39dc · e3c39dc
1 parent 327d19a
commit e3c39dc
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -51,7 +51,7 @@ window.liveSocket = liveSocket;
 // [email protected] 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) {

diff --git a/lib/zout_web/templates/project/index.html.heex b/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 %>

diff --git a/lib/zout_web/views/project_view.ex b/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