feat(deviation): deviations for stop place (#1365)

entur · Dec 12, 2023 · 5f21833 · 5f21833
1 parent 13496c2
commit 5f21833
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 27 deletions.
diff --git a/next-tavla/src/Board/scenarios/QuayTile/index.tsx b/next-tavla/src/Board/scenarios/QuayTile/index.tsx
@@ -43,11 +43,14 @@ export function QuayTile({
     ]
         .filter(isNotNullOrUndefined)
         .join(' ')
-
     return (
         <Tile className={classes.quayTile}>
             <TableHeader heading={heading} />
-            <Table columns={columns} departures={data.quay.estimatedCalls} />
+            <Table
+                columns={columns}
+                departures={data.quay.estimatedCalls}
+                situations={data.quay.situations}
+            />
         </Tile>
     )
 }
diff --git a/next-tavla/src/Board/scenarios/StopPlaceTile/index.tsx b/next-tavla/src/Board/scenarios/StopPlaceTile/index.tsx
@@ -36,6 +36,7 @@ export function StopPlaceTile({
             <TableHeader heading={data.stopPlace.name} />
             <Table
                 departures={data.stopPlace.estimatedCalls}
+                situations={data.stopPlace.situations}
                 columns={columns}
             />
         </Tile>

diff --git a/next-tavla/src/Board/scenarios/Table/components/Situations.tsx b/next-tavla/src/Board/scenarios/Table/components/Situations.tsx
@@ -1,20 +1,11 @@
 import { Situation } from './Situation'
-import { useEffect, useState } from 'react'
 import { TSituationFragment } from 'graphql/index'
+import { useCycler } from '../useCycler'
 
 function Situations({ situations }: { situations: TSituationFragment[] }) {
-    const [index, setIndex] = useState(0)
-
+    const index = useCycler(situations)
     const numberOfSituations = situations.length
 
-    useEffect(() => {
-        if (numberOfSituations <= 1) {
-            return
-        }
-        const interval = setInterval(() => setIndex((i) => i + 1), 5000)
-        return () => clearInterval(interval)
-    }, [numberOfSituations])
-
     if (!situations.length) return null
     return <Situation situation={situations[index % numberOfSituations]} />
 }

diff --git a/next-tavla/src/Board/scenarios/Table/components/StopPlaceDeviation/index.tsx b/next-tavla/src/Board/scenarios/Table/components/StopPlaceDeviation/index.tsx
@@ -0,0 +1,23 @@
+import { TSituationFragment } from 'graphql/index'
+import { useCycler } from '../../useCycler'
+import { Situation } from '../Situation'
+import classes from './styles.module.css'
+
+function StopPlaceDeviation({
+    situations,
+}: {
+    situations?: TSituationFragment[]
+}) {
+    const index = useCycler(situations)
+    const numberOfSituations = situations?.length ?? 0
+
+    if (!situations || numberOfSituations === 0) return null
+
+    return (
+        <div className={classes.deviation}>
+            <Situation situation={situations[index % numberOfSituations]} />
+        </div>
+    )
+}
+
+export { StopPlaceDeviation }
diff --git a/next-tavla/src/Board/scenarios/Table/components/StopPlaceDeviation/styles.module.css b/next-tavla/src/Board/scenarios/Table/components/StopPlaceDeviation/styles.module.css
@@ -0,0 +1,11 @@
+.deviation {
+    padding-bottom: 0.5em;
+}
+
+.header {
+    color: var(--table-header-color);
+    font-size: 0.7em;
+    margin-left: 0.25em;
+    margin-right: 0.25em;
+    padding-bottom: 0.5em;
+}
diff --git a/next-tavla/src/Board/scenarios/Table/index.tsx b/next-tavla/src/Board/scenarios/Table/index.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { TDepartureFragment } from 'graphql/index'
+import { TDepartureFragment, TSituationFragment } from 'graphql/index'
 import React from 'react'
 import { Destination } from './components/Destination'
 import classes from './styles.module.css'
@@ -13,13 +13,16 @@ import { Platform } from './components/Platform'
 import { ExpectedTime } from './components/Time/ExpectedTime'
 import { Deviation } from './components/Deviation'
 import { Line } from './components/Line'
+import { StopPlaceDeviation } from './components/StopPlaceDeviation'
 
 function Table({
     departures,
     columns,
+    situations,
 }: {
     departures: TDepartureFragment[]
     columns?: TColumn[]
+    situations?: TSituationFragment[]
 }) {
     if (!columns || !isArray(columns))
         return (
@@ -29,19 +32,24 @@ function Table({
         )
 
     return (
-        <div className={classes.table}>
-            <DeparturesContext.Provider value={departures}>
-                {columns.includes('aimedTime') && <AimedTime />}
-                {columns.includes('arrivalTime') && <ArrivalTime />}
-                {columns.includes('line') && <Line />}
-                {columns.includes('destination') && (
-                    <Destination deviations={!columns.includes('deviations')} />
-                )}
-                {columns.includes('deviations') && <Deviation />}
-                {columns.includes('platform') && <Platform />}
-                {columns.includes('time') && <ExpectedTime />}
-                {columns.includes('realtime') && <RealTime />}
-            </DeparturesContext.Provider>
+        <div className="flexColumn">
+            <StopPlaceDeviation situations={situations} />
+            <div className={classes.table}>
+                <DeparturesContext.Provider value={departures}>
+                    {columns.includes('aimedTime') && <AimedTime />}
+                    {columns.includes('arrivalTime') && <ArrivalTime />}
+                    {columns.includes('line') && <Line />}
+                    {columns.includes('destination') && (
+                        <Destination
+                            deviations={!columns.includes('deviations')}
+                        />
+                    )}
+                    {columns.includes('deviations') && <Deviation />}
+                    {columns.includes('platform') && <Platform />}
+                    {columns.includes('time') && <ExpectedTime />}
+                    {columns.includes('realtime') && <RealTime />}
+                </DeparturesContext.Provider>
+            </div>
         </div>
     )
 }

diff --git a/next-tavla/src/Board/scenarios/Table/useCycler.ts b/next-tavla/src/Board/scenarios/Table/useCycler.ts
@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react'
+
+function useCycler<T>(array: T[] | undefined, step = 5000) {
+    const [index, setIndex] = useState(0)
+
+    const length = array?.length ?? 0
+
+    useEffect(() => {
+        if (length <= 1) {
+            return
+        }
+        const interval = setInterval(() => setIndex((i) => i + 1), step)
+        return () => clearInterval(interval)
+    }, [length, step])
+    return index
+}
+
+export { useCycler }
diff --git a/next-tavla/src/Shared/graphql/index.ts b/next-tavla/src/Shared/graphql/index.ts
@@ -136,6 +136,20 @@ export type TGetQuayQuery = {
                 }>
             }>
         }>
+        situations: Array<{
+            __typename?: 'PtSituationElement'
+            id: string
+            description: Array<{
+                __typename?: 'MultilingualString'
+                value: string
+                language: string | null
+            }>
+            summary: Array<{
+                __typename?: 'MultilingualString'
+                value: string
+                language: string | null
+            }>
+        }>
         lines: Array<{
             __typename?: 'Line'
             id: string
@@ -248,6 +262,20 @@ export type TStopPlaceQuery = {
                 }>
             }>
         }>
+        situations: Array<{
+            __typename?: 'PtSituationElement'
+            id: string
+            description: Array<{
+                __typename?: 'MultilingualString'
+                value: string
+                language: string | null
+            }>
+            summary: Array<{
+                __typename?: 'MultilingualString'
+                value: string
+                language: string | null
+            }>
+        }>
     } | null
 }
 
@@ -384,6 +412,9 @@ export const GetQuayQuery = new TypedDocumentString(`
     ) {
       ...departure
     }
+    situations {
+      ...situation
+    }
   }
 }
     fragment departure on EstimatedCall {
@@ -480,6 +511,9 @@ export const StopPlaceQuery = new TypedDocumentString(`
     ) {
       ...departure
     }
+    situations {
+      ...situation
+    }
   }
 }
     fragment departure on EstimatedCall {

diff --git a/next-tavla/src/Shared/graphql/queries/quay.graphql b/next-tavla/src/Shared/graphql/queries/quay.graphql
@@ -16,5 +16,8 @@ query getQuay(
         ) {
             ...departure
         }
+        situations {
+            ...situation
+        }
     }
 }
diff --git a/next-tavla/src/Shared/graphql/queries/stopPlace.graphql b/next-tavla/src/Shared/graphql/queries/stopPlace.graphql
@@ -14,5 +14,8 @@ query StopPlace(
         ) {
             ...departure
         }
+        situations {
+            ...situation
+        }
     }
 }