vue

frontend/src/components/Index/MessageBlock.vue

@@ -1,17 +1,25 @@
 <template>
     <div class="alert alert-primary" role="alert">
-        <h3>Login as Admin!</h3>
+        <h3>{{message.title}}</h3>
-        <span class="mb-3">This is the Demo Statping instance, the database gets reset every 30 minutes. Login as "admin" password is "admin".</span>
+        <span class="mb-3">{{message.description}}</span>
         <div class="d-block mt-2 mb-4">
-            <span class="float-left small">Starts on Tuesday January  8, 2019 at 08:00PM</span>
+            <span class="float-left small">
-            <span class="float-right small">Ends on Thursday May 12, 2022 at 07:00PM</span>
+               Starts on {{parseTime(message.start_on)}}
+            </span>
+            <span class="float-right small">
+                Ends on {{parseTime(message.end_on)}}</span>
         </div>
     </div>
 </template>
 
 <script>
 export default {
-  name: 'MessageBlock'
+  name: 'MessageBlock',
+    props: {
+        message: {
+            type: Object
+        }
+    }
 }
 </script>
 

frontend/src/forms/Service.vue

@@ -146,18 +146,11 @@
             </div>
         </div>
         <div class="form-group row">
-            <div class="col-6">
+            <div class="col-12">
                 <button @click.prevent="saveService" type="submit" class="btn btn-success btn-block">Create Service</button>
             </div>
-
-            <div class="col-6">
-                <button @click.prevent="saveService" class="btn btn-secondary btn-block">Test</button>
-            </div>
-
         </div>
         <div class="alert alert-danger d-none" id="alerter" role="alert"></div>
-
-        {{JSON.stringify(service)}}
     </form>
 </template>
 

frontend/src/mixin.js

