Added info snackbars

package-lock.json

@@ -14,6 +14,7 @@
         "firebase": "^9.1.3",
         "moment": "^2.29.1",
         "nanoid": "^3.1.30",
+        "v-snackbars": "^3.2.4",
         "vue": "^2.6.14",
         "vue-apexcharts": "^1.6.2",
         "vue-class-component": "^7.2.6",
@@ -14602,6 +14603,11 @@
         "uuid": "bin/uuid"
       }
     },
+    "node_modules/v-snackbars": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/v-snackbars/-/v-snackbars-3.2.4.tgz",
+      "integrity": "sha512-nlnUyoynTXhbpTB2pYi4LnlQkoIp9pu4zYEhJ6tLZA24lpbBTrL8joBx03MqWWwa8ub/OJ4XMojDuYss7gOmJA=="
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -28039,6 +28045,11 @@
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "dev": true
     },
+    "v-snackbars": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/v-snackbars/-/v-snackbars-3.2.4.tgz",
+      "integrity": "sha512-nlnUyoynTXhbpTB2pYi4LnlQkoIp9pu4zYEhJ6tLZA24lpbBTrL8joBx03MqWWwa8ub/OJ4XMojDuYss7gOmJA=="
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",

package.json

@@ -13,6 +13,7 @@
     "firebase": "^9.1.3",
     "moment": "^2.29.1",
     "nanoid": "^3.1.30",
+    "v-snackbars": "^3.2.4",
     "vue": "^2.6.14",
     "vue-apexcharts": "^1.6.2",
     "vue-class-component": "^7.2.6",

src/App.vue

@@ -23,6 +23,7 @@
         </v-col>
       </v-row>
     </v-main>
+    <Snackbars />
   </v-app>
 </template>
 
@@ -30,11 +31,13 @@
 import { Component, Vue } from "vue-property-decorator";
 import Login from "@/views/Login.vue";
 import Forecast from "@/views/Forecast.vue";
+import Snackbars from "@/components/Snackbar.vue"
 
 @Component({
   components: {
     Login,
     Forecast,
+    Snackbars,
   },
 })
 export default class App extends Vue {

src/components/Snackbar.vue

@@ -0,0 +1,27 @@
+<template>
+  <v-snackbars :objects.sync="snackbars" timeout="5000" bottom>
+    <template v-slot:action="{ close }">
+      <v-btn text @click="close()">Zamknij</v-btn>
+    </template>
+  </v-snackbars>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { Component } from 'vue-property-decorator';
+import VSnackbars from 'v-snackbars/v-snackbars.vue';
+
+@Component({
+  components: {
+    VSnackbars,
+  },
+})
+export default class Snackbar extends Vue {
+  get snackbars() {
+    return this.$store.getters.snackbars;
+  }
+  set snackbars(value: object) {
+    this.$store.dispatch('setSnackbars', value);
+  }
+}
+</script>

src/store/index.ts

@@ -1,6 +1,8 @@
 import Vue from "vue";
 import Vuex from "vuex";
 
+import snackbars from "./modules/snackbars";
+
 import { getAuth, signInWithEmailAndPassword, signOut } from "firebase/auth";
 
 Vue.use(Vuex);
@@ -18,25 +20,26 @@ export default new Vuex.Store({
     },
   },
   actions: {
-    loginUser({ commit }, data) {
+    loginUser({ commit, dispatch }, data) {
       const auth = getAuth();
 
       signInWithEmailAndPassword(auth, data.email, data.pass)
         .then((userCredential) => {
           // Signed in
           commit("storeUser", userCredential.user);
+          dispatch("infoMessage", "Zalogowano");
           // ...
         })
         .catch((error) => {
-          const errorCode = error.code;
+          // const errorCode = error.code;
-          const errorMessage = error.message;
+          // const errorMessage = error.message;
         });
     },
-    logout({ commit }) {
+    logout({ commit, dispatch }) {
       const auth = getAuth();
       signOut(auth)
         .then(() => {
-          // Sign-out successful.
+          dispatch("infoMessage", "Wylogowano");
         })
         .catch((error) => {
           // An error happened.
@@ -48,5 +51,7 @@ export default new Vuex.Store({
     auth: (state) => state.user !== undefined,
     user: (state) => state.user,
   },
-  modules: {},
+  modules: {
+    snackbars,
+  },
 });

src/store/modules/snackbars.ts

@@ -0,0 +1,55 @@
+import { Module } from 'vuex';
+
+const snackbarModule: Module<any, any> = {
+  state: {
+    snackbars: [],
+  },
+
+  mutations: {
+    addSnackbar(state, payload) {
+      state.snackbars.push(payload);
+    },
+    setSnackbarObjects(state, payload) {
+      state.snackbars = payload;
+    },
+  },
+
+  actions: {
+    successMessage({ commit }, message) {
+      commit('addSnackbar', {
+        message,
+        color: 'success',
+      });
+    },
+    errorMessage({ commit }, message) {
+      commit('addSnackbar', {
+        message,
+        color: 'error',
+      });
+    },
+    infoMessage({ commit }, message) {
+      commit('addSnackbar', {
+        message,
+        color: 'info',
+      });
+    },
+    warningMessage({ commit }, message) {
+      commit('addSnackbar', {
+        message,
+        color: 'warning',
+      });
+    },
+    customSnackbar({ commit }, payload) {
+      commit('addSnackbar', payload);
+    },
+    setSnackbars({ commit }, payload) {
+      commit('setSnackbarObjects', payload);
+    },
+  },
+
+  getters: {
+    snackbars: (state) => state.snackbars,
+  },
+};
+
+export default snackbarModule;

src/views/Forecast.vue

@@ -68,11 +68,13 @@ export default class Forecast extends Vue {
   private addCity(city: object) {
     this.$data.cities.push(city);
     this.saveUser();
+    this.$store.dispatch("successMessage", "Miasto zostało dodane");
   }
 
   deleteCity(city: object) {
     this.$data.cities.splice(this.$data.cities.indexOf(city));
     this.saveUser();
+    this.$store.dispatch("successMessage", "Miasto zostało usunięte");
   }
 
   private async getFirebaseUserData() {