show error message on wrong requests

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>

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
+    }
+}