iti2

app/ClickedPoint.tsx

@@ -5,7 +5,8 @@ export default function ClickedPoint({
 	geocodedClickedPoint: { latitude, longitude, data },
 	geolocation,
 }) {
-	console.log('clickedPoint', latitude, longitude, data)
+	if (latitude && longitude && !data) return <p>Géolocation en cours...</p>
+	console.log('lightgreen clickedPoint', latitude, longitude, data)
 	const origin = geolocation
 	if (!data)
 		return (

app/Container.tsx

@@ -250,6 +250,7 @@ export default function Container({
 							containerRef,
 							trackedSnap,
 							setTrackedSnap,
+							geocodedClickedPoint,
 						}}
 					/>
 				</ContentWrapper>

app/Map.tsx

@@ -32,6 +32,7 @@ import useDrawItinerary from './itinerary/useDrawItinerary'
 import useDrawPanoramaxPosition, {
 	useAddPanoramaxLayer,
 } from './effects/useDrawPanoramaxPosition'
+import useDrawRightClickMarker from './effects/useDrawRightClickMarker'
 
 if (process.env.NEXT_PUBLIC_MAPTILER == null) {
 	throw new Error('You have to configure env NEXT_PUBLIC_MAPTILER, see README')
@@ -78,6 +79,7 @@ export default function Map({
 	quickSearchFeatures,
 	trackedSnap,
 	panoramaxPosition,
+	geocodedClickedPoint,
 }) {
 	const isMobile = useMediaQuery('(max-width: 800px)')
 	const mapContainerRef = useRef(null)
@@ -337,6 +339,7 @@ export default function Map({
 		zoom
 	)
 	*/
+	useDrawRightClickMarker(map, geocodedClickedPoint)
 
 	/* Abandoned code that should be revived. Traveling with train + bike is an
 	 * essential objective of Cartes */

app/effects/useDrawRightClickMarker.ts

@@ -0,0 +1,31 @@
+import { Marker } from 'maplibre-gl'
+import { useEffect } from 'react'
+
+export default function useDrawRightClickMarker(map, geocodedClickedPoint) {
+	useEffect(() => {
+		if (!map || !geocodedClickedPoint) return
+
+		console.log('lightgreen marker', geocodedClickedPoint)
+
+		const lon = geocodedClickedPoint.longitude,
+			lat = geocodedClickedPoint.latitude
+
+		if (!lon || !lat) return
+		const marker = new Marker({
+			color: 'var(--color)',
+			//draggable: true,
+		})
+			.setLngLat([lon, lat])
+			.addTo(map)
+
+		// Apple Maps has a nice haptic vibration feedback.
+		// https://il.ly/tech/vibrate-mobile-phone-web-vibration-api#vibration-api-browser-support
+		// I don't think this is much supported. Test Android Firefox, Bromite,
+		// Lineageos navigator, iOS firefox, iOS safari : no one works.
+		// navigator.vibrate(200)
+
+		return () => {
+			marker.remove()
+		}
+	}, [map, geocodedClickedPoint])
+}

app/effects/useDrawTransit.ts

@@ -113,7 +113,7 @@ export default function useDrawTransit(map, transit, selectedConnection, date) {
 			source: id,
 			layout: {
 				'symbol-placement': 'line',
-				'text-font': ['Roboto Regular', 'Noto Sans Regular'],
+				'text-font': ['Roboto Bold', 'Noto Sans Bold'],
 				'text-field': '{name}', // part 2 of this is how to do it
 				'text-transform': 'uppercase',
 				'text-size': 16,

app/effects/useGeocodeRightClick.ts

@@ -9,15 +9,19 @@ export default function useGeocodeRightClick(stringClickedPoint) {
 		}
 		const clickedPoint = stringClickedPoint.split('|')
 
+		const latitude = +clickedPoint[0],
+			longitude = +clickedPoint[1]
+
+		setData({ latitude, longitude, data: null })
 		const doFetch = async () => {
 			const request = await fetch(
-				`https://photon.komoot.io/reverse?lon=${clickedPoint[1]}&lat=${clickedPoint[0]}`
+				`https://serveur.cartes.app/photon/reverse?lon=${clickedPoint[1]}&lat=${clickedPoint[0]}`
 			)
 			const json = await request.json()
 
 			const result = {
-				latitude: +clickedPoint[0],
-				longitude: +clickedPoint[1],
+				latitude,
+				longitude,
 				data: json,
 			}
 			setData(result)

app/itinerary/DateSelector.tsx

@@ -6,6 +6,8 @@ import { DialogButton } from '../UI'
 import { useInterval } from 'usehooks-ts'
 import Link from 'next/link'
 import Image from 'next/image'
+import { nowStamp, stamp } from './transit/motisRequest'
+import calendarIcon from '@/public/calendar.svg'
 
 export const initialDate = (type = 'date') => {
 	const stringDate = new Date().toLocaleString('fr')
@@ -17,54 +19,98 @@ export const initialDate = (type = 'date') => {
 	return day + 'T' + hour.slice(0, -3)
 }
 
+export const isDateNow = (date) => {
+	const now = nowStamp()
+	const dateStamp = stamp(date)
+
+	const difference = dateStamp - now
+
+	console.log('lightgreen diff in minutes', difference / 60)
+	return difference < 60 * 10 // 10 minutes
+}
+
 // Can be type date (day + hour) or type day
 export default function DateSelector({ date, type = 'date' }) {
+	const [notNow, setNotNow] = useState(false)
 	const defaultDate = initialDate(type)
 	const [localDate, setLocalDate] = useState(date || defaultDate)
 	const setSearchParams = useSetSearchParams()
+
+	const hideDate = !notNow && isDateNow(date)
+
 	return (
 		<div
 			css={`
+				margin-top: 0.2rem;
 				display: flex;
 				align-items: center;
-				> input {
-					margin-right: 0.4rem !important;
-					font-size: 110%;
-					height: 1.4rem;
-					padding: 0 0.2rem;
-					color: var(--darkerColor);
-					border: 2px solid var(--darkColor);
-					border-radius: 0.15rem;
-				}
+				justify-content: end;
 			`}
 		>
-			<input
-				type={type === 'date' ? 'datetime-local' : 'date'}
-				id="date"
-				name="date"
-				value={localDate}
-				min={defaultDate}
-				onChange={(e) => {
-					const value = e.target.value
-					// changing e.g. the weekday starting with the 0 diigt with the keyboard will make value '' on firefox, LOL
-					if (value !== '') setLocalDate(e.target.value)
-				}}
-			/>
-			{date !== localDate && (
-				<DialogButton
-					onClick={() =>
-						setSearchParams(
-							type === 'date'
-								? { date: encodeDate(localDate) }
-								: { day: encodeDate(localDate) }
-						)
-					}
+			{' '}
+			{hideDate ? (
+				<span
 					css={`
-						font-size: 100%;
+						display: flex;
+						align-items: center;
+						button {
+							margin: 0;
+							padding: 0;
+						}
 					`}
 				>
-					OK
-				</DialogButton>
+					Maintenant{' '}
+					<button
+						onClick={() => setNotNow(true)}
+						title="Changer le moment du départ "
+					>
+						<Image
+							src={calendarIcon}
+							alt="Icône d'un agenda"
+							css="width: 1.6rem; height: auto; vertical-align: sub; margin-left: .2rem"
+						/>
+					</button>
+				</span>
+			) : (
+				<>
+					<input
+						css={`
+							margin-right: 0.4rem !important;
+							font-size: 110%;
+							height: 1.4rem;
+							padding: 0 0.2rem;
+							color: var(--darkerColor);
+							border: 2px solid var(--darkColor);
+							border-radius: 0.15rem;
+						`}
+						type={type === 'date' ? 'datetime-local' : 'date'}
+						id="date"
+						name="date"
+						value={localDate}
+						min={defaultDate}
+						onChange={(e) => {
+							const value = e.target.value
+							// changing e.g. the weekday starting with the 0 diigt with the keyboard will make value '' on firefox, LOL
+							if (value !== '') setLocalDate(e.target.value)
+						}}
+					/>
+					{date !== localDate && (
+						<DialogButton
+							onClick={() =>
+								setSearchParams(
+									type === 'date'
+										? { date: encodeDate(localDate) }
+										: { day: encodeDate(localDate) }
+								)
+							}
+							css={`
+								font-size: 100%;
+							`}
+						>
+							OK
+						</DialogButton>
+					)}
+				</>
 			)}
 			{type === 'date' && (
 				<UpdateDate
@@ -79,12 +125,16 @@ export default function DateSelector({ date, type = 'date' }) {
 }
 
 const newTimestamp = () => new Date().getTime() / 1000
+
 const UpdateDate = ({ date, updateDate }) => {
 	const [now, setNow] = useState(newTimestamp())
 
-	useInterval(() => {
-		setNow(newTimestamp())
-	}, 5 * 1000)
+	useInterval(
+		() => {
+			setNow(newTimestamp())
+		},
+		5 * 1000 // every 5 seconds
+	)
 	const isOutdated = now - new Date(date).getTime() / 1000 > 10
 
 	if (!isOutdated) return null

app/itinerary/Itinerary.tsx

@@ -59,10 +59,15 @@ export default function Itinerary({
 				<div>
 					<ol
 						css={`
+							margin-top: 0.1rem;
+							margin-left: 0;
+							padding-left: 0;
 							list-style-type: none;
 							display: flex;
 							align-items: center;
-							justify-content: space-evenly;
+							justify-content: start;
+							gap: 1rem;
+							width: 80%;
 							li {
 								margin: 0 0.4rem;
 							}

app/itinerary/Steps.tsx

@@ -30,11 +30,7 @@ export default function Steps({
 	const allez = steps.map((step) => step?.key).join('->')
 
 	return (
-		<section
-			css={`
-				margin: 0 0 1rem 0;
-			`}
-		>
+		<section>
 			<AddStepButton
 				url={setSearchParams({ allez: '->' + allez }, true)}
 				title={'Ajouter un point comme départ'}

app/itinerary/transit/BestConnection.tsx

@@ -60,13 +60,11 @@ export default function BestConnection({ bestConnection }) {
 					.
 				</p>
 				<p>
-					⌚️{' '}
-					{capitalise0(
-						bestConnection.nextDepartures
-							.slice(0, 4)
-							.map((departure) => departure.toLowerCase())
-							.join(', ')
-					)}
+					⌚️ Partir{' '}
+					{bestConnection.nextDepartures
+						.slice(0, 4)
+						.map((departure) => departure.toLowerCase())
+						.join(', ')}
 					.
 				</p>
 			</div>