fixing locimage paths, starting room work

This commit is contained in:
2022-01-08 22:50:46 -05:00
parent e84f57692a
commit c811a8e2b9
10 changed files with 258 additions and 41 deletions

View File

@@ -33,7 +33,7 @@ function App() {
useEffect(() => {
navigate("/")// Reset to homepage on new load anywhere in the app
// navigate("/")// Reset to homepage on new load anywhere in the app
setIsLoading(true)
async function fetchSettings() {
backendAPI.get('/config').then(results => {
@@ -63,26 +63,20 @@ function App() {
}, [])
useEffect(() => {
console.log("Page Change!", currentPage)
}, [currentPage])
function showPage() {
switch (currentPage.path) {
case "home":
return <HomePage />
case "locations":
console.log("RETURNING LOCATIONS: ", currentPage)
return <Locations setCurrentPage={setCurrentPage} id={currentPage.id}/>
case "rooms":
console.log("RETURNING ROOMS: ", currentPage)
return <RoomsPage setCurrentPage={setCurrentPage} id={currentPage.id} />
default:
break;
}
}
// function showPage() {
// switch (currentPage.path) {
// case "home":
// return <HomePage />
// case "locations":
// console.log("RETURNING LOCATIONS: ", currentPage)
// return <Locations setCurrentPage={setCurrentPage} id={currentPage.id}/>
// case "rooms":
// console.log("RETURNING ROOMS: ", currentPage)
// return <RoomsPage setCurrentPage={setCurrentPage} id={currentPage.id} />
// default:
// break;
// }
// }
return (

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>

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>