Clock Store

Manage application time, date, and Bell schedule integration

The clock store manages the application’s current time and date, integrating with the Bell schedule system to provide real-time period information and countdown timers.

State Properties

urlDate · Ref<Date>

The base date parsed from URL query parameters. Used as the starting point for time calculations.

clockMode · 'current' | 'day'

Determines how the clock behaves:

• 'current': Live countdown mode with real-time updates
• 'day': Day overview mode showing the full day schedule at 0:00

startTime · number

Timestamp (milliseconds) when the clock was started or reset.

currentTime · Ref<number>

Current timestamp (milliseconds) updated every second by the clock interval.

Computed Properties

date

const date: ComputedRef<Date>

The current application date, calculated by adding the elapsed time since startTime to urlDate. In 'day' mode, returns the date normalized to midnight (0:00).

Implementation Details

const date = computed((): Date => {
  const d = new Date(urlDate.value.getTime() + (currentTime.value - startTime.value));
  if (clockMode.value === 'current') return d;
  const normalized = new Date(d);
  normalized.setHours(0, 0, 0, 0);
  return normalized;
});

bell

const bell: ComputedRef<Bell>

A Bell instance for the current date, automatically updated with the current schedules and selected schedule mode. This provides access to period information, countdown timers, and schedule data.

const bell = computed((): Bell => {
  return new Bell(date.value, scheduleStore.schedules, scheduleStore.scheduleMode);
});

Actions

pageLoaded

function pageLoaded(route: RouteLocationNormalized): void

Initializes the clock when a page loads. Sets the start time, starts the clock interval, determines the mode from route parameters, and parses the date/time from the URL.

route · RouteLocationNormalized · required

The current route object containing query parameters for date and time.

Query Parameters:

• date: Triggers day mode (format: MM/DD/YYYY or MM-DD-YYYY)
• time: Forces current mode and sets a specific time (format: HH:MM:SS or HH.MM.SS)

Example Usage

import useClockStore from '@/stores/clock';

export default {
  setup() {
    const clockStore = useClockStore();
    const route = useRoute();
    
    onMounted(() => {
      clockStore.pageLoaded(route);
    });
  }
}

startClock

function startClock(): void

Starts the clock interval, updating currentTime every second. Automatically stops any existing interval before starting a new one.

import useClockStore from '@/stores/clock';

const clockStore = useClockStore();
clockStore.startClock(); // Begin live updates

stopClock

function stopClock(): void

Stops the clock interval, freezing the current time. Useful when switching to day mode or when pausing time updates.

clockStore.stopClock(); // Pause time updates

setStartTime

function setStartTime(): void

Sets the startTime to the current timestamp. Called when resetting the clock or initializing.

setModeFromRoute

function setModeFromRoute(route: RouteLocationNormalized): void

Determines the clock mode based on URL query parameters:

• If date parameter exists (without time): Sets to 'day' mode
• If time parameter exists or no date: Sets to 'current' mode

route · RouteLocationNormalized · required

The route object to parse for mode determination.

Integration with Bell

The clock store works seamlessly with the Bell utility to provide real-time schedule information:

import useClockStore from '@/stores/clock';

export default {
  setup() {
    const clockStore = useClockStore();
    const route = useRoute();
    
    // Initialize clock
    onMounted(() => {
      clockStore.pageLoaded(route);
    });
    
    // Access current period info
    const currentPeriod = computed(() => clockStore.bell.period);
    const isSchoolDay = computed(() => clockStore.bell.isSchoolDay);
    const secondsUntilNext = computed(() => 
      clockStore.bell.getSecondsUntilNextTarget()
    );
    
    return {
      currentPeriod,
      isSchoolDay,
      secondsUntilNext
    };
  }
}

Common Use Cases

Display countdown timer

import useClockStore from '@/stores/clock';

const clockStore = useClockStore();
const route = useRoute();

onMounted(() => {
  clockStore.pageLoaded(route);
});

// Get seconds until next period change
const countdown = computed(() => {
  return clockStore.bell.getSecondsUntilNextTarget();
});

Show current period

const currentPeriod = computed(() => {
  const period = clockStore.bell.period;
  if (!period || 'beforeSchool' in period) return 'Before School';
  if ('afterSchool' in period) return 'After School';
  return period.name;
});

Test with specific date/time

// Navigate with query params for testing
router.push({ 
  query: { 
    date: '03-15-2026',
    time: '10:30:00'
  }
});

// Clock will initialize with this date/time

Type Definitions

type ClockMode = 'current' | 'day';

interface ClockStore {
  urlDate: Ref<Date>;
  clockMode: Ref<ClockMode>;
  startTime: Ref<number>;
  currentTime: Ref<number>;
  date: ComputedRef<Date>;
  bell: ComputedRef<Bell>;
  pageLoaded(route: RouteLocationNormalized): void;
  stopClock(): void;
  startClock(): void;
  setStartTime(): void;
  setModeFromRoute(route: RouteLocationNormalized): void;
}

The clock store is initialized on page load and maintains a 1-second update interval when in 'current' mode. Always call pageLoaded() in your component’s onMounted hook.