From d7500b363fee49307304fa623f74649cb408b532 Mon Sep 17 00:00:00 2001
From: Mantas <11616378+mistermantas@users.noreply.github.com>
Date: Wed, 11 Jul 2018 14:45:50 +0300
Subject: v2-dev2

---
 layouts/partials/custom/above-footer.html |   8 ++
 layouts/partials/custom/above-header.html |   8 ++
 layouts/partials/custom/below-footer.html |   8 ++
 layouts/partials/custom/below-header.html |   8 ++
 layouts/partials/custom/meta.html         |   8 ++
 layouts/partials/footer.html              |   1 +
 layouts/partials/header.html              |   1 +
 layouts/partials/js.html                  | 152 +++++++++++++++++++++++++-----
 layouts/partials/meta.html                |  40 ++++++--
 9 files changed, 201 insertions(+), 33 deletions(-)
 create mode 100644 layouts/partials/custom/above-footer.html
 create mode 100644 layouts/partials/custom/above-header.html
 create mode 100644 layouts/partials/custom/below-footer.html
 create mode 100644 layouts/partials/custom/below-header.html
 create mode 100644 layouts/partials/custom/meta.html

(limited to 'layouts/partials')

diff --git a/layouts/partials/custom/above-footer.html b/layouts/partials/custom/above-footer.html
new file mode 100644
index 0000000..1dadab6
--- /dev/null
+++ b/layouts/partials/custom/above-footer.html
@@ -0,0 +1,8 @@
+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->
diff --git a/layouts/partials/custom/above-header.html b/layouts/partials/custom/above-header.html
new file mode 100644
index 0000000..1dadab6
--- /dev/null
+++ b/layouts/partials/custom/above-header.html
@@ -0,0 +1,8 @@
+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->
diff --git a/layouts/partials/custom/below-footer.html b/layouts/partials/custom/below-footer.html
new file mode 100644
index 0000000..1dadab6
--- /dev/null
+++ b/layouts/partials/custom/below-footer.html
@@ -0,0 +1,8 @@
+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->
diff --git a/layouts/partials/custom/below-header.html b/layouts/partials/custom/below-header.html
new file mode 100644
index 0000000..1dadab6
--- /dev/null
+++ b/layouts/partials/custom/below-header.html
@@ -0,0 +1,8 @@
+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->
diff --git a/layouts/partials/custom/meta.html b/layouts/partials/custom/meta.html
new file mode 100644
index 0000000..1dadab6
--- /dev/null
+++ b/layouts/partials/custom/meta.html
@@ -0,0 +1,8 @@
+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 085b814..d6b5486 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,3 +1,4 @@
+
 <div class="footer">
   <div class="contain">
     <p><strong>{{ now.Year }} &copy; {{ .Site.Title }}</strong>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index c378998..94bef80 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,3 +1,4 @@
+
 {{ if .Site.Params.useLargeHeaderDesign }}
 <div class="header header--large">
   <div class="contain contain--more center">
diff --git a/layouts/partials/js.html b/layouts/partials/js.html
index d47cd5d..a26d36c 100644
--- a/layouts/partials/js.html
+++ b/layouts/partials/js.html
@@ -18,48 +18,150 @@
   } else {
     document.querySelector('meta[name=theme-color]').setAttribute('content', themeNoticeColor);
   }
+</script>
 
-
+<!--
+<script>
   /**
    * Check for internet
    */
 
-  var lastUpdated = document.querySelector('.summary__date');
-  var lastUpdate = new Date();
+  function hasClass(element, className) {
+    return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
+  }
+
+  if (hasClass(document.querySelector('body'), 'status-homepage')) {
+    var lastUpdated = document.querySelector('.summary__date');
+    var lastUpdate = new 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 + ' years';
+      if (interval > 1) {
+        return interval + ' years';
+      }
+      interval = Math.floor(seconds / 2592000);
+      if (interval > 1) {
+        return interval + ' months';
+      }
+      interval = Math.floor(seconds / 86400);
+      if (interval > 1) {
+        return interval + 'd';
+      }
+      interval = Math.floor(seconds / 3600);
+      if (interval > 1) {
+        return interval + 'h';
+      }
+      interval = Math.floor(seconds / 60);
+      if (interval > 1) {
+        return interval + ' min';
+      }
+      return Math.floor(seconds) + 's';
     }
