Added algorithm Dropdown

src/components/MarkersComponent.js

@@ -15,13 +15,24 @@ function MarkersComponent(props) {
         iconSize: [42, 42]
     })
 
+    return props.positions?.map((position, index) => {
+            if (position !== undefined)
+                return <Marker key={index} position={position} icon={myIcon}>
+                    <Popup>
+                        {position["lat"] + " " + position["lon"]}
+                    </Popup>
+                </Marker>
+            else return <div key={index} ></div>
+        }
+    )
+    /*
     return props.positions?.map((position, index) =>
         <Marker key={index} position={position} icon={myIcon}>
             <Popup>
                 {position["lat"] + " " + position["lon"]}
             </Popup>
         </Marker>
-    )
+    )*/
 }
 
 

src/components/NewParcelComponent.js

@@ -44,11 +44,11 @@ export default function (props) {
         <div className="w-11 my-2 p-2 surface-200 border-round shadow-3 flex flex-column">
             <div>
                 <div>Parcel name:</div>
-                <InputText type="text" className="w-full p-inputtext-sm surface-300 " onChange={(e) => setName(e.target.value)}/>
+                <InputText type="text" className="w-full p-inputtext-sm surface-300 mt-1" onChange={(e) => setName(e.target.value)}/>
             </div>
-            <div>
+            <div className="mt-3">
                 <div>Address:</div>
-                <InputText type="text" className="w-full p-inputtext-sm surface-300 " onChange={(e) => setAddress(e.target.value)}/>
+                <InputText type="text" className="w-full p-inputtext-sm surface-300 mt-1" onChange={(e) => setAddress(e.target.value)}/>
             </div>
             <Button onClick={() => {
                 addNewParcel()

src/components/PathComponent.js

@@ -5,13 +5,12 @@ export default PathComponent
 
 function PathComponent(props) {
     useEffect(() => {
-        console.log(props.positions[0][0])
-        console.log("PATH")
+
     });
 
 
     return props.positions?.map((position, index, elements) => {
-        if (elements[index + 1]) return <Polyline key={index}
+        if (position !== undefined) if (elements[index + 1]) return <Polyline key={index}
                                                   positions={[elements[index], elements[index + 1]]}></Polyline>
         //else return <Polyline pathOptions={{color: 'red'}} key={index} positions={[elements[0], elements[index]]}></Polyline> //loop
     })

src/pages/HomePage.js

@@ -1,7 +1,7 @@
 import {Avatar} from "primereact/avatar";
 import {MapContainer, TileLayer} from 'react-leaflet'
 import 'leaflet/dist/leaflet.css'
-import React, {useEffect, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
 import {SPRING_SERVER} from "../config";
 import {Button} from "primereact/button";
 import PathComponent from "../components/PathComponent";
@@ -13,6 +13,8 @@ import NewParcelComponent from "../components/NewParcelComponent";
 import MarkersComponent from "../components/MarkersComponent";
 import {Navigate, useNavigate} from "react-router-dom";
 import jwt_decode from 'jwt-decode';
+import {Toast} from "primereact/toast";
+import {Dropdown} from "primereact/dropdown";
 
 export default function () {
 
@@ -27,6 +29,10 @@ export default function () {
     const [newParcelsListComponentSeed, setNewParcelsListComponentSeed] = useState(1);
     const [newPathComponentSeed, setNewPathComponentSeed] = useState(1);
     const [newMarkersComponentSeed, setNewMarkersComponentSeed] = useState(1);
+    const [algorithm, setAlgorithm] = useState("Brute-Force");
+    const my_toast = useRef(null)
+
+    const algorithms = ["Brute-Force", "Ant", "Annealing"]
 
     if (!localStorage.getItem("access_token") || !localStorage.getItem("expires_at")) {
         localStorage.removeItem("access_token")
@@ -63,25 +69,27 @@ export default function () {
     }, [newParcelsListComponentSeed, newParcelComponentSeed])
 
     useEffect(() => {
-        if (dropOffPoints && dropOffPoints.length > 0) {
-            const url = SPRING_SERVER + '/intersections-between-multiple-coordinates';
-            fetch(url, {
-                method: 'POST',
-                headers: {
-                    'Accept': 'application/json',
-                    'Content-Type': 'application/json',
-                    "Authorization": "Bearer " + localStorage.getItem("access_token"),
-                },
-                body:
-                    JSON.stringify(dropOffPoints)
-            })
-                .then(response => response.json())
-                .then(data => {
-                    setPositions(data)
+        {
+            if (dropOffPoints && dropOffPoints.length > 0 && !dropOffPoints.includes(undefined)) {
+                const url = SPRING_SERVER + '/intersections-between-multiple-coordinates/' + algorithm;
+                fetch(url, {
+                    method: 'POST',
+                    headers: {
+                        'Accept': 'application/json',
+                        'Content-Type': 'application/json',
+                        "Authorization": "Bearer " + localStorage.getItem("access_token"),
+                    },
+                    body:
+                        JSON.stringify(dropOffPoints)
                 })
-                .catch(error => console.error(error));
+                    .then(response => response.json())
+                    .then(data => {
+                        setPositions(data)
+                    })
+                    .catch(error => console.error(error));
+            }
         }
-    }, [dropOffPoints])
+    }, [dropOffPoints,algorithm])
 
     useEffect(() => {
 
@@ -120,7 +128,15 @@ export default function () {
         executeAfterFetchData()
     }, [userData])
 
-
+    useEffect(() => {
+        if (dropOffPoints && dropOffPoints.includes(undefined)) {
+            my_toast.current.show({
+                severity: 'warn',
+                summary: 'Warning Message',
+                detail: 'Some of you targets are wrong'
+            });
+        }
+    }, [dropOffPoints])
     const onButtonClick = () => {
         localStorage.removeItem("access_token")
         return navigate("/")
@@ -129,6 +145,7 @@ export default function () {
 
     return (
         < >
+            <Toast ref={my_toast}></Toast>
             <div className="flex flex-row h-screen text-900 ">
                 <div className="w-5 bg-orange-500 flex flex-column align-items-center">
 
@@ -149,6 +166,11 @@ export default function () {
                         setNewParcelComponentSeed(Math.random());
 
                     }}></NewParcelComponent>
+                    <div className="w-11 my-2 p-2 surface-200 border-round shadow-3 flex flex-column">
+                        <div>Algorithm:</div>
+                        <Dropdown value={algorithm} placeholder="Select algorithm"
+                                  onChange={(e) => setAlgorithm(e.value)} options={algorithms} className="mt-1"/>
+                    </div>
                 </div>
                 <div className="w-full bg-orange-500">
 
@@ -162,7 +184,7 @@ export default function () {
                             <div></div>}
 
                         {dropOffPoints ? <MarkersComponent
-                                                           positions={dropOffPoints}></MarkersComponent> : <div></div>}
+                            positions={dropOffPoints}></MarkersComponent> : <div></div>}
 
                     </MapContainer>
                 </div>