lucasvbr/own-workspace
1
0
Fork 0
mirror of https://github.com/LucasVbr/own-workspace.git synced 2026-05-13 17:21:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5 from RemiSaurel/dev

Browse Source 
Dev
This commit is contained in:
Rémi
2022-08-26 01:18:09 +02:00
committed by GitHub
parent 26f83d0bc1 0ed5f2e7eb
commit 514561540e
10 changed files with 188 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+26 -6
View File
@@ -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
+2 -1
View File
@@ -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
+15 -40
View File
@@ -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
+60 -6
View File
@@ -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
+1 -2
View File
@@ -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
+6 -6
View File
@@ -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: "#babbc8"
grey: "#d4d4e8",
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-right: 8px;
margin-left: 16px;
margin-bottom: 8px;
}
.color-palette-item {
src/components/Socials.vue
+30
View File
@@ -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
+8 -8
View File
@@ -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;
src/main.js
+2
View File
@@ -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
+38
View File
@@ -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: {
}
});