F/jc decaux dashboard signing (entur#740)

* Squashed commit of the following:

commit d77a41f
Author: Ferdinand Løberg <[email protected]>
Date:   Fri Oct 14 17:55:06 2022 +0200

    Styling changes
    Changed BusTile classnames to use poster- prefix for consistency
    Some style changes to simplify css
    Visual bug fix of long route numbers
    Removed unused styling

commit ca69b91
Author: Ferdinand Løberg <[email protected]>
Date:   Fri Oct 14 16:07:30 2022 +0200

    Moved NumberSpan to separate NumberDisplay component

commit 8b47f6b
Author: Ferdinand Løberg <[email protected]>
Date:   Fri Oct 14 15:54:19 2022 +0200

    Moved LastUpdated styling into LastUpdated.scss
    Changed classnames to use poster- prefix for consistency
    Changed scss to use sass-style nesting
    Changed mobility heading and icon order in to reflect design sketches

commit 902ac83
Author: birgitte swensson <[email protected]>
Date:   Fri Oct 14 14:49:54 2022 +0200

    Linting + removed unused code

commit 332da31
Merge: 881e9e3 4f8a914
Author: birgitte swensson <[email protected]>
Date:   Fri Oct 14 14:44:33 2022 +0200

    Merge branch 'master' into f/JCDecaux-dashboard

commit 881e9e3
Author: birgitte swensson <[email protected]>
Date:   Fri Oct 14 14:25:33 2022 +0200

    remove inline styling

commit b3cc530
Author: birgitte swensson <[email protected]>
Date:   Fri Oct 14 14:02:14 2022 +0200

    reaming footer to poster footer + fix in className at poster-tsx

commit 6e3146f
Author: birgitte swensson <[email protected]>
Date:   Fri Oct 14 13:00:46 2022 +0200

    also for bike

commit 3e2a4ff
Author: birgitte swensson <[email protected]>
Date:   Fri Oct 14 12:59:28 2022 +0200

    poster specific class names

commit ee2f138
Author: birgitte swensson <[email protected]>
Date:   Fri Oct 14 12:52:59 2022 +0200

    moving common code from scooter and car to poster

commit cdbe515
Author: birgitte swensson <[email protected]>
Date:   Fri Oct 14 12:43:30 2022 +0200

    moved description of car/scooter/bike + their outer container to poster.
    Reducing rendundant styling.
    Removed scss files as a result of moving common syling to poster.scss

commit 0bb464f
Author: birgitte swensson <[email protected]>
Date:   Fri Oct 14 11:05:12 2022 +0200

    removed inline styling

commit ac88534
Author: birgitte swensson <[email protected]>
Date:   Fri Oct 14 10:58:35 2022 +0200

    removed rendundant mobility tiles wrapper containers

commit 273783d
Author: birgitte swensson <[email protected]>
Date:   Fri Oct 14 10:10:18 2022 +0200

    rename mobility-tile-wrapper classname to specific mobility

commit 1b8ea81
Author: Ferdinand Løberg <[email protected]>
Date:   Thu Oct 13 14:51:50 2022 +0200

    Started styling changes

commit e78963a
Author: Ferdinand Løberg <[email protected]>
Date:   Thu Oct 13 13:47:45 2022 +0200

    Changed from using poster variable in settings to having poster as a dashboard type

commit 4e4211f
Author: Ferdinand Løberg <[email protected]>
Date:   Thu Oct 13 13:33:58 2022 +0200

    Changed name of dashboard component from jcdecaux to poster

commit 25d3d65
Author: Ferdinand Løberg <[email protected]>
Date:   Wed Oct 12 15:22:42 2022 +0200

    Linting

commit 848c046
Merge: 4bbd5d7 f3560db
Author: Ferdinand Løberg <[email protected]>
Date:   Wed Oct 12 15:16:14 2022 +0200

    Merge branch 'master' of github.com:entur/tavla into f/JCDecaux-dashboard

commit 4bbd5d7
Author: Ferdinand Løberg <[email protected]>
Date:   Wed Oct 12 15:04:01 2022 +0200

    Removed unneccessar comments.
    Deleted old app_images.svg.
    Linting
    Other minor changes

commit 79ccb71
Author: Ferdinand Løberg <[email protected]>
Date:   Wed Oct 12 14:22:36 2022 +0200

    Removed 2 from useBikeRentalStations function name

commit b83f916
Author: Ferdinand Løberg <[email protected]>
Date:   Wed Oct 12 13:47:09 2022 +0200

    Changed from nested ternary operators to switch statement.
    Removed unnecessary appImages component.
    Removed unnecessary null return types.

commit dec9b6c
Author: Ferdinand Løberg <[email protected]>
Date:   Wed Oct 12 13:09:04 2022 +0200

    structural changes

commit 32a686a
Author: birgitte swensson <[email protected]>
Date:   Tue Oct 11 11:46:18 2022 +0200

    removed comments and unused code

commit ce5f0a5
Author: birgitte swensson <[email protected]>
Date:   Tue Oct 11 10:47:00 2022 +0200

    lint fix

commit 5dc443a
Author: birgitte swensson <[email protected]>
Date:   Tue Oct 11 10:24:00 2022 +0200

    Rename files and change default export

commit ad9342b
Author: birgitte swensson <[email protected]>
Date:   Tue Oct 11 10:12:55 2022 +0200

    Fix lint issues
    Cleanup in BusTile

commit 0808fb0
Merge: 4a4badb dcf04d0
Author: birgitte swensson <[email protected]>
Date:   Tue Oct 11 09:58:45 2022 +0200

    Merge branch 'master' into f/JCDecaux-dashboard

commit 4a4badb
Merge: c988877 201864e
Author: birgitte swensson <[email protected]>
Date:   Mon Oct 10 12:12:28 2022 +0200

    Merge branch 'master' into f/JCDecaux-dashboard

commit c988877
Author: Katarina Van De Pontseele <[email protected]>
Date:   Fri Oct 7 14:25:00 2022 +0200

    Fullført innhenting av bussdata

commit d8edaf2
Author: Katarina Van De Pontseele <[email protected]>
Date:   Thu Oct 6 14:31:35 2022 +0200

    Har klart å hente inn noe bussdata

commit 34e387f
Author: birgitte swensson <[email protected]>
Date:   Wed Oct 5 10:41:21 2022 +0200

    ..

commit 66e43ef
Author: birgitte swensson <[email protected]>
Date:   Wed Oct 5 10:40:09 2022 +0200

    small changes in lining

commit 78693c9
Author: birgitte swensson <[email protected]>
Date:   Wed Oct 5 10:33:30 2022 +0200

    minor changes

commit ee7f8d0
Author: birgitte swensson <[email protected]>
Date:   Wed Oct 5 10:31:44 2022 +0200

    Added busTile with mockup data

commit e4ee1c4
Merge: c44dda3 b1adb0f
Author: Katarina Van De Pontseele <[email protected]>
Date:   Tue Oct 4 11:53:18 2022 +0200

    Merge branch 'f/JCDecaux-dashboard' of github.com:entur/tavla into f/JCDecaux-dashboard

commit c44dda3
Author: Katarina Van De Pontseele <[email protected]>
Date:   Tue Oct 4 11:50:35 2022 +0200

    Started adding the bus tile

commit b1adb0f
Author: Ferdinand Løberg <[email protected]>
Date:   Mon Oct 3 12:46:07 2022 +0200

    Clean code refactoring notes

commit 7185be8
Author: Ferdinand Løberg <[email protected]>
Date:   Mon Oct 3 10:58:10 2022 +0200

    Changed from SVG to webp, 2.5mb to 32kb smaller filesize

commit 8c72484
Author: Ferdinand Løberg <[email protected]>
Date:   Mon Oct 3 10:51:21 2022 +0200

    Removed header on JCDecaux dashboard

commit 8074cdb
Author: Ferdinand Løberg <[email protected]>
Date:   Mon Oct 3 10:11:33 2022 +0200

    Small change to how JCDecaux dashboard is shown, uses getDashboardComponent like other dashes

commit 2665f0c
Author: Ferdinand Løberg <[email protected]>
Date:   Thu Sep 29 12:23:04 2022 +0200

    refactored bike data fetching and made it update every 30 seconds

commit d11e0fe
Author: Ferdinand Løberg <[email protected]>
Date:   Tue Sep 27 17:36:26 2022 +0200

    Styling changes to allow rotation

commit 1774d04
Author: Katarina Van De Pontseele <[email protected]>
Date:   Tue Sep 27 16:22:42 2022 +0200

    Started rotating the JCD screen

commit 7fc03f7
Author: Katarina Van De Pontseele <[email protected]>
Date:   Tue Sep 27 14:18:39 2022 +0200

    Added more features on MVP for JCDecaux screen

commit 6d917c7
Author: anniken <[email protected]>
Date:   Mon Sep 26 14:55:11 2022 +0200

    JCDecaux boolean variable added in firebase, which can be set by admin manually to choose jcdecaux mode for screen

commit 03475f9
Author: anniken <[email protected]>
Date:   Mon Sep 26 13:08:27 2022 +0200

    replaced hard-coded timestamp with 'date.toLocalTimeString' to get real time timestamp

commit 164a8c6
Author: Katarina Van De Pontseele <[email protected]>
Date:   Thu Sep 22 14:56:17 2022 +0200

    Laget en hardkodet MVP av JCDecaux-dashboard

commit 79dcb31
Author: Katarina Van De Pontseele <[email protected]>
Date:   Wed Sep 21 10:53:14 2022 +0200

    Laget mappestruktur for JCDecaux-dashboardet og lagt det inn som automatisk dashboard i App.tsx

* style fix

* prettier fix

src/assets/icons/EnturLogo.tsx

@@ -1,16 +1,26 @@
 import React from 'react'
 import EnturWhite from '../logos/Enturlogo_white.svg'
 import EnturBlack from '../logos/Enturlogo_black.svg'
+import EnturContrast from '../logos/Enturlogo_contrast.svg'
 
 function EnturLogo({ className, style, height }: Props): JSX.Element {
-    const enturLogo = style === 'black' ? EnturBlack : EnturWhite
+    const enturLogo = () => {
+        switch (style) {
+            case 'black':
+                return EnturBlack
+            case 'white':
+                return EnturWhite
+            default:
+                return EnturContrast
+        }
+    }
 
-    return <img src={enturLogo} height={height} className={className} />
+    return <img src={enturLogo()} height={height} className={className} />
 }
 
 interface Props {
     className?: string
-    style?: 'white' | 'black'
+    style?: 'white' | 'black' | 'contrast'
     height?: string
 }
 

src/containers/Admin/EditTab/RealtimeDataPanel/RealTimeDataPanel.tsx

@@ -11,7 +11,6 @@ import {
     transportModeNameMapper,
 } from '../../../../utils'
 import { useSettingsContext } from '../../../../settings'
-//TODO: ENDRE SCSS FILNAVNET TIL Å VÆRE FELLES FOR PERMANENTLINESPANEL OG REALTIMEPANEL
 import './PermanentLinesPanel.scss'
 import { PermanentLinesPanel } from './PermanentLinesPanel'
 

src/containers/App.tsx

@@ -25,6 +25,7 @@ import {
 } from '../settings/LocalStorage'
 import { isMobileWeb } from '../utils'
 import { Direction, ToastProvider } from '../types'
+import { Poster } from '../dashboards/Poster/Poster'
 import { AdminPage } from './Admin/AdminPage'
 import { PageDoesNotExist } from './Error/ErrorPages'
 import { LandingPage } from './LandingPage/LandingPage'
@@ -47,6 +48,8 @@ function getDashboardComponent(
             return MapDashboard
         case 'BusStop':
             return BusStopDashboard
+        case 'Poster':
+            return Poster
         default:
             return CompactDashboard
     }
@@ -234,7 +237,11 @@ const Content = (): JSX.Element => {
                             })}
                         >
                             <ToastProvider>
