From 23eea249d0747e9e3561045662e4c651045a5366 Mon Sep 17 00:00:00 2001 From: SelmaBergstrand <78426277+SelmaBergstrand@users.noreply.github.com> Date: Tue, 17 Sep 2024 14:11:12 +0200 Subject: [PATCH] feat(landing): carousel of preview boards (#1639) * feat(landing): add carousel of preview-boards * feat(landing): update preview boards * style(landing): add light and dark themes to previewboards * style(landing): add fade animation to tavla carousel * style(landing): make previewboards wider in mobile-view * chore(landing): add posthog to carousel buttons * fix(landing): change arrow icons to be buttons and remove unneccessary divs * fix(landing): keyboard navigation and voiceover of preview boards * chore(landing): add aria-label to button group --- .../app/(admin)/components/Preview/index.tsx | 104 +++++++++++- tavla/app/page.tsx | 150 ++++++++---------- tavla/src/Shared/utils/previewBoards.ts | 64 +++++--- 3 files changed, 217 insertions(+), 101 deletions(-) diff --git a/tavla/app/(admin)/components/Preview/index.tsx b/tavla/app/(admin)/components/Preview/index.tsx index 0ced896b6..6397d7bb7 100644 --- a/tavla/app/(admin)/components/Preview/index.tsx +++ b/tavla/app/(admin)/components/Preview/index.tsx @@ -1,21 +1,119 @@ 'use client' +import { IconButton } from '@entur/button' +import { LeftArrowIcon, RightArrowIcon } from '@entur/icons' import { Board } from 'Board/scenarios/Board' +import { usePostHog } from 'posthog-js/react' import { useEffect, useState } from 'react' import { TBoard } from 'types/settings' +const CarouselIndicators = ({ + boards, + activeIndex, + onClick, +}: { + boards: TBoard[] + activeIndex: number + onClick: (index: number) => void +}) => { + return ( +
+ {boards.map((_, index) => ( +
+ ) +} + function Preview({ boards }: { boards: TBoard[] }) { const [boardIndex, setBoardIndex] = useState(0) + const [fade, setFade] = useState(true) + const posthog = usePostHog() useEffect(() => { const interval = setInterval(() => { - setBoardIndex((boardIndex + 1) % boards.length) - }, 10000) + setFade(false) + setTimeout(() => { + setBoardIndex((boardIndex + 1) % boards.length) + setFade(true) + }, 500) + }, 4500) return () => clearInterval(interval) }, [boardIndex, boards]) + const nextSlide = () => { + posthog.capture('CAROUSEL_ARROW_BTN') + setBoardIndex((prevIndex) => + prevIndex === boards.length - 1 ? 0 : prevIndex + 1, + ) + } + const prevSlide = () => { + posthog.capture('CAROUSEL_ARROW_BTN') + setBoardIndex((prevIndex) => + prevIndex === 0 ? boards.length - 1 : prevIndex - 1, + ) + } + + const goToSlide = (index: number) => { + posthog.capture('CAROUSEL_INDICATOR_BTNS') + setBoardIndex(index) + } + const currentBoard = boards[boardIndex] ?? undefined if (!currentBoard) return null - return + return ( +
+
+
+ + + +
+
+
+ +
+
+
+ + + +
+
+ + +
+ ) } export { Preview } diff --git a/tavla/app/page.tsx b/tavla/app/page.tsx index 8480f0d48..b2938f848 100644 --- a/tavla/app/page.tsx +++ b/tavla/app/page.tsx @@ -51,90 +51,80 @@ async function Landing() { -
-
-
-
- -
-
- Kort om Tavla - - - Du kan lage avgangstavler fra alle - stoppesteder, holdeplasser, knutepunkter, - fergekaier mm. i hele Norge. Dette gjelder - for alle typer offentlig transport, - inkludert ferger, hurtigbåter og fly. - - - Det er helt gratis å implementere og bruke - Tavla. - - - Tavla kan vises på ulike typer skjermer og - er tilpasset flere operativsystem og - oppløsninger. - - - - Tavla sin kildekode er tilgjengelig for alle på{' '} - - GitHub - - . Dette gjør at du kan følge utviklingen av - produktet direkte og foreslå forbedringer selv. - +
+
+ - Enkelt å tilpasse og samarbeide +
+ Kort om Tavla + + + Du kan lage avgangstavler fra alle stoppesteder, + holdeplasser, knutepunkter, fergekaier mm. i + hele Norge. Dette gjelder for alle typer + offentlig transport, inkludert ferger, + hurtigbåter og fly. + + + Det er helt gratis å implementere og bruke + Tavla. + + + Tavla kan vises på ulike typer skjermer og er + tilpasset flere operativsystem og oppløsninger. + + + + Tavla sin kildekode er tilgjengelig for alle på{' '} + + GitHub + + . Dette gjør at du kan følge utviklingen av + produktet direkte og foreslå forbedringer selv. + - - - Tilpass tekststørrelse, fargetema, logo og - hvilken informasjon som skal vises, slik at - tavlen(e) passer til dine omgivelser og dine - besøkende sine behov. - - - Velg om du vil vise hele kollektivtilbudet - fra et stoppested, eller kun vise spesifikke - linjer, stoppesteder eller fremkomstmidler. - - - Opprett organisasjoner (mapper) for å samle - tavler og gi andre tilgang til å - administrere dem. Her kan du også velge - standardinnstillinger som vil gjelde alle - tavler i organisasjonen. - - + Enkelt å tilpasse og samarbeide - - Eksempler på bruk - - Hoteller - - Plasser Tavla i resepsjonsområdet slik at - gjester kan se sanntidsinformasjon om avganger - fra stoppesteder i nærheten. - - Arbeidsplasser - - Vis Tavla på informasjonspunkter eller skjermer - ved inngangen slik at besøkende enkelt kan - planlegge hjemreisen. - - Kjøpesentre - - Sett opp Tavla på sentrale steder slik at kunder - alltid har oppdatert informasjon om offentlig - transport. - -
+ + + Tilpass tekststørrelse, fargetema, logo og + hvilken informasjon som skal vises, slik at + tavlen(e) passer til dine omgivelser og dine + besøkende sine behov. + + + Velg om du vil vise hele kollektivtilbudet fra + et stoppested, eller kun vise spesifikke linjer, + stoppesteder eller fremkomstmidler. + + + Opprett organisasjoner (mapper) for å samle + tavler og gi andre tilgang til å administrere + dem. Her kan du også velge standardinnstillinger + som vil gjelde alle tavler i organisasjonen. + + + + Eksempler på bruk + Hoteller + + Plasser Tavla i resepsjonsområdet slik at gjester + kan se sanntidsinformasjon om avganger fra + stoppesteder i nærheten. + + Arbeidsplasser + + Vis Tavla på informasjonspunkter eller skjermer ved + inngangen slik at besøkende enkelt kan planlegge + hjemreisen. + + Kjøpesentre + + Sett opp Tavla på sentrale steder slik at kunder + alltid har oppdatert informasjon om offentlig + transport. +
diff --git a/tavla/src/Shared/utils/previewBoards.ts b/tavla/src/Shared/utils/previewBoards.ts index c3dcb096f..91cacc847 100644 --- a/tavla/src/Shared/utils/previewBoards.ts +++ b/tavla/src/Shared/utils/previewBoards.ts @@ -6,13 +6,20 @@ export const previewBoards: TBoard[] = [ meta: { fontSize: 'medium', }, + theme: 'dark', tiles: [ { - columns: ['line', 'destination', 'time', 'realtime'], - placeId: 'NSR:StopPlace:58260', - name: 'Dalsbergstien', + columns: [ + 'line', + 'destination', + 'time', + 'realtime', + 'platform', + ], + placeId: 'NSR:StopPlace:61291', + name: 'Stavanger stasjon, Stavanger', type: 'stop_place', - uuid: 'uoO6yA-S0ztol4auy_QSv', + uuid: '1s9E_8qW_e2-cWii94rl4', }, ], }, @@ -25,10 +32,17 @@ export const previewBoards: TBoard[] = [ tiles: [ { columns: ['line', 'destination', 'time', 'realtime'], - placeId: 'NSR:StopPlace:58366', - name: 'Jernbanetorget', + placeId: 'NSR:StopPlace:58382', + name: 'Aker brygge, Oslo', type: 'stop_place', - uuid: 'uoO6yA-S0ztol4auy_QSv', + uuid: 'lqfe6yE6hStaM8yWbfmb2', + whitelistedLines: [ + 'RUT:Line:3701', + 'RUT:Line:3702', + 'RUT:Line:3810', + 'RUT:Line:3820', + 'RUT:Line:3821', + ], }, ], }, @@ -37,20 +51,34 @@ export const previewBoards: TBoard[] = [ meta: { fontSize: 'medium', }, + theme: 'light', tiles: [ { - columns: [ - 'line', - 'destination', - 'time', - 'realtime', - 'arrivalTime', - ], - placeId: 'NSR:StopPlace:58767', - name: 'Festøya ferjekai, Ørsta', + columns: ['line', 'destination', 'time', 'realtime'], + placeId: 'NSR:StopPlace:58856', + name: 'Lysaker stasjon, Bærum', + type: 'stop_place', + uuid: 'WPLoeygP7d173RifiQDvd', + walkingDistance: { + distance: 868, + visible: true, + }, + }, + ], + }, + { + id: 'aLr7VN03RDThtjYYfd9v', + meta: { + fontSize: 'medium', + }, + theme: 'light', + tiles: [ + { + columns: ['line', 'destination', 'time', 'realtime'], + placeId: 'NSR:StopPlace:59261', + name: 'Trondheim lufthavn, Stjørdal', type: 'stop_place', - uuid: 'syD_TXEoo5x3R8ar2gB_V', - whitelistedLines: ['MOR:Line:1049', 'MOR:Line:1069'], + uuid: 'iELiaTnG7uxRM6aN2Ba9A', }, ], },