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',