more frontend formatting and logic for locations and rooms

This commit is contained in:
2022-03-28 22:47:37 -04:00
parent 02a9c6c99c
commit 36fe4ca701
10 changed files with 273 additions and 57 deletions

View File

@@ -2030,11 +2030,11 @@
}
},
"@mantine/core": {
"version": "4.0.9",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-4.0.9.tgz",
"integrity": "sha512-x7qEnot6dUqstby8G3Hn06zH39sAzC610qEUUThsw1a/UFJvHjr+UONcfDkBGX3XzcgsgOLn/HnOksUHE349fg==",
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-4.1.0.tgz",
"integrity": "sha512-uEHGssKveDgGHhbBrgVqp8o12m0oQGLBKH3D8bkrca1GB905ZHuj8CG+i/ojBhqdalfUwqcYGRpwwALtD+XfJg==",
"requires": {
"@mantine/styles": "4.0.9",
"@mantine/styles": "4.1.0",
"@popperjs/core": "^2.9.3",
"@radix-ui/react-scroll-area": "^0.1.1",
"clsx": "^1.1.1",
@@ -2043,9 +2043,9 @@
}
},
"@mantine/dates": {
"version": "4.0.9",
"resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-4.0.9.tgz",
"integrity": "sha512-Dd+wsg6pVsdgeCNNqExhh9p+K651rh1/bAlClsdlPPOoOZzEDMM2U8cN2c4ZVJVbmAeF0spcF4dFLz9G3DX3yA==",
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-4.1.0.tgz",
"integrity": "sha512-kdKQ9PRGbYe1YhRlqWVUVGG7IKHjdIWMX3XhSFbWWLkfUxqSG4dhwNeAZIcbHXDZhFT9xIifFlBlDiN7JIOmtA==",
"requires": {
"@popperjs/core": "^2.9.3",
"clsx": "^1.1.1",
@@ -2053,31 +2053,31 @@
}
},
"@mantine/dropzone": {
"version": "4.0.9",
"resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-4.0.9.tgz",
"integrity": "sha512-E9ULojgCUJ5tV4CoMKA7XNa6Qj67VWyXSAwaXWhDeOfMDQy8feYPIbC7lcHlbSo5nBm9IhzjXp5JMLDwRbxAPA==",
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-4.1.0.tgz",
"integrity": "sha512-ixu9VGg/dX5DO/BhyoSYH+9nwAmBTElBml7efClawMlvYaifhoOnNiEWykESwjGaGa6/tww0qxzd/ddsI9jEVQ==",
"requires": {
"react-dropzone": "^11.4.2"
}
},
"@mantine/hooks": {
"version": "4.0.9",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-4.0.9.tgz",
"integrity": "sha512-b+IrevT05/nAM2H0iKWC9BP0gr/U8kF3U8Ge+EnvSFeSOWp/exm/Wy5toorQ83nQbmfCjkSAL5WDb6Jx0gI/Fg=="
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-4.1.0.tgz",
"integrity": "sha512-bvVvHDDfYqdIxl7n+lBBwSIkcqInv6kK+fxvEfFBOUEzN6KbpJaPdaYXP788x64uFbA7AODQjdtOhk3tMyQA8Q=="
},
"@mantine/notifications": {
"version": "4.0.9",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-4.0.9.tgz",
"integrity": "sha512-pMM+Pb1p+OdfHl16XvT8jKer8AR/2puVpfO2AUXZ7iJWxycfYkq5vgGW9kY1lowp/B+iS1Cqc7fqwNLPo4HCnA==",
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-4.1.0.tgz",
"integrity": "sha512-2pdRiK4UVDSHeCcHLSY7GFyXXn4t9HkoVqypXPwybWDBeT6tSOry+5l/+/HKhOpSPktxWykr+4OACUhtBYn5dg==",
"requires": {
"clsx": "^1.1.1",
"react-transition-group": "^4.4.2"
}
},
"@mantine/styles": {
"version": "4.0.9",
"resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-4.0.9.tgz",
"integrity": "sha512-pZIJ4lAl0RDbIYosJEJpEv2iYutlIDMlgoCOac32jB3GkY1iPu2mZjVTp5/aySLI1e/2hb0Pb+kHM58nnG82wA==",
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-4.1.0.tgz",
"integrity": "sha512-mWFNSE5DqE/5C9TDYIkQVbTef8QyWnW8a8MADHl6S52K0iGU8nqw4jnyozB+6y9JEIxdl+sp0o16L2JnAsq7bA==",
"requires": {
"@emotion/cache": "^11.7.1",
"@emotion/react": "^11.7.1",

View File

@@ -3,11 +3,11 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@mantine/core": "^4.0.9",
"@mantine/dates": "^4.0.9",
"@mantine/dropzone": "^4.0.9",
"@mantine/hooks": "^4.0.9",
"@mantine/notifications": "^4.0.9",
"@mantine/core": "^4.1.0",
"@mantine/dates": "^4.1.0",
"@mantine/dropzone": "^4.1.0",
"@mantine/hooks": "^4.1.0",
"@mantine/notifications": "^4.1.0",
"@testing-library/jest-dom": "^5.16.3",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",

View File

@@ -1,6 +1,6 @@
import React, {useState } from 'react';
import { useAtom } from 'jotai';
import { activePageAtom } from '../state/main';
import { activePageAtom, roomFilterAtom } from '../state/main';
import { Navbar, Text, Group, ThemeIcon, Button, UnstyledButton } from '@mantine/core';
import { Link } from 'react-router-dom';
import { createStyles } from '@mantine/styles';
@@ -39,6 +39,14 @@ const useStyles = createStyles((theme) => ({
function SideBar(props) {
const { classes } = useStyles();
const [activePage, setActivePage] = useAtom(activePageAtom)
const [roomFilter, setRoomFilter] = useAtom(roomFilterAtom)
const changeView = (newView) => {
if (newView === "rooms") {
setRoomFilter({})
}
setActivePage(newView)
}
return (
@@ -61,7 +69,7 @@ function SideBar(props) {
</Group>
</UnstyledButton> */}
<UnstyledButton component={Link} to="/rooms" className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => setActivePage("rooms")} >
<UnstyledButton component={Link} to="/rooms" className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => changeView("rooms")} >
<Group>
<BsMap />
<Text>Rooms</Text>

View File

@@ -1,7 +1,7 @@
import React, {useState, useEffect, useContext, createContext} from 'react';
import { useAtom } from 'jotai'
import { activePageAtom, roomFilterAtom, serverConfigAtom } from '../../state/main';
import { Text, Loader, Center, Card, Image, Badge, Button, SimpleGrid, Group } from '@mantine/core'
import { Text, Loader, Center, Card, Image, Badge, Button, SimpleGrid, Group, Title } from '@mantine/core'
import { useNavigate } from "react-router-dom";
import { useNotifications } from '@mantine/notifications';
@@ -46,10 +46,9 @@ function LocationsPage(props) {
}, [])
const navigateToRooms = (locationID) => {
console.log("Passedlocid: ", locationID)
const navigateToRooms = (locationID, locationName) => {
setActivePage("rooms")
setRoomsFilter({"locationID": locationID})
setRoomsFilter({"filterType": "location", "locationID": locationID, "commonName": "location", "metadata": locationName})
navigate("/rooms")
}
@@ -57,20 +56,25 @@ function LocationsPage(props) {
return (
<>
<Center>{ isLoading && <Loader size="xl" variant="bars" />}</Center>
<Center><Text>Locations</Text></Center>
<Center><Title order={1}>Locations</Title></Center>
<SimpleGrid cols={4} spacing="xl">
{ locations.map((location, idx) =>
<Card key={`${idx} - ${location.ID}`} component="a" onClick={() => navigateToRooms(location.ID)} shadow="sm" padding="md">
<Card key={`${idx} - ${location.ID}`} shadow="md" padding="md">
<Card.Section>
{location.CoverPhoto ? <Image src={`${serverConfig.baseURL}/photos/locations/${location.Name}/${location.CoverPhoto}`}></Image> : <Text>No Photo</Text>}
</Card.Section>
<Group position="apart">
<Text weight={500}>{location.Name}</Text>
{/* <Badge color="pink" variant="light">
On Sale
</Badge> */}
<Badge variant="light">
{ location.Rooms !== null && location.Rooms.length !== 0 && location.Rooms.length > 1 ? <Text>{location.Rooms.length} Rooms</Text> : <Text>{location.Rooms.length} Room</Text>}
</Badge>
</Group>
<Text size="sm">{location.Description}</Text>
<Group>
<Button onClick={() => navigateToRooms(location.ID, location.Name)}>View Details</Button>
<Button onClick={() => navigateToRooms(location.ID, location.Name)}>View Rooms</Button>
</Group>
</Card>
)}
</SimpleGrid>

View File

@@ -1,7 +1,7 @@
import React, {useState, useEffect, useContext, createContext} from 'react';
import { useAtom } from 'jotai'
import { roomFilterAtom, serverConfigAtom } from '../../state/main';
import { Text, Loader, Center, Card, Image, Badge, Button, SimpleGrid, Group } from '@mantine/core'
import { Text, Loader, Center, Card, Image, Badge, Button, SimpleGrid, Group, Title, ActionIcon } from '@mantine/core'
import { useLocation } from "react-router-dom";
import { useNotifications } from '@mantine/notifications';
@@ -47,20 +47,32 @@ function RoomsPage(props) {
fetchSettings();
}, [])
}, [roomFilter])
// Check if filter changes for this page and refresh results
useEffect(() => {
console.log("CURRENT ROOM FILTER: ", roomFilter)
}, [roomFilter, setFilter])
}, [roomFilter, setRoomFilter])
const removeFilterButton = (
<ActionIcon size="xs" color="blue" radius="xl" variant="transparent">
<Text>X</Text>
</ActionIcon>
);
return (
<>
<Center>{ isLoading && <Loader size="xl" variant="bars" />}</Center>
<Center><Text>Rooms</Text></Center>
<Center><Title order={1}>Rooms</Title></Center>
{ Object.keys(roomFilter).length !== 0 &&
<Badge sx={{ paddingLeft: 0 }} size="lg" radius="xl" color="teal" leftSection={removeFilterButton} onClick={() => {setRoomFilter({})}}>
Filter by {roomFilter.commonName}: {roomFilter.metadata}
</Badge>
}
<SimpleGrid cols={4} spacing="xl">
{ rooms.map((room, idx) =>
<Card key={`${room.ID}`} component="a" onClick={(e) => {}} shadow="sm" padding="md">
@@ -69,11 +81,23 @@ function RoomsPage(props) {
</Card.Section>
<Group position="apart">
<Text weight={500}>{room.Name}</Text>
<Badge color="pink" variant="light">
{room.LocationName}
</Badge>
<Group>
<Badge color="pink" variant="light">
{room.LocationName}
</Badge>
<Badge variant='light'>
{room.Cabinets === null ? 0 : room.Cabinets.length} Cabinets
</Badge>
<Badge color='teal' variant='light'>
{room.Cabinets === null ? 0 : room.Cabinets.length} Items
</Badge>
</Group>
</Group>
<Text size="sm">{room.Description}</Text>
<Group>
<Button onClick={() => console.log("test")}>View Details</Button>
<Button onClick={() => console.log("test")}>View Rooms</Button>
</Group>
</Card>
)}
</SimpleGrid>