From a439d15754f9944d46817f12474591412c4d78bb Mon Sep 17 00:00:00 2001
From: Jonathan Baecker <jb@pixelcrusher.de>
Date: Thu, 28 May 2020 10:15:07 +0200
Subject: [PATCH] show error message on wrong requests

---
 ffplayout/frontend/layouts/default.vue | 39 ++++++++++++++++++++++++++
 ffplayout/frontend/store/index.js      | 14 +++++++++
 2 files changed, 53 insertions(+)

diff --git a/ffplayout/frontend/layouts/default.vue b/ffplayout/frontend/layouts/default.vue
index b9fc9c45..67e11afe 100644
--- a/ffplayout/frontend/layouts/default.vue
+++ b/ffplayout/frontend/layouts/default.vue
@@ -1,9 +1,37 @@
 <template>
     <div>
         <nuxt />
+        <b-alert
+            :show="showErrorAlert"
+            dismissible
+            variant="danger"
+            class="status-alert"
+            @dismissed="showErrorAlert=!showErrorAlert"
+        >
+            <p>{{ ErrorAlertMessage }}</p>
+        </b-alert>
     </div>
 </template>
 
+<script>
+import { mapState } from 'vuex'
+
+export default {
+    computed: {
+        ...mapState(['ErrorAlertMessage']),
+
+        showErrorAlert: {
+            get () {
+                return this.$store.state.showErrorAlert
+            },
+            set () {
+                this.$store.commit('UPDATE_SHOW_ERROR_ALERT', false)
+            }
+        }
+    }
+}
+</script>
+
 <style>
 html, body {
     font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
@@ -24,4 +52,15 @@ html, body {
 a {
     color: #c4c4c4;
 }
+
+.status-alert {
+    position: fixed;
+    z-index: 1001;
+    top: 55px;
+    right: 10px;
+    width: 400px;
+    max-width: 500px;
+    height: 100px;
+    max-height: 100px;
+}
 </style>
diff --git a/ffplayout/frontend/store/index.js b/ffplayout/frontend/store/index.js
index 0f5042b9..f14132da 100644
--- a/ffplayout/frontend/store/index.js
+++ b/ffplayout/frontend/store/index.js
@@ -1 +1,15 @@
 export const strict = false
+
+export const state = () => ({
+    showErrorAlert: false,
+    ErrorAlertMessage: ''
+})
+
+export const mutations = {
+    UPDATE_SHOW_ERROR_ALERT (state, show) {
+        state.showErrorAlert = show
+    },
+    UPDATE_ERROR_AERT_MESSAGE (state, message) {
+        state.ErrorAlertMessage = message
+    }
+}