@@ -5,9 +5,26 @@ export default Vue.mixin({
     now() {
       return Math.round(new Date().getTime() / 1000)
     },
+      current() {
+        return new Date()
+      },
     ago(seconds) {
       return this.now() - seconds
     },
+      niceDate(val) {
+        return this.parseTime(val).format('LLLL')
+      },
+      parseTime(val) {
+          return this.$moment(val, "YYYY-MM-DDTHH:mm:ssZ", true).local()
+      },
+      toUnix(val) {
+         return this.$moment(val).utc().format('MM-DD-YYYY')
+      },
+      isBetween(t1, t2) {
+          const now = this.$moment(t1).utc().valueOf()
+          const sub = this.$moment(t2).utc().valueOf()
+          return (now - sub) > 0
+      },
     hour(){ return 3600 },
     day() { return 3600 * 24 },
     serviceLink(service) {

frontend/src/pages/Help.vue

@@ -1,32 +1,8 @@
 <template>
-    <div class="col-12 bg-white p-4">
-        Help
-    </div>
 </template>
 
 <script>
 export default {
   name: 'Help',
-  components: {
-
-  },
-  data () {
-    return {
-
-    }
-  },
-  created() {
-
-  },
-  mounted() {
-
-  },
-  methods: {
-
-  }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>

frontend/src/pages/Index.vue

@@ -7,8 +7,8 @@
             <Group :group=group />
         </div>
 
-        <div class="col-12">
+        <div v-for="(message, index) in $store.getters.messages" v-bind:key="index" v-if="inRange(message) && message.service === 0">
-            <MessageBlock/>
+            <MessageBlock :message="message"/>
         </div>
 
         <div class="col-12 full-col-12">
@@ -47,7 +47,11 @@ export default {
 
   },
   methods: {
-
+      inRange(message) {
+          const start = this.isBetween(new Date(), message.start_on)
+          const end = this.isBetween(message.end_on, new Date())
+          return start && end
+      },
   }
 }
 </script>

frontend/src/pages/Service.vue

@@ -28,12 +28,16 @@
                 </div>
             </div>
 
+            <div v-for="(message, index) in messages" v-if="messageInRange(message)">
+                <MessageBlock :message="message"/>
+            </div>
+
             <div class="service-chart-container">
-                <apexchart width="100%" height="215" type="area" :options="chartOptions" :series="series"></apexchart>
+                <apexchart width="100%" height="420" type="area" :options="chartOptions" :series="series"></apexchart>
             </div>
 
             <div class="service-chart-heatmap">
-                <div id="service_heatmap"></div>
+                <apexchart width="100%" height="215" type="heatmap" :options="chartOptions" :series="series"></apexchart>
             </div>
 
             <form id="service_date_form" class="col-12 mt-2 mb-3">
@@ -104,17 +108,18 @@
 
 <script>
   import Api from "../components/API"
+  import MessageBlock from '../components/Index/MessageBlock';
   import Checkin from "../forms/Checkin";
 
   const axisOptions = {
     labels: {
-      show: false
+      show: true
     },
     crosshairs: {
       show: false
     },
     lines: {
-      show: false
+      show: true
     },
     tooltip: {
       enabled: false
@@ -133,6 +138,7 @@
 export default {
   name: 'Service',
   components: {
+      MessageBlock,
     Checkin
   },
   data () {
@@ -143,6 +149,7 @@ export default {
       authenticated: false,
       ready: false,
       data: null,
+        messages: [],
       failures: [],
       chartOptions: {
         chart: {
@@ -171,7 +178,7 @@ export default {
             top: 0,
             right: 0,
             bottom: 0,
-            left: -10,
+            left: 0,
           }
         },
         xaxis: {
@@ -221,19 +228,25 @@ export default {
     }
   },
     async created() {
-      this.id = this.$route.params.id
+        await this.$store.dispatch('loadRequired')
+    },
+    async mounted() {
+      const id = this.$route.params.id
       let service;
-      if (this.isInt(this.id)) {
+      if (this.isInt(id)) {
-        service = this.$store.getters.serviceById(this.id)
+        service = await Api.service(id)
       } else {
         service = this.$store.getters.serviceByPermalink(this.id)
       }
       await this.getService(service)
+        this.messages = this.$store.getters.serviceMessages(service.id)
     },
-    mounted() {
-
-  },
   methods: {
+      messageInRange(message) {
+          const start = this.isBetween(new Date(), message.start_on)
+          const end = this.isBetween(message.end_on, new Date())
+          return start && end
+      },
     async getService(s) {
         this.service = await Api.service(s.id)
         await this.chartHits()

frontend/src/routes.js

@@ -89,7 +89,6 @@ router.beforeEach((to, from, next) => {
       return
     }
       next()
-      return
   } else {
     next()
   }

frontend/src/store.js

@@ -41,7 +41,7 @@ export default new Vuex.Store({
         integrations: state => state.integrations,
 
         servicesInOrder: state => state.services.sort((a, b) => a.order_id - b.order_id),
-        groupsInOrder:  state => state.groups.sort((a, b) => a.order_id - b.order_id),
+        groupsInOrder: state => state.groups.sort((a, b) => a.order_id - b.order_id),
         groupsClean: state => state.groups.filter(g => g.name !== '').sort((a, b) => a.order_id - b.order_id),
 
         serviceById: (state) => (id) => {
@@ -53,6 +53,9 @@ export default new Vuex.Store({
         servicesInGroup: (state) => (id) => {
             return state.services.filter(s => s.group_id === id).sort((a, b) => a.order_id - b.order_id)
         },
+        serviceMessages: (state) => (id) => {
+            return state.messages.filter(s => s.service === id)
+        },
         onlineServices: (state) => (online) => {
             return state.services.filter(s => s.online === online)
         },
@@ -60,7 +63,7 @@ export default new Vuex.Store({
             return state.groups.find(g => g.id === id)
         },
         cleanGroups: (state) => () => {
-          return state.groups.filter(g => g.name !== '').sort((a, b) => a.order_id - b.order_id)
+            return state.groups.filter(g => g.name !== '').sort((a, b) => a.order_id - b.order_id)
         },
         userById: (state) => (id) => {
             return state.users.find(u => u.id === id)
@@ -70,57 +73,57 @@ export default new Vuex.Store({
         },
     },
     mutations: {
-        setHasAllData(state, bool) {
+        setHasAllData (state, bool) {
             state.hasAllData = bool
         },
-        setHasPublicData(state, bool) {
+        setHasPublicData (state, bool) {
             state.hasPublicData = bool
         },
-        setCore(state, core) {
+        setCore (state, core) {
             state.core = core
         },
-        setToken(state, token) {
+        setToken (state, token) {
             state.token = token
         },
-        setServices(state, services) {
+        setServices (state, services) {
             state.services = services
         },
-        setGroups(state, groups) {
+        setGroups (state, groups) {
             state.groups = groups
         },
-        setMessages(state, messages) {
+        setMessages (state, messages) {
             state.messages = messages
         },
-        setUsers(state, users) {
+        setUsers (state, users) {
             state.users = users
         },
-        setNotifiers(state, notifiers) {
+        setNotifiers (state, notifiers) {
             state.notifiers = notifiers
         },
-        setIntegrations(state, integrations) {
+        setIntegrations (state, integrations) {
             state.integrations = integrations
         }
     },
     actions: {
-      async loadRequired(context) {
+        async loadRequired (context) {
-        const core = await Api.core()
+            const core = await Api.core()
-        context.commit("setCore", core);
+            context.commit("setCore", core);
-        const services = await Api.services()
+            const services = await Api.services()
-        context.commit("setServices", services);
+            context.commit("setServices", services);
-        const groups = await Api.groups()
+            const groups = await Api.groups()
-        context.commit("setGroups", groups);
+            context.commit("setGroups", groups);
-        const messages = await Api.messages()
+            const messages = await Api.messages()
-        context.commit("setMessages", messages)
+            context.commit("setMessages", messages)
-        context.commit("setHasPublicData", true)
+            context.commit("setHasPublicData", true)
-      },
+        },
-      async loadAdmin(context) {
+        async loadAdmin (context) {
-        await context.dispatch('loadRequired')
+            await context.dispatch('loadRequired')
-        const notifiers = await Api.notifiers()
+            const notifiers = await Api.notifiers()
-        context.commit("setNotifiers", notifiers);
+            context.commit("setNotifiers", notifiers);
-        const users = await Api.users()
+            const users = await Api.users()
-        context.commit("setUsers", users);
+            context.commit("setUsers", users);
-          const integrations = await Api.integrations()
+            const integrations = await Api.integrations()
-          context.commit("setIntegrations", integrations);
+            context.commit("setIntegrations", integrations);
-      }
+        }
     }
 });

source/generate_wiki.go

@@ -57,7 +57,7 @@ func main() {
 	utils.DeleteDirectory("./statping.wiki")
 	utils.DeleteDirectory("./logs")
 
-	f, err := os.Create("wiki.go")
+	f, err := os.Create("../frontend/src/pages/Help.vue")
 	die(err)
 	defer f.Close()
 
@@ -80,12 +80,12 @@ func die(err error) {
 	}
 }
 
-var packageTemplate = template.Must(template.New("").Parse(`// Code generated by go generate; DO NOT EDIT.
+var packageTemplate = template.Must(template.New("").Parse(`<template>
-// This file was generated by robots at
+    <div class="col-12 bg-white p-4" v-html={{printf "%q" .Compiled}}></div>
-// {{ .Timestamp }}
+</template>
-// 
-// This contains the most recently Markdown source for the Statping Wiki.
-package source
 
-// CompiledWiki contains all of the Statping Wiki pages from the Github Wiki repo.
+<script>
-var CompiledWiki = []byte({{printf "%q" .Compiled}})`))
+export default {
+  name: 'Help',
+}
+</script>`))