Skip to content
Snippets Groups Projects
Commit 1fe3f5f5 authored by Tonge, Marcus A (UG - Comp Sci & Elec Eng)'s avatar Tonge, Marcus A (UG - Comp Sci & Elec Eng)
Browse files

Updated front-end to operate with locations service

parent dcdc510f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/pages/admin/admin.js
+ 76
− 57
View file @ 1fe3f5f5
...@@ -60,11 +60,15 @@ const AdminPageView = () => { ...@@ -60,11 +60,15 @@ const AdminPageView = () => {
const [locations, setLocations] = useState([]); const [locations, setLocations] = useState([]);
const { isOpen, onOpen, onClose } = useDisclosure(); const { isOpen, onOpen, onClose } = useDisclosure();
const [newLocation, setNewLocation] = useState({ const [newLocation, setNewLocation] = useState({
title: "", Title: "",
address: "", Description: "",
latitude: 0, city: "",
longitude: 0, street_address: "",
spaces: 0, postcode: "",
lat: 0,
lon: 0,
spaces_available: 0,
total_spaces: 0,
}); });
// Load locations when the page is loaded // Load locations when the page is loaded
...@@ -74,51 +78,40 @@ const AdminPageView = () => { ...@@ -74,51 +78,40 @@ const AdminPageView = () => {
// Fetch locations from the server // Fetch locations from the server
const loadLocations = async () => { const loadLocations = async () => {
// const response = await fetch("/api/locations"); const response = await fetch("/api/locations");
// const data = await response.json(); const data = await response.json();
const data = [
{
_id: 1,
title: "sd",
address: "sd",
latitude: 0,
longitude: 0,
spaces: 0,
},
{
_id: 2,
title: "sd",
address: "sd",
latitude: 0,
longitude: 0,
spaces: 0,
}
];
setLocations(data); setLocations(data);
}; };
// Add a new location // Add a new location
const addLocation = async (location) => { const addLocation = async (location) => {
const { title, address, latitude, longitude, spaces } = location; // const { Title, Description, city, street_address, lat, lon, total_spaces, spaces_available } = location;
console.log(location); console.log(location);
try { try {
const response = await fetch("/api/locations", { const response = await fetch("/location/parking-locations", {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: {
body: JSON.stringify(newLocation), Authorization: `Bearer ${localStorage.getItem("token")}`,
},
body: JSON.stringify(location),
}); });
if (!response.ok) { if (!response.ok) {
throw new Error("Failed to add location"); throw new Error("Failed to add location");
} }
setNewLocation({ setNewLocation({
title: title, Title: "",
address: address, Description: "",
latitude: latitude, city: "",
longitude: longitude, street_address: "",
spaces: spaces, postcode: "",
lat: 0,
lon: 0,
spaces_available: 0,
total_spaces: 0,
}); });
toast({ toast({
title: "Added new location.", title: "Added new location.",
...@@ -141,7 +134,7 @@ const AdminPageView = () => { ...@@ -141,7 +134,7 @@ const AdminPageView = () => {
// Delete a location // Delete a location
const deleteLocation = async (id) => { const deleteLocation = async (id) => {
try { try {
const response = await fetch(`/api/locations/${id}`, { const response = await fetch(`/location/parking-locations/${id}`, {
method: 'DELETE', method: 'DELETE',
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`, Authorization: `Bearer ${localStorage.getItem("token")}`,
...@@ -213,19 +206,25 @@ const AdminPageView = () => { ...@@ -213,19 +206,25 @@ const AdminPageView = () => {
<div> <div>
<Text mr={4} fontSize={18}> <Text mr={4} fontSize={18}>
<strong></strong> <strong></strong>
<strong>Title:</strong> {location.title} <strong>Title:</strong> {location.Title}
</Text> </Text>
<Text flex="1"> <Text flex="1">
<strong>Address:</strong> {location.address} <strong>Description:</strong> {location.Description}
</Text> </Text>
<Text flex="1"> <Text flex="1">
<strong>Longitude:</strong> {location.longitude} <strong>Address:</strong> {location.street_address}
</Text> </Text>
<Text flex="1"> <Text flex="1">
<strong>Latitude:</strong> {location.latitude} <strong>Postcode:</strong> {location.postcode}
</Text> </Text>
<Text flex="1"> <Text flex="1">
<strong>Spaces:</strong> {location.spaces} <strong>Longitude:</strong> {location.lon}
</Text>
<Text flex="1">
<strong>Latitude:</strong> {location.lat}
</Text>
<Text flex="1">
<strong>Total Spaces:</strong> {location.total_spaces}
</Text> </Text>
</div> </div>
<Button <Button
...@@ -255,64 +254,84 @@ const AdminPageView = () => { ...@@ -255,64 +254,84 @@ const AdminPageView = () => {
<ModalCloseButton /> <ModalCloseButton />
<ModalBody> <ModalBody>
<VStack spacing="4"> <VStack spacing="4">
<FormControl id="title"> <FormControl id="Title">
<FormLabel>Title</FormLabel> <FormLabel>Title</FormLabel>
<Input <Input
type="text" type="text"
value={newLocation.title} value={newLocation.Title}
onChange={(e) =>
setNewLocation({ ...newLocation, Title: e.target.value })
}
/>
</FormControl>
<FormControl id="Description">
<FormLabel>Description</FormLabel>
<Input
type="text"
value={newLocation.Description}
onChange={(e) =>
setNewLocation({ ...newLocation, Description: e.target.value })
}
/>
</FormControl>
<FormControl id="street_address">
<FormLabel>Street Address</FormLabel>
<Input
type="text"
value={newLocation.street_address}
onChange={(e) => onChange={(e) =>
setNewLocation({ ...newLocation, title: e.target.value }) setNewLocation({ ...newLocation, street_address: e.target.value })
} }
/> />
</FormControl> </FormControl>
<FormControl id="address"> <FormControl id="city">
<FormLabel>Address</FormLabel> <FormLabel>City</FormLabel>
<Input <Input
type="text" type="text"
value={newLocation.address} value={newLocation.city}
onChange={(e) => onChange={(e) =>
setNewLocation({ ...newLocation, address: e.target.value }) setNewLocation({ ...newLocation, city: e.target.value })
} }
/> />
</FormControl> </FormControl>
<FormControl id="latitude"> <FormControl id="lat">
<FormLabel>Latitude</FormLabel> <FormLabel>Latitude</FormLabel>
<Input <Input
type="number" type="number"
step="0.000001" step="0.000001"
value={newLocation.latitude} value={newLocation.lat}
onChange={(e) => onChange={(e) =>
setNewLocation({ setNewLocation({
...newLocation, ...newLocation,
latitude: parseFloat(e.target.value), lat: parseFloat(e.target.value),
}) })
} }
/> />
</FormControl> </FormControl>
<FormControl id="longitude"> <FormControl id="lon">
<FormLabel>Longitude</FormLabel> <FormLabel>Longitude</FormLabel>
<Input <Input
type="number" type="number"
step="0.000001" step="0.000001"
value={newLocation.longitude} value={newLocation.lon}
onChange={(e) => onChange={(e) =>
setNewLocation({ setNewLocation({
...newLocation, ...newLocation,
longitude: parseFloat(e.target.value), lon: parseFloat(e.target.value),
}) })
} }
/> />
</FormControl> </FormControl>
<FormControl id="spaces"> <FormControl id="total_spaces">
<FormLabel>Spaces</FormLabel> <FormLabel>Total Spaces</FormLabel>
<NumberInput <NumberInput
value={newLocation.spaces} value={newLocation.total_spaces}
onChange={(value) => { onChange={(value) => {
const intValue = parseInt(value); const intValue = parseInt(value);
if (!isNaN(intValue) && intValue > 0) { if (!isNaN(intValue) && intValue > 0) {
setNewLocation({ setNewLocation({
...newLocation, ...newLocation,
spaces: intValue, total_spaces: intValue,
}); });
} }
} }
......
src/pages/parking_areas/parking_areas.js
+ 29
− 89
View file @ 1fe3f5f5
...@@ -20,7 +20,6 @@ import { ...@@ -20,7 +20,6 @@ import {
Spinner, Spinner,
Flex, Flex,
VStack, VStack,
Badge,
Heading, Heading,
Grid, Grid,
GridItem, GridItem,
...@@ -51,84 +50,21 @@ const ParkingAreasPage = () => { ...@@ -51,84 +50,21 @@ const ParkingAreasPage = () => {
const handleSearchClick = async () => { const handleSearchClick = async () => {
try { try {
// const response = await fetch( const response = await fetch(
// `${API_URL}/parking-areas?postcode=${postcode}&radius=${radius}` `${API_URL}/location/parking-locations?postcode=${postcode}&radius=${radius}`
// ); );
const data = [ // const data = [
{ // {
id: 1, // _id: 1,
title: "Test Location1",
address: "123 Address Road", // Title: "Test Location1",
latitude: -0.111245, // street_address: "123 Address Road",
longitude: -0.1245, // postcode: "SSFU",
spaces: 100, // city: "London",
}, // spaces_available: 100,
{ // },
id: 2, // ];
title: "Test Location2", const data = await response.json();
address: "123 Address Road",
latitude: -0.111245,
longitude: -0.1245,
spaces: 54,
},
{
id: 3,
title: "Test Location3",
address: "123 Address Road",
latitude: -0.111245,
longitude: -0.14,
spaces: 43,
},
{
id: 4,
title: "Test Location4",
address: "123 Address Road",
latitude: -0.111245,
longitude: -0.111245,
spaces: 0,
},
{
id: 5,
title: "Test Location5",
address: "123 Address Road",
latitude: -0.111245,
longitude: -0.111245,
spaces: 0,
},
{
id: 6,
title: "Test Location6",
address: "123 Address Road",
latitude: -0.111245,
longitude: -0.111245,
spaces: 12,
},
{
id: 7,
title: "Test Location7",
address: "123 Address Road",
latitude: -0.111245,
longitude: -0.111245,
spaces: 10,
},
{
id: 8,
title: "Test Location8",
address: "123 Address Road",
latitude: -0.111245,
longitude: -0.111245,
spaces: 0,
},
{
id: 9,
title: "Test Location9",
address: "123 Address Road",
latitude: -0.111245,
longitude: -0.111245,
spaces: 3,
},
];
// const data = await response.json();
setParkingAreas(data); setParkingAreas(data);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
...@@ -154,7 +90,7 @@ const ParkingAreasPage = () => { ...@@ -154,7 +90,7 @@ const ParkingAreasPage = () => {
try { try {
const response = await fetch( const response = await fetch(
`${API_URL}/parking-areas/${selectedParkingArea.id}/book`, `${API_URL}/parking-areas/${selectedParkingArea._id}/book`,
{ {
method: "POST", method: "POST",
headers: { headers: {
...@@ -233,7 +169,7 @@ const ParkingAreasPage = () => { ...@@ -233,7 +169,7 @@ const ParkingAreasPage = () => {
<Grid gap={6} templateColumns={['repeat(1, 1fr)', 'repeat(2, 1fr)', 'repeat(3, 1fr)', 'repeat(4, 1fr)',]}> <Grid gap={6} templateColumns={['repeat(1, 1fr)', 'repeat(2, 1fr)', 'repeat(3, 1fr)', 'repeat(4, 1fr)',]}>
{parkingAreas.map((parkingArea) => ( {parkingAreas.map((parkingArea) => (
<GridItem <GridItem
key={parkingArea.id} key={parkingArea._id}
p={4} p={4}
border="1px solid" border="1px solid"
borderColor="gray.200" borderColor="gray.200"
...@@ -242,20 +178,24 @@ const ParkingAreasPage = () => { ...@@ -242,20 +178,24 @@ const ParkingAreasPage = () => {
> >
<VStack > <VStack >
<Heading as="h2" fontSize="xl" mb={2} textAlign="center"> <Heading as="h2" fontSize="xl" mb={2} textAlign="center">
{parkingArea.title} {parkingArea.Title}
</Heading> </Heading>
<Text fontSize="md" mb={2} textAlign="center"> <Text fontSize="md" mb={2} textAlign="center">
{parkingArea.address} {parkingArea.street_address}
</Text>
<Text fontSize="md" mb={2} textAlign="center">
{parkingArea.city}
</Text>
<Text fontSize="md" mb={2} textAlign="center">
{parkingArea.postcode}
</Text> </Text>
<Box> {parkingArea.spaces_available === 0 ? (
<Badge colorScheme="gray" mr={2}>
LatLng: ({parkingArea.latitude}, {parkingArea.longitude})
</Badge>
</Box>
{parkingArea.spaces === 0 ? (
<Text color="gray.500">No spaces available</Text> <Text color="gray.500">No spaces available</Text>
) : ( ) : (
<>
<Text>Spaces available: {parkingArea.spaces_available}</Text>
<Button onClick={() => handleParkingAreaClick(parkingArea)} colorScheme="teal">Book a space</Button> <Button onClick={() => handleParkingAreaClick(parkingArea)} colorScheme="teal">Book a space</Button>
</>
)} )}
</VStack> </VStack>
</GridItem> </GridItem>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment