feat(boards): add columns exlanation (#1562)

* feat(boards): add modal explaining board columns * chore(boards): change column modal text * chore(boards):refactor * chore(columns):change text in columnModal
entur · Jun 27, 2024 · 1aeb4e9 · 1aeb4e9
1 parent 2943610
commit 1aeb4e9
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 11 deletions.
diff --git a/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx b/next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 import { BaseExpand } from '@entur/expand'
 import { TTile } from 'types/tile'
-import { Button, SecondarySquareButton } from '@entur/button'
+import { Button, IconButton, SecondarySquareButton } from '@entur/button'
 import { FilterChip } from '@entur/chip'
 import { Switch, TextField } from '@entur/form'
-import { CloseIcon, DeleteIcon, EditIcon } from '@entur/icons'
+import { CloseIcon, DeleteIcon, EditIcon, QuestionIcon } from '@entur/icons'
 import { Modal } from '@entur/modal'
 import {
     Heading3,
@@ -29,6 +29,8 @@ import { useLines } from './useLines'
 import { sortLineByPublicCode } from './utils'
 import { TransportModeAndLines } from './TransportModeAndLines'
 import { TLocation } from 'types/meta'
+import { Tooltip } from '@entur/tooltip'
+import { ColumnModal } from 'app/(admin)/organizations/components/DefaultColumns/ColumnModal'
 
 function TileCard({
     bid,
@@ -43,6 +45,7 @@ function TileCard({
     const [isOpen, setIsOpen] = useState(false)
     const [changed, setChanged] = useState(false)
     const [confirmOpen, setConfirmOpen] = useState(false)
+    const [isColumnModalOpen, setIsColumnModalOpen] = useState(false)
 
     const reset = () => {
         setConfirmOpen(false)
@@ -204,10 +207,30 @@ function TileCard({
                         />
 
                         <Heading4>Kolonner</Heading4>
-                        <SubParagraph>
-                            Her bestemmer du hvilke kolonner som skal vises i
-                            tavlen
-                        </SubParagraph>
+                        <div className="flex flex-row items-center gap-2">
+                            <SubParagraph>
+                                Her bestemmer du hvilke kolonner som skal vises
+                                i tavlen
+                            </SubParagraph>
+                            <Tooltip
+                                aria-hidden
+                                placement="top"
+                                content="Vis forklaring"
+                            >
+                                <IconButton
+                                    type="button"
+                                    aria-label="Vis forklaring på kolonner"
+                                    onClick={() => setIsColumnModalOpen(true)}
+                                >
+                                    <QuestionIcon />
+                                </IconButton>
+                            </Tooltip>
+                        </div>
+                        <ColumnModal
+                            isOpen={isColumnModalOpen}
+                            setIsOpen={setIsColumnModalOpen}
+                        />
+
                         <div className="flex flex-row flex-wrap gap-4 mb-8">
                             {Object.entries(Columns).map(([key, value]) => {
                                 return (

diff --git a/next-tavla/app/(admin)/organizations/components/DefaultColumns/ColumnModal.tsx b/next-tavla/app/(admin)/organizations/components/DefaultColumns/ColumnModal.tsx
@@ -0,0 +1,45 @@
+import { Modal } from '@entur/modal'
+import { Heading4, SubParagraph } from '@entur/typography'
+
+function ColumnModal({
+    isOpen,
+    setIsOpen,
+}: {
+    isOpen: boolean
+    setIsOpen: (arg0: boolean) => void
+}) {
+    return (
+        <Modal
+            open={isOpen}
+            onDismiss={() => setIsOpen(false)}
+            title="Dette betyr kolonnene"
+            size="medium"
+        >
+            <Heading4>Planlagt </Heading4>
+            <SubParagraph>
+                Rutetid for avgangen til transportmiddelet. Påvirkes ikke av
+                sanntid.
+            </SubParagraph>
+            <Heading4>Ankomst </Heading4>
+            <SubParagraph>
+                Når transportmiddelet ankommer stoppestedet. Viser sanntid, hvis
+                det finnes. Hvis ikke vises rutetid.
+            </SubParagraph>
+            <Heading4>Forventet </Heading4>
+            <SubParagraph>
+                Forventet avgangstid for kjøretøyet. Viser sanntid, hvis det
+                finnes. Hvis ikke vises rutetid (det samme tidspunktet som vises
+                under “Planlagt”).
+            </SubParagraph>
+            <Heading4>Sanntidsikon </Heading4>
+            <SubParagraph>
+                Legger til et sanntidsikon i tavlen som pulserer. Sanntidsikonet
+                er grønt eller rødt, avhengig av om kjøretøyet er i rute eller
+                forsinket.Indikerer om tidspunktet er oppdatert med
+                sanntidsinformasjon.
+            </SubParagraph>
+        </Modal>
+    )
+}
+
+export { ColumnModal }
diff --git a/next-tavla/app/(admin)/organizations/components/DefaultColumns/index.tsx b/next-tavla/app/(admin)/organizations/components/DefaultColumns/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { Heading2, Paragraph } from '@entur/typography'
-import React from 'react'
+import React, { useState } from 'react'
 import { TOrganizationID } from 'types/settings'
 import { Columns, TColumn } from 'types/column'
 import { useToast } from '@entur/alert'
@@ -14,6 +14,10 @@ import {
 import { SubmitButton } from 'components/Form/SubmitButton'
 import { useFormState } from 'react-dom'
 import { saveColumns } from './actions'
+import { Tooltip } from '@entur/tooltip'
+import { IconButton } from '@entur/button'
+import { QuestionIcon } from '@entur/icons'
+import { ColumnModal } from './ColumnModal'
 
 function DefaultColumns({
     oid,
@@ -23,6 +27,7 @@ function DefaultColumns({
     columns?: TColumn[]
 }) {
     const { addToast } = useToast()
+    const [open, setIsOpen] = useState(false)
 
     const submit = async (
         prevState: TFormFeedback | undefined,
@@ -47,10 +52,22 @@ function DefaultColumns({
     return (
         <div className="box flex flex-col gap-1">
             <Heading2>Kolonner</Heading2>
-            <Paragraph>
-                Velg hvilke kolonner som skal være standard når det opprettes en
-                ny tavle.
-            </Paragraph>
+            <div className="flex flex-row  items-center mb-8 gap-2">
+                <Paragraph margin="none">
+                    Velg hvilke kolonner som skal være standard når det
+                    opprettes en ny tavle.
+                </Paragraph>
+                <Tooltip aria-hidden placement="top" content="Vis forklaring">
+                    <IconButton
+                        type="button"
+                        aria-label="Vis forklaring på kolonner"
+                        onClick={() => setIsOpen(true)}
+                    >
+                        <QuestionIcon />
+                    </IconButton>
+                </Tooltip>
+            </div>
+            <ColumnModal isOpen={open} setIsOpen={setIsOpen} />
 
             <form action={action}>
                 <div className="flex flex-row flex-wrap gap-4">