new stats + use store + refactoring

src/components/Infos.vue

@@ -9,7 +9,7 @@
       </div>
     </div>
     <hr>
-    <div id="word-definition">
+    <div id="word-definition" v-if="displayWord">
       <div id="word">
         {{ this.word.word }}
       </div>
@@ -17,10 +17,28 @@
         {{ this.word.definition }}
       </div>
       <div id="btn">
-        <button @click="getNewWordEveryday" id="fetch">
+        <button @click="getNewWordEveryday" id="fetch" class="btn">
           Générer un mot
         </button>
       </div>
+      <hr>
+    </div>
+    <div id="stats">
+      <div class="center" v-if="displayWord">
+        <button @click="displayWord = false" class="btn">
+          Voir les stats
+        </button>
+      </div>
+      <div v-else>
+        Total todo: {{this.nbItemsFinished}}
+        <br>
+        Total sessions: {{this.$store.getters.nbSessions}}
+        <div class="center">
+          <button class="btn" id="see-words" @click="displayWord = true">
+            Revoir les mots
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -37,6 +55,7 @@ export default {
         word: "",
         definition: "",
       },
+      displayWord: true,
     }
   },
   methods: {
@@ -79,7 +98,6 @@ export default {
         })
     },
     getDefinition(word) {
-      console.log(this.$store.getters.itemsFinished)
       const url = 'https://api.dictionaryapi.dev/api/v2/entries/en/' + word;
       return fetch(url)
           .then(response => response.json())
@@ -101,24 +119,26 @@ export default {
   mounted() {
     this.generateDateOfTheDay();
     this.getCurrentTime();
-    this.getNewWordEveryday()
+    this.getNewWordEveryday();
   },
   computed: {
     itemsFinished() {
       return this.$store.getters.itemsFinished;
     },
+    nbItemsFinished() {
+      return this.$store.getters.itemsFinished.length;
+    },
     colorSelected() {
       return this.$store.getters.colorSelected;
     }
   },
   watch: {
-    itemsFinished: function(items) {
-      console.log(items);
-    },
     colorSelected: function(color) {
+      if (this.displayWord) {
         document.getElementById("word").style.color = color;
       }
     }
+  }
 }
 </script>
 
@@ -128,10 +148,10 @@ export default {
   position: relative;
   background: #504746;
   width: 100%;
+  height: 300px;
   border-radius: 16px;
   padding: 16px 24px 18px 24px;
   color: white;
-  max-height: 320px;
   overflow: auto;
   box-shadow: rgba(0, 0, 0) 0px 4px 10px;
 }
@@ -151,7 +171,7 @@ export default {
   font-size: 24px;
   font-weight: bold;
   margin-bottom: 8px;
-  color: #b4c2ff;
+  color: #fdde95;
 }
 
 #definition {
@@ -164,11 +184,28 @@ export default {
   margin-top: 24px;
 }
 
-#btn > button {
+.btn {
   font-size: 20px;
   padding: 8px;
 }
 
+#fetch {
+  margin-bottom: 8px;
+}
+
+#stats {
+  font-size: 28px;
+  margin-top: 16px;
+}
+
+.center {
+  text-align: center;
+}
+
+#see-words {
+  margin-top: 16px;
+}
+
 @media (max-width: 835px) {
   #container-infos {
     display: none;

src/components/Pomodoro.vue

@@ -128,7 +128,6 @@ export default {
     },
     countDownTimer: function () {
       if (this.minutes === "00" && this.seconds === "00") {
-        console.log("ici")
         if (this.isRestingTime) {
           this.isRestingTime = false;
           this.resetSession();
@@ -136,6 +135,7 @@ export default {
         } else {
           alert("SESSION TERMINÉE 👏");
           this.nbSessionsFinished++;
+          this.$store.commit("setNbSessions");
           if (this.nbSessionsFinished === 4) {
             this.setupPauseTimer(LONG_PAUSE);
             this.nbSessionsFinished = 0;
@@ -221,7 +221,6 @@ export default {
   padding-bottom: 16px;
   margin-right: 16px;
   min-height: 260px;
-  max-height: 380px;
   box-shadow: rgba(0, 0, 0) 0px 4px 10px;
 }
 

src/components/Settings.vue

@@ -9,12 +9,13 @@
 </template>
 
 <script>
+const DEFAULT_COLOR = "#fdde95";
 export default {
   name: "Settings",
   data() {
     return {
       colors: {
-        default: "#fdde95",
+        default: DEFAULT_COLOR,
         greenBlue: "#9acabf",
         green: "#ABCEA7",
         grey: "#d4d4e8",

src/components/ToDoList.vue

@@ -35,10 +35,8 @@ export default {
       const trimmedItem = item.trim();
       if (trimmedItem.length > 0 && this.items.indexOf(trimmedItem) === -1) {
         this.items = [trimmedItem].concat(this.items)
-        this.clearItem()
-      } else {
-        this.clearItem()
       }
+      this.clearItem()
     },
     removeItem(item) {
       this.items = this.items.filter(e =>
@@ -59,15 +57,12 @@ export default {
     display: flex;
     justify-content: space-between;
     max-height: 825px;
-    overflow: auto;
     height: 100%;
   }
 
-
   #todolist {
     display: flex;
     flex-direction: column;
-    margin-left: 16px;
     width: 100%;
   }
 
@@ -96,6 +91,7 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding-left: 16px;
   }
 
   #add_button {
@@ -133,6 +129,9 @@ export default {
     flex-direction: column;
     padding-right: 16px;
     margin-top: 8px;
+    overflow: auto;
+    padding-left: 16px;
+    padding-bottom: 16px;
   }
 
   .item {
@@ -163,8 +162,8 @@ export default {
       margin-top: 8px;
     }
     #todolist {
-      margin-right: 32px;
-      padding-left: 16px;
+      padding-right: 32px;
+      padding-left: 32px;
     }
     #liste {
       padding-bottom: 8px;

src/store/index.js

@@ -1,14 +1,15 @@
 // store/index.js
 
+
 import Vue from "vue";
 import Vuex from "vuex";
 
 Vue.use(Vuex);
-
 export default new Vuex.Store({
     state: {
         itemsFinished: [],
-        colorSelected: ""
+        colorSelected: "",
+        nbSessions: 0
     },
     getters: {
         itemsFinished(state) {
@@ -16,6 +17,9 @@ export default new Vuex.Store({
         },
         colorSelected(state) {
             return state.colorSelected;
+        },
+        nbSessions(state) {
+            return state.nbSessions;
         }
     },
     mutations: {
@@ -24,6 +28,9 @@ export default new Vuex.Store({
         },
         setColorSelected(state, color) {
             state.colorSelected = color;
+        },
+        setNbSessions(state) {
+            state.nbSessions++;
         }
     },
     actions: {