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

fixing locimage paths, starting room work

Browse Source
This commit is contained in:
deranjer
2022-01-08 22:50:46 -05:00
parent e84f57692a
commit c811a8e2b9
10 changed files with 258 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,7 @@
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 { useNavigate } from "react-router-dom";
import { useNotifications } from '@mantine/notifications';
import { backendAPI } from '../../services/backend-api';
@@ -14,6 +15,7 @@ function LocationsPage(props) {
const serverConfig = useContext(APIContext);
const notifications = useNotifications();
const navigate = useNavigate();
useEffect(() => {
console.log("LOADING LOCATIONS PAGE!")
@@ -47,7 +49,7 @@ function LocationsPage(props) {
<Center><Text>Locations</Text></Center>
<SimpleGrid cols={4} spacing="xl">
{ locations.map((location, idx) =>
<Card key={`${idx} - ${location.ID}`} component="a" onClick={(e) => {props.setCurrentPage({"path": "rooms", "id": location.ID})}} shadow="sm" padding="md">
<Card key={`${idx} - ${location.ID}`} component="a" onClick={(e) => {navigate("/rooms", { state: { locationID: 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>

19
frontend/src/components/pages/RoomsPage.js
View File

@@ -1,6 +1,7 @@
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 { useLocation } from "react-router-dom";
import { useNotifications } from '@mantine/notifications';
import { backendAPI } from '../../services/backend-api';
@@ -9,23 +10,24 @@ import { backendAPI } from '../../services/backend-api';
function RoomsPage(props) {
// const [opened, setOpened] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [rooms, setLocations] = useState([])
const [rooms, setRooms] = useState([])
const serverConfig = useContext(APIContext);
const notifications = useNotifications();
const {state} = useLocation();
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}`
let url = `rooms`
console.log("CURRENT STATE: ", state)
if (state) {
url = `rooms/${state.locationID}`
}
backendAPI.get(url).then(results => {
console.log("CONFIG IN LOCATIONS: ", serverConfig)
setLocations(results.data)
console.log("ROOMS: ", results)
setRooms(results.data)
setIsLoading(false)
}).catch(err => {
notifications.showNotification({
@@ -47,9 +49,10 @@ function RoomsPage(props) {
return (
<>
<Center>{ isLoading && <Loader size="xl" variant="bars" />}</Center>
<Center><Text>Rooms</Text></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 key={`${room.ID}`} component="a" onClick={(e) => {}} 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>