aboutsummaryrefslogtreecommitdiff
path: root/layouts/partials
diff options
context:
space:
mode:
Diffstat (limited to 'layouts/partials')
-rw-r--r--layouts/partials/index/components.html64
-rw-r--r--layouts/partials/index/summary.html4
-rw-r--r--layouts/partials/js.html109
-rw-r--r--layouts/partials/meta.html45
4 files changed, 147 insertions, 75 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>
diff --git a/layouts/partials/js.html b/layouts/partials/js.html
index b398fbe..765e787 100644
--- a/layouts/partials/js.html
+++ b/layouts/partials/js.html
@@ -3,11 +3,11 @@
* Dev toolset
*/
- console.log('cState v4.4 - https://github.com/cstate/cstate');
+ console.log('cState v5 Dev - https://github.com/cstate/cstate');
document.getElementsByTagName('html')[0].className = 'js';
/**
- * Make theme color pretty
+ * Change header color based on status
*/
if (document.body.className === 'change-header-color') {
@@ -40,65 +40,86 @@
document.location.pathname = '/admin';
}
- /**
- * Timer
+ /**
+ * Category logic
*/
- function hasClass(element, className) {
- return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
+ 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';
+ }
}
- if (hasClass(document.querySelector('body'), 'status-homepage')) {
- var lastUpdated = document.querySelector('.summary__date');
- lastUpdated.innerHTML = '{{ T "lastChecked" }} {{ T "justNow" }}';
-
- var lastUpdate = new Date();
+ /**
+ * Returns a relative date string for the given date.
+ */
+
+ function timeSince(date) {
+ var seconds = Math.floor((new Date() - date) / 1000);
- function timeSince(date) {
- var seconds = Math.floor((new Date() - date) / 1000);
+ var interval = Math.floor(seconds / 31536000);
- var interval = Math.floor(seconds / 31536000);
+ if (interval > 1) {
+ return interval + ' {{ T "yearsAgo" }}';
+ }
+ interval = Math.floor(seconds / 2592000);
+ if (interval > 1) {
+ return interval + ' {{ T "monthsAgo" }}';
+ }
+ interval = Math.floor(seconds / 86400);
+ if (interval > 1) {
+ return interval + '{{ T "daysAgo" }}';
+ }
+ interval = Math.floor(seconds / 3600);
+ if (interval > 1) {
+ return interval + '{{ T "hoursAgo" }}';
+ }
+ interval = Math.floor(seconds / 60);
+ if (interval > 1) {
+ return interval + ' {{ T "minsAgo" }}';
+ }
+ {{ if .Site.Params.skipSeconds }}
+ return '<1 {{ T "minsAgo" }}'
+ {{ else }}
+ return Math.floor(seconds) + '{{ T "secondsAgo" }}';
+ {{ end }}
+ }
- if (interval > 1) {
- return interval + ' {{ T "yearsAgo" }}';
- }
- interval = Math.floor(seconds / 2592000);
- if (interval > 1) {
- return interval + ' {{ T "monthsAgo" }}';
- }
- interval = Math.floor(seconds / 86400);
- if (interval > 1) {
- return interval + '{{ T "daysAgo" }}';
- }
- interval = Math.floor(seconds / 3600);
- if (interval > 1) {
- return interval + '{{ T "hoursAgo" }}';
- }
- interval = Math.floor(seconds / 60);
- if (interval > 1) {
- return interval + ' {{ T "minsAgo" }}';
+ /**
+ * Changes elements with the class 'relative-time' into relative times and
+ * moves the timestamp to a title attribute tooltip.
+ */
+
+ function updateRelativeTimes() {
+ var elements = document.querySelectorAll('.relative-time');
+ for (var i = 0; i < elements.length; i++) {
+ var element = elements[i];
+ var time = Date.parse(element.getAttribute('title'));
+ var html = element.getAttribute('data-time-prefix') || '';
+ if (!time) {
+ time = element.innerText;
+ element.setAttribute('title', time || new Date);
+ html += '{{ T "justNow" }}';
+ } else {
+ html += timeSince(time) + ' {{ T "someTimeAgo" }}';
}
- return Math.floor(seconds) + '{{ T "secondsAgo" }}';
+ html += element.getAttribute('data-time-suffix') || '';
+ element.innerHTML = html.trim();
}
- var aDay = 24*60*60*1000;
}
- window.setInterval(function() {
- if (hasClass(document.querySelector('body'), 'status-homepage')) {
- lastUpdated.innerHTML = '{{ T "lastChecked" }} ' + timeSince(lastUpdate) + ' {{ T "someTimeAgo" }}';
+ updateRelativeTimes();
- // Refresh almost every 5m
- if (lastUpdate > 290000) {
- location.reload;
- }
- }
- }, 5000)
+ // Update "time since" feature every 5s
+ setInterval(updateRelativeTimes, 5000);
</script>
{{ if ne .Site.Params.googleAnalytics "UA-00000000-1" }}
<!-- Global site tag (gtag.js) - Google Analytics -->
- <script type="text/javascript" defer src="https://www.googletagmanager.com/gtag/js?id=UA-109775664-1"></script>
+ <script type="text/javascript" defer src="https://www.googletagmanager.com/gtag/js?id={{ .Site.Params.googleAnalytics }}"></script>
<script type="text/javascript" defer>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index 77c66db..dfb5a98 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -12,7 +12,7 @@
{{ range .AlternativeOutputFormats -}}
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
{{ end -}}
- <meta name="generator" content="cState v4.4 - https://github.com/cstate/cstate">
+ <meta name="generator" content="cState v5 Dev - https://github.com/cstate/cstate">
<meta name="theme-color" content="{{ .Site.Params.brand }}">
<script>
var themeBrandColor = '{{ .Site.Params.brand }}';
@@ -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>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-11-24 03:22:23 +0000