fix #101 - add category status, #161 ref in config.yml

3 files changed, 91 insertions, 28 deletions

diff --git a/layouts/partials/index/components.html b/layouts/partials/index/components.html
index 82964fe..acb1aa7 100644
--- a/layouts/partials/index/components.html
+++ b/layouts/partials/index/components.html
@@ -10,18 +10,8 @@
   {{ $systems := .Site.Params.systems }}
   {{ $categories := .Site.Params.categories }}
 
-  <script>
-  function toggleCategoryHead(el) {
-    if (el.parentNode.className == 'category category--open') {
-      el.parentNode.className = 'category category--closed';
-    } else {
-      el.parentNode.className = 'category category--open';
-    }
-  }
-  </script>
-
   {{ range $categories }}
-    <div class="category {{ if .closed }}category--closed{{ else }}category--open{{ end }}" id="{{ .name | urlize }}">
+    <div class="category {{ if .closed }}category--closed{{ else }}category--open{{ end }}{{ if not .untitled }} category--titled{{ end }}" id="{{ .name | urlize }}">
       {{ if not .untitled }}
       <div class="bold padding clicky category__head" onclick="toggleCategoryHead(this)">
         <span class="hide-without-js">
@@ -42,6 +32,8 @@
           </span>
         </span>
       {{ end }}
+ 
+      <span class="category-status"></span>
 
       </div>
       {{ else }}
@@ -94,8 +86,54 @@
           {{ end }}
         </div>
       {{ end }}
-      </div>
+      </div> 
+
+      <!--
+        Get category status
+      -->
+      <script>
+        // We will look at all components in one category
+        thisCategory = document.currentScript.parentNode 
+
+        componentsOfThisCategory = thisCategory.querySelectorAll('.component')
+        
+        // We will cycle through all components and show
+        // the worst status found
+        //
+        // By default, all is good but we change this value
+        // for progressively worse statuses
+        var highlestLevelStatus = '';
+
+        function checkStatus(element) {
+          var status = element.getAttribute('data-status');
+
+          if (status === 'down') {
+            highlestLevelStatus = 'down'
+          } else if (status === 'disrupted' && highlestLevelStatus !== 'down') {
+            highlestLevelStatus = 'disrupted'
+          } else if (status === 'notice' && highlestLevelStatus !== 'down' && highlestLevelStatus !== 'disrupted') {
+            highlestLevelStatus = 'notice'
+          }
+        }
+
+        componentsOfThisCategory.forEach(element => checkStatus(element));
+        
+        // Human readable (i18n) status name variable
+        var highlestLevelStatusReadable = highlestLevelStatus;
+
+        if (highlestLevelStatus === 'ok') { highlestLevelStatusReadable = '{{ T "thisIsOk" }}' } 
+        if (highlestLevelStatus === 'notice') { highlestLevelStatusReadable = '{{ T "thisIsNotice" }}' } 
+        if (highlestLevelStatus === 'dsirupted') { highlestLevelStatusReadable = '{{ T "thisIsDisrupted" }}' } 
+        if (highlestLevelStatus === 'down') { highlestLevelStatusReadable = '{{ T "thisIsDown" }}' } 
+
+        // Finally we can show the status 
+        // (but only for categories with a name)
+        if (thisCategory.classList.contains('category--titled')) {
+          thisCategory.querySelector('.category__head').setAttribute('data-status', highlestLevelStatus);
+          thisCategory.querySelector('.category-status').innerHTML = highlestLevelStatusReadable;
+        }
+      </script>
     </div>
   {{ end }}
 
-</div>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/js.html b/layouts/partials/js.html
index d966643..765e787 100644
--- a/layouts/partials/js.html
+++ b/layouts/partials/js.html
@@ -40,6 +40,18 @@
     document.location.pathname = '/admin';
   }
 
+  /** 
+   * Category logic
+   */
+
+  function toggleCategoryHead(el) {
+    if (el.parentNode.className == 'category category--open category--titled') {
+      el.parentNode.className = 'category category--closed category--titled';
+    } else {
+      el.parentNode.className = 'category category--open category--titled';
+    }
+  }
+
   /**
    * Returns a relative date string for the given date.
    */
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index 283e840..dfb5a98 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -319,14 +319,23 @@
     .status-notice .announcement-box { border-top: 0; }
 
     /**
-     * Dynamically show individual component statuses
+     * Dynamically show component statuses
      */
 
-    .component-status { float: right; }
-    .component[data-status="ok"] .component-status { color: {{ .Site.Params.ok }}; }
-    .component[data-status="disrupted"] .component-status { color: {{ .Site.Params.disrupted }}; }
-    .component[data-status="down"] .component-status { color: {{ .Site.Params.down }}; }
-    .component[data-status="notice"] .component-status { color: {{ .Site.Params.notice }}; }
+    .category--open .category-status { display: none; }
+    .component-status, .category-status { float: right; }
+    .component[data-status="ok"] .component-status,
+    .category__head[data-status="ok"] .category-status
+    { color: {{ .Site.Params.ok }}; }
+    .component[data-status="disrupted"] .component-status,
+    .category__head[data-status="disrupted"] .category-status
+    { color: {{ .Site.Params.disrupted }}; }
+    .component[data-status="notice"] .component-status,
+    .category__head[data-status="notice"] .category-status
+    { color: {{ .Site.Params.notice }}; }
+    .component[data-status="down"] .component-status,
+    .category__head[data-status="down"] .category-status
+    { color: {{ .Site.Params.down }}; }
 
     /**
      * Responsiveness
@@ -386,15 +395,19 @@
         .error { color: #ff4242; }
         .warning {color: #ffde7f; }
         .ok { color: #7fff7f; }
-
-        .component[data-status="ok"] 
-        .component-status { color: #7fff7f; }
-        .component[data-status="disrupted"] 
-        .component-status { color: #ffde7f; }
-        .component[data-status="notice"] 
-        .component-status { color: #83a4e8; }
-        .component[data-status="down"]
-        .component-status { color: #ff8181; }
+ 
+        .component[data-status="ok"] .component-status,
+        .category__head[data-status="ok"] .category-status
+        { color: #7fff7f; }
+        .component[data-status="disrupted"] .component-status,
+        .category__head[data-status="disrupted"] .category-status
+        { color: #ffde7f; }
+        .component[data-status="notice"] .component-status,
+        .category__head[data-status="notice"] .category-status
+        { color: #83a4e8; }
+        .component[data-status="down"] .component-status,
+        .category__head[data-status="down"] .category-status
+        { color: #ff8181; }
       }
     {{ end }}
     </style>