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/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..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: { @@ -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; + } + } } } @@ -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; 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 49ee800..f7dca1f 100644 --- a/src/components/Settings.vue +++ b/src/components/Settings.vue @@ -9,16 +9,17 @@ + + \ No newline at end of file diff --git a/src/components/ToDoList.vue b/src/components/ToDoList.vue index ed2d2e4..6b7cc58 100644 --- a/src/components/ToDoList.vue +++ b/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-left: 16px; + padding-right: 32px; + padding-left: 32px; } #liste { padding-bottom: 8px; 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..7795e76 --- /dev/null +++ b/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: { + } +});