mirror of
https://github.com/LucasVbr/own-workspace.git
synced 2026-05-13 17:21:58 +00:00
cleaning + POMODORO 🎉
This commit is contained in:
RemiSaurel
+1
-1
@@ -5,7 +5,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<title>Workspace</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
+10
-59
@@ -1,28 +1,25 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<header>
|
||||
<Welcome/>
|
||||
<h3 id="time"></h3>
|
||||
</header>
|
||||
<div class="pause"></div>
|
||||
<to-do-list></to-do-list>
|
||||
<div class="aside">
|
||||
<div class="ytb" v-show="displayYoutube">
|
||||
<iframe width="80%" height="400" src="https://www.youtube-nocookie.com/embed/MCkTebktHVc?autoplay=1&mute=1" title="YouTube video player" frameborder="0"
|
||||
<iframe width="100%" height="388" src="https://www.youtube-nocookie.com/embed/MCkTebktHVc?autoplay=1&mute=1" title="YouTube video player" frameborder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
id="youtube_video">
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
<footer>Made with <a href="https://github.com/RemiSaurel/todoapp" target="_blank" class="name">💙</a> by <a href="https://www.linkedin.com/in/r%C3%A9mi-saurel/" target="_blank" class="name">Rémi Saurel</a> </footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Welcome from './components/Welcome.vue'
|
||||
import ToDoList from "@/components/ToDoList";
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Welcome,
|
||||
ToDoList
|
||||
ToDoList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -31,32 +28,10 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
clock();
|
||||
|
||||
function clock() {
|
||||
const today = new Date();
|
||||
|
||||
// get time components
|
||||
const hours = today.getHours();
|
||||
const minutes = today.getMinutes();
|
||||
|
||||
//add '0' to hour, minute & second when they are less 10
|
||||
const hour = hours < 10 ? "0" + hours : hours;
|
||||
const minute = minutes < 10 ? "0" + minutes : minutes;
|
||||
|
||||
const time = hour + ":" + minute;
|
||||
|
||||
document.getElementById("time").innerHTML = time;
|
||||
setTimeout(clock, 1000);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400&display=swap');
|
||||
|
||||
* {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
@@ -71,32 +46,6 @@ body {
|
||||
background: -webkit-linear-gradient( 0deg, rgba(255, 253, 226, 1) 0%, rgba(255, 228, 164, 1) 50%, rgba(255, 217, 153, 1) 100%);
|
||||
}
|
||||
|
||||
.ytb {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */
|
||||
}
|
||||
|
||||
iframe{
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
left: 20%;
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-right: 10vw;
|
||||
margin-left: 10vw;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
@@ -104,8 +53,10 @@ footer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#time {
|
||||
font-size: 28px;
|
||||
.ytb {
|
||||
margin-left: 32px;
|
||||
margin-right: 32px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* TEXT UNDERLINE */
|
||||
|
||||
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div class="pomodoro">
|
||||
<div id="dot-container">
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
</div>
|
||||
<div id="message">
|
||||
<div v-if="this.isRestingTime">
|
||||
Pause time 🎉
|
||||
</div>
|
||||
<div v-else>
|
||||
Work time 📚
|
||||
</div>
|
||||
</div>
|
||||
<div id="time">
|
||||
<span id="minutes">{{minutes}}</span>
|
||||
<span id="colon">:</span>
|
||||
<span id="seconds">{{seconds}}</span>
|
||||
</div>
|
||||
<div id="params">
|
||||
<div id="presetTime">
|
||||
<button @click="setMinutes(25)">25'</button>
|
||||
<button @click="setMinutes(45)">45'</button>
|
||||
</div>
|
||||
<div id="startStop">
|
||||
<button @click="startSession" id="start">▶️</button>
|
||||
<button @click="pauseSession" id="pause" disabled>⏸</button>
|
||||
<button @click="resetSession" id="reset">🔄</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const MINUTES = 25;
|
||||
const SECONDS = 0;
|
||||
const SHORT_PAUSE = 5;
|
||||
const LONG_PAUSE = 30;
|
||||
|
||||
export default {
|
||||
name: "Pomodoro",
|
||||
data () {
|
||||
return {
|
||||
minutes: MINUTES,
|
||||
seconds: SECONDS,
|
||||
sessionStarted: false,
|
||||
nbSessionsFinished: 0,
|
||||
isRestingTime: false,
|
||||
customTimer: MINUTES
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setMinutes(value) {
|
||||
this.minutes = value.toString();
|
||||
this.customTimer = value;
|
||||
},
|
||||
startSession() {
|
||||
if (!this.sessionStarted) {
|
||||
this.countDownTimer();
|
||||
this.sessionStarted = true;
|
||||
}
|
||||
if (!this.isRestingTime) {
|
||||
this.enableButton("pause");
|
||||
}
|
||||
this.disableButton("start");
|
||||
let all = document.querySelectorAll("#presetTime button");
|
||||
for (let el of all) { el.disabled = true; }
|
||||
},
|
||||
pauseSession() {
|
||||
this.sessionStarted = false;
|
||||
this.disableButton("pause");
|
||||
this.enableButton("start");
|
||||
clearTimeout(this.timeout);
|
||||
},
|
||||
disableButton(buttonId) {
|
||||
let button = document.getElementById(buttonId);
|
||||
button.disabled = true;
|
||||
},
|
||||
enableButton(buttonId) {
|
||||
let button = document.getElementById(buttonId);
|
||||
button.disabled = false;
|
||||
},
|
||||
resetSession() {
|
||||
this.sessionStarted = false;
|
||||
this.minutes = this.customTimer;
|
||||
this.seconds = SECONDS;
|
||||
this.prettyTime();
|
||||
clearTimeout(this.timeout);
|
||||
let all = document.querySelectorAll("#presetTime button, #start");
|
||||
for (let el of all) { el.disabled = false; }
|
||||
this.disableButton("pause")
|
||||
},
|
||||
countDownTimer: function () {
|
||||
if (this.minutes === "00" && this.seconds === "00") {
|
||||
if (this.isRestingTime) {
|
||||
this.isRestingTime = false;
|
||||
this.resetSession();
|
||||
} else {
|
||||
this.nbSessionsFinished++;
|
||||
if (this.nbSessionsFinished === 4) {
|
||||
this.setupPauseTimer(LONG_PAUSE);
|
||||
this.nbSessionsFinished = 0;
|
||||
} else {
|
||||
this.setupPauseTimer(SHORT_PAUSE);
|
||||
}
|
||||
this.changeDots();
|
||||
}
|
||||
} else {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.minutes = parseInt(this.minutes);
|
||||
this.seconds = parseInt(this.seconds);
|
||||
if (this.seconds === 0) {
|
||||
if (this.minutes > 0) {
|
||||
this.minutes -= 1;
|
||||
this.seconds = 59;
|
||||
}
|
||||
} else {
|
||||
this.seconds -= 1;
|
||||
}
|
||||
this.prettyTime()
|
||||
this.countDownTimer()
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
changeDots() {
|
||||
let dots = document.querySelectorAll(".dot");
|
||||
for (let dot of dots) {
|
||||
dot.classList.remove("active");
|
||||
}
|
||||
for (let i = 0; i < this.nbSessionsFinished; i++) {
|
||||
dots[i].classList.add("active");
|
||||
}
|
||||
},
|
||||
setupPauseTimer(minutes){
|
||||
this.isRestingTime = true;
|
||||
this.sessionStarted = false;
|
||||
this.enableButton("start");
|
||||
this.disableButton("reset")
|
||||
this.disableButton("pause")
|
||||
this.minutes = minutes.toString();
|
||||
this.seconds = 0;
|
||||
this.prettyTime();
|
||||
},
|
||||
prettyTime () {
|
||||
if (this.minutes < 10) {
|
||||
this.minutes = "0" + this.minutes;
|
||||
}
|
||||
if (this.seconds < 10) {
|
||||
this.seconds = "0" + this.seconds;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.prettyTime();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pomodoro {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#time {
|
||||
font-weight: 800;
|
||||
font-size: 8vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#startStop > button{
|
||||
font-size: 32px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
#params {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#params #presetTime > button {
|
||||
margin: 8px;
|
||||
font-size: 24px;
|
||||
width: 62px;
|
||||
}
|
||||
|
||||
#seconds {
|
||||
display: inline-block;
|
||||
width: 10vw;
|
||||
}
|
||||
#minutes {
|
||||
display: inline-block;
|
||||
width: 10vw;
|
||||
}
|
||||
|
||||
#message {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background-color: lightslategrey;
|
||||
border-radius: 50%;
|
||||
margin: 12px 4px 12px 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.active {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background-color: mediumseagreen;
|
||||
border-radius: 50%;
|
||||
margin: 12px 4px 12px 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div id="todolist">
|
||||
<div>
|
||||
<input @keydown.enter="addItem(item)" type="text" name="todo" id="todo_input" v-model="item"
|
||||
placeholder="Ex: Finir exos maths">
|
||||
</div>
|
||||
<div id="liste">
|
||||
<div v-for="item in items" :key="item" class="item">
|
||||
<div id="text">
|
||||
@@ -13,13 +16,22 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pomodoro">
|
||||
<pomodoro></pomodoro>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import Pomodoro from "@/components/Pomodoro";
|
||||
|
||||
export default {
|
||||
name: "ToDoList",
|
||||
components: {},
|
||||
components: {
|
||||
Pomodoro
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
item: "",
|
||||
@@ -34,7 +46,9 @@ export default {
|
||||
}
|
||||
},
|
||||
removeItem(item) {
|
||||
this.items = this.items.filter(e => e !== item)
|
||||
this.items = this.items.filter(e =>
|
||||
e !== item
|
||||
)
|
||||
this.item = ""
|
||||
}
|
||||
}
|
||||
@@ -42,13 +56,26 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#pomodoro {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
#todolist {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 32px;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
#todo_input {
|
||||
font-size: 1.2rem;
|
||||
width: 60%;
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
box-sizing: border-box;
|
||||
@@ -72,13 +99,11 @@ export default {
|
||||
font-size: 18px;
|
||||
margin-top: 8px;
|
||||
align-items: center;
|
||||
padding: 10px 10px 10px 10px;
|
||||
padding: 12px 22px 12px 22px;
|
||||
border-radius: 12px;
|
||||
min-width: 82px;
|
||||
max-width: 50vw;
|
||||
max-width: 40vw;
|
||||
box-shadow: rgba(111, 111, 111, 0.2) 0px 7px 29px 0px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
word-break: break-all;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>ToDoList</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Welcome',
|
||||
props: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hello {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user