Visual update and fix for scenario and scene selection (#259)

* style: extend emerald theme with VPS colours.

* style: update style of home page side bar.

* style: update styling of scenario and scene selection pages.

* fix: fix fonts being loaded from wrong path when not on home page.

* fix: fix invalid scenario ids crashing backend.

* fix: fix inability to access scene selection screen without first going through the home page.

* chore: fix prettier alerts.

* style: differentiate non-editable thumbnail titles in ui.

* fix: fix scroll being disabled in scene selection page.

* style: reduce spacing between uoa logo and scenario action btns.

backend/src/middleware/validScenarioId.js

@@ -0,0 +1,18 @@
+import mongoose from "mongoose";
+
+const HTTP_BAD_REQUEST = 400;
+
+/**
+ * Checks if the scenarioId is valid
+ */
+export default async function validScenarioId(req, res, next) {
+  if (
+    req.params?.scenarioId &&
+    !mongoose.isValidObjectId(req.params.scenarioId)
+  ) {
+    res.status(HTTP_BAD_REQUEST).json({ error: "Invalid scenario ID." });
+    return;
+  }
+
+  next();
+}

backend/src/routes/api/group.js

@@ -1,21 +1,23 @@
 import { Router } from "express";
-
 import {
+  createGroup,
   getCurrentScene,
   getGroup,
-  createGroup,
   getGroupByScenarioId,
 } from "../../db/daos/groupDao.js";
 
 import { retrieveRoleList, updateRoleList } from "../../db/daos/scenarioDao.js";
 import Group from "../../db/models/group.js";
 
+import validScenarioId from "../../middleware/validScenarioId.js";
+
 const router = Router();
 
 const HTTP_OK = 200;
 const HTTP_CONFLICT = 409;
 const HTTP_NO_CONTENT = 204;
 const HTTP_NOT_FOUND = 404;
+const HTTP_BAD_REQUEST = 400;
 
 // get the groups assigned to a scenario
 router.get("/scenario/:scenarioId", async (req, res) => {
@@ -39,6 +41,19 @@ router.get("/path/:groupId", async (req, res) => {
   }
 });
 
+// get a group by its id
+router.get("/retrieve/:groupId", async (req, res) => {
+  const { groupId } = req.params;
+  const group = await getGroup(groupId);
+  if (!group) {
+    return res.status(HTTP_NOT_FOUND).json({ error: "Group not found" });
+  }
+  return res.status(HTTP_OK).json(group);
+});
+
+export default router;
+
+router.use("/:scenarioId", validScenarioId);
 // create a new group
 router.post("/:scenarioId", async (req, res) => {
   const { groupList, roleList } = req.body;
@@ -98,20 +113,7 @@ router.post("/:scenarioId", async (req, res) => {
 
 router.get("/:scenarioId/roleList", async (req, res) => {
   const { scenarioId } = req.params;
-
   const roleList = await retrieveRoleList(scenarioId);
 
   res.status(HTTP_OK).json(roleList);
 });
-
-// get a group by its id
-router.get("/retrieve/:groupId", async (req, res) => {
-  const { groupId } = req.params;
-  const group = await getGroup(groupId);
-  if (!group) {
-    return res.status(HTTP_NOT_FOUND).json({ error: "Group not found" });
-  }
-  return res.status(HTTP_OK).json(group);
-});
-
-export default router;

backend/src/routes/api/scenario.js

@@ -1,13 +1,15 @@
 import { Router } from "express";
 import auth from "../../middleware/firebaseAuth.js";
 import scenarioAuth from "../../middleware/scenarioAuth.js";
+import validScenarioId from "../../middleware/validScenarioId.js";
 
 import {
   createScenario,
-  retrieveScenarioList,
-  updateScenario,
   deleteScenario,
+  retrieveScenario,
+  retrieveScenarioList,
   updateDurations,
+  updateScenario,
 } from "../../db/daos/scenarioDao.js";
 
 import { retrieveAssignedScenarioList } from "../../db/daos/userDao.js";
@@ -48,8 +50,15 @@ router.post("/", async (req, res) => {
 });
 
 // Apply scenario auth middleware
+router.use("/:scenarioId", validScenarioId);
 router.use("/:scenarioId", scenarioAuth);
 
+// Get a scenario by id.
+router.get("/:scenarioId", async (req, res) => {
+  const scenario = await retrieveScenario(req.params.scenarioId);
+  res.status(HTTP_OK).json(scenario);
+});
+
 // Update a scenario by a user
 router.put("/:scenarioId", async (req, res) => {
   const { name, duration } = req.body;

backend/src/routes/api/scene.js

@@ -2,15 +2,16 @@ import { Router } from "express";
 
 import {
   createScene,
-  retrieveSceneList,
-  retrieveScene,
-  updateScene,
   deleteScene,
   duplicateScene,
   incrementVisisted,
+  retrieveScene,
+  retrieveSceneList,
+  updateScene,
 } from "../../db/daos/sceneDao.js";
 import auth from "../../middleware/firebaseAuth.js";
 import scenarioAuth from "../../middleware/scenarioAuth.js";
+import validScenarioId from "../../middleware/validScenarioId.js";
 
 const router = Router({ mergeParams: true });
 
@@ -20,6 +21,7 @@ const HTTP_NOT_FOUND = 404;
 // Apply auth middleware to all routes below this point
 router.use(auth);
 // Apply scenario auth middleware
+router.use(validScenarioId);
 router.use(scenarioAuth);
 
 // Get scene infromation

frontend/index.html

@@ -1,10 +1,18 @@
-<!DOCTYPE html>
-<html lang="en" data-theme="emerald">
+<!doctype html>
+<html lang="en" data-theme="VPSTheme">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
 
+    <link
+      rel="preload"
+      href="/fonts/MonaSans.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+
     <title>Virtual Patient System - UoA</title>
   </head>
 

frontend/src/components/DashedCard.jsx

@@ -1,5 +1,6 @@
 import { Box } from "@material-ui/core";
-import styles from "./ListContainer/ListContainer.module.scss";
+
+import AddRoundedIcon from "@mui/icons-material/AddRounded";
 
 /**
  * Component used to represent a card with a dashed border, used to indicate that a new card can be created.
@@ -16,27 +17,27 @@ import styles from "./ListContainer/ListContainer.module.scss";
  */
 export default function DashedCard({ onClick }) {
   return (
-    <div className={styles.imageListItemWide}>
+    <div>
       <div style={{ position: "relative" }}>
         <Box
           height={160}
-          border="5px dashed grey"
-          borderRadius={10}
-          borderColor="#747474"
-          overflow="hidden"
-          textAlign="center"
+          onClick={onClick}
           sx={{
-            background: "#f1f1f1",
+            background: "#f1f5f9",
             "&:hover": {
-              background: "#cccccc",
+              background: "#fff",
             },
           }}
-          onClick={onClick}
-        />
-        <div className={styles.crossHorizontalLine} />
-        <div className={styles.crossVerticalLine} />
+          className="cursor-pointer flex justify-center items-center overflow-hidden rounded-xl border-2 border-dashed border-slate-400 bg-slate-100"
+        >
+          <AddRoundedIcon
+            className="text-slate-500"
+            sx={{
+              fontSize: "5rem",
+            }}
+          />
+        </Box>
       </div>
-      <p className={styles.text}>Create New Scene</p>
     </div>
   );
 }

frontend/src/components/DeleteModal.jsx

@@ -1,5 +1,4 @@
-import { useState } from "react";
-import DeleteButton from "./DeleteButton";
+import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";
 
 function DeleteModal({ onDelete, currentScenario }) {
   const handleClickOpen = () => {
@@ -18,10 +17,11 @@ function DeleteModal({ onDelete, currentScenario }) {
   return (
     <div>
       <button
-        className="btn important w-full"
+        className="btn important w-full font-mono"
         onClick={handleClickOpen}
         disabled={!currentScenario}
       >
+        <DeleteOutlineRoundedIcon />
         Delete
       </button>
       <dialog id="delete_modal" className="modal modal-bottom sm:modal-middle">

frontend/src/components/HelpButton.jsx

@@ -1,4 +1,3 @@
-import Button from "@material-ui/core/Button";
 import HelpIcon from "@material-ui/icons/Help";
 import { useState } from "react";