From 7f754f2e09fdb0e151348f65df1179b4121a597f Mon Sep 17 00:00:00 2001 From: RemiSaurel Date: Thu, 25 Aug 2022 20:39:59 +0200 Subject: [PATCH 1/3] setup vuex --- package-lock.json | 32 ++++++++++++++++++++++++++------ package.json | 3 ++- src/main.js | 2 ++ src/store/index.js | 17 +++++++++++++++++ 4 files changed, 47 insertions(+), 7 deletions(-) create mode 100644 src/store/index.js diff --git a/package-lock.json b/package-lock.json index f251552..2e120df 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 480c4ce..582f024 100644 --- a/package.json +++ b/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", diff --git a/src/main.js b/src/main.js index 63eb05f..4bf0fd6 100644 --- a/src/main.js +++ b/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') diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 0000000..2a7fd70 --- /dev/null +++ b/src/store/index.js @@ -0,0 +1,17 @@ +// store/index.js + +import Vue from "vue"; +import Vuex from "vuex"; + +Vue.use(Vuex); + +export default new Vuex.Store({ + state: { + }, + getters: { + }, + mutations: { + }, + actions: { + } +}); From 398c2616242bc412e5f448b9c001cb83332949ea Mon Sep 17 00:00:00 2001 From: RemiSaurel Date: Thu, 25 Aug 2022 23:46:57 +0200 Subject: [PATCH 2/3] first use of vuex --- src/App.vue | 55 ++++++++++--------------------------- src/components/Infos.vue | 17 ++++++++++++ src/components/Settings.vue | 9 +++--- src/components/Socials.vue | 30 ++++++++++++++++++++ src/components/ToDoList.vue | 1 + src/store/index.js | 14 ++++++++++ 6 files changed, 81 insertions(+), 45 deletions(-) create mode 100644 src/components/Socials.vue diff --git a/src/App.vue b/src/App.vue index 727a82c..8e72fac 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,7 +1,10 @@ @@ -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; diff --git a/src/components/Infos.vue b/src/components/Infos.vue index f6ae073..e992e9b 100644 --- a/src/components/Infos.vue +++ b/src/components/Infos.vue @@ -79,6 +79,7 @@ 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,6 +102,22 @@ export default { this.generateDateOfTheDay(); this.getCurrentTime(); this.getNewWordEveryday() + }, + computed: { + itemsFinished() { + return this.$store.getters.itemsFinished; + }, + colorSelected() { + return this.$store.getters.colorSelected; + } + }, + watch: { + itemsFinished: function(items) { + console.log(items); + }, + colorSelected: function(color) { + document.getElementById("word").style.color = color; + } } } diff --git a/src/components/Settings.vue b/src/components/Settings.vue index 49ee800..d121950 100644 --- a/src/components/Settings.vue +++ b/src/components/Settings.vue @@ -17,8 +17,8 @@ export default { default: "#fdde95", greenBlue: "#9acabf", green: "#ABCEA7", - salmon: "#E6CEBD", - grey: "#babbc8" + grey: "#d4d4e8", + salmon: "#E6CEBD" }, activeColor: "#504746" } @@ -28,6 +28,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 +56,7 @@ export default { flex-direction: column; justify-content: space-between; align-items: center; - margin-top: 8px; - margin-right: 8px; - margin-left: 16px; + margin-bottom: 8px; } .color-palette-item { diff --git a/src/components/Socials.vue b/src/components/Socials.vue new file mode 100644 index 0000000..e0d5404 --- /dev/null +++ b/src/components/Socials.vue @@ -0,0 +1,30 @@ + + + + + \ No newline at end of file diff --git a/src/components/ToDoList.vue b/src/components/ToDoList.vue index ed2d2e4..3439345 100644 --- a/src/components/ToDoList.vue +++ b/src/components/ToDoList.vue @@ -44,6 +44,7 @@ export default { this.items = this.items.filter(e => e !== item ) + this.$store.commit("addItemFinished", item); this.clearItem() }, clearItem() { diff --git a/src/store/index.js b/src/store/index.js index 2a7fd70..0f637ff 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -7,10 +7,24 @@ Vue.use(Vuex); export default new Vuex.Store({ state: { + itemsFinished: [], + colorSelected: "" }, getters: { + itemsFinished(state) { + return state.itemsFinished; + }, + colorSelected(state) { + return state.colorSelected; + } }, mutations: { + addItemFinished(state, item) { + state.itemsFinished.push(item); + }, + setColorSelected(state, color) { + state.colorSelected = color; + } }, actions: { } From 0ed5f2e7ebeda285047112485d5b7bf78efdd3b8 Mon Sep 17 00:00:00 2001 From: RemiSaurel Date: Fri, 26 Aug 2022 01:17:35 +0200 Subject: [PATCH 3/3] new stats + use store + refactoring --- src/components/Infos.vue | 59 ++++++++++++++++++++++++++++++------- src/components/Pomodoro.vue | 3 +- src/components/Settings.vue | 3 +- src/components/ToDoList.vue | 15 +++++----- src/store/index.js | 11 +++++-- 5 files changed, 67 insertions(+), 24 deletions(-) diff --git a/src/components/Infos.vue b/src/components/Infos.vue index e992e9b..aaaa43e 100644 --- a/src/components/Infos.vue +++ b/src/components/Infos.vue @@ -9,7 +9,7 @@
-
+
{{ this.word.word }}
@@ -17,10 +17,28 @@ {{ this.word.definition }}
-
+
+
+
+
+ +
+
+ Total todo: {{this.nbItemsFinished}} +
+ Total sessions: {{this.$store.getters.nbSessions}} +
+ +
+
@@ -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,22 +119,24 @@ 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) { - document.getElementById("word").style.color = color; + if (this.displayWord) { + document.getElementById("word").style.color = color; + } } } } @@ -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; diff --git a/src/components/Pomodoro.vue b/src/components/Pomodoro.vue index 78d6e99..d09afbf 100644 --- a/src/components/Pomodoro.vue +++ b/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; } diff --git a/src/components/Settings.vue b/src/components/Settings.vue index d121950..f7dca1f 100644 --- a/src/components/Settings.vue +++ b/src/components/Settings.vue @@ -9,12 +9,13 @@