feat(demo): possible to try tavla without creating a user

next-tavla/app/(admin)/components/CreateBoard/components/StopPlaceList.tsx

@@ -11,8 +11,8 @@ function StopPlaceList({
 }) {
     if (!tiles || tiles.length === 0)
         return (
-            <Paragraph margin="none" className="mt-6">
-                Du har ikke lagt til noen stoppesteder enda.
+            <Paragraph className="!mt-6">
+                Du har ikke lagt til noen stoppesteder ennå.
             </Paragraph>
         )
     return (

next-tavla/app/(admin)/components/Footer/index.tsx

@@ -51,6 +51,11 @@ function Footer() {
                     </div>
                     <div className="flex flex-col gap-4">
                         <Heading3>Informasjon</Heading3>
+                        <div>
+                            <EnturLink href="/demo" as={Link}>
+                                Prøv Tavla
+                            </EnturLink>
+                        </div>
                         <div className="flex flex-row gap-1 items-center">
                             <EnturLink
                                 as={Link}

next-tavla/app/(admin)/components/Login/index.tsx

@@ -10,6 +10,7 @@ import { Start } from './Start'
 import { Create } from './Create'
 import { usePageParam } from 'app/(admin)/hooks/usePageParam'
 import { Reset } from './Reset'
+import { TopNavigationItem } from '@entur/menu'
 
 type TLoginPage = 'start' | 'email' | 'create' | 'reset'
 
@@ -33,7 +34,14 @@ function Login({ loggedIn }: { loggedIn: boolean }) {
         )
 
     return (
-        <>
+        <div className="flex flex-row gap-10">
+            <TopNavigationItem
+                active={pathname?.includes('/demo')}
+                as={Link}
+                href="/demo"
+            >
+                Prøv Tavla
+            </TopNavigationItem>
             <IconButton
                 as={Link}
                 href="?login"
@@ -70,7 +78,7 @@ function Login({ loggedIn }: { loggedIn: boolean }) {
                 </div>
                 <Page page={pageParam as TLoginPage} />
             </Modal>
-        </>
+        </div>
     )
 }
 

next-tavla/app/(admin)/components/SideNavBar.tsx

@@ -31,14 +31,14 @@ function SideNavBar({ loggedIn }: { loggedIn: boolean }) {
                 open={isOpen}
                 onDismiss={() => setIsOpen(false)}
                 size="medium"
-                className="h-full w-9/12 fixed top-0 left-0 py-10 !max-h-full !rounded-none !p-0 overflow-visible"
+                className="!h-full !w-9/12 !fixed !top-0 !left-0 py-10 !max-h-full !rounded-none !p-0 overflow-visible"
             >
-                <SideNavigation className="h-full pt-10">
+                <SideNavigation className="h-full !pt-10">
                     <div className="pl-10">
                         <Link href="/" aria-label="Tilbake til landingssiden">
                             <Image src={TavlaLogoBlue} height={22} alt="" />
                         </Link>
-                        <Heading2 className="mt-16 mb-4">Meny</Heading2>
+                        <Heading2 className="!mt-16 !mb-4">Meny</Heading2>
                     </div>
 
                     <div className="bg-secondary">

next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx

@@ -20,9 +20,9 @@ import { TransportIcon } from 'components/TransportIcon'
 import { isArray, uniqBy } from 'lodash'
 import Image from 'next/image'
 import { usePostHog } from 'posthog-js/react'
-import { useState } from 'react'
+import { Dispatch, SetStateAction, useState } from 'react'
 import { Columns, TColumn } from 'types/column'
-import { TBoardID } from 'types/settings'
+import { TBoard, TBoardID } from 'types/settings'
 import { getBoard, getWalkingDistanceTile } from '../../actions'
 import { deleteTile, getOrganizationForBoard, saveTile } from './actions'
 import { useLines } from './useLines'
@@ -36,10 +36,14 @@ function TileCard({
     bid,
     tile,
     address,
+    demoBoard,
+    setDemoBoard,
 }: {
     bid: TBoardID
     tile: TTile
     address?: TLocation
+    demoBoard?: TBoard
+    setDemoBoard?: Dispatch<SetStateAction<TBoard>>
 }) {
     const posthog = usePostHog()
     const [isOpen, setIsOpen] = useState(false)
@@ -85,6 +89,24 @@ function TileCard({
         else posthog.capture('EDIT_COLUMN_CHANGE')
     }
 
+    const saveTileToDemoBoard = (newTile: TTile) => {
+        if (!demoBoard) return null
+        const oldTileIndex = demoBoard.tiles.findIndex(
+            (tile) => tile.uuid == newTile.uuid,
+        )
+        if (oldTileIndex === -1) return null
+        demoBoard.tiles[oldTileIndex] = newTile
+        setDemoBoard && setDemoBoard({ ...demoBoard })
+    }
+
+    const removeTileFromDemoBoard = (tile: TTile) => {
+        if (!demoBoard) return null
+        const remainingTiles = demoBoard.tiles.filter(
+            (t) => t.uuid !== tile.uuid,
+        )
+        setDemoBoard && setDemoBoard({ ...demoBoard, tiles: remainingTiles })
+    }
+
     return (
         <div>
             <div
@@ -103,7 +125,9 @@ function TileCard({
                 <div className="flex flex-row gap-4">
                     <SecondarySquareButton
                         onClick={async () => {
-                            await deleteTile(bid, tile)
+                            bid === 'demo'
+                                ? removeTileFromDemoBoard(tile)
+                                : await deleteTile(bid, tile)
                         }}
                         aria-label="Slett stoppested"
                     >
@@ -165,7 +189,10 @@ function TileCard({
                                     ),
                                 )
                             }
-                            saveTile(bid, newTile)
+
+                            bid === 'demo'
+                                ? saveTileToDemoBoard(newTile)
+                                : saveTile(bid, newTile)
                         }}
                         onSubmit={reset}
                         onInput={() => setChanged(true)}
@@ -178,8 +205,9 @@ function TileCard({
                         <div className="flex flex-col">
                             {!address?.name && (
                                 <Label className="!text-error">
-                                    Du må legge til en lokasjon for å kunne skru
-                                    på gåavstand
+                                    {demoBoard
+                                        ? 'Logg inn for å få tilgang til funksjonaliteten'
+                                        : 'Du må legge til en lokasjon for å kunne skru på gåavstand'}
                                 </Label>
                             )}
                             <Switch

next-tavla/app/(admin)/hooks/useLocalStorage.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react'
+
+export const useLocalStorage = <T>(key: string, defaultValue: T) => {
+    const [localStorageValue, setLocalStorageValue] = useState(() => {
+        try {
+            const value = localStorage.getItem(key)
+
+            if (value) {
+                return JSON.parse(value)
+            } else {
+                localStorage.setItem(key, JSON.stringify(defaultValue))
+                return defaultValue
+            }
+        } catch (error) {
+            localStorage.setItem(key, JSON.stringify(defaultValue))
+            return defaultValue
+        }
+    })
+
+    useEffect(() => {
+        localStorage.setItem(key, JSON.stringify(localStorageValue))
+    }, [key, localStorageValue])
+
+    return [localStorageValue, setLocalStorageValue]
+}
+
+export default useLocalStorage

next-tavla/app/(admin)/layout.tsx

@@ -1,22 +1,12 @@
 import { Metadata } from 'next'
 import { ReactNode } from 'react'
-import { cookies } from 'next/headers'
-import { TopNavigation } from './components/TopNavigation'
-import { verifySession } from './utils/firebase'
 
 export const metadata: Metadata = {
     title: 'Mine organisasjoner | Entur Tavla',
 }
 
 async function AdminLayout({ children }: { children: ReactNode }) {
-    const session = cookies().get('session')?.value
-    const loggedIn = (await verifySession(session)) !== null
-    return (
-        <>
-            <TopNavigation loggedIn={loggedIn} />
-            <main className="container mx-auto pt-4 pb-20">{children}</main>
-        </>
-    )
+    return <main className="container mx-auto pt-4 pb-20">{children}</main>
 }
 
 export default AdminLayout

next-tavla/app/demo/components/CreateUserButton.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { Button } from '@entur/button'
+import { Heading3, Paragraph } from '@entur/typography'
+import Link from 'next/link'
+import { usePostHog } from 'posthog-js/react'
+
+export const CreateUserButton = () => {
+    const posthog = usePostHog()
+
+    return (
+        <div>
+            <Heading3 margin="bottom">Opprett bruker</Heading3>
+            <Paragraph margin="none">
+                Det er helt gratis å bruke Tavla!
+            </Paragraph>
+            <Button
+                variant="success"
+                as={Link}
+                href="?login"
+                className="mt-2"
+                onClick={() => {
+                    posthog.capture('LOGIN_BTN_DEMO_PAGE')
+                }}
+            >
+                Opprett bruker / Logg inn
+            </Button>
+        </div>
+    )
+}
+
+export default CreateUserButton

next-tavla/app/demo/components/DemoBoard.tsx

@@ -0,0 +1,52 @@
+'use client'
+import { Heading2 } from '@entur/typography'
+import { TileSelector } from 'app/(admin)/components/TileSelector'
+import { formDataToTile } from 'app/(admin)/components/TileSelector/utils'
+import { Preview } from 'app/(admin)/edit/[id]/components/Preview'
+import { TileCard } from 'app/(admin)/edit/[id]/components/TileCard'
+import useLocalStorage from '../../(admin)/hooks/useLocalStorage'
+import { TTile } from 'types/tile'
+import { usePostHog } from 'posthog-js/react'
+
+const emptyDemoBoard = {
+    id: 'demo',
+    meta: { title: 'Demo' },
+    tiles: [],
+}
+
+function DemoBoard() {
+    const [board, setBoard] = useLocalStorage('board', emptyDemoBoard)
+
+    const posthog = usePostHog()
+
+    return (
+        <>
+            <div className="flex flex-col gap-4">
+                <Heading2>Hvilke stoppesteder vil du vise i tavlen?</Heading2>
+                <TileSelector
+                    action={async (data: FormData) => {
+                        const tile = formDataToTile(data)
+                        setBoard({ ...board, tiles: [...board.tiles, tile] })
+                        posthog.capture('ADD_STOP_PLACE_DEMO_PAGE')
+                    }}
+                    col={false}
+                />
+                {board.tiles?.map((tile: TTile) => (
+                    <TileCard
+                        key={tile.uuid}
+                        tile={tile}
+                        bid={board.id ?? 'demo'}
+                        demoBoard={board}
+                        setDemoBoard={setBoard}
+                    />
+                ))}
+            </div>
+            <div className="flex flex-col gap-4">
+                <Heading2>Forhåndsvisning</Heading2>
+                <Preview board={board} />
+            </div>
+        </>
+    )
+}
+
+export { DemoBoard }

next-tavla/app/demo/page.tsx

@@ -0,0 +1,62 @@
+import {
+    Heading1,
+    Heading2,
+    LeadParagraph,
+    ListItem,
+    Paragraph,
+    UnorderedList,
+} from '@entur/typography'
+import { verifySession } from 'app/(admin)/utils/firebase'
+import { cookies } from 'next/headers'
+import { DemoBoard } from './components/DemoBoard'
+import CreateUserButton from './components/CreateUserButton'
+
+async function Demo() {
+    const session = cookies().get('session')?.value
+    const loggedIn = (await verifySession(session)) !== null
+
+    return (
+        <main className="container mx-auto pt-8 pb-20 flex flex-col gap-10">
+            <div>
+                <Heading1>Prøv og lag din egen avgangstavle!</Heading1>
+                <LeadParagraph margin="none" className="lg:w-4/5">
+                    Dette er en demo-løsning hvor du kan prøve å opprette din
+                    egen tavle. Du må logge inn for å lagre tavlen og få tilgang
+                    til all funksjonalitet. Tavlen du lager her blir ikke
+                    lagret.
+                </LeadParagraph>
+            </div>
+            {!loggedIn && <CreateUserButton />}
+
+            <div className="flex flex-col gap-10">
+                <Heading1 margin="none">Lag en demo-tavle</Heading1>
+                <DemoBoard />
+            </div>
+            <div>
+                <Heading2>Innstillinger som krever innlogging</Heading2>
+                <Paragraph margin="none">Hvis du logger inn, kan du:</Paragraph>
+                <UnorderedList className="flex flex-col gap-1 pl-6">
+                    <ListItem>Endre tekststørrelse</ListItem>
+                    <ListItem>
+                        Legge til en info-melding nederst i tavlen
+                    </ListItem>
+                    <ListItem>Endre fargetema (lys eller mørk modus)</ListItem>
+                    <ListItem>
+                        Legge inn adressen som tavlen står på og vise gåavstand
+                        fra tavlen til stoppested(ene)
+                    </ListItem>
+                    <ListItem>
+                        Opprette så mange tavler du vil og samle disse i ulike
+                        organisasjoner (mapper)
+                    </ListItem>
+                    <ListItem>
+                        Gi andre tilgang til å administrere tavlen
+                    </ListItem>
+                </UnorderedList>
+            </div>
+            {!loggedIn && <CreateUserButton />}
+        </main>
+    )
+}
+
+export default Demo

next-tavla/app/layout.tsx

@@ -9,6 +9,9 @@ import dynamic from 'next/dynamic'
 import { EnturToastProvider, PHProvider } from './providers'
 import { Footer } from './(admin)/components/Footer'
 import { FloatingContact } from './components/FloatingContact'
+import { TopNavigation } from './(admin)/components/TopNavigation'
+import { cookies } from 'next/headers'
+import { verifySession } from './(admin)/utils/firebase'
 
 export const metadata: Metadata = {
     title: 'Entur Tavla',
@@ -38,12 +41,15 @@ const PostHogPageView = dynamic(() => import('./components/PostHogPageView'), {
     ssr: false,
 })
 
-function RootLayout({ children }: { children: ReactNode }) {
+async function RootLayout({ children }: { children: ReactNode }) {
+    const session = cookies().get('session')?.value
+    const loggedIn = (await verifySession(session)) !== null
     return (
         <html lang="nb">
             <PHProvider>
                 <EnturToastProvider>
                     <body>
+                        <TopNavigation loggedIn={loggedIn} />
                         <PostHogPageView />
                         {children}
                         <FloatingContact />