correct initial state of message banner #81 #83 #84

src/App.vue

@@ -38,7 +38,7 @@
       <links></links>
     </footer>
     <please-login></please-login>
-    <error-message :message="statusMessage" :is-error="isError" show-for-secs="5"></error-message>
+    <message-banner show-for-secs="5"></message-banner>
   </div>
 </template>
 
@@ -56,8 +56,7 @@ import Search from './components/navbar/Search.vue'
 import Conference from './Conference'
 import Timetable from './components/navbar/Timetable.vue'
 import PleaseLogin from './components/PleaseLogin.vue'
-import ErrorMessage from './components/MessageBanner.vue'
-import StatusMessage from './Status.js'
+import MessageBanner from './components/MessageBanner.vue'
 
 export default {
   components: {
@@ -73,16 +72,14 @@ export default {
     Login,
     Language,
     Links,
-    ErrorMessage
+    MessageBanner
   },
   name: 'app',
   data () {
     return {
       mobileMenuOpen: false,
       conference: Conference.getConference(),
-      events: Conference.getAllEvents(),
-      statusMessage: StatusMessage.message,
-      isError: StatusMessage.error
+      events: Conference.getAllEvents()
     }
   },
   computed: {

src/Conference.js

@@ -2,6 +2,7 @@ import axios from 'axios'
 import Vue from 'vue'
 import groupBy from 'lodash-es/groupBy'
 import Favorites from './Favourites'
+import Status from './components/Status.js'
 import moment from 'moment'
 
 const refreshIntervalFavoritesMs = 90 * 1000
@@ -250,6 +251,9 @@ const init = function () {
   axios.get(base + 'rest/init.json')
     .then(function (response) {
       conference.loadingFailed = false
+      Status.message = 'initialized'
+      Status.error = false
+
       for (const key in response.data) {
         if (response.data.hasOwnProperty(key)) {
           Vue.set(conference, key, response.data[key])
@@ -270,6 +274,8 @@ const init = function () {
         init()
       }
       console.log(error)
+      Status.message = 'couldn\'t initialize'
+      Status.error = true
       conference.loadingFailed = true
     })
 }

src/components/MessageBanner.vue

@@ -1,34 +1,41 @@
 <template>
-  <div class="status-area" :class="errorClass + cssClass">{{message}}</div>
+  <div class="status-area" :class="errorClass + cssClass">{{status.message}}</div>
 </template>
 <script>
+import Status from './Status.js'
+
 export default {
   name: 'MessageBanner',
-  props: ['message', 'showForSecs', 'isError'],
+  props: ['showForSecs'],
   data () {
     return {
-      errorClass: this.isError ? 'error ' : '',
+      status: Status,
       cssClass: 'nothere'
     }
   },
   mounted () {
     this.setHide()
   },
+  computed: {
+    errorClass () {
+      return this.status.isError ? 'error ' : ''
+    }
+  },
   watch: {
-    message () {
+    status () {
       console.log('trigger')
       this.setHide()
     }
   },
   methods: {
     clearMessage () {
       setTimeout(() => {
-        this.message = ''
-        this.isError = false
+        this.status.message = ''
+        this.status.isError = false
       }, 500)
     },
     setHide () {
-      if (this.message && this.message.length > 0) {
+      if (this.status.message && this.status.message.length > 0) {
         this.cssClass = 'here'
         setTimeout(() => {
           this.cssClass = 'nothere'

src/Status.js → src/components/Status.js

@@ -1,4 +1,4 @@
 export default {
-  message: '',
+  message: ' ',
   error: false
 }