public/static/app.css

@@ -7,6 +7,15 @@ body {
   overflow-y: overlay;
 }
 
+#popup-collection {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: 16px;
+  left: -160px;
+  margin-left: 50%;
+}
+
 h1 {
   font-weight: 200;
   font-size: 3rem;

src/App.vue

@@ -126,6 +126,9 @@
         </keep-alive>
       </router-view>
     </div>
+    <div id="popup-collection">
+      <PopUp v-for="(popup, i) in $store.state.popups" :key="i" :item="popup" />
+    </div>
     <Player ref="player" />
     <Users ref="dialogUsers" />
     <UserProfile ref="dialogUserProfile" />
@@ -149,6 +152,7 @@ import ServerSettings from "./components/dialogs/ServerSettings";
 import AudioUploadDialog from "./components/dialogs/AudioUpload";
 import VideoUploadDialog from "./components/dialogs/VideoUpload";
 import SharedItems from "./components/dialogs/SharedItems";
+import PopUp from "./components/base-components/PopUp";
 
 import { mapGetters } from "vuex";
 
@@ -303,6 +307,7 @@ export default {
     VideoScreen,
     VideoUploadDialog,
     SharedItems,
+    PopUp,
   },
 };
 </script>

src/components/base-components/PopUp.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="popup-control flex-column shadow ma8">
+    <div class="flex-row" :class="item.type">
+      <awesome-icon icon="circle-info" size="2x" class="ma" />
+      <div class="flex-column pa8-top ma8-bottom ma8-right">
+        <h3 class="ma-off">{{ item.title }}</h3>
+        <p class="ma-off ma8-top">{{ item.message }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    item: {
+      type: Object,
+      default() {
+        return {
+          type: "default",
+        };
+      },
+    },
+  },
+  mounted() {
+    setTimeout(() => {
+      this.$store.dispatch("removePopUp", this.item);
+    }, 5000);
+  },
+};
+</script>
+
+<style scoped>
+.popup-control {
+  width: 320px;
+  border-radius: 8px;
+  background-color: var(--white);
+}
+
+.default {
+  border-radius: 8px;
+  background-color: var(--white);
+}
+
+.danger {
+  border-radius: 8px;
+  background-color: var(--danger25);
+}
+.info {
+  border-radius: 8px;
+  background-color: var(--info);
+}
+.success {
+  border-radius: 8px;
+  background-color: var(--success);
+}
+</style>

src/store/actions.js

@@ -87,5 +87,12 @@ export default {
   },
   resetRedisCache(context) {
     axios.post(context.rootGetters.server + "/api/system/reset/redis", {}, context.rootGetters.headers);
+    context.dispatch("addPoUp", { title: "Cache", message: "Cache was reseted", type: "info" })
+  },
+  addPoUp(context, item) {
+    context.commit("addPopUp", item);
+  },
+  removePopUp(context, item) {
+    context.commit("removePopUp", item);
   }
 }

src/store/mutations.js

@@ -25,5 +25,12 @@ export default {
   },
   setServerInfo(state, info) {
     state.serverInfo = info;
+  },
+  addPopUp(state, item) {
+    state.popups.push(item);
+  },
+  removePopUp(state, item) {
+    let index = state.popups.indexOf(item);
+    state.popups.splice(index, 1);
   }
 }

src/store/state.js

@@ -15,6 +15,6 @@ export default {
             videos: 0,
             users: 0
         }
-    }
-
+    },
+    popups: []
 }