-    interval = Math.floor(seconds / 2592000);
-    if (interval > 1) {
-      return interval + ' months';
+    var aDay = 24*60*60*1000;
+  }
+
+  function checkCurrentStatus() {
+    // Check for each status
+    if (hasClass(document.querySelector('body'), 'status-ok')) {
+      window.currentState = 'Operational';
     }
-    interval = Math.floor(seconds / 86400);
-    if (interval > 1) {
-      return interval + 'd';
+    if (hasClass(document.querySelector('body'), 'status-disrupted')) {
+      window.currentState = 'Disrupted';
     }
-    interval = Math.floor(seconds / 3600);
-    if (interval > 1) {
-      return interval + 'h';
+    if (hasClass(document.querySelector('body'), 'status-down')) {
+      window.currentState = 'Down';
     }
-    interval = Math.floor(seconds / 60);
-    if (interval > 1) {
-      return interval + 'min';
+    if (hasClass(document.querySelector('body'), 'status-notice')) {
+      window.currentState = 'Maintenance';
     }
-    return Math.floor(seconds) + 's';
   }
-  var aDay = 24*60*60*1000;
+  checkCurrentStatus();
+
+  // Set for first time use
+  if (typeof(Storage) !== 'undefined') {
+    window.sessionStorage.setItem('priorState', currentState);
+  }
 
   // Show second by second updates
   window.setInterval(function() {
-    lastUpdated.innerHTML = 'Last checked ' + timeSince(lastUpdate) + ' ago';
+    if (hasClass(document.querySelector('body'), 'status-homepage')) {
+      lastUpdated.innerHTML = 'Last checked ' + timeSince(lastUpdate) + ' ago';
+    }
+
+    checkCurrentStatus();
+
+    if (typeof(Storage) !== "undefined") {
+      if (window.sessionStorage.getItem('priorState') !== currentState) {
+        displayNotification('Status changed from ' + window.sessionStorage.getItem('priorState') + ' to ' + currentState);
+      }
+
+      window.sessionStorage.setItem('priorState', currentState);
+    } else {
+      console.log('UNSUPPORTED - SMART NOTIFICATIONS');
+    }
   }, 1000);
+
+
+  /**
+   * Modern browser shiz
+   */
+
+  if (navigator.serviceWorker) {
+    console.log('Service Worker and Push is supported');
+
+    navigator.serviceWorker.register('sw.js')
+    .then(function(swReg) {
+      console.log('Service Worker is registered', swReg);
+
+      swRegistration = swReg;
+    })
+    .catch(function(error) {
+      console.error('Service Worker Error', error);
+    });
+  } else {
+    console.log('Push messaging is not supported');
+  }
+
+
+  Notification.requestPermission(function(status) {
+    console.log('Notification permission status:', status);
+  });
+
+
+  function displayNotification(title, body) {
+    if (Notification.permission == 'granted') {
+      navigator.serviceWorker.getRegistration().then(function(reg) {
+        var options = {
+          body: body,
+          icon: '/favicon.png',
+          vibrate: [100, 50, 100],
+          data: {
+            dateOfArrival: Date.now(),
+            primaryKey: 1
+          },
+          actions: [
+            {action: 'view', title: 'View incident'},
+            {action: 'close', title: 'Dismiss'},
+          ]
+        };
+        reg.showNotification(title, options);
+      });
+    }
+  }
 </script>
-{{ with .Site.Params.customJS }}
-<script type="text/javascript" src="{{ . }}"></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>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', '{{ .Site.Params.googleAnalytics }}');
+  </script>
 {{ end }}
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index 2bef153..7b45778 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -132,7 +132,7 @@
     }
 
     .summary__date:hover {
-      color: #{{ .Site.Params.faded }};
+      color: #ccc;
     }
 
     .summary__date:hover:after {
@@ -141,21 +141,47 @@
     }
 
     .components {
-      border: 2px solid #{{ .Site.Params.border }};
+      border: 2px solid #ddd;
       border-bottom: 0;
     }
 
     .component {
       color: #000;
       padding: 16px;
-      border-bottom: 2px solid #{{ .Site.Params.border }};
+      border-bottom: 2px solid #ddd;
+    }
+
+    .description { cursor: pointer; position: relative; }
+    .description__text { display: none; }
+    .description:hover .description__text,
+    .description:active .description__text  {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 32px;
+      background: #181818;
+      color: #fff;
+      z-index: 50;
+      padding: 8px;
+      border: 2px solid #242424;
+      font-size: 14px;
+      color: #ccc;
+      width: 1000%;
+      height: auto;
+    }
+
+    @media (max-width: 640px) {
+      .description:hover .description__text,
+      .description:active .description__text {
+        width: 50vw;
+      }
     }
 
     .ok { color: #{{ .Site.Params.ok }}; }
     .error { color: #{{ .Site.Params.down }}; }
 
     .footer {
-      margin-top: 20px;
+      padding: 10px;
       background: #f5f5f5;
     }
 
@@ -230,7 +256,7 @@
     .status-down .announcement-box { border: 2px solid #{{ .Site.Params.down }}; }
     .status-notice .announcement-box { border: 2px solid #{{ .Site.Params.notice }}; }
 
-    .status .announcement-box { border-bottom-width: 1px; }
+    .status-homepage .announcement-box { border-bottom-width: 1px; }
 
 
     /**
@@ -254,7 +280,5 @@
       }
     }
     </style>
-    {{ with .Site.Params.customCSS }}
-    <link href="{{ . }}" rel="stylesheet">
-    {{ end }}
+
   </head>
-- 
cgit v1.2.3-70-g09d2