Skip to content

Commit 443e9cf

Browse files
codermehrajcodermehraj
committed
add new sts integrated
1 parent f54fef7 commit 443e9cf

File tree

5 files changed

+184
-99
lines changed

5 files changed

+184
-99
lines changed

‎client/components/dashboard-componenets/mainContent/systemAdminContents/System.tsx‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Button } from "@/components/ui/button";
22
import EmptyFillContainer from "../../cards/EmptyFillContainer";
33
import { Plus, Truck } from "lucide-react";
4-
import { StsCreateModal } from "../../../modals/StsModal"
4+
import { StsCreateModal } from "../../../modals/StsModal";
55
import { VehicleCreateModal } from "@/components/modals/VehicleModal";
6-
import { LandfillCreateModal } from "@/components/modals/LandfillModal";
6+
import { LandfillCreateModal } from "@/components/modals/LandfillModal";
77

88
export default function AdminSystemDataPanel() {
99
return (
@@ -13,22 +13,34 @@ export default function AdminSystemDataPanel() {
1313
<div className="flex-grow-1"></div>
1414
<div className="flex gap-2">
1515
<StsCreateModal>
16-
<Button variant="outline" size="sm" className="w-full bg-black text-white">
17-
<Plus size={16} className="mr-2"/>
18-
ADD NEW STS
19-
</Button>
16+
<Button
17+
variant="outline"
18+
size="sm"
19+
className="w-full bg-black text-white"
20+
>
21+
<Plus size={16} className="mr-2" />
22+
ADD NEW STS
23+
</Button>
2024
</StsCreateModal>
2125
<LandfillCreateModal>
22-
<Button variant="outline" size="sm" className="w-full bg-black text-white">
23-
<Plus size={16} className="mr-2"/>
24-
ADD NEW LANDFILL
25-
</Button>
26+
<Button
27+
variant="outline"
28+
size="sm"
29+
className="w-full bg-black text-white"
30+
>
31+
<Plus size={16} className="mr-2" />
32+
ADD NEW LANDFILL
33+
</Button>
2634
</LandfillCreateModal>
2735
<VehicleCreateModal>
28-
<Button variant="outline" size="sm" className="w-full bg-black text-white">
29-
<Truck size={16} className="mr-2"/>
30-
ADD NEW VEHICLE
31-
</Button>
36+
<Button
37+
variant="outline"
38+
size="sm"
39+
className="w-full bg-black text-white"
40+
>
41+
<Truck size={16} className="mr-2" />
42+
ADD NEW VEHICLE
43+
</Button>
3244
</VehicleCreateModal>
3345
</div>
3446
</div>

‎client/components/maps/SetZone.tsx‎

Lines changed: 93 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,107 @@
11
// pages/index.tsx
22

3-
import { useEffect, useRef, useState } from 'react';
3+
import { useEffect, useRef, useState } from "react";
4+
import { Input } from "../ui/input";
5+
import { Label } from "../ui/label";
46

57
interface CoordinateProps {
6-
7-
setLatitude: React.Dispatch<React.SetStateAction<string>>;
8-
setLongitude: React.Dispatch<React.SetStateAction<string>>;
9-
}
10-
8+
setLatitude: React.Dispatch<React.SetStateAction<string>>;
9+
setLongitude: React.Dispatch<React.SetStateAction<string>>;
10+
}
1111

12-
const SetZone : React.FC<CoordinateProps> = ({ setLatitude, setLongitude }) => {
13-
const locationInputRef = useRef<HTMLInputElement>(null);
14-
const latInputRef = useRef<HTMLInputElement>(null);
15-
const longInputRef = useRef<HTMLInputElement>(null);
16-
const placeNameRef = useRef<HTMLInputElement>(null);
12+
const SetZone: React.FC<CoordinateProps> = ({ setLatitude, setLongitude }) => {
13+
const locationInputRef = useRef<HTMLInputElement>(null);
14+
const latInputRef = useRef<HTMLInputElement>(null);
15+
const longInputRef = useRef<HTMLInputElement>(null);
16+
const placeNameRef = useRef<HTMLInputElement>(null);
1717

18-
useEffect(() => {
19-
const loadScript = (url: string, callback: () => void) => {
20-
const script = document.createElement('script');
21-
script.type = 'text/javascript';
22-
script.src = url;
23-
script.onload = callback;
24-
document.head.appendChild(script);
25-
};
26-
const apiKey: string = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || '';
18+
useEffect(() => {
19+
const loadScript = (url: string, callback: () => void) => {
20+
const script = document.createElement("script");
21+
script.type = "text/javascript";
22+
script.src = url;
23+
script.onload = callback;
24+
document.head.appendChild(script);
25+
};
26+
const apiKey: string = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || "";
2727

28-
loadScript('https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', () => {
29-
loadScript(
30-
`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`,
31-
initializeAutocomplete
32-
);
33-
});
34-
}, []);
28+
loadScript(
29+
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js",
30+
() => {
31+
loadScript(
32+
`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`,
33+
initializeAutocomplete
34+
);
35+
}
36+
);
37+
}, []);
3538

36-
const initializeAutocomplete = () => {
37-
const autocomplete = new google.maps.places.Autocomplete(locationInputRef.current!, {
38-
types: ['geocode']
39-
});
39+
const initializeAutocomplete = () => {
40+
const autocomplete = new google.maps.places.Autocomplete(
41+
locationInputRef.current!,
42+
{
43+
types: ["geocode"],
44+
}
45+
);
4046

41-
google.maps.event.addListener(autocomplete, 'place_changed', () => {
42-
const place = autocomplete.getPlace();
43-
if (!place.geometry) {
44-
return;
45-
}
46-
const lat = place.geometry.location.lat();
47-
const lng = place.geometry.location.lng();
48-
latInputRef.current!.value = lat.toString();
49-
longInputRef.current!.value = lng.toString();
50-
// placeNameRef.current!.value = place.name.toString();
51-
setLatitude(latInputRef.current!.value);
52-
setLongitude(longInputRef.current!.value);
47+
google.maps.event.addListener(autocomplete, "place_changed", () => {
48+
const place = autocomplete.getPlace();
49+
if (!place.geometry) {
50+
return;
51+
}
52+
const lat = place.geometry.location?.lat();
53+
const lng = place.geometry.location?.lng();
54+
latInputRef.current!.value = lat?.toString() || "";
55+
longInputRef.current!.value = lng?.toString() || "";
56+
// placeNameRef.current!.value = place.name.toString();
57+
setLatitude(latInputRef.current!.value);
58+
setLongitude(longInputRef.current!.value);
59+
});
60+
};
61+
const handleLatitudeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
62+
setLatitude(event.target.value);
63+
};
5364

54-
});
55-
};
56-
const handleLatitudeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
57-
setLatitude(event.target.value);
58-
};
59-
60-
const handleLongitudeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
61-
setLongitude(event.target.value);
62-
};
65+
const handleLongitudeChange = (
66+
event: React.ChangeEvent<HTMLInputElement>
67+
) => {
68+
setLongitude(event.target.value);
69+
};
6370

64-
return (
65-
<div>
66-
<input type="text" id="location" ref={locationInputRef} />
67-
<input type="text" placeholder='Latitude' id="lat" ref={latInputRef} onChange={handleLatitudeChange} />
68-
<input type="text" id="long" placeholder='Longitude' ref={longInputRef} onChange={handleLongitudeChange} />
69-
{/* <input type="text" id="placeName" ref={placeNameRef} readOnly /> */}
70-
</div>
71-
);
71+
return (
72+
<>
73+
<Label htmlFor="location" className="text-right">
74+
STS Location
75+
</Label>
76+
<Input
77+
type="text"
78+
id="location"
79+
ref={locationInputRef}
80+
className="col-span-3"
81+
/>
82+
<Label htmlFor="location" className="text-right">
83+
STS Location
84+
</Label>
85+
<div className="flex gap-2 col-span-3">
86+
<Input
87+
type="text"
88+
placeholder="Latitude"
89+
id="lat"
90+
ref={latInputRef}
91+
onChange={handleLatitudeChange}
92+
className=""
93+
/>
94+
<Input
95+
type="text"
96+
id="long"
97+
placeholder="Longitude"
98+
ref={longInputRef}
99+
onChange={handleLongitudeChange}
100+
/>
101+
</div>
102+
{/* <input type="text" id="placeName" ref={placeNameRef} readOnly /> */}
103+
</>
104+
);
72105
};
73106

