From 926947e7c9c571ffbd04ae84738a90bb58eac638 Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Sun, 19 Feb 2023 17:55:11 +0100
Subject: [PATCH] added popup control fix #3

---
 public/static/app.css                    |  9 ++++
 src/App.vue                              |  5 +++
 src/components/base-components/PopUp.vue | 56 ++++++++++++++++++++++++
 src/store/actions.js                     |  7 +++
 src/store/mutations.js                   |  7 +++
 src/store/state.js                       |  4 +-
 6 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 src/components/base-components/PopUp.vue

diff --git a/public/static/app.css b/public/static/app.css
index 8ab524d..45a3da6 100644
--- a/public/static/app.css
+++ b/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;
diff --git a/src/App.vue b/src/App.vue
index 3be0425..0920bc2 100644
--- a/src/App.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/base-components/PopUp.vue b/src/components/base-components/PopUp.vue
new file mode 100644
index 0000000..a20ef62
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/store/actions.js b/src/store/actions.js
index 767116a..e1a2998 100644
--- a/src/store/actions.js
+++ b/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);
   }
 }
\ No newline at end of file
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 5d7aeb5..3055d7e 100644
--- a/src/store/mutations.js
+++ b/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);
   }
 }
\ No newline at end of file
diff --git a/src/store/state.js b/src/store/state.js
index d833cb5..fd5b0b1 100644
--- a/src/store/state.js
+++ b/src/store/state.js
@@ -15,6 +15,6 @@ export default {
             videos: 0,
             users: 0
         }
-    }
-
+    },
+    popups: []
 }