From 0645bbd877163e4ea2f9bf45adfae4201614dae4 Mon Sep 17 00:00:00 2001 From: toqvist Date: Fri, 5 Apr 2024 18:41:53 +0200 Subject: [PATCH] Basic node information mostly done --- astro/src/components/Contacts.tsx | 25 ++++++ astro/src/components/KiosMap.tsx | 126 +++++++++++++++++++++++---- astro/src/types.ts | 4 + payload/src/collections/Makers.ts | 10 +++ payload/src/collections/Retailers.ts | 10 +++ 5 files changed, 158 insertions(+), 17 deletions(-) create mode 100644 astro/src/components/Contacts.tsx diff --git a/astro/src/components/Contacts.tsx b/astro/src/components/Contacts.tsx new file mode 100644 index 0000000..4193b92 --- /dev/null +++ b/astro/src/components/Contacts.tsx @@ -0,0 +1,25 @@ +import React from 'react' + +type Props = { + name: string | undefined; + email?: string | undefined; + phoneNumber?: string | undefined; + role: 'maker' | 'retailer' | 'courier' +} + +const roleLabels = { + maker: "Maker", + retailer: "Retailer", + courier: "Courier", +} + +export default function Contacts(props: Props) { + return ( +
+ {props.name &&

{roleLabels[props.role]}:

} + {props.name &&

{props.name}

} + {props.phoneNumber &&

Phone Number: {props.phoneNumber}

} + {props.email &&

Email: {props.email}

} +
+ ) +} \ No newline at end of file diff --git a/astro/src/components/KiosMap.tsx b/astro/src/components/KiosMap.tsx index 047fffa..1ab6bf7 100644 --- a/astro/src/components/KiosMap.tsx +++ b/astro/src/components/KiosMap.tsx @@ -5,6 +5,7 @@ import L, { LatLngBounds } from 'leaflet'; import { useQuery, useMutation, useQueryClient, queryOptions } from "@tanstack/react-query"; import axios from "axios"; +import Contacts from './Contacts'; //Todo: Move types to own file interface User { @@ -60,8 +61,8 @@ interface Dispatch { createdAt: string; updatedAt: string; - maker?: Maker; - retailer?: Retailer; + maker: Maker; + retailer: Retailer; products: Product[]; courier?: User; @@ -173,19 +174,45 @@ const dashOpacities: Record = { archived: 0.5 } +interface NodeSelection { + id: string, + type: "maker" | "retailer" | "dispatch" | "none" +} + export const KiosMap = () => { const { data: makers, isLoading: isLoadingMakers } = useGetMakers(); const { data: retailers, isLoading: isLoadingRetailers } = useGetRetailers(); const { data: dispatches, isLoading: isLoadingDispatches } = useGetDispatches(); - const [selectedNodeId, setSelectedNodeId] = useState('') + const [selectedNode, setSelectedNode] = useState({ id: "", type: "none" }) - const handleSelectNode = (nodeId: string) => { - setSelectedNodeId(nodeId) + let selectedMaker: Maker | undefined = undefined; + let selectedRetailer: Retailer | undefined = undefined; + let selectedDispatch: Dispatch | undefined = undefined; + + if (selectedNode.type === "maker" && makers) { + selectedMaker = makers.find(maker => maker.id === selectedNode.id && selectedNode.type === "maker"); + } + + if (selectedNode.type === "retailer" && retailers) { + selectedRetailer = retailers.find(retailer => retailer.id === selectedNode.id && selectedNode.type === "retailer"); + } + + if (selectedNode.type === "dispatch" && dispatches) { + selectedDispatch = dispatches.find(dispatch => dispatch.id === selectedNode.id && selectedNode.type === "dispatch"); + } + + + const handleSelectNode = (nodeId: string, typeParam: "maker" | "retailer" | "dispatch" | "none") => { + setSelectedNode({ id: nodeId, type: typeParam }) console.log("set id:", nodeId) } + const handleAcceptRoute = () => { + + } + const blackDotIcon = L.divIcon({ className: 'bg-gray-950 rounded-full', iconSize: [20, 20], @@ -207,9 +234,71 @@ export const KiosMap = () => { return (
-
-
-
+ + { + selectedNode.type !== 'none' && ( +
+
+ {selectedMaker !== undefined && ( + + )} + + {selectedRetailer !== undefined && ( + + )} + + {selectedDispatch !== undefined && ( +
+ + + + + {selectedDispatch.courier !== undefined ? ( + + + ) : +
+

No courier!

+ +
+ } +
+ )} +
+
+ ) + } + { > handleSelectNode("", "none") + }} attribution='© OpenStreetMap' /> @@ -227,12 +319,12 @@ export const KiosMap = () => { {makers.map((maker: any, index: number) => ( handleSelectNode(maker.id) - }} - key={maker.id} + eventHandlers={{ + click: () => handleSelectNode(maker.id, "maker") + }} + key={maker.id} position={[locationSwitcharoo(maker.location)[0], locationSwitcharoo(maker.location)[1]]} - icon={selectedNodeId === maker.id ? selectedDotIcon : blackDotIcon} + icon={selectedNode.id === maker.id ? selectedDotIcon : blackDotIcon} > {/* {maker.name} */} @@ -245,11 +337,11 @@ export const KiosMap = () => { {retailers.map((retailer: any, index: number) => ( handleSelectNode(retailer.id) + click: () => handleSelectNode(retailer.id, "retailer") }} key={retailer.id} position={[locationSwitcharoo(retailer.location)[0], locationSwitcharoo(retailer.location)[1]]} - icon={selectedNodeId === retailer.id ? selectedDotIcon : blackDotIcon} + icon={selectedNode.id === retailer.id ? selectedDotIcon : blackDotIcon} > {/* {retailer.name} */} @@ -282,11 +374,11 @@ export const KiosMap = () => { return ( handleSelectNode(dispatch.id) + click: () => handleSelectNode(dispatch.id, "dispatch") }} key={dispatch.id} positions={[[start[0], start[1]], [end[0], end[1]]]} - pathOptions={{color: selectedNodeId === dispatch.id ? dashColorSelected : dashColor}} + pathOptions={{ color: selectedNode.id === dispatch.id ? dashColorSelected : dashColor }} opacity={dashOpacity} dashArray={dashArray} /> ); diff --git a/astro/src/types.ts b/astro/src/types.ts index 473133e..cafcaa7 100755 --- a/astro/src/types.ts +++ b/astro/src/types.ts @@ -72,6 +72,8 @@ export interface Product { export interface Maker { id: string; name: string; + phoneNumber?: string; + email?: string; /** * @minItems 2 * @maxItems 2 @@ -84,6 +86,8 @@ export interface Maker { export interface Retailer { id: string; name: string; + phoneNumber?: string; + email?: string; /** * @minItems 2 * @maxItems 2 diff --git a/payload/src/collections/Makers.ts b/payload/src/collections/Makers.ts index 6977610..cbe8be2 100644 --- a/payload/src/collections/Makers.ts +++ b/payload/src/collections/Makers.ts @@ -14,6 +14,16 @@ const Makers: CollectionConfig = { type: 'text', required: true, }, + { + name: 'phoneNumber', + type: 'text', + required: false + }, + { + name: 'email', + type: 'email', + required: false + }, { name: 'location', type: 'point', diff --git a/payload/src/collections/Retailers.ts b/payload/src/collections/Retailers.ts index 50ea2da..442724d 100644 --- a/payload/src/collections/Retailers.ts +++ b/payload/src/collections/Retailers.ts @@ -15,6 +15,16 @@ const Retailers: CollectionConfig = { type: 'text', required: true, }, + { + name: 'phoneNumber', + type: 'text', + required: false + }, + { + name: 'email', + type: 'email', + required: false + }, { name: 'location', type: 'point',