feat: add optional place labels and logo

README.md

@@ -48,6 +48,11 @@ There are a few different variables that can be set in the `/frontend/.env` file
 
 Your API should return a JSON object with the following fields:
 
+-   `logo`: The URL of the logo to be used in the header. **Optional**
+-   `data`: An array of building data.
+
+The building data has the following fields:
+
 -   `building`: The name of the building.
 -   `building_code`: The code of the building.
 -   `building_status`: The status of the building.

docs/example_api_response.json

@@ -1,22 +1,31 @@
-[
-  {
-    "building": "Your Building Name",
-    "building_code": "Your Building Code",
-    "building_status": "available",
-    "coords": [0, 0],
-    "distance": 0,
-    "distance_unit": "mi",
-    "rooms": [
-      {
-        "roomNumber": "Your Room Number",
-        "slots": [
-          {
-            "EndTime": "Your End Time",
-            "StartTime": "Your Start Time",
-            "Status": "Your Status"
-          }
-        ]
-      }
-    ]
-  }
-]
+{
+  "logo": "**Optional** Your Logo URL",
+  "data": [
+    {
+      "building": "Your Building Name",
+      "building_code": "Your Building Code",
+      "building_status": "available",
+      "coords": [0, 0],
+      "distance": 0,
+      "distance_unit": "mi",
+      "labels": [
+        {
+          "label": "Your Label",
+          "color": "**Optional** Your Color (HEX VALUE)"
+        }
+      ],
+      "rooms": [
+        {
+          "roomNumber": "Your Room Number",
+          "slots": [
+            {
+              "EndTime": "Your End Time",
+              "StartTime": "Your Start Time",
+              "Status": "Your Status"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

frontend/app/page.tsx

@@ -5,10 +5,11 @@ import Image from "next/image";
 import { Map as MapComponent } from "@/components/controls/map/map";
 import { Loading } from "@/components/ui";
 import { BuildingDrawer } from "@/components/controls";
-import { type MapData } from "@/lib";
+import { APIResponse, type MapData } from "@/lib";
 import { mapDataService } from "@/lib/services";
 
 export default function OpenSpots() {
+  const [logo, setLogo] = useState<string | null>(null);
   const [data, setData] = useState<MapData[]>([]);
   const [activeBuilding, setActiveBuilding] = useState<string | null>(null);
   const [userPos, setUserPos] = useState<[number, number] | null>(null);
@@ -39,24 +40,29 @@ export default function OpenSpots() {
             const { latitude, longitude } = position.coords;
             setUserPos([latitude, longitude]);
 
-            const data = await mapDataService.sendUserLocation(
+            const data: APIResponse = await mapDataService.sendUserLocation(
               latitude,
               longitude
             );
-            setData(data);
+            setData(data.data);
+            setLogo(data.logo || null);
             setLoading(false);
           },
           async (error) => {
             console.error("Error fetching location here:", error);
-            const defaultData = await mapDataService.sendDefaultLocationData();
-            setData(defaultData);
+            const defaultData: APIResponse =
+              await mapDataService.sendDefaultLocationData();
+            setData(defaultData.data);
+            setLogo(defaultData.logo || null);
             setLoading(false);
           }
         );
       } else {
         console.error("Geolocation is not supported by this browser.");
-        const defaultData = await mapDataService.sendDefaultLocationData();
-        setData(defaultData);
+        const defaultData: APIResponse =
+          await mapDataService.sendDefaultLocationData();
+        setData(defaultData.data);
+        setLogo(defaultData.logo || null);
         setLoading(false);
       }
     };
@@ -73,6 +79,7 @@ export default function OpenSpots() {
       <div className="basis-2/5 sm:h-full order-last sm:order-first py-4 sm:px-0 sm:py-4 overflow-hidden sm:flex sm:flex-col">
         <div className="w-full h-20 pl-8 pr-4 mb-4 hidden sm:flex sm:justify-between items-center">
           <Image src={"/logo.png"} width={200} height={200} alt="Logo" />
+          {logo && <img className="w-20" src={logo} alt="Logo" />}
         </div>
         <ScrollArea id="scroll-area" className="h-full mb-2">
           <div className="flex flex-col justify-between h-full">

frontend/components/controls/building-drawer/building-drawer.module.css

@@ -3,7 +3,7 @@
 }
 
 .opening-soon {
-  background-color:#34d39991;
+  background-color: #34d39991;
 }
 
 .unavailable {
@@ -37,3 +37,15 @@
   font-size: 0.825rem;
   color: lightgray;
 }
+
+.tags {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.tag {
+  padding: 0.25rem;
+  line-height: 1;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+}

frontend/components/controls/building-drawer/building-drawer.tsx

@@ -11,7 +11,6 @@ import {
   sliceString,
   type MapData,
 } from "@/lib";
-
 import { clsx } from "clsx";
 import classes from "./building-drawer.module.css";
 
@@ -52,6 +51,18 @@ export const BuildingDrawer = ({
   activeBuilding,
   setActiveBuilding,
 }: BuildingDrawerProps) => {
+  const getBuildingType = (building: MapData) => {
+    if (!building.labels) {
+      return null;
+    }
+
+    return building.labels.map((label) => (
+      <div className={classes.tag} style={{ backgroundColor: label.color }}>
+        {label.label}
+      </div>
+    ));
+  };
+
   return (
     <div className="px-8">
       <Accordion
@@ -70,8 +81,15 @@ export const BuildingDrawer = ({
           >
             <AccordionTrigger>
               <div className="flex justify-between w-[95%] text-left text-lg group items-center">
-                <div className="group-hover:underline underline-offset-8 pr-2">
-                  {building.building}
+                <div className="pr-2">
+                  <div className="flex items-center gap-2">
+                    <div className="group-hover:underline underline-offset-8">
+                      {building.building}
+                    </div>
+                    <div className={classes.tags}>
+                      {getBuildingType(building)}
+                    </div>
+                  </div>
                   <div className={classes.distance}>
                     {roundDistanceToHundreds(building.distance)}{" "}
                     {building.distance_unit}

frontend/lib/types/index.ts

@@ -1 +1 @@
-export * from "./map.types";
+export * from "./map.types";

frontend/lib/types/map.types.ts

@@ -1,3 +1,8 @@
+export type APIResponse = {
+  data: MapData[];
+  logo?: string;
+};
+
 export type MapData = {
   building: string;
   building_code: string;
@@ -6,6 +11,13 @@ export type MapData = {
   coords: [number, number];
   distance: number;
   distance_unit: string;
+  labels?: Label[];
+  logo?: string;
+};
+
+export type Label = {
+  label: string;
+  color?: string;
 };
 
 export type Slot = {