Init

index.js

@@ -0,0 +1,111 @@
+class Timer {
+  i1 = 0;
+  i2 = 0;
+  currentInterval = 1;
+  timerId;
+  progress = 0;
+  progressId;
+
+  constructor(i1, i2) {
+    this.i1 = i1;
+    this.i2 = i2;
+  }
+
+  startTimer() {
+    console.log("startTimer()");
+    this.notify();
+    if (this.timerId !== undefined) clearTimeout(this.timerId);
+    document.getElementById("interval").innerHTML =
+      this.currentInterval === 1 ? "Sitzen" : "Stehen";
+    this.startProgress();
+    this.timerId = setTimeout(
+      () => {
+        this.currentInterval = this.currentInterval === 1 ? 2 : 1;
+        this.startTimer();
+      },
+      this.currentInterval === 1 ? this.i1 : this.i2
+    );
+  }
+
+  notify() {
+    console.log("notify()");
+    if (Notification.permission === "granted") {
+      new Notification(
+        this.currentInterval === 1 ? "Du kannst sitzen" : "Steh auf, du Sack!"
+      );
+    } else if (Notification.permission !== "denied") {
+      Notification.requestPermission().then((permission) => {
+        if (permission === "granted") {
+          new Notification(
+            this.currentInterval === 1
+              ? "Du kannst sitzen"
+              : "Steh auf, du Sack!"
+          );
+        }
+      });
+    }
+  }
+
+  startProgress() {
+    console.log("startProgress()");
+    if (this.progressId !== undefined) clearInterval(this.progressId);
+    this.progress = 0;
+    this.draw();
+    this.progressId = setInterval(() => {
+      this.progress += 1000;
+      this.draw();
+    }, 1e3);
+  }
+
+  draw() {
+    console.log("draw()");
+    let timeRemaining =
+      this.currentInterval === 1
+        ? this.i1 - this.progress
+        : this.i2 - this.progress;
+    if (timeRemaining < 0) timeRemaining = 0;
+    document.getElementById("timer").innerHTML =
+      this.convertMillisecondsToTime(timeRemaining);
+  }
+
+  stop() {
+    console.log("stop()");
+    clearTimeout(this.timerId);
+    this.timerId = undefined;
+    clearInterval(this.progressId);
+    this.progressId = undefined;
+    this.progress = 0;
+    document.getElementById("timer").innerHTML = "00:00:00";
+  }
+
+  convertMillisecondsToTime(milliseconds) {
+    const s = Math.floor(milliseconds / 1000);
+    const hours = Math.floor(s / 3600);
+    const minutes = Math.floor((s % 3600) / 60);
+    const seconds = s % 60;
+
+    return `${hours.toString().padStart(2, "0")}:${minutes
+      .toString()
+      .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+  }
+}
+
+let timer;
+
+function startTimer(e) {
+  e.preventDefault();
+  let interval1 = document.getElementById("interval1").value;
+  let interval2 = document.getElementById("interval2").value;
+  let i1 = parseInt(interval1);
+  let i2 = parseInt(interval2);
+  if (isNaN(i1) || isNaN(i2)) return;
+  if (timer) timer.stop();
+  timer = new Timer(i1 * 60 * 1e3, i2 * 60 * 1e3);
+  timer.startTimer();
+}
+
+function stopTimer(e) {
+  e.preventDefault();
+  if (timer) timer.stop();
+  timer = undefined;
+}