From 98b759abcfa56bd6deab96519aa61aacca200b9a Mon Sep 17 00:00:00 2001 From: RemiSaurel Date: Mon, 29 Aug 2022 14:19:57 +0200 Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8#6=20-=20Localstorage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Using localstorage to store last session information (todos, nb of todos finished, nb sessions, song, theme color, etc.). --- src/components/Infos.vue | 36 +++++++++++++++++++++++++++--------- src/components/Pomodoro.vue | 1 + src/components/Settings.vue | 9 +++++---- src/components/ToDoList.vue | 9 ++++++++- src/components/YtbPlayer.vue | 10 ++++++++-- src/store/index.js | 17 ++++++++++++++++- 6 files changed, 65 insertions(+), 17 deletions(-) diff --git a/src/components/Infos.vue b/src/components/Infos.vue index 4bbc98f..b63c11b 100644 --- a/src/components/Infos.vue +++ b/src/components/Infos.vue @@ -18,7 +18,7 @@
@@ -26,16 +26,22 @@
Total todo: {{ this.nbItemsFinished }}
- Total sessions: {{ this.$store.getters.nbSessions }} + Total sessions: {{ this.nbSessions }} +
+ (from last session)
+ +
@@ -134,6 +140,9 @@ export default { console.log(error); }); }, + resetStats() { + this.$store.commit('resetStats'); + }, }, mounted() { this.generateDateOfTheDay(); @@ -141,15 +150,15 @@ export default { this.getNewWordEveryday(); }, computed: { - itemsFinished() { - return this.$store.getters.itemsFinished; - }, nbItemsFinished() { - return this.$store.getters.itemsFinished.length; + return parseInt(this.$store.getters.globalState.nbItemsFinished) + this.$store.getters.itemsFinished.length }, colorSelected() { return this.$store.getters.colorSelected; }, + nbSessions() { + return parseInt(this.$store.getters.globalState.nbSessions) + this.$store.getters.nbSessions + } }, watch: { colorSelected: function(color) { @@ -216,10 +225,19 @@ export default { text-align: center; } -#see-words { +#hint { + font-size: 18px; + font-weight: lighter; +} + +#reset { margin-top: 16px; } +#see-words { + margin-top: 8px; +} + /* ********** */ /* RESPONSIVE */ /* ********** */ diff --git a/src/components/Pomodoro.vue b/src/components/Pomodoro.vue index 82e9f5b..59a6a64 100644 --- a/src/components/Pomodoro.vue +++ b/src/components/Pomodoro.vue @@ -136,6 +136,7 @@ export default { alert("SESSION TERMINΓ‰E πŸ‘"); this.nbSessionsFinished++; this.$store.commit("updateNbSessionsFinished"); + localStorage.setItem("nbSessions", this.$store.getters.nbSessions); if (this.nbSessionsFinished === 4) { this.setupPauseTimer(LONG_PAUSE); this.nbSessionsFinished = 0; diff --git a/src/components/Settings.vue b/src/components/Settings.vue index fbae9bd..8fd9992 100644 --- a/src/components/Settings.vue +++ b/src/components/Settings.vue @@ -2,7 +2,7 @@
-
+
@@ -30,6 +30,7 @@ export default { event.target.style.borderColor = this.activeColor; document.body.style.backgroundColor = color; this.$store.commit("setColorSelected", color); + localStorage.setItem("themeColor", this.$store.getters.colorSelected) }, removeActiveColorFromPalette() { const palette = document.querySelectorAll(".bubble-item"); @@ -38,9 +39,9 @@ export default { } }, setFirstColor() { - // get first div of color-palette - const palette = document.querySelectorAll(".bubble-item"); - palette[0].style.borderColor = this.activeColor; + const color = this.$store.getters.globalState.themeColor; + document.getElementById(color).style.borderColor = this.activeColor; + document.body.style.backgroundColor = color; } }, mounted() { diff --git a/src/components/ToDoList.vue b/src/components/ToDoList.vue index 7118f13..2b8688f 100644 --- a/src/components/ToDoList.vue +++ b/src/components/ToDoList.vue @@ -32,7 +32,7 @@ export default { data() { return { item: "", - items: [] + items: JSON.parse(this.$store.getters.globalState.currentItems) } }, methods: { @@ -47,6 +47,7 @@ export default { } this.sortArrayPinnedElements() this.clearItem() + this.saveCurrentItems() }, removeItem(item) { this.items = this.items.filter(e => @@ -54,6 +55,8 @@ export default { ) this.$store.commit("addItemFinished", item); this.clearItem() + this.saveCurrentItems() + localStorage.setItem("nbItemsFinished", this.$store.getters.itemsFinished.length); }, clearItem() { this.item = "" @@ -69,6 +72,7 @@ export default { list.scrollTo({top: 0, behavior: 'smooth'}); } this.sortArrayPinnedElements() + this.saveCurrentItems() } }, sortArrayPinnedElements() { @@ -81,6 +85,9 @@ export default { return 0 } }) + }, + saveCurrentItems(){ + localStorage.setItem("currentItems", JSON.stringify(this.items)); } } } diff --git a/src/components/YtbPlayer.vue b/src/components/YtbPlayer.vue index 08883db..a28a892 100644 --- a/src/components/YtbPlayer.vue +++ b/src/components/YtbPlayer.vue @@ -30,7 +30,7 @@ export default { livesId: [], easterEggs: [], easterEggsSongsId: -1, - songId: 0, + songId: this.$store.getters.globalState.currentSongIndex, muted: true } }, @@ -42,11 +42,13 @@ export default { }, nextPlaylist() { this.songId++ === this.livesId.length - 1 ? this.songId = 0 : this.songId; + localStorage.setItem("currentSongIndex", this.songId); let id = this.livesId[this.songId]; this.loadVideoFromApi(id) }, prevPlaylist() { --this.songId === -1 ? this.songId = this.livesId.length - 1 : this.songId; + localStorage.setItem("currentSongIndex", this.songId); let id = this.livesId[this.songId]; this.loadVideoFromApi(id) }, @@ -73,13 +75,17 @@ export default { this.muted = !this.muted; }, loadVideoFromApi(id) { + this.saveLocalStorage(id); player.loadVideoById(id); }, + saveLocalStorage(id) { + localStorage.setItem("lastSong", id); + }, loadApi() { window.onYouTubeIframeAPIReady = () => { // eslint-disable-next-line no-unused-vars player = new window.YT.Player("player", { - videoId: "XDh0JcxrbPM", + videoId: this.$store.getters.globalState.lastSong, playerVars: { 'autoplay': 1, 'mute': 1, diff --git a/src/store/index.js b/src/store/index.js index bcf28cb..a18ec75 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -8,7 +8,15 @@ export default new Vuex.Store({ state: { itemsFinished: [], colorSelected: "", - nbSessions: 0 + nbSessions: 0, + globalState: { + currentItems: localStorage.getItem("currentItems") ? localStorage.getItem("currentItems") : JSON.stringify([]), + nbItemsFinished: localStorage.getItem("nbItemsFinished") ? localStorage.getItem("nbItemsFinished") : 0, + nbSessions: localStorage.getItem("nbSessions") ? localStorage.getItem("nbSessions") : 0, + lastSong: localStorage.getItem("lastSong") ? localStorage.getItem("lastSong") : "XDh0JcxrbPM", + currentSongIndex: localStorage.getItem("currentSongIndex") ? localStorage.getItem("currentSongIndex") : 0, + themeColor: localStorage.getItem("themeColor") ? localStorage.getItem("themeColor") : "#fdde95", + } }, getters: { itemsFinished(state) { @@ -19,6 +27,9 @@ export default new Vuex.Store({ }, nbSessions(state) { return state.nbSessions; + }, + globalState(state) { + return state.globalState; } }, mutations: { @@ -30,6 +41,10 @@ export default new Vuex.Store({ }, updateNbSessionsFinished(state) { state.nbSessions++; + }, + resetStats(state) { + state.globalState.nbItemsFinished = 0; + state.globalState.nbSessions = 0; } }, actions: { From c9386b2e675dc8d495a314c3aaf1cbdbaf20ad86 Mon Sep 17 00:00:00 2001 From: RemiSaurel Date: Mon, 29 Aug 2022 14:30:57 +0200 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=9A=B8=20-=20Reset=20button=20Can=20o?= =?UTF-8?q?nly=20click=20once=20on=20the=20button=20when=20it=20has=20been?= =?UTF-8?q?=20reset?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Infos.vue | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/Infos.vue b/src/components/Infos.vue index b63c11b..e62773d 100644 --- a/src/components/Infos.vue +++ b/src/components/Infos.vue @@ -34,10 +34,10 @@
Total sessions: {{ this.nbSessions }}
- (from last session) + (last + current session)
-