Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(tile): set offset based on walking distance #1583

Merged
merged 12 commits into from
Aug 6, 2024
Merged

feat(tile): set offset based on walking distance #1583

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
accb6ba
feat(tile): set offset based on walking distance
emilielr Jul 10, 2024
c77d884
style(tilecard): add punctuation and gap
emilielr Jul 10, 2024
a5c507c
fix(tilecard): refactor logic
emilielr Jul 12, 2024
c71a3ac
chore(tilecard): rename function
emilielr Jul 12, 2024
1fb4a5c
chore(): delete unused code
emilielr Jul 12, 2024
65bc11d
feat(offset): add tracking on btn
emilielr Jul 15, 2024
5e3238a
fix(offset): use ref to get dom element
emilielr Jul 29, 2024
29c1d65
chore(offset): include dependency in array
emilielr Aug 1, 2024
422024e
fix(offset): not possible to be undefined in controlled input
emilielr Aug 1, 2024
e00aaee
fix(offset): fallback to null
emilielr Aug 2, 2024
8c01304
chore(offset): move logic to onchange
emilielr Aug 2, 2024
9175e5e
chore(offset): simplify logic
emilielr Aug 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 86 additions & 35 deletions next-tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
SecondarySquareButton,
} from '@entur/button'
import { FilterChip } from '@entur/chip'
import { Switch, TextField } from '@entur/form'
import {
CloseIcon,
DeleteIcon,
Expand All @@ -17,6 +16,7 @@ import {
QuestionIcon,
UpwardIcon,
} from '@entur/icons'
import { Checkbox, Switch, TextField } from '@entur/form'
import { Modal } from '@entur/modal'
import {
Heading3,
Expand All @@ -32,7 +32,7 @@ import { TransportIcon } from 'components/TransportIcon'
import { isArray, uniqBy } from 'lodash'
import Image from 'next/image'
import { usePostHog } from 'posthog-js/react'
import { Dispatch, SetStateAction, useState } from 'react'
import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'
import { Columns, TColumn } from 'types/column'
import { TBoard, TBoardID } from 'types/settings'
import { getBoard, getWalkingDistanceTile } from '../../actions'
Expand Down Expand Up @@ -69,6 +69,32 @@ function TileCard({
const [confirmOpen, setConfirmOpen] = useState(false)
const [isColumnModalOpen, setIsColumnModalOpen] = useState(false)

const walkingDistanceInMinutes = Math.ceil(
(tile.walkingDistance?.distance ?? 0) / 60,
)
const [offsetBasedOnWalkingDistance, setOffsetBasedOnWalkingDistance] =
useState(walkingDistanceInMinutes === tile.offset)

const offsetRef = useRef<HTMLInputElement | null>(null)

useEffect(() => {
const updateOffsetInputValue = () => {
if (offsetRef.current) {
offsetBasedOnWalkingDistance
? (offsetRef.current.valueAsNumber =
walkingDistanceInMinutes)
: (offsetRef.current.valueAsNumber = tile.offset ?? 0)
}
}
updateOffsetInputValue()
}, [offsetBasedOnWalkingDistance, walkingDistanceInMinutes, tile.offset])

emilielr marked this conversation as resolved.
Show resolved Hide resolved
useEffect(() => {
if (!address) {
setOffsetBasedOnWalkingDistance(false)
}
}, [address])

const reset = () => {
setConfirmOpen(false)
setIsOpen(false)
Expand Down Expand Up @@ -226,7 +252,9 @@ function TileCard({
visible: distance === 'on',
distance: tile.walkingDistance?.distance,
},
offset: Number(offset),
offset: offsetBasedOnWalkingDistance
? Number(walkingDistanceInMinutes)
: Number(offset),
} as TTile

if (distance === 'on' && !tile.walkingDistance) {
Expand All @@ -247,48 +275,70 @@ function TileCard({
onSubmit={reset}
onInput={() => setChanged(true)}
>
<Heading4 margin="none">Gåavstand</Heading4>
<Heading4 margin="bottom">Gåavstand</Heading4>
<SubParagraph>
Vis gåavstand fra lokasjonen til Tavla til
stoppestedet
stoppestedet.
</SubParagraph>
<div className="flex flex-col">
{!address?.name && (
<Label className="!text-error">
{demoBoard
? 'Logg inn for å få tilgang til funksjonaliteten'
: 'Du må legge til en lokasjon for å kunne skru på gåavstand'}
</Label>
)}
<Switch
name="showDistance"
disabled={address ? false : true}
defaultChecked={
tile.walkingDistance?.visible ?? false
{!address && (
<Label className="!text-error">
{demoBoard
? 'Logg inn for å få tilgang til funksjonaliteten.'
: 'Du må legge til en lokasjon for å kunne skru på gåavstand.'}
</Label>
)}
<Switch
name="showDistance"
disabled={!address}
defaultChecked={
tile.walkingDistance?.visible ?? false
}
>
Vis gåavstand
</Switch>

<Heading4>Forskyv avgangstid</Heading4>
<div className="flex flex-col gap-2">
<SubParagraph>
Vis kun avganger som går om mer enn et valgt
antall minutter.
</SubParagraph>
<TextField
label="Antall minutter"
name="offset"
id="offset"
ref={offsetRef}
type="number"
min={0}
className="!w-2/5"
defaultValue={
tile.offset ? tile.offset : undefined
}
>
Vis gåavstand
</Switch>
disabled={offsetBasedOnWalkingDistance}
/>
{address && (
<Checkbox
disabled={!address}
checked={offsetBasedOnWalkingDistance}
onChange={() => {
setOffsetBasedOnWalkingDistance(
!offsetBasedOnWalkingDistance,
)
posthog.capture(
'OFFSET_BASED_ON_WALKING_DISTANCE_BTN_CLICK',
)
}}
>
Forskyv basert på gåavstand
</Checkbox>
)}
</div>
<Heading4>Avganger frem i tid</Heading4>
<SubParagraph>
Vis kun avganger som går om mer enn valgt antall
minutter
</SubParagraph>
<TextField
label="Antall minutter"
name="offset"
type="number"
min={0}
className="w-full sm:w-1/3"
defaultValue={tile.offset ? tile.offset : undefined}
/>

<Heading4>Kolonner</Heading4>
<div className="flex flex-row items-center gap-2">
<SubParagraph>
Her bestemmer du hvilke kolonner som skal vises
i tavlen
i tavlen.
</SubParagraph>
<Tooltip
aria-hidden
Expand Down Expand Up @@ -329,6 +379,7 @@ function TileCard({
)
})}
</div>

<Heading4>Transportmidler og linjer</Heading4>
<div className="flex flex-row gap-4">
{linesByModeSorted.map(
Expand Down
28 changes: 1 addition & 27 deletions next-tavla/app/(admin)/edit/[id]/components/TileCard/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,6 @@
import { GRAPHQL_ENDPOINTS } from 'assets/env'
import { QuayEditQuery, StopPlaceEditQuery } from 'graphql/index'
import { TQuay, TTransportMode } from 'types/graphql-schema'
import { TTile } from 'types/tile'
import { fieldsNotNull } from 'utils/typeguards'
import { TTransportMode } from 'types/graphql-schema'
import { TLineFragment } from './types'

export async function fetchLines(tile: TTile) {
const res = await fetch(GRAPHQL_ENDPOINTS['journey-planner'], {
headers: {
'Content-Type': 'application/json',
'ET-Client-Name': 'tavla-test',
},
body: JSON.stringify({
query: tile.type === 'quay' ? QuayEditQuery : StopPlaceEditQuery,
variables: { placeId: tile.placeId },
}),
method: 'POST',
})
const data = await res.json()
if (tile.type === 'quay')
return data.data?.quay?.lines.filter(fieldsNotNull) ?? []
return (
data.data?.stopPlace?.quays
?.flatMap((q: TQuay) => q?.lines)
.filter(fieldsNotNull) || []
)
}

export function sortLineByPublicCode(a: TLineFragment, b: TLineFragment) {
if (!a || !a.publicCode || !b || !b.publicCode) return 1

Expand Down