cState goes stable 1.0; fix #4 & fix #5

author: Mantas <mistermantas@users.noreply.github.com> 2017-11-25 12:05:33 +0200
committer: Mantas <mistermantas@users.noreply.github.com> 2017-11-25 12:05:33 +0200
commit: 3208df6352c0e05208bce95f8d9e9f16769a57ed (patch)
tree: 6d784f09fa6dc7d85438ca1086e32ba363d90483 /layouts/index.html
parent: 4bc818712d9b0133dd22326052a99ef1f36f4aa0 (diff)
1 files changed, 57 insertions, 218 deletions
diff --git a/layouts/index.html b/layouts/index.html
index 85b800a..68a1265 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,244 +1,83 @@
 {{ partial "meta" . }}
-
-  <body>
-    <div class="header notice">
-      <div class="contain">
-        <a href="{{ .Site.BaseURL }}" class="logo">
-          <img src="{{ .Site.Params.logo }}" alt="{{ .Site.Title }}">
+{{ $incidents := where .Site.RegularPages "Params.section" "issue" }}
+{{ $active := where $incidents "Params.resolved" "=" false }}
+
+{{ $isNotice := where $active "Params.severity" "=" "notice" }}
+{{ $isDisrupted := where $active "Params.severity" "=" "disrupted" }}
+{{ $isDown := where $active "Params.severity" "=" "down" }}
+
+  <body class="status-{{ if $isDown }}down{{ else }}{{ if $isDisrupted}}disrupted{{ else }}{{ if $isNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }}">
+    <div class="header">
+      <div class="contain contain--more center">
+        <a href="/" class="logo">
+          {{ if .Site.Params.useLogo }}
+            <h1><img src="{{ .Site.Params.logo }}" alt="{{ .Site.Title }}"></h1>
+              {{ else }}
+            <h1>{{ .Site.Title }}</h1>
+          {{ end }}
         </a>
-
-        <button class="subscribe">Subscribe</button>
       </div>
     </div>
 
     <!-- Main -->
     <div class="contain">
       <noscript>
-        <p class="error">Uh oh! It looks like you have disabled JavaScript or your browser is a piece of garbage. This means we cannot fetch the neccesary data to show you information about our services. Please <a href="//enable-javascript.com">enable scripting</a> and try again.</p>
+        <p class="error">Uh oh! It looks like you have disabled JavaScript. Please <a href="//enable-javascript.com">enable scripting</a> to enhance your experience on this website.</p>
+        <div class="padding"></div>
       </noscript>
 
-      <div class="subscriber-box">
-        <div class="subscriber-box--header">
-          <div class="contain">
-            <strong>Notifications</strong>
-            <span class="close">
-              <img alt="Close" src="https://cdn4.iconfinder.com/data/icons/geomicons/32/672366-x-128.png">
-            </span>
-          </div>
-        </div>
-
-        <div class="contain">
-          <p>Users of modern browsers such as Chrome and Firefox get access to web notifications, a feature that shows alerts for things such as Facebook mentions, new emails, or in our case, status updates. These updates can be seen even if the user is not actively looking at this status page, however, the tab has to stay open.</p>
-
-          <p class="error">Only some users may be able to use this feature. This feature does not work on mobile devices and is not fully tested.</p>
-
-          <div id="alert-init">
-            <input type="checkbox" id="alerts">
-            <label for="alerts">Ping me when the status changes</label>
-          </div>
-
-          <p class="alert-status faded">You have not enabled notifications.</p>
-        </div>
+      <!-- Main info -->
+      <div class="summary">
+        <strong>
+          {{ if $isDown }}
+            Experiencing major issues
+          {{ else }}
+          {{ if $isDisrupted}}
+            Experiencing disruptions
+          {{ else }}
+          {{ if $isNotice }}
+            Please read announcement
+          {{ else }}
+            All systems operational
+          {{ end }}{{ end }}{{ end }}
+        </strong>
+
+        <span class="status summary__date" onclick="location.reload()"></span>
       </div>
 
-      <!-- Main info -->
-      <div class="summary notice">
-        <div class="tldr notice">
-          <strong>Checking status…</strong>
+      {{ range $active }}
+      <div class="padding"></div>
+        <small class="date">{{ .Date.Format "January 02, 2006 at 3:04 PM" }}</small><br>
+        <strong class="faded">{{ .Title }}</strong>
+        {{ .Content }}
+      <div class="padding"></div>
+      {{ else }}{{ end }}
 
-          <span class="status"></span>
-        </div>
-        <div class="details contain">
-          <p>{{ .Site.Params.announcement }}</p>
-        </div>
-      </div><br>
+      <div class="padding"></div>
 
       <!-- Individual info -->
       <div class="components">
-        <div class="component" data-status="" data-id="forums">
-          API <small class="ping testing">Pinging…</small>
-        </div>
-        <div class="component" data-status="" data-id="website">
-          Website <small class="ping testing">Pinging…</small>
-        </div>
+        {{ $systems := .Site.Params.systems }}
+        {{ range $index, $systems }}
+          <div class="component" data-status="ok">
+            {{ . }}
+            <span class="component-status">Operational</span>
+          </div>
+        {{ end }}
       </div>
 
-      <br>
-      <small><a href="#disclaimer">Disclaimer</a></small>
-
     <!-- End main -->
-    </div>
+  </div><div class="padding"></div><hr>
 
     <div class="contain">
