deranjer/goInventorize
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

react-router frontend, fixing backend issues, adding /api

Browse Source
This commit is contained in:
deranjer
2021-12-27 22:51:16 -05:00
parent eda6e3fc5b
commit e84f57692a
16 changed files with 370 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/SideBar.js
View File

@@ -1,5 +1,6 @@
import React, {useState } from 'react';
import { Navbar, Text, Group, ThemeIcon, Button, UnstyledButton } from '@mantine/core';
import { Link } from 'react-router-dom';
import { createStyles } from '@mantine/styles';
import { BsMap } from 'react-icons/bs'
@@ -37,10 +38,6 @@ function SideBar(props) {
const { classes } = useStyles();
const [activePage, setActivePage] = useState("")
function handlePageChange(page) {
props.setCurrentPage(page)
setActivePage(page)
}
return (
<Navbar
@@ -51,14 +48,18 @@ function SideBar(props) {
hidden={!props.opened}
width={{ base: 200, breakpoints: { sm: '100%', lg: 300 } }}
>
<UnstyledButton className={activePage === "locations" ? classes.activeButton : classes.button} onClick={() => handlePageChange("locations")} >
<Button leftIcon={<BsMap />} variant="white" className={activePage === "locations" ? classes.activeButton : classes.button} component={Link} to="/locations" onClick={() => setActivePage("locations")} >
Locations
</Button>
{/* <UnstyledButton component={Link} to="/locations" className={activePage === "locations" ? classes.activeButton : classes.button} >
<Group>
<BsMap />
<Text>Locations</Text>
</Group>
</UnstyledButton>
<UnstyledButton className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => handlePageChange("rooms")} >
</UnstyledButton> */}
<UnstyledButton component={Link} to="/about" className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => setActivePage("rooms")} >
<Group>
<BsMap />
<Text>Rooms</Text>

7
frontend/src/components/pages/Locations.js
View File

@@ -6,7 +6,7 @@ import { useNotifications } from '@mantine/notifications';
import { backendAPI } from '../../services/backend-api';
function LocationsPage() {
function LocationsPage(props) {
// const [opened, setOpened] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [locations, setLocations] = useState([])
@@ -16,10 +16,12 @@ function LocationsPage() {
const notifications = useNotifications();
useEffect(() => {
console.log("LOADING LOCATIONS PAGE!")
setIsLoading(true)
async function fetchSettings() {
backendAPI.get('/locations').then(results => {
console.log("CONFIG IN LOCATIONS: ", serverConfig)
console.log("LOCATIONS: ", results.data)
setLocations(results.data)
setIsLoading(false)
}).catch(err => {
@@ -42,9 +44,10 @@ function LocationsPage() {
return (
<>
<Center>{ isLoading && <Loader size="xl" variant="bars" />}</Center>
<Center><Text>Locations</Text></Center>
<SimpleGrid cols={4} spacing="xl">
{ locations.map((location, idx) =>
<Card key={`${idx}-${location.Name}`} shadow="sm" padding="md">
<Card key={`${idx} - ${location.ID}`} component="a" onClick={(e) => {props.setCurrentPage({"path": "rooms", "id": location.ID})}} shadow="sm" padding="md">
<Card.Section>
{location.CoverPhoto ? <Image src={`${serverConfig.baseURL}/photos/locations/${location.Name}/${location.CoverPhoto}`}></Image> : <Text>No Photo</Text>}
</Card.Section>

71
frontend/src/components/pages/RoomsPage.js Normal file
View File

@@ -0,0 +1,71 @@
import React, {useState, useEffect, useContext, createContext} from 'react';
import { APIContext } from '../../App';
import { Text, Loader, Center, Card, Image, Badge, Button, SimpleGrid, Group } from '@mantine/core'
import { useNotifications } from '@mantine/notifications';
import { backendAPI } from '../../services/backend-api';
function RoomsPage(props) {
// const [opened, setOpened] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [rooms, setLocations] = useState([])
const serverConfig = useContext(APIContext);
const notifications = useNotifications();
useEffect(() => {
setIsLoading(true)
async function fetchSettings() {
let url = `/rooms`
console.log("CURRENT PAGE IN ROOMS: ", props.id)
if (props.id !== -1) {
url = `/rooms/${props.id}`
}
backendAPI.get(url).then(results => {
console.log("CONFIG IN LOCATIONS: ", serverConfig)
setLocations(results.data)
setIsLoading(false)
}).catch(err => {
notifications.showNotification({
title: 'Backend Notice',
message: `Failed to fetch rooms from backend! ${err}`,
autoClose: false,
color: "red",
})
setIsLoading(false)
})
}
fetchSettings();
}, [])
return (
<>
<Center>{ isLoading && <Loader size="xl" variant="bars" />}</Center>
<SimpleGrid cols={4} spacing="xl">
{ rooms.map((room, idx) =>
<Card key={`${room.ID}`} component="a" onClick={(e) => {props.setCurrentPage({"path": "rooms", "id": room.ID})}} shadow="sm" padding="md">
<Card.Section>
{room.CoverPhoto ? <Image src={`${serverConfig.baseURL}/photos/rooms/${room.Name}/${room.CoverPhoto}`}></Image> : <Text>No Photo</Text>}
</Card.Section>
<Group position="apart">
<Text weight={500}>{room.Name}</Text>
{/* <Badge color="pink" variant="light">
On Sale
</Badge> */}
</Group>
<Text size="sm">{room.Description}</Text>
</Card>
)}
</SimpleGrid>
</>
);
}
export default RoomsPage;