Add support to show a total overtime value. Update dependencies.

README.md

@@ -8,7 +8,8 @@ This is a simple Vue application using Vite as the build system.
 ## How to use
 The configuration is specified using the URL query parameters:
 - `name`: the name of the meeting/stand-up
-- `total`: the total duration of the meeting, in seconds
+- `total`: the total duration of the meeting, in seconds.  
+  If omitted, the sum of the time for each person will be used as the total.
 - any other query adds a line in the list of people. For example:
   - `Tom=60` adds a line with name "Tom" and duration of 60 seconds
 

package.json

@@ -10,16 +10,16 @@
     "test": "vitest"
   },
   "dependencies": {
-    "vue": "^3.3.11"
+    "vue": "^3.4.0"
   },
   "devDependencies": {
     "@testing-library/vue": "^8.0.1",
-    "@vitejs/plugin-vue": "^4.5.2",
+    "@vitejs/plugin-vue": "^5.0.0",
     "@vue/test-utils": "^2.4.4",
     "happy-dom": "^13.3.8",
-    "typescript": "^5.2.2",
-    "vite": "^5.0.8",
+    "typescript": "^5.4.0",
+    "vite": "^5.2.0",
     "vitest": "^1.2.2",
-    "vue-tsc": "^1.8.25"
+    "vue-tsc": "^2.0.0"
   }
 }

src/App.vue

@@ -33,6 +33,9 @@ function toggle(index: number) {
 const remaining = computed(() => Math.max(0, totalTime - timers.value.reduce((sum, t) => sum + t.seconds, 0)));
 const totalTimerTime = computed(() => timers.value.reduce((sum, t) => sum + t.max, 0));
 
+const totalUsed = computed(() => timers.value.reduce((sum, t) => sum + t.seconds, 0));
+const totalExtra = computed(() => Math.max(0, totalUsed.value - timers.value.reduce((sum, t) => sum + t.max, 0)));
+
 function randomize() {
   for (let i = timers.value.length - 1; i > 0; i--) {
     const j = Math.floor(Math.random() * (i + 1));
@@ -95,7 +98,10 @@ async function openDocumentPip() {
     <img src="/timer.svg" class="logo" alt="Timer"/>
     <div>
       <h1>{{ standupName }}</h1>
-      <span><b>{{ secToTime(totalTime) }}</b> ({{ secToTime(remaining) }} remaining)</span>
+      <span><b>{{ secToTime(totalTime) }}</b>&nbsp
+        <span v-if="totalExtra == 0">({{ secToTime(remaining) }} remaining)</span>
+        <span v-else class="overtime">+{{ secToTime(totalExtra) }}</span>
+      </span>
     </div>
   </div>
 
@@ -119,7 +125,7 @@ async function openDocumentPip() {
 <style scoped>
 .header {
   display: flex;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .header h1 {
@@ -137,4 +143,8 @@ async function openDocumentPip() {
   padding: 1rem 2rem;
   width: 100%;
 }
+
+.overtime {
+  color: var(--color3);
+}
 </style>

src/components/TimerLine.vue

@@ -39,7 +39,7 @@ const overtime = computed(() => props.seconds > props.max);
 .remove-line {
   display: none;
   color: var(--color3);
-  
+
   position: absolute;
   left: -30px;
   width: 30px;

src/composables/urlQueryParams.ts

@@ -1,17 +1,18 @@
 export interface TimerItem {
     name: string;
-    
+
     seconds: number;
     max: number;
 }
 
 export function getUrlQueryParameters() {
     const searchParams = new URLSearchParams(window.location.search);
-    
+
     const timers: TimerItem[] = [];
     let standupName = "Stand-up timer";
     let totalTime = 0;
-
+    let timersTotal = 0;
+
 
     for (const p of searchParams) {
         const paramName = p[0].trim();
@@ -28,9 +29,13 @@ export function getUrlQueryParameters() {
                 totalTime = seconds;
             } else {
                 timers.push({name: paramName, seconds: 0, max: seconds});
+                timersTotal += seconds;
             }
         }
     }
 
+    // If the totalTime was not specified, then put the sum of the timers.
+    if (totalTime === 0) totalTime = timersTotal;
+
     return {standupName, totalTime, timers}
 }