-                                <Header />
+                                {settings?.dashboard === 'Poster' ? (
+                                    <></>
+                                ) : (
+                                    <Header />
+                                )}
                                 <Routes>
                                     <Route path="/" element={<LandingPage />} />
                                     <Route

src/dashboards/Poster/Poster.scss

@@ -0,0 +1,91 @@
+.poster {
+    display: flex;
+    flex-direction: column;
+    height: 1920px;
+    color: white;
+
+    &-content-wrapper {
+        height: 100%;
+        padding: 0 4rem 0 4rem;
+    }
+
+    &-next-bus {
+        font-size: 2.5rem;
+        padding-bottom: 2.5rem;
+    }
+
+    &-header {
+        display: flex;
+        justify-content: flex-end;
+        padding: 5rem 5rem 0 0;
+    }
+
+    &-heading-wrapper {
+        padding: 4rem 0 4rem 0;
+    }
+
+    &-heading {
+        font-size: 8rem;
+    }
+
+    &-mobility-tiles-wrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    &-mobility-tile {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    &-mobility-description {
+        display: flex;
+        flex-direction: column;
+        margin-top: 2rem;
+        gap: 2rem;
+        width: 26rem;
+
+        &-heading {
+            font-size: 3rem;
+            margin: 0;
+        }
+
+        &-area {
+            font-size: 2rem;
+            line-height: 150%;
+            margin: 0;
+        }
+    }
+
+    &-mobility-vehicles-box {
+        display: flex;
+        border-radius: 12px;
+        background-color: var(--tavla-box-background-color);
+        justify-content: space-between;
+        align-items: center;
+        font-size: 8rem;
+        height: 13rem;
+        width: 26rem;
+        padding: 3rem;
+
+        &-overflow {
+            display: inline-block;
+
+            span {
+                height: 40px;
+                display: table-cell;
+                vertical-align: middle;
+            }
+
+            &-number {
+                font-size: 6rem;
+            }
+
+            &-symbol {
+                font-size: 2rem;
+            }
+        }
+    }
+}

src/dashboards/Poster/Poster.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react'
+import { useBikeRentalStations } from '../../logic'
+import { EnturLogo } from '../../assets/icons/EnturLogo'
+import './Poster.scss'
+import { LastUpdated } from './components/LastUpdated/LastUpdated'
+import { BusTile } from './components/BusTile/BusTile'
+import { CarTile } from './components/CarTile/CarTile'
+import { PosterFooter } from './components/PosterFooter/PosterFooter'
+import { ScooterTile } from './components/ScooterTile/ScooterTile'
+
+const Poster = (): JSX.Element => {
+    const bikeRentalStations = useBikeRentalStations()
+    const [totalNumberOfBikes, setTotalNumberOfBikes] = useState(0)
+    useEffect(() => {
+        const tempNumberOfBikes = bikeRentalStations?.reduce(
+            (numberOfBikes, station) =>
+                numberOfBikes + station.numBikesAvailable,
+            0,
+        )
+        setTotalNumberOfBikes(tempNumberOfBikes || 0)
+    }, [bikeRentalStations])
+
+    return (
+        <div className="poster">
+            <div className="poster-header">
+                <EnturLogo />
+            </div>
+            <div className="poster-content-wrapper">
+                <div className="poster-heading-wrapper">
+                    <h1 className="poster-heading">I nærheten</h1>
+                    <LastUpdated />
+                </div>
+                <div className="poster-next-bus">Neste buss</div>
+                <BusTile />
+
+                <div className="poster-mobility-tiles-wrapper">
+                    {/* Todo: change this to use biketile and style */}
+                    <div className="poster-mobility-tile">
+                        <div className="poster-mobility-description">
+                            <h2 className="poster-mobility-description-heading">
+                                Delebil
+                            </h2>
+                            <h3 className="poster-mobility-description-area">
+                                Parkeringsplassen ved Vestveien
+                            </h3>
+                        </div>
+                        <div className="poster-mobility-vehicles-box">
+                            <CarTile numberOfCars={totalNumberOfBikes} />
+                        </div>
+                    </div>
+                    <div className="poster-mobility-tile">
+                        <div className="poster-mobility-description">
+                            <h2 className="poster-mobility-description-heading">
+                                Elsparkesykler
+                            </h2>
+                            <h3 className="poster-mobility-description-area">
+                                Innen 500 meters radius
+                            </h3>
+                        </div>
+                        <div className="poster-mobility-vehicles-box">
+                            <ScooterTile numberOfScooters={20} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <PosterFooter />
+        </div>
+    )
+}
+
+export { Poster }

src/dashboards/Poster/components/BikeTile/BikeTile.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { CityBikeIcon } from '@entur/icons'
+import { NumberDisplay } from '../NumberDisplay/NumberDisplay'
+
+const BikeTile = ({ numberOfBikes }: BikeTileProps) => (
+    <>
+        <CityBikeIcon />
+        <NumberDisplay numberOfVehicles={numberOfBikes} />
+    </>
+)
+
+interface BikeTileProps {
+    numberOfBikes: number
+}
+
+export { BikeTile }

src/dashboards/Poster/components/BusTile/BusTile.scss

@@ -0,0 +1,46 @@
+.poster-bus-tile {
+    border-radius: 12px;
+    background-color: var(--tavla-box-background-color);
+    justify-content: space-between;
+    align-items: center;
+    font-size: 2.5rem;
+    width: 100%;
+    margin-bottom: 10%;
+    display: inline-block;
+    padding: 1rem;
+
+    &-row {
+        margin: 1rem;
+        display: flex;
+    }
+
+    &-route {
+        background-color: #c5044e;
+        border-radius: 10px;
+        width: 12rem;
+        height: 4.5rem;
+    }
+
+    &-route-number {
+        float: right;
+        line-height: normal;
+        margin: 1rem 1rem 0 0;
+    }
+
+    &-icon {
+        color: white;
+        height: 4rem;
+        width: 4rem;
+        margin-left: 1rem;
+    }
+
+    &-destination {
+        margin: 1.5rem;
+    }
+
+    &-time {
+        margin: 1.5rem;
+        margin-left: auto;
+        font-weight: bold;
+    }
+}

src/dashboards/Poster/components/BusTile/BusTile.tsx

@@ -0,0 +1,49 @@
+import React, { useMemo } from 'react'
+import { compareAsc } from 'date-fns'
+import { BusIcon } from '@entur/icons'
+import { TransportMode } from '@entur/sdk'
+import { useStopPlacesWithDepartures } from '../../../../logic'
+import './BusTile.scss'
+
+function BusTile(): JSX.Element {
+    const stopPlacesWithDepartures = useStopPlacesWithDepartures()
+
+    const busDepartures = useMemo(
+        () =>
+            stopPlacesWithDepartures
+                ?.flatMap((stopPlace) => stopPlace.departures)
+                .filter((departure) => departure.type === TransportMode.BUS)
+                .sort((a, b) => compareAsc(a.departureTime, b.departureTime))
+                .slice(0, 3) ?? [],
+        [stopPlacesWithDepartures],
+    )
+
+    return (
+        <div className="poster-bus-tile">
+            {busDepartures.map((departure) => {
+                const routeNumber = departure.route.split(' ')[0]
+                const routeDestination = departure.route
+                    .split(' ')
+                    .slice(1)
+                    .join(' ')
+
+                return (
+                    <div key={departure.id} className="poster-bus-tile-row">
+                        <div className="poster-bus-tile-route">
+                            <BusIcon className="poster-bus-tile-icon" />
+                            <div className="poster-bus-tile-route-number">
+                                {routeNumber}
+                            </div>
+                        </div>
+                        <p className="poster-bus-tile-destination">
+                            {routeDestination}
+                        </p>
+                        <p className="poster-bus-tile-time">{departure.time}</p>
+                    </div>
+                )
+            })}
+        </div>
+    )
+}
+
+export { BusTile }

src/dashboards/Poster/components/CarTile/CarTile.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { CarIcon } from '@entur/icons'
+import { NumberDisplay } from '../NumberDisplay/NumberDisplay'
+
+const CarTile = ({ numberOfCars }: CarTileProps) => (
+    <>
+        <CarIcon />
+        <NumberDisplay numberOfVehicles={numberOfCars} />
+    </>
+)
+
+interface CarTileProps {
+    numberOfCars: number
+}
+
+export { CarTile }

src/dashboards/Poster/components/LastUpdated/LastUpdated.scss

@@ -0,0 +1,9 @@
+.poster-last-updated {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+
+    &-heading {
+        font-size: 2rem;
+    }
+}