cleaning + POMODORO 🎉

2026-05-13 17:21:58 +00:00 · 2022-08-14 00:18:40 +02:00
parent 3292b5b197
commit 17c9739173
5 changed files with 276 additions and 101 deletions
@@ -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>
@@ -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="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"
-              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-      id="youtube_video">
-      </iframe>
+    <div class="aside">
+      <div class="ytb" v-show="displayYoutube">
+        <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,25 +1,37 @@
 <template>
-  <div id="todolist">
-    <input @keydown.enter="addItem(item)" type="text" name="todo" id="todo_input" v-model="item"
-    placeholder="Ex: Finir exos maths">
-    <div id="liste">
-      <div v-for="item in items" :key="item" class="item">
-        <div id="text">
-          {{item}}
-        </div>
-        <div @click="removeItem(item)" id="trash">
-          🗑
+  <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">
+            {{item}}
+          </div>
+          <div @click="removeItem(item)" id="trash">
+            🗑
+          </div>
        </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>