diff --git a/package-lock.json b/package-lock.json index 9962667..894a349 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index d962f0a..3d21929 100644 --- a/package.json +++ b/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", diff --git a/src/App.vue b/src/App.vue index 4ee1f47..9648ae9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -23,6 +23,7 @@ + @@ -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 { diff --git a/src/components/Snackbar.vue b/src/components/Snackbar.vue new file mode 100644 index 0000000..6077435 --- /dev/null +++ b/src/components/Snackbar.vue @@ -0,0 +1,27 @@ + + + \ No newline at end of file diff --git a/src/store/index.ts b/src/store/index.ts index 8ec407c..eb95d4a 100644 --- a/src/store/index.ts +++ b/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 errorMessage = error.message; + // const errorCode = error.code; + // 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, + }, }); diff --git a/src/store/modules/snackbars.ts b/src/store/modules/snackbars.ts new file mode 100644 index 0000000..d3d3958 --- /dev/null +++ b/src/store/modules/snackbars.ts @@ -0,0 +1,55 @@ +import { Module } from 'vuex'; + +const snackbarModule: Module = { + 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; diff --git a/src/views/Forecast.vue b/src/views/Forecast.vue index 14c4ca5..9959e09 100644 --- a/src/views/Forecast.vue +++ b/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() {