more frontend formatting and logic for locations and rooms

frontend/src/components/SideBar.js

@@ -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>

frontend/src/components/pages/Locations.js

@@ -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>

frontend/src/components/pages/RoomsPage.js

@@ -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>