aboutsummaryrefslogtreecommitdiff
path: root/layouts/partials
diff options
context:
space:
mode:
authorMantas Vilčinskas <hi@mnts.lt>2021-03-06 16:01:11 +0200
committerMantas Vilčinskas <hi@mnts.lt>2021-03-06 16:01:11 +0200
commitd64bfe770d5ccb46c6ca7fb07c90a1ce03b40f13 (patch)
tree275d3f196669282b3d6f7ce172f23385db8ea26f /layouts/partials
parent9bbc616c7328ff0fd205b0bbb6f8b0ba2855fb6f (diff)
fix #101 - add category status, #161 ref in config.yml
Diffstat (limited to 'layouts/partials')
-rw-r--r--layouts/partials/index/components.html64
-rw-r--r--layouts/partials/js.html12
-rw-r--r--layouts/partials/meta.html43
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>