RunCardsPortrait.vue

This component renders the carousel / gallery of run cards on the welcome page

📄 View source on GitHub

Props

Name	Type	Required	Default
nextRun	String	✅	``

Used Components

• RunCardPortrait

Used by

• /welcome

Functions

getRunData

Fetches the run data for a given date range from the backend using the /runs/run-info endpoint.

Parameters:

• startDate: - The start date of the range in YYYY-MM-DD format.
• endDate: - The end date of the range in YYYY-MM-DD format.

distributeArray

Distributes an array (of run cards) into smaller arrays of specified maximum size. Used to split the total runs in the carousel into the displayable chunks

Parameters:

• array: - The input array to be divided into groups.
• maxItemsPerGroup: - The maximum number of items each group should contain.

Reactivity

maxItemsPerGroup (computed)

Calculate the max number of RunCards in the carousel
Warning: this is NOT using the breakpoints!

distributedRuns (computed)

Computed property for distributed runs, this changes from 1 to 2 runcards in the carousel depending on screen size