ErrorMessage => MessageBanner, allow als for other Status messages #81 …

…#83 #84

src/App.vue

@@ -38,7 +38,7 @@
       <links></links>
     </footer>
     <please-login></please-login>
-    <error-message :message="errorMessage" show-for-secs="5"></error-message>
+    <error-message :message="statusMessage" :is-error="isError" show-for-secs="5"></error-message>
   </div>
 </template>
 
@@ -56,8 +56,8 @@ 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/ErrorMessage.vue'
-import errorState from './ErrorState.js'
+import ErrorMessage from './components/MessageBanner.vue'
+import StatusMessage from './Status.js'
 
 export default {
   components: {
@@ -81,7 +81,8 @@ export default {
       mobileMenuOpen: false,
       conference: Conference.getConference(),
       events: Conference.getAllEvents(),
-      errorMessage: errorState.errorMessage
+      statusMessage: StatusMessage.message,
+      isError: StatusMessage.error
     }
   },
   computed: {

src/Status.js

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

src/components/ErrorMessage.vue → src/components/MessageBanner.vue

@@ -1,13 +1,14 @@
 <template>
-  <div class="error-area" :class="cssClass">{{message}}</div>
+  <div class="status-area" :class="errorClass + cssClass">{{message}}</div>
 </template>
 <script>
 export default {
-  name: 'ErrorMessage',
-  props: ['message', 'showForSecs'],
+  name: 'MessageBanner',
+  props: ['message', 'showForSecs', 'isError'],
   data () {
     return {
-      cssClass: 'nothere'
+      errorClass: this.isError ? 'error ' : '',
+      cssClass: 'here'
     }
   },
   mounted () {
@@ -23,6 +24,7 @@ export default {
     clearMessage () {
       setTimeout(() => {
         this.message = ''
+        this.isError = false
       }, 500)
     },
     setHide () {
@@ -38,17 +40,21 @@ export default {
 }
 </script>
 <style scoped lang="less">
-  .error-area {
+  .status-area {
+    background: #ddffdd;
+    color: #00d900;
     position: fixed;
-    background: #ffdddd;
-    color: #d90000;
     font-weight: bold;
     padding: 10px;
     text-align: center;
     left: 20px;
     right: 20px;
     bottom: 50px;
     transition: bottom ease-in 0.5s;
+    &.error {
+      background: #ffdddd;
+      color: #d90000;
+    }
     &.here {
       bottom: 50px;
     }