Merge pull request #10 from RemiSaurel/dev

Storage, refactor

src/App.vue

@@ -103,12 +103,14 @@ button:disabled {
 /* ********** */
 
 @media (max-width: 835px) {
-  #container{
+  #container {
     flex-direction: column;
   }
+
   #todo-container {
     width: 100%;
   }
+
   #right-side {
     margin-right: 32px;
     margin-left: 32px;

src/components/Infos.vue

@@ -18,7 +18,7 @@
       </div>
       <div id="btn-newword">
         <button @click="getNewWordEveryday" id="fetch" class="btn">
-          Generate a word
+          📝 Generate a word
         </button>
       </div>
       <hr>
@@ -26,16 +26,22 @@
     <div id="stats">
       <div class="center" v-if="displayWord">
         <button @click="displayWord = false" class="btn">
-          Session stats
+          📊 Session stats
         </button>
       </div>
       <div v-else>
         Total todo: {{ this.nbItemsFinished }}
         <br>
-        Total sessions: {{ this.$store.getters.nbSessions }}
+        Total sessions: {{ this.nbSessions }}
+        <br>
+        <span id="hint">(last + current session)</span>
         <div class="center">
+          <button @click="resetStats" class="btn" id="reset-stats" :disabled="resetDone">
+            🔁 Reset last session
+          </button>
+          <br>
           <button class="btn" id="see-words" @click="displayWord = true">
-            English word
+            🇬🇧 English word
           </button>
         </div>
       </div>
@@ -56,6 +62,7 @@ export default {
         definition: '',
       },
       displayWord: true,
+      resetDone: false
     };
   },
   methods: {
@@ -134,6 +141,10 @@ export default {
         console.log(error);
       });
     },
+    resetStats() {
+      this.resetDone = true;
+      this.$store.commit('resetStats');
+    },
   },
   mounted() {
     this.generateDateOfTheDay();
@@ -141,15 +152,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 +227,19 @@ export default {
   text-align: center;
 }
 
-#see-words {
+#hint {
+  font-size: 18px;
+  font-weight: lighter;
+}
+
+#reset-stats {
   margin-top: 16px;
 }
 
+#see-words {
+  margin-top: 8px;
+}
+
 /* ********** */
 /* RESPONSIVE */
 /* ********** */

src/components/Pomodoro.vue

@@ -18,11 +18,11 @@
       <div id="time">
         <div id="minutes">
           <div><i @click="this.addMinutes" class="arrow up"></i></div>
-          <span>{{minutes}}</span>
+          <span>{{ minutes }}</span>
           <div><i @click="this.substractMinutes" class="arrow down"></i></div>
         </div>
         <span id="colon">:</span>
-        <span id="seconds">{{seconds}}</span>
+        <span id="seconds">{{ seconds }}</span>
       </div>
       <div id="params">
         <div id="startStop">
@@ -38,6 +38,7 @@
 
 <script>
 import Stats from "@/components/Infos";
+
 const MINUTES = 25;
 const RANGE_MINUTES = 5;
 const SECONDS = 0;
@@ -47,7 +48,7 @@ const LONG_PAUSE = 30;
 export default {
   name: "Pomodoro",
   components: {Stats},
-  data () {
+  data() {
     return {
       minutes: MINUTES,
       seconds: SECONDS,
@@ -99,7 +100,9 @@ export default {
       }
       this.disableButton("start");
       let all = document.querySelectorAll("#presetTime button");
-      for (let el of all) { el.disabled = true; }
+      for (let el of all) {
+        el.disabled = true;
+      }
     },
     pauseSession() {
       this.sessionStarted = false;
@@ -122,7 +125,9 @@ export default {
       this.prettyTime();
       clearTimeout(this.timeout);
       let all = document.querySelectorAll("#presetTime button, #start");
-      for (let el of all) { el.disabled = false; }
+      for (let el of all) {
+        el.disabled = false;
+      }
       this.disableButton("pause")
       this.unlockArrows()
     },
@@ -136,6 +141,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;
@@ -181,7 +187,7 @@ export default {
         dots[i].classList.add("active");
       }
     },
-    setupPauseTimer(minutes){
+    setupPauseTimer(minutes) {
       this.isRestingTime = true;
       this.sessionStarted = false;
       this.enableButton("start");
@@ -191,7 +197,7 @@ export default {
       this.seconds = 0;
       this.prettyTime();
     },
-    prettyTime () {
+    prettyTime() {
       if (this.minutes < 10) {
         this.minutes = "0" + this.minutes;
       }
@@ -240,7 +246,7 @@ export default {
   margin-bottom: 16px;
 }
 
-#startStop > button{
+#startStop > button {
   font-size: 32px;
   text-align: center;
 }
@@ -326,6 +332,7 @@ export default {
   margin: 12px 4px 12px 4px;
   display: inline-block;
 }
+
 /* ********** */
 /* RESPONSIVE */
 /* ********** */
@@ -334,9 +341,11 @@ export default {
   #container {
     margin-top: 16px;
   }
+
   #message {
     font-size: 1.6rem;
   }
+
   .pomodoro {
     margin-right: 8px;
     width: 50%;
@@ -347,6 +356,7 @@ export default {
   #time {
     font-size: 38px;
   }
+
   #colon {
     margin-right: 8px;
     margin-left: 8px;

src/components/Settings.vue

@@ -1,11 +1,12 @@
 <template>
-<div id="settings-container">
-  <div id="color-palette" class="bubble-container">
-    <div v-for="color in colors" :key="color.id">
-      <div class="bubble-item" :style="{backgroundColor: color, borderColor: activeColor}" @click="setBackgroundColor($event, color)"></div>
+  <div id="settings-container">
+    <div id="color-palette" class="bubble-container">
+      <div v-for="color in colors" :key="color.id">
+        <div class="bubble-item" :id="color" :style="{backgroundColor: color, borderColor: activeColor}"
+             @click="setBackgroundColor($event, color)"></div>
+      </div>
     </div>
   </div>
-</div>
 </template>
 
 <script>
@@ -25,11 +26,12 @@ export default {
     }
   },
   methods: {
-    setBackgroundColor(event,color) {
+    setBackgroundColor(event, color) {
       this.removeActiveColorFromPalette()
       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 +40,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() {
@@ -79,6 +81,7 @@ export default {
     justify-content: center;
     margin-top: 8px;
   }
+
   .bubble-item {
     margin-top: 0;
     margin-right: 4px;

src/components/ToDoList.vue

@@ -9,7 +9,7 @@
       <div id="liste" ref="todoList">
         <div v-for="item in items" :key="item.text" class="item" :id=item :class="item.isPinned? 'pinned' : ''">
           <div class="text">
-            {{item.text}}
+            {{ item.text }}
           </div>
           <div id="emojis">
             <div @click="pinItem(item)" id="pin">
@@ -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));
     }
   }
 }
@@ -214,6 +221,7 @@ export default {
     padding-right: 16px;
     padding-left: 16px;
   }
+
   #liste {
     padding-bottom: 8px;
     padding-left: 16px;

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,

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: {