From b1b6462ebdb182064bcefa8229f3e664f86c28ca Mon Sep 17 00:00:00 2001
From: Kevin Petit <Kevin.Petit@equadex.net>
Date: Sat, 16 May 2020 18:54:27 +0200
Subject: [PATCH] Fix announcement display

---
 .../src/components/Index/MessageBlock.vue     |  6 ++---
 frontend/src/mixin.js                         |  9 ++++---
 frontend/src/pages/Index.vue                  | 24 +++++++++----------
 frontend/src/pages/Service.vue                | 17 ++++++-------
 4 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/Index/MessageBlock.vue b/frontend/src/components/Index/MessageBlock.vue
index 5fd9ce57..96c98225 100644
--- a/frontend/src/components/Index/MessageBlock.vue
+++ b/frontend/src/components/Index/MessageBlock.vue
@@ -1,13 +1,13 @@
 <template>
-    <div class="alert alert-primary pb-4 pt-3 mt-5 mb-5" role="alert">
+    <div class="alert alert-warning pb-4 pt-3 mt-5 mb-5" role="alert">
         <h3 class="mb-3">{{message.title}}</h3>
         <span class="mb-3">{{message.description}}</span>
         <div class="row d-block mt-3">
             <span class="col-12 col-md-6 text-left small">
-               Started {{niceDate(message.start_on)}} ({{ago(parseISO(message.start_on))}} ago)
+                Started {{niceDate(message.start_on)}} ({{ago(message.start_on)}} ago)
             </span>
             <span class="col-12 col-md-6 text-right float-right small">
-                Ends on {{niceDate(message.end_on)}} (in {{ago(parseISO(message.end_on))}})</span>
+                Ends on {{niceDate(message.end_on)}} (in {{ago(message.end_on)}})</span>
         </div>
     </div>
 </template>
diff --git a/frontend/src/mixin.js b/frontend/src/mixin.js
index d1a285b6..7e69ae90 100644
--- a/frontend/src/mixin.js
+++ b/frontend/src/mixin.js
@@ -1,5 +1,5 @@
 import Vue from "vue";
-const { zonedTimeToUtc, utcToZonedTime, startOfToday, lastDayOfMonth, subSeconds, parse, getUnixTime, fromUnixTime, differenceInSeconds, formatDistance } = require('date-fns')
+const { zonedTimeToUtc, utcToZonedTime, startOfToday, lastDayOfMonth, subSeconds, parse, getUnixTime, fromUnixTime, differenceInSeconds, formatDistance, isWithinInterval } = require('date-fns')
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 import format from 'date-fns/format'
 import parseISO from 'date-fns/parseISO'
@@ -60,8 +60,8 @@ export default Vue.mixin({
     fromUnix(val) {
       return fromUnixTime(val)
     },
-    isBetween(t1, t2) {
-      return differenceInSeconds(parseISO(t1), parseISO(t2)) >= 0
+    isBetween(t, start, end) {
+      return isWithinInterval(t, {start: parseISO(start), end: parseISO(end)})
     },
     hour() {
       return 3600
@@ -69,6 +69,9 @@ export default Vue.mixin({
     day() {
       return 3600 * 24
     },
+    maxDate() {
+      return new Date(8640000000000000)
+    },
     copy(txt) {
       this.$copyText(txt).then(function (e) {
         alert('Copied: \n'+txt)
diff --git a/frontend/src/pages/Index.vue b/frontend/src/pages/Index.vue
index f551a7c9..b1610fea 100644
--- a/frontend/src/pages/Index.vue
+++ b/frontend/src/pages/Index.vue
@@ -3,8 +3,8 @@
 
         <Header/>
 
-        <div v-for="(service, i) in services_no_group" class="col-12 full-col-12">
-            <div class="list-group online_list mb-4">
+        <div class="col-12 full-col-12">
+            <div v-for="service in services_no_group" v-bind:key="service.id" class="list-group online_list mb-4">
                 <a class="service_li list-group-item list-group-item-action">
                     <router-link class="no-decoration font-3" :to="serviceLink(service)">{{service.name}}</router-link>
                     <span class="badge float-right" :class="{'bg-success': service.online, 'bg-danger': !service.online }">{{service.online ? "ONLINE" : "OFFLINE"}}</span>
@@ -16,16 +16,16 @@
             </div>
         </div>
 
-        <div v-for="(group, index) in groups" v-bind:key="index">
-            <Group :group=group />
-        </div>
-
-        <div v-for="(message, index) in messages" v-bind:key="index" v-if="inRange(message) && message.service === 0">
-            <MessageBlock :message="message"/>
+        <div>
+            <Group v-for="group in groups" v-bind:key="group.id" :group=group />
         </div>
 
         <div class="col-12 full-col-12">
-            <div v-for="(service, index) in services" :ref="service.id" v-bind:key="index">
+            <MessageBlock v-for="message in messages" v-bind:key="message.id" :message="message" />
+        </div>
+
+        <div class="col-12 full-col-12">
+            <div v-for="service in services" :ref="service.id" v-bind:key="service.id">
                 <ServiceBlock :in_service=service />
             </div>
         </div>
@@ -60,7 +60,7 @@ export default {
     },
     computed: {
         messages() {
-            return this.$store.getters.messages
+            return this.$store.getters.messages.filter(m => this.inRange(m) && m.service === 0)
         },
         groups() {
             return this.$store.getters.groupsInOrder
@@ -80,9 +80,7 @@ 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
+            return this.isBetween(this.now(), message.start_on, message.start_on === message.end_on ? this.maxDate().toISOString() : message.end_on)
         }
     }
 }
diff --git a/frontend/src/pages/Service.vue b/frontend/src/pages/Service.vue
index a3d71e7d..c32f2aa8 100644
--- a/frontend/src/pages/Service.vue
+++ b/frontend/src/pages/Service.vue
@@ -16,8 +16,8 @@
 
             <ServiceTopStats :service="service"/>
 
-            <div v-for="(message, index) in $store.getters.serviceMessages(service.id)" v-if="messageInRange(message)">
-                <MessageBlock :message="message"/>
+            <div>
+                <MessageBlock v-for="message in messagesInRange" v-bind:key="message.id" :message="message"/>
             </div>
 
             <div class="row mt-5 mb-4">
@@ -348,7 +348,10 @@ export default {
           name: this.service.name,
           ...this.convertToChartData(this.data)
         }]
-      }
+      },
+      messagesInRange() {
+        return this.$store.getters.serviceMessages(this.service.id).filter(m => this.inRange(m))
+      },
     },
     watch: {
       service: function(n, o) {
@@ -412,11 +415,9 @@ export default {
         }
         return [{data: arr}]
       },
-        messageInRange(message) {
-            const start = this.isBetween(new Date(), message.start_on)
-            const end = this.isBetween(message.end_on, new Date())
-            return start && end
-        },
+      inRange(message) {
+        return this.isBetween(this.now(), message.start_on, message.start_on === message.end_on ? this.maxDate().toISOString() : message.end_on)
+      },
         async getService() {
             await this.chartHits()
             await this.serviceFailures()