diff options
author | Mantas Vilčinskas <hi@mnts.lt> | 2021-04-17 14:18:48 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-04-17 14:18:48 +0300 |
commit | 18500f7d6fbef6e31d3a319d3ac209cbd00abb06 (patch) | |
tree | d0d41a7055f2314a92b6f475ece58506280080f1 /layouts/partials/index | |
parent | 48f41399bad4317205026933f018ad2c192d8f08 (diff) | |
parent | 740f8fe924ecda15de73002f648454cf5612142f (diff) |
v5 goes live - #151
Diffstat (limited to 'layouts/partials/index')
-rw-r--r-- | layouts/partials/index/components.html | 64 | ||||
-rw-r--r-- | layouts/partials/index/summary.html | 4 |
2 files changed, 53 insertions, 15 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/index/summary.html b/layouts/partials/index/summary.html index de6bceb..41f285b 100644 --- a/layouts/partials/index/summary.html +++ b/layouts/partials/index/summary.html @@ -20,5 +20,5 @@ {{ end }}{{ end }}{{ end }} </strong> - <div class="summary__date clicky float-right" onclick="location.reload()"></div> -</div>
\ No newline at end of file + <div class="summary__date clicky float-right relative-time" onclick="location.reload()" data-time-prefix="{{ T "lastChecked" }} "></div> +</div> |