74107
export default SetZone;

‎client/components/modals/StsModal.tsx‎

Lines changed: 12 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { Input } from "@/components/ui/input";
1515
import { Label } from "@/components/ui/label";
1616
import React , {useState} from "react";
1717
import SetZone from "../maps/SetZone";
18+
import useCreateSTS, { STS } from "@/hooks/entityCreation/useCreateSTS";
1819

1920
interface DialogWrapperProps {
2021
children: React.ReactNode;
@@ -28,35 +29,23 @@ export const StsCreateModal: React.FC<DialogWrapperProps> = ({
2829
const [capacity, setCapacity] = useState("");
2930
const [latitude, setLatitude] = useState("");
3031
const [longitude, setLongitude] = useState("");
31-
32-
32+
const {createSTS } = useCreateSTS();
3333

34-
35-
36-
37-
38-
39-
const handleSaveChanges = () => {
40-
// console.log("Vehicle Number:", vehicleNumber);
41-
// console.log("Vehicle Type:", vehicleType);
42-
// console.log("Capacity:", capacity);
43-
console.log(stsName);
44-
console.log(wardNumber);
45-
console.log(capacity);
46-
console.log(latitude);
47-
console.log(longitude);
34+
const handleSaveChanges = async () => {
35+
const data:STS = {name: stsName, wardNumber , capacity: parseInt(capacity), latitude: parseFloat(latitude), longitude: parseFloat(longitude)};
36+
console.log(data);
37+
alert(await createSTS(data) || "STS data invalid");
4838
};
4939

5040

5141
return (
5242
<Dialog>
53-
<DialogTrigger asChild>
54-
{/* <Button variant="outline">Edit Profile</Button> */}
43+
<DialogTrigger asChild>
5544
{children}
5645
</DialogTrigger>
5746
<DialogContent className="w-[825px]">
5847
<DialogHeader>
59-
<DialogTitle>Add New STS</DialogTitle>
48+
<DialogTitle>ADD NEW STS</DialogTitle>
6049
<DialogDescription>
6150
Add new STS here. Click save when you're done.
6251
</DialogDescription>
@@ -100,12 +89,10 @@ export const StsCreateModal: React.FC<DialogWrapperProps> = ({
10089
/>
10190
</div>
10291
<div className="grid grid-cols-4 items-center gap-4">
103-
<Label htmlFor="location" className="text-right">
104-
STS Location<br/><br/>
105-
Latitude<br/><br/>
106-
Longitude
107-
</Label>
108-
<SetZone setLatitude={setLatitude} setLongitude={setLongitude}></SetZone>
92+
93+
94+
<SetZone setLatitude={setLatitude} setLongitude={setLongitude}/>
95+
10996
</div>
11097
</div>
11198
<DialogFooter>

‎client/data/apiRoutes.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,10 @@ export const apiRoutes = {
1111
delete: `${baseUrl}/users/`,
1212
edit: `${baseUrl}/users/`,
1313
},
14+
sts: {
15+
create: `${baseUrl}/sts/create`,
16+
getAll: `${baseUrl}/sts`,
17+
delete: `${baseUrl}/sts/`,
18+
edit: `${baseUrl}/sts/`,
19+
},
1420
}

‎client/hooks/entityCreation/useCreateSTS.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
"use client";
2+
import { apiRoutes } from "@/data/apiRoutes";
3+
import { jwtToken } from "@/data/cookieNames";
4+
import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
5+
import { getCookie } from "@/lib/cookieFunctions";
6+
import axios from "axios";
7+
export type STS = {
8+
name: string;
9+
wardNumber: string;
10+
capacity: number;
11+
latitude: number;
12+
longitude: number;
13+
};
14+
15+
export default function useCreateSTS() {
16+
// const [stsData, setStsData] = useState<STS>();
17+
18+
function isValid(stsData: STS) {
19+
20+
return (
21+
stsData.name.length > 0 &&
22+
stsData.wardNumber.length > 0 &&
23+
stsData.capacity > 0 &&
24+
stsData.latitude !== null &&
25+
stsData.longitude !== null
26+
);
27+
}
28+
29+
async function createSTS(stsData: STS) {
30+
if (stsData && isValid(stsData)) {
31+
try {
32+
const res = await axios.post(apiRoutes.sts.create, stsData, {
33+
headers: {
34+
Authorization: `Bearer ${await getCookie(jwtToken)}`,
35+
},
36+
});
37+
return "STS Aadded successfully";
38+
} catch (error: any) {
39+
return error.message?.toString() || "Error creating STS";
40+
}
41+
}
42+
43+
return null;
44+
}
45+
46+
return { createSTS };
47+
}

0 commit comments

Comments
 (0)