added image carousel and made some fixes with UI colors

Author: joshuapozzolungo

backend/package-lock.json

@@ -23,6 +23,8 @@
   "homepage": "https://github.com/devsoc-unsw/Freerooms#readme",
   "dependencies": {
     "@graphql-typed-document-node/core": "^3.2.0",
+    "axios": "^1.19.0",
+    "cheerio": "^1.2.0",
     "cors": "^2.8.5",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
@@ -52,4 +54,4 @@
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.4.3"
   }
-}
+}

backend/package.json

@@ -194,3 +194,22 @@ export const queryRoomUtilities = async (
   const variables = { roomId };
   return await doRequest<RoomUtilitiesRes>(query, variables);
 };
+
+///////////////////////////////////////////////////////////////
+
+type RoomIdsRes = {
+  rooms: Array<{
+    id: string
+  }>
+}
+
+export const queryRoomIds = 
+  async (): Promise<RoomIdsRes> => {
+  
+  const query = `
+    query rooms(order_by: {id: asc}) {
+      id
+    }
+  `
+  return await doRequest<RoomIdsRes>(query)
+}

backend/src/dbInterface.ts

@@ -0,0 +1,44 @@
+import axios from "axios";
+import * as cheerio from "cheerio";
+import fs from "fs";
+import path from "path";
+import classrooms from "../classrooms.json";
+
+const OUTPUT_PATH = path.join(__dirname, "../../../frontend/public/room-photos.json");
+
+const CAMPUS_CODE = 0
+const BUILDING_CODE = 1
+
+async function scrapeRoom(): Promise<string | null> {
+  
+  const roomIds = classrooms.map((c) => c.id)
+  const results: Record<string, string[]> = {}
+  
+  for (const r of roomIds) {
+    
+    console.log(`Trying for ${r}`)
+    try {
+      const s = r.split("-")
+
+      const building = (s[CAMPUS_CODE] + "-" + s[BUILDING_CODE]).toLowerCase()
+      const room = r.toLowerCase()
+
+      const ROOM_URL = `https://www.learningenvironments.unsw.edu.au/physical-spaces/${building}/${room}`
+      
+      const {data} = await axios.get(ROOM_URL);
+      const $ = cheerio.load(data)
+      
+      const images = $("div.field--name-field-media-image a").map((i, el) => $(el).attr("href")).get()
+      console.log(images)
+      results[r] = images
+    } catch (error) {
+      results[r] = []
+    }
+
+  }
+  
+  fs.writeFileSync(OUTPUT_PATH, JSON.stringify(results, null, 2))
+  return null
+}
+
+scrapeRoom()

backend/src/utils/getRoomPhoto.ts

@@ -6,6 +6,7 @@
     "outDir": "dist",
     "strict": true,
     "esModuleInterop": true,
+    "resolveJsonModule": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "paths": {

backend/src/utils/room-photos.json

@@ -1,5 +1,8 @@
 "use client";
-
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Navigation } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/navigation';
 import translateRoomUsage from "@common/roomUsages";
 import getSchoolDetails from "@common/schools";
 import type { Booking, Room } from "@common/types";
@@ -69,7 +72,7 @@ export default function Page() {
   const [campus, grid] = room ? room.id.split("-") : ["", ""];
   const { building } = useBuilding(`${campus}-${grid}`);
   const { isFavourite, toggleFavourite } = useFavourites();
-
+  
   return (
     <Container maxWidth="xl">
       <FeedbackButton />
@@ -92,13 +95,12 @@ export default function Page() {
             favourite={isFavourite(room.id)}
             onToggleFavourite={() => toggleFavourite(room.id)}
           />
-          <RoomImage
-            src={
-              roomParam in room_photos
-                ? `${(room_photos as Record<string, string>)[roomParam]}`
-                : `/assets/building_photos/${campus}-${grid}.webp`
-            }
-          />
+          { /* Here */ }
+          <Carousel photos={
+            roomParam in room_photos && room_photos[roomParam].length > 0 
+              ? room_photos[roomParam]
+              : [`/assets/building_photos/${campus}-${grid}.webp`]
+          }/>
           <BookingCalendar events={adjustedBookings ?? []} roomID={room.id} />
           <RoomUtilityTags roomId={room?.id} />
           <RoomRating buildingID={building.id} roomID={room.id} />
@@ -306,6 +308,7 @@ const RoomPageHeader: React.FC<{
   );
 };
 
+{ /* Replace this with Carousel */ }
 const RoomImage: React.FC<{ src: string }> = ({ src }) => {
   return (
     <Box
@@ -324,3 +327,43 @@ const RoomImage: React.FC<{ src: string }> = ({ src }) => {
     </Box>
   );
 };
+
+const Carousel: React.FC<{ photos: string[] }> = ({ photos }) => {
+  const hasMultiplePhotos = photos.length > 1;
+  return (
+    <Box
+      sx={{
+        maxWidth: "100%",
+        height: 500,
+        position: "relative",
+      }}>
+        <Swiper
+          modules={[Autoplay, Navigation]}
+          navigation={hasMultiplePhotos}
+          autoplay={hasMultiplePhotos ? { delay: 5000, disableOnInteraction: false } : false}
+          speed={600}
+          loop={hasMultiplePhotos}
+          spaceBetween={50}
+          slidesPerView={1}
+          onSlideChange={() => console.log('slide change')}
+          onSwiper={(swiper) => console.log(swiper)}
+          style={{
+            height: "100%",
+            "--swiper-navigation-color": "#ffffff" 
+          }}
+        >
+          {photos.map((p) => (
+            <SwiperSlide style={{ position: "relative" }}>
+              <Image
+                src={p}
+                alt="Room Image"
+                fill
+                style={{ objectFit: "cover", borderRadius: 10}}
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </Box>
+
+  );
+}

backend/tsconfig.json

@@ -15,8 +15,8 @@ const RoomBoxSubheading = styled(Typography)<TypographyProps>(({ theme }) => ({
 }));
 
 const roomStatusColor = {
-  free: "#2AA300",
-  busy: "#D30000",
+  free: "#33FF33",
+  busy: "#FF000C",
   soon: "#ffa600",
 };
 

frontend/app/room/[room]/page.tsx

@@ -39,6 +39,7 @@
     "react-flip-move": "^3.0.5",
     "react-redux": "^9.3.0",
     "sharp": "^0.35.0",
+    "swiper": "^14.0.7",
     "swr": "^2.4.1",
     "ts-node": "^10.9.2",
     "usehooks-ts": "^3.0.0"