Merge pull request #226 from UoaWDCC/VPS-47/mapping-flags-to-resources

VPS-47/mapping flags to resources

backend/src/db/daos/resourcesDao.js

@@ -2,7 +2,7 @@ import Resource from "../models/resource";
 import Group from "../models/group";
 
 // Create a New Resource
-const createResource = async (type, content, name) => {
+const createResource = async (type, content, name, requiredFlags) => {
   let dbResource = null;
 
   switch (type) {
@@ -11,7 +11,7 @@ const createResource = async (type, content, name) => {
         name,
         textContent: content,
         imageContent: "",
-        requiredFlags: [],
+        requiredFlags,
       });
       await dbResource.save();
       break;
@@ -20,7 +20,7 @@ const createResource = async (type, content, name) => {
         name,
         textContent: "",
         imageContent: content,
-        requiredFlags: [],
+        requiredFlags,
       });
       await dbResource.save();
       break;
@@ -76,16 +76,24 @@ const removeFlag = async (groupId, flag) => {
   return group.currentFlags;
 };
 
-const updateResourceById = async (resourceId, name, type, content) => {
+const updateResourceById = async (
+  resourceId,
+  name,
+  type,
+  content,
+  requiredFlags
+) => {
   const resource = await Resource.findById(resourceId);
 
   resource.name = name;
   switch (type) {
     case "text":
       resource.textContent = content;
+      resource.requiredFlags = requiredFlags;
       break;
     case "image":
       resource.imageContent = content;
+      resource.requiredFlags = requiredFlags;
       break;
     default:
       throw new Error(`Unsupported resource type: ${type}`);

backend/src/db/models/resource.js

@@ -7,9 +7,7 @@ const resourceSchema = new Schema({
     type: String,
     required: true,
   },
-  textContent: {
-    type: String,
-  },
+  textContent: [String],
   imageContent: {
     type: String,
   },

backend/src/routes/api/navigate/group.js

@@ -3,6 +3,7 @@ import User from "../../../db/models/user";
 import Group from "../../../db/models/group";
 import Scenario from "../../../db/models/scenario";
 import Note from "../../../db/models/note";
+import Resource from "../../../db/models/resource";
 import HttpError from "../../../error/HttpError";
 import STATUS from "../../../error/status";
 
@@ -32,13 +33,11 @@ const deleteAllNotes = async (groupData) => {
   );
   const noteId = noteList.map(({ id }) => id);
   await Note.deleteMany({ _id: { $in: noteId } });
-  const res = await Group.updateOne(
-    { _id: groupId },
-    { $set: { notes: {} } }
-  ).exec();
-  if (res.nModified !== 1) {
-    throw new HttpError("Failed to delete notes", STATUS.INTERNAL_SERVER_ERROR);
-  }
+  await Group.updateOne({ _id: groupId }, { $set: { notes: {} } }).exec();
+  // if (res.nModified !== 1) {
+  //   throw new HttpError("Failed to delete notes", STATUS.INTERNAL_SERVER_ERROR);
+  // }
+  return true;
 };
 
 export const getScenarioFirstScene = async (scenarioId) => {
@@ -192,9 +191,8 @@ export const groupReset = async (req) => {
   const group = await getGroupByIdAndUser(req.params.groupId, uid);
   const { role } = group.users[0];
 
-  if (!(await deleteAllNotes(group))) {
+  if (!(await deleteAllNotes(group)))
     throw new HttpError("Failed to delete notes", STATUS.INTERNAL_SERVER_ERROR);
-  }
 
   if (group.path[0] !== currentScene)
     throw new HttpError("Scene mismatch has occured", STATUS.CONFLICT);
@@ -221,10 +219,19 @@ export const groupGetResources = async (req) => {
   }
 
   const flags = group.currentFlags || [];
-  let resources = [];
-  if (flags) {
-    // TODO: add logic to map certain flags to groups here
-    resources = [];
+  const resources = [];
+
+  if (flags.length > 0) {
+    // Fetch all resources from the database
+    const allResources = await Resource.find({});
+
+    // Filter resources where all requiredFlags are present in the group's current flags
+    const matchingResources = allResources.filter((resource) =>
+      resource.requiredFlags.every((flag) => flags.includes(flag))
+    );
+
+    // Push the filtered resources to the resources array
+    resources.push(...matchingResources);
   }
   return { status: STATUS.OK, json: resources };
 };

backend/src/routes/api/resources.js

@@ -28,16 +28,21 @@ router.use(auth);
  * @route POST /
  * @desc Create a New Resource
  * @param {Object} req.body - The resource details.
- * @param {string} req.body.type - The type of the resource.
- * @param {string} req.body.content - The content of the resource.
+ * @param {string} req.body.type - The type of the resource as text or image
+ * @param {string} req.body.content - The content of the resource. as either a string or an image?
  * @param {string} req.body.name - The name of the resource.
  * @returns {Object} 201 - The newly created resource.
  */
 router.post(
   "/",
   handle(async (req, res) => {
-    const { type, content, name } = req.body;
-    const newResource = await createResource(type, content, name);
+    const { type, content, name, requiredFlags } = req.body;
+    const newResource = await createResource(
+      type,
+      content,
+      name,
+      requiredFlags
+    );
     return res.status(HTTP_CREATED).json(newResource).send();
   })
 );
@@ -146,7 +151,7 @@ router.delete("/group/:groupId/:flag", async (req, res) => {
 
 router.put("/:resourceId", async (req, res) => {
   const { resourceId } = req.params;
-  const { name, type, content } = req.body;
+  const { name, type, content, requiredFlags } = req.body;
 
   if (!content || !name || !type) {
     return res.status(HTTP_BAD_REQUEST).send("Bad Request");
@@ -157,7 +162,8 @@ router.put("/:resourceId", async (req, res) => {
       resourceId,
       name,
       type,
-      content
+      content,
+      requiredFlags
     );
 
     if (!updatedResource) {

frontend/src/components/ResourcesModal.jsx

@@ -1,10 +1,9 @@
 import { useEffect, useState } from "react";
-import resources from "./ResourceObjects";
 import styles from "../styling/NotesDisplayCard.module.scss";
 import resourceStyles from "../styling/ResourceModal.module.scss";
 
-function ResourcesModal({ handleClose }) {
-  const [currentResourceId, setCurrentResourceId] = useState(resources[0]?.id);
+function ResourcesModal({ handleClose, resources }) {
+  const [currentResourceId, setCurrentResourceId] = useState(resources[0]?._id);
 
   const handleKeyPress = (e) => {
     if (e.key === "Escape") handleClose();
@@ -15,28 +14,29 @@ function ResourcesModal({ handleClose }) {
     return () => document.removeEventListener("keydown", handleKeyPress);
   }, []);
 
-  const currentResource = resources.find(({ id }) => id === currentResourceId);
+  const currentResource = resources.find(
+    ({ _id }) => _id === currentResourceId
+  );
 
   const ResourceContent = ({ item }) => {
-    if (item.type === "text") {
-      return (
-        <p>
-          {item.items.map((textItem) => (
-            <p>{textItem}</p>
-          ))}
-        </p>
-      );
-    }
-    if (item.type === "image") {
-      return (
-        <img
-          className={resourceStyles.resourceImage}
-          src={item.src}
-          alt={item.alt}
-        />
-      );
-    }
-    return null;
+    const hasTextContent =
+      item.textContent?.length > 0 && item.textContent[0] !== "";
+    const hasImageContent = item.imageContent && item.imageContent !== "";
+
+    return (
+      <div>
+        {hasTextContent &&
+          item.textContent.map((textItem) => <p key={textItem}>{textItem}</p>)}
+        {hasImageContent && (
+          <img
+            className={resourceStyles.resourceImage}
+            src={item.imageContent}
+            alt={item.name || "Resource Image"}
+          />
+        )}
+        {!hasTextContent && !hasImageContent && <p>No Content Available</p>}
+      </div>
+    );
   };
 
   return (
@@ -58,23 +58,27 @@ function ResourcesModal({ handleClose }) {
         <h2 className={resourceStyles.modalHeading}>Resources</h2>
         <nav className={resourceStyles.navBar}>
           {resources.map((resource) => (
-            <p key={resource.id}>
+            <p key={resource._id}>
               <button
                 type="button"
-                onClick={() => setCurrentResourceId(resource.id)}
+                onClick={() => setCurrentResourceId(resource._id)}
                 className={
-                  currentResourceId === resource.id ? resourceStyles.active : ""
+                  currentResourceId === resource._id
+                    ? resourceStyles.active
+                    : ""
                 }
               >
-                {resource.displayName}
+                {resource.name}
               </button>
             </p>
           ))}
         </nav>
         <div className={resourceStyles.r_content_card}>
-          {currentResource?.content.map((item) => (
-            <ResourceContent item={item} />
-          )) || <p>No Resource Selected</p>}
+          {currentResource ? (
+            <ResourceContent item={currentResource} />
+          ) : (
+            <p>No Resource Selected</p>
+          )}
         </div>
       </div>
     </div>

frontend/src/containers/pages/PlayScenarioPage/PlayScenarioPageMulti.jsx

@@ -48,10 +48,8 @@ const getResources = async (user, groupId) => {
       Authorization: `Bearer ${token}`,
     },
   };
-  console.log(config);
   const res = await axios.request(config);
-  console.log(res);
-  return res.data.active;
+  return res.data;
 };
 
 /**
@@ -99,7 +97,6 @@ export default function PlayScenarioPageMulti({ group }) {
         );
         const newResources = await getResources(user, group._id);
         setResources(newResources);
-        console.log(resources);
         if (!sceneId)
           history.replace(`/play/${scenarioId}/multiplayer/${newSceneId}`);
       } catch (e) {
@@ -173,6 +170,7 @@ export default function PlayScenarioPageMulti({ group }) {
       )}
       {resourcesOpen && (
         <ResourcesModal
+          resources={resources}
           group={group}
           user={user}
           handleClose={() => setResourcesOpen(false)}