Merge pull request #5 from RemiSaurel/dev

Dev

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.6.5",
-        "vue": "^2.6.11"
+        "vue": "^2.6.11",
+        "vuex": "^3.6.2"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.17",
@@ -14522,6 +14523,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vuex": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
@@ -17406,7 +17415,8 @@
       "version": "4.5.17",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.17.tgz",
       "integrity": "sha512-ck/ju2T2dmPKLWK/5QctNJs9SCb+eSZbbmr8neFkMc7GlbXw6qLWw5v3Vpd4KevdQA8QuQOA1pjUmzpCiU/mYQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "4.5.17",
@@ -17537,7 +17547,8 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
       "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
@@ -17752,7 +17763,8 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -17782,13 +17794,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -27162,6 +27176,12 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "requires": {}
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

package.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.17",

src/App.vue

@@ -1,7 +1,10 @@
 <template>
   <div id="app">
     <div id="container">
-      <settings></settings>
+      <div id="nav-bar">
+        <settings></settings>
+        <socials></socials>
+      </div>
       <div id="todo-container">
         <to-do-list></to-do-list>
       </div>
@@ -14,18 +17,6 @@
         </div>
       </div>
     </div>
-    <footer>
-      <div>
-        <a href="https://github.com/RemiSaurel/own-workspace" target="_blank" class="underline">
-          <img src="../src/res/github.png" alt="github" width="32" height="32">
-        </a>
-      </div>
-      <div>
-        <a href="https://www.linkedin.com/in/r%C3%A9mi-saurel/" target="_blank" class="underline">
-          <img src="../src/res/linkedin.png" alt="github" width="32" height="32">
-        </a>
-      </div>
-    </footer>
   </div>
 </template>
 
@@ -34,6 +25,7 @@ import ToDoList from "@/components/ToDoList";
 import Pomodoro from "@/components/Pomodoro";
 import YtbPlayer from "@/components/YtbPlayer";
 import Settings from "@/components/Settings";
+import Socials from "@/components/Socials";
 
 export default {
   name: 'App',
@@ -41,7 +33,8 @@ export default {
     ToDoList,
     Pomodoro,
     YtbPlayer,
-    Settings
+    Settings,
+    Socials
   }
 }
 
@@ -81,6 +74,14 @@ footer > div {
   margin-right: 16px;
 }
 
+#nav-bar {
+  margin-top: 8px;
+  margin-left: 16px;
+  margin-right: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
 #ytb-player {
   background: #504746;
   margin-top: 16px;
@@ -101,7 +102,6 @@ footer > div {
 
 #todo-container {
   width: 40%;
-  margin-right: 16px;
 }
 
 #right-side {
@@ -112,31 +112,6 @@ footer > div {
   margin-left: 32px;
 }
 
-/* TEXT UNDERLINE */
-.underline {
-  display: inline-block;
-  position: relative;
-  color: #79624c;
-}
-
-.underline:after {
-  content: '';
-  position: absolute;
-  width: 100%;
-  transform: scaleX(0);
-  height: 2px;
-  bottom: -2px;
-  left: 0;
-  background-color: #79624c;
-  transform-origin: bottom right;
-  transition: transform 0.5s ease-out;
-}
-
-.underline:hover:after {
-  transform: scaleX(1);
-  transform-origin: bottom left;
-}
-
 @media (max-width: 330px) {
   #right-side {
     display: none;

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: {
@@ -100,7 +119,25 @@ 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: {
+    colorSelected: function(color) {
+      if (this.displayWord) {
+        document.getElementById("word").style.color = color;
+      }
+    }
   }
 }
 </script>
@@ -111,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;
 }
@@ -134,7 +171,7 @@ export default {
   font-size: 24px;
   font-weight: bold;
   margin-bottom: 8px;
-  color: #b4c2ff;
+  color: #fdde95;
 }
 
 #definition {
@@ -147,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,16 +9,17 @@
 </template>
 
 <script>
+const DEFAULT_COLOR = "#fdde95";
 export default {
   name: "Settings",
   data() {
     return {
       colors: {
-        default: "#fdde95",
+        default: DEFAULT_COLOR,
         greenBlue: "#9acabf",
         green: "#ABCEA7",
-        salmon: "#E6CEBD",
+        grey: "#d4d4e8",
-        grey: "#babbc8"
+        salmon: "#E6CEBD"
       },
       activeColor: "#504746"
     }
@@ -28,6 +29,7 @@ export default {
       this.removeActiveColorFromPalette()
       event.target.style.borderColor = this.activeColor;
       document.body.style.backgroundColor = color;
+      this.$store.commit("setColorSelected", color);
     },
     removeActiveColorFromPalette() {
       const palette = document.querySelectorAll(".color-palette-item");
@@ -55,9 +57,7 @@ export default {
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  margin-top: 8px;
+  margin-bottom: 8px;
-  margin-right: 8px;
-  margin-left: 16px;
 }
 
 .color-palette-item {

src/components/Socials.vue

@@ -0,0 +1,30 @@
+<template>
+  <div id="socials-container">
+    <div>
+      <a href="https://github.com/RemiSaurel/own-workspace" target="_blank">
+        <img src="../res/github.png" alt="github" width="32" height="32">
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "socials"
+}
+</script>
+
+<style scoped>
+#socials-container {
+  display: flex;
+  flex-direction: column;
+  margin-top: 8px;
+}
+
+@media (max-width: 675px) {
+  #socials-container {
+    display: none;
+  }
+
+}
+</style>

src/components/ToDoList.vue

@@ -35,15 +35,14 @@ 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 =>
           e !== item
       )
+      this.$store.commit("addItemFinished", item);
       this.clearItem()
     },
     clearItem() {
@@ -58,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%;
   }
 
@@ -95,6 +91,7 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding-left: 16px;
   }
 
   #add_button {
@@ -132,6 +129,9 @@ export default {
     flex-direction: column;
     padding-right: 16px;
     margin-top: 8px;
+    overflow: auto;
+    padding-left: 16px;
+    padding-bottom: 16px;
   }
 
   .item {
@@ -162,8 +162,8 @@ export default {
       margin-top: 8px;
     }
     #todolist {
-      margin-right: 32px;
+      padding-right: 32px;
-      padding-left: 16px;
+      padding-left: 32px;
     }
     #liste {
       padding-bottom: 8px;

src/main.js

@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
+import store from "./store";
 
 Vue.config.productionTip = false
 
 new Vue({
+  store,
   render: h => h(App),
 }).$mount('#app')

src/store/index.js

@@ -0,0 +1,38 @@
+// store/index.js
+
+
+import Vue from "vue";
+import Vuex from "vuex";
+
+Vue.use(Vuex);
+export default new Vuex.Store({
+    state: {
+        itemsFinished: [],
+        colorSelected: "",
+        nbSessions: 0
+    },
+    getters: {
+        itemsFinished(state) {
+            return state.itemsFinished;
+        },
+        colorSelected(state) {
+            return state.colorSelected;
+        },
+        nbSessions(state) {
+            return state.nbSessions;
+        }
+    },
+    mutations: {
+        addItemFinished(state, item) {
+            state.itemsFinished.push(item);
+        },
+        setColorSelected(state, color) {
+            state.colorSelected = color;
+        },
+        setNbSessions(state) {
+            state.nbSessions++;
+        }
+    },
+    actions: {
+    }
+});