better info

index.html

@@ -21,12 +21,20 @@
         <br />
         <ul>
           <li>
-            Remaining meeting time: <b>{{ timeText(totalRemainingTime) }}</b>
+            Meeting duration so far: <b :id="rid + 1">{{ timeText(elapsedTime) }}</b>
           </li>
           <li>
-            End estimated at: <b>{{ timeText(estimatedEnd) }}</b>
+            Remaining meeting time: <b :id="rid + 2">{{ timeText(totalRemainingTime) }}</b>
+          </li>
+          <li>
+            End estimated at: <b :id="rid + 3">{{ timeText(estimatedEnd) }}</b>
+          </li>
+          <li>
+            Total meeting time: <b :id="rid + 4">{{ timeText(totalTime) }}</b>
+          </li>
+          <li>
+            Overtime: <b :id="rid + 5">{{ timeText(overtimeTime) }}</b>
           </li>
-          <li>Total meeting time: <b>{{ timeText(totalTime) }}</b></li>
           <li>
             <label for="wheighted">Wheighted topics</label>&nbsp;<input
               id="wheighted"

main.js

@@ -11,6 +11,9 @@ let app = {
       selected: 0,
       timerEnd: new Date(),
       timerStarted: false,
+      date: new Date(),
+      meetingStart: new Date(),
+      elapsedTime: 0,
       initialSpin: true,
       initialColor: Math.random() * 360,
       rid: 0,
@@ -36,22 +39,20 @@ let app = {
       return this.data.filter((item) => !item.disabled);
     },
     totalTime() {
-      return this.data.map((item) => item.time).reduce((a, b) => a + b, 0);
+      return this.elapsedTime + this.data.map((item) => item.time).reduce((a, b) => a + b, 0);
     },
     totalRemainingTime() {
       return this.filteredData
         .map((item) => item.time)
         .reduce((a, b) => a + b, 0);
     },
+    overtimeTime() {
+      return this.totalTime - this.totalRemainingTime;
+    },
     estimatedEnd() {
-      const delta = this.timerStarted
+      const end = new Date(this.meetingStart.getTime());
-        ? ((this.timerEnd - new Date()) / (1000 * 60))
+      const timerDelta = (this.timerEnd - this.date) / (1000 * 60);
-        : this.showSelected
+      end.setMinutes(end.getMinutes() + this.totalTime - (this.timerStarted ? timerDelta : 0));
-        ? this.selectedData.time
-        : 0;
-      const toAdd = (this.totalRemainingTime - (this.showSelected ? this.selectedData.time : 0)  + delta);
-      const end = new Date();
-      end.setMinutes(end.getMinutes() + toAdd);
       return end.getHours() * 60 + end.getMinutes();
     },
     svgData() {
@@ -119,17 +120,20 @@ let app = {
     },
     timeText(minutes) {
       if (minutes > 60) {
-        return `${Math.floor(minutes / 60)}h${String(minutes % 60).padStart(
+        return `${Math.floor(minutes / 60).toFixed(0)}h${(minutes % 60).toFixed(0).padStart(
           2,
           "0"
         )}`;
       } else {
-        return `${String(minutes % 60).padStart(2, "0")}min`;
+        return `${(minutes % 60).toFixed(0).padStart(2, "0")}min`;
       }
     },
     spin() {
       if (this.timerStarted) return;
       this.showSelected = false;
+      if (this.initialSpin) {
+        this.meetingStart = new Date();
+      }
       this.initialSpin = false;
       this.wheelPosition += 360 * 10 + Math.random() * 360;
       clearTimeout(this.timeoutId);
@@ -243,6 +247,8 @@ let app = {
       if (this.timerStarted) {
         document.title = this.timerText();
       }
+      this.elapsedTime = (new Date() - this.meetingStart) / (1000 * 60);
+      this.date = new Date();
     }, 200);
   },
 };