-      <h2>Incident history</h2><hr><br>
+      <h2 class="center">Incident history</h2>
 
       {{ range first 10 .Data.Pages }}
-        {{ .Render "post" }}
+        {{ .Render "issue" }}
       {{ end }}
-
-      <aside id="meta"> </aside>
     </div>
 
-    <script async>
-      /**
-       * Dev toolset
-       */
-
-      console.log('Welcome to cState! https://github.com/mistermantas/cstate');
-
-      /**
-       * Notifications
-       */
-
-      // Notification toggle
-      document.querySelector('#alerts').addEventListener('click', enableNotifications)
-
-      // Toggling logic
-      function enableNotifications() {
-        if(window.Notification && Notification.permission !== "denied") {
-        	Notification.requestPermission(function(status) {
-            // status is "granted", if accepted by user
-        		var n = new Notification('Great, you just enabled alerts!', {
-        			body: 'You are now going to receive notifications (like this one) whenever the status changes so long as this tab is open. This feature is still being tested.',
-        			icon: '/favicon.ico'
-        		})
-
-            // Looks like we DO have permission now
-            // So let's mark that checkbox
-            document.querySelector('#alert-init').setAttribute('hidden', 'hidden')
-            document.querySelector('.alert-status').innerHTML = '<strong>Notifications are enabled. </strong>'
-            document.querySelector('.alert-status').className = 'alert-status'
-        	})
-        }
-      }
-
-      if (Notification.permission === 'granted') {
-        // Looks like we DO have permission
-        // So let's mark that checkbox
-        document.querySelector('#alert-init').setAttribute('hidden', 'hidden')
-        document.querySelector('.alert-status').innerHTML = '<strong>Notifications are enabled. </strong>'
-        document.querySelector('.alert-status').className = 'alert-status'
-      }
-
-      /**
-       * Subscribe button
-       */
-
-      function hasClass(element, cls) {
-        return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
-      }
-
-      document.querySelector('.subscribe').addEventListener('click', pressSubscribeButton);
-      document.querySelector('.close').addEventListener('click', pressSubscribeButton);
-
-      function pressSubscribeButton() {
-        if (document.querySelector('.subscriber-box').className === 'subscriber-box active') {
-          document.querySelector('.subscriber-box').className = 'subscriber-box';
-        } else {
-          document.querySelector('.subscriber-box').className = 'subscriber-box active';
-        }
-      }
-
-      /**
-       * Apply data
-       */
-
-      document.querySelector('.component[data-id=forums]').setAttribute('data-status', 'ok');
-      document.querySelector('.component[data-id=website]').setAttribute('data-status', 'ok');
-
-      /**
-       * Get elements
-       */
-
-      const header = document.querySelector('.header');
-      const summary = document.querySelector('.summary');
-      const summaryDetails = document.querySelector('.details');
-      const tldr = document.querySelector('.tldr');
-
-      var summaryText = document.querySelector('.summary strong');
-      var lastUpdated = document.querySelector('.summary span');
-
-      /**
-       * Prelimenary logic
-       */
-
-      var online = navigator.onLine;
-
-      function updateStatus() {
-        var lastUpdate = new Date;
-      }
-
-      /**
-       * Check for internet
-       */
-
-       var lastUpdate = new Date();
-
-       function timeSince(date) {
-        var seconds = Math.floor((new Date() - date) / 1000);
-
-        var interval = Math.floor(seconds / 31536000);
-
-        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';
-      }
-      var aDay = 24*60*60*1000;
-
-      // Show second by second updates
-      window.setInterval(function() {
-       lastUpdated.innerHTML = 'Last updated ' + timeSince(lastUpdate) + ' ago';
-      }, 1000);
-
-
-      /**
-       * Adaptive TLDR
-       */
-
-      const status = document.querySelector('.component[data-id=forums]').getAttribute('data-status') === 'ok' &&
-      document.querySelector('.component[data-id=website]').getAttribute('data-status') === 'ok'
-
-      if (status) {
-        // Change text
-        summaryText.innerHTML = 'All systems operational';
-        // Change design
-        summary.className = 'summary ok';
-        tldr.className = 'tldr ok';
-        summaryDetails.className = 'details contain ok';
-        header.className = 'header ok';
-      } else if (!status) {
-        // Change text
-        summaryText.innerHTML = 'Experiencing downtime';
-        // Change design
-        summary.className = 'summary down';
-        tldr.className = 'tldr down';
-        summaryDetails.className = 'details contain down';
-        header.className = 'header down';
-
-        new Notification (
-          'We are experiencing downtime!', {
-            body : 'Please view the status page for more information. This alert was automatically triggered to let you know of this change.',
-            icon : '/favicon.ico'
-          }
-        )
-      }
-    </script>
-
-{{ partial "footer" . }}
+    {{ partial "js" . }}
+    {{ partial "footer" . }}
+  </body>
+</html>
author	Mantas <mistermantas@users.noreply.github.com>	2017-11-25 12:05:33 +0200
committer	Mantas <mistermantas@users.noreply.github.com>	2017-11-25 12:05:33 +0200
commit	3208df6352c0e05208bce95f8d9e9f16769a57ed (patch)
tree	6d784f09fa6dc7d85438ca1086e32ba363d90483 /layouts/index.html
parent	4bc818712d9b0133dd22326052a99ef1f36f4aa0 (diff)