Next

src/components/TimelineStopwatch.vue

@@ -32,10 +32,10 @@ watchEffect(() => {
   }
 })
 
-watchEffect(() =>
-  updateTimelineItem(props.timelineItem, {
-    activitySeconds: seconds.value
-  })
+watchEffect(() => updateTimelineItem(props.timelineItem, { activitySeconds: seconds.value }))
+
+watch(isRunning, () =>
+  updateTimelineItem(props.timelineItem, { isActive: Boolean(isRunning.value) })
 )
 
 watch(isRunning, () =>

src/main.js

@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import { loadState, saveState } from './storage'
-import { startTimelineItemTimer, findActiveTimelineItem } from './timeline-items'
+import { findActiveTimelineItem, startTimelineItemTimer } from './timeline-items'
 import App from './App.vue'
 
 import './assets/main.css'

src/pages/TheTimeline.vue

@@ -6,7 +6,7 @@ import {
   scrollToCurrentHour,
   stopTimelineItemTimer
 } from '../timeline-items'
-import { startTimer, stopTimer } from '../time'
+import { startCurrentDateTimer, stopCurrentDateTimer } from '../time'
 import TimelineItem from '../components/TimelineItem.vue'
 import TheTimelineIndicator from '../components/TheTimelineIndicator.vue'
 
@@ -15,10 +15,10 @@ stopTimelineItemTimer()
 onActivated(() => {
   scrollToCurrentHour()
 
-  startTimer()
+  startCurrentDateTimer()
 })
 
-onDeactivated(stopTimer)
+onDeactivated(stopCurrentDateTimer)
 </script>
 
 <template>

src/storage.js

@@ -1,5 +1,5 @@
-import { APP_NAME, MILLISECONDS_IN_SECOND } from './constants'
-import { isToday, today } from './time'
+import { APP_NAME } from './constants'
+import { endOfHour, isToday, toSeconds, today } from './time'
 import { timelineItems } from './timeline-items'
 import { activities } from './activities'
 
@@ -32,8 +32,14 @@ function syncIdleSeconds(timelineItems, lastActiveAt) {
   const activeTimelineItem = timelineItems.find(({ isActive }) => isActive)
 
   if (activeTimelineItem) {
-    activeTimelineItem.activitySeconds += (today() - lastActiveAt) / MILLISECONDS_IN_SECOND
+    activeTimelineItem.activitySeconds += calculateIdleSeconds(lastActiveAt)
   }
 
   return timelineItems
 }
+
+function calculateIdleSeconds(lastActiveAt) {
+  return lastActiveAt.getHours() === today().getHours()
+    ? toSeconds(today() - lastActiveAt)
+    : toSeconds(endOfHour(lastActiveAt) - lastActiveAt)
+}

src/time.js

@@ -3,13 +3,13 @@ import {
   HUNDRED_PERCENT,
   SECONDS_IN_DAY,
   MILLISECONDS_IN_SECOND,
-  SECONDS_IN_MINUTE
+  SECONDS_IN_HOUR
 } from './constants'
 
 export function today() {
   const today = new Date()
 
-  today.setHours(0, 0)
+  // today.setHours(0, 0)
 
   return today
 }
@@ -22,10 +22,24 @@ export function tomorrow() {
   return tomorrow
 }
 
+export function endOfHour(date) {
+  const endOfHour = new Date(date)
+
+  endOfHour.setTime(endOfHour.getTime() + SECONDS_IN_HOUR * MILLISECONDS_IN_SECOND)
+
+  endOfHour.setMinutes(0, 0, 0)
+
+  return endOfHour
+}
+
 export function isToday(date) {
   return date.toDateString() === today().toDateString()
 }
 
+export function toSeconds(milliseconds) {
+  return Math.round(milliseconds / MILLISECONDS_IN_SECOND)
+}
+
 export const now = ref(today())
 
 export const secondsSinceMidnightInPercentage = computed(
@@ -36,16 +50,16 @@ const midnight = computed(() => new Date(now.value).setHours(0, 0, 0, 0))
 
 const secondsSinceMidnight = computed(() => (now.value - midnight.value) / MILLISECONDS_IN_SECOND)
 
-let timer = null
+let currentDateTimer = null
 
-export function startTimer() {
+export function startCurrentDateTimer() {
   now.value = today()
 
-  timer = setInterval(() => {
-    now.value = new Date(now.value.getTime() + SECONDS_IN_MINUTE * MILLISECONDS_IN_SECOND)
+  currentDateTimer = setInterval(() => {
+    now.value = new Date(now.value.getTime() + MILLISECONDS_IN_SECOND)
   }, MILLISECONDS_IN_SECOND)
 }
 
-export function stopTimer() {
-  clearInterval(timer)
+export function stopCurrentDateTimer() {
+  clearInterval(currentDateTimer)
 }