diff --git a/frontend/src/containers/pages/AuthoringTool/AuthoringToolPage.jsx b/frontend/src/containers/pages/AuthoringTool/AuthoringToolPage.jsx index d36d2d71..18613d2a 100644 --- a/frontend/src/containers/pages/AuthoringTool/AuthoringToolPage.jsx +++ b/frontend/src/containers/pages/AuthoringTool/AuthoringToolPage.jsx @@ -79,23 +79,9 @@ export default function AuthoringToolPage() { reFetch(); } - async function saveTags() { - const updatedScenes = scenes.map(({ tag, _id, name }) => ({ - tag, - _id, - name, - })); - await usePut( - `/api/scenario/${scenarioId}/scene/tags`, - updatedScenes, - getUserIdToken - ); - } - /** called when save button is clicked */ async function save() { saveScene(); - saveTags(); setSaveButtonText("Saved!"); setTimeout(() => { setSaveButtonText("Save"); @@ -105,7 +91,6 @@ export default function AuthoringToolPage() { /** called when save and close button is clicked */ function savePlusClose() { saveScene(); - saveTags(); /* redirects user to the scenario page */ window.location.href = `/scenario/${currentScenario?._id}`; } diff --git a/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneListItem.jsx b/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneListItem.jsx index cc19317b..642dbc34 100644 --- a/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneListItem.jsx +++ b/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneListItem.jsx @@ -2,60 +2,8 @@ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ -import { useRef } from "react"; -import styles from "styling/SceneNavigator.module.scss"; -import { noTagSymbol, tagColours, tagOptions } from "./SceneTagCustomization"; - -const SceneListItem = ({ - sceneId, - tag, - thumbnail, - showingTagInputFor, - showTagInputFor, - selectTagEl, -}) => { - const tagRef = useRef(null); - const fullTagRef = useRef(null); - - function toggleTagOnHover() { - const tagEl = tagRef.current; - const fullTagEl = fullTagRef.current; - - tagEl.classList.toggle(styles.hidden); - fullTagEl.classList.toggle(styles.showing); - } - - function toggleInputBox() { - showTagInputFor(showingTagInputFor === sceneId ? null : sceneId); - selectTagEl(showingTagInputFor === sceneId ? null : tagRef.current); - } - - const noTagClassName = tag === noTagSymbol ? styles.noTag : ""; - - return ( -
  • - {thumbnail} -

    toggleTagOnHover(sceneId)} - onClick={() => toggleInputBox(sceneId)} - ref={tagRef} - > - {tag} -

    - -

    toggleTagOnHover(sceneId)} - onClick={() => toggleInputBox(sceneId)} - ref={fullTagRef} - > - {tagOptions[tag]} -

    -
    • - ); +const SceneListItem = ({ sceneId, thumbnail }) => { + return
  • {thumbnail}
    • ; }; export default SceneListItem; diff --git a/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneNavigator.jsx b/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneNavigator.jsx index 00ba231f..264a8954 100644 --- a/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneNavigator.jsx +++ b/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneNavigator.jsx @@ -4,45 +4,19 @@ import { useContext, useEffect, useState } from "react"; import { useHistory, useParams } from "react-router-dom"; import styles from "styling/SceneNavigator.module.scss"; import SceneListItem from "./SceneListItem"; -import SceneTagInput from "./SceneTagInput"; const SceneNavigator = ({ saveScene }) => { const [thumbnails, setThumbnails] = useState(null); - const { scenes, setScenes, currentScene, currentSceneRef, setCurrentScene } = + const { scenes, currentScene, currentSceneRef, setCurrentScene } = useContext(SceneContext); const { scenarioId } = useParams(); const history = useHistory(); - // showing tag modal - - const [showingTagInputFor, showTagInputFor] = useState(null); - - function getIndexOfSceneId(sceneId) { - if (!thumbnails) return -1; - return thumbnails.findIndex((thumbnail) => thumbnail.sceneId === sceneId); - } - - function changeTag(sceneId, newTag) { - const sceneIndex = getIndexOfSceneId(sceneId); - - setThumbnails((currentThumbnails) => { - currentThumbnails[sceneIndex].tag = newTag; - return [...currentThumbnails]; - }); - - setScenes((currScenes) => { - const index = currScenes.findIndex((scene) => scene._id === sceneId); - currScenes[index].tag = newTag; - return currScenes; - }); - } - useEffect(() => { if (scenes !== undefined) { setThumbnails( scenes.map((scene, index) => ({ sceneId: scene._id, - tag: scene.tag, sceneListItem: ( <>

    { } }, [scenes, currentScene]); - // for the scene/tag inputs - const [selectedTagEl, selectTagEl] = useState(null); - return ( thumbnails && (

    - - {showingTagInputFor && ( - - )}
    ) ); diff --git a/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneTagCustomization.js b/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneTagCustomization.js deleted file mode 100644 index e739cc95..00000000 --- a/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneTagCustomization.js +++ /dev/null @@ -1,15 +0,0 @@ -export const tagOptions = { - "-": "No tag", - D: "Doctor", - P: "Pharmacist", - N: "Nurse", -}; - -export const tagColours = { - "-": "rgba(0,0,0,0)", - D: "magenta", - P: "blue", - N: "green", -}; - -export const noTagSymbol = "-"; diff --git a/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneTagInput.jsx b/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneTagInput.jsx deleted file mode 100644 index 6272d967..00000000 --- a/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneTagInput.jsx +++ /dev/null @@ -1,47 +0,0 @@ -import styles from "styling/SceneNavigator.module.scss"; -import { noTagSymbol, tagOptions } from "./SceneTagCustomization"; - -const SceneTagInput = ({ - selectedTagEl, - changeTag, - showingTagInputFor, - showTagInputFor, -}) => { - let selectedValue = selectedTagEl?.innerHTML || ""; - selectedValue = - selectedValue === tagOptions[noTagSymbol] ? noTagSymbol : selectedValue; - - const verticalPos = selectedTagEl - ? `${selectedTagEl.getBoundingClientRect().top.toString()}px` - : "50%"; - - return ( -
    - - - -
    - ); -}; - -export default SceneTagInput; diff --git a/frontend/src/containers/pages/AuthoringTool/ToolBar/Background/PlayerListSubContainer.jsx b/frontend/src/containers/pages/AuthoringTool/ToolBar/Background/PlayerListSubContainer.jsx deleted file mode 100644 index a00b609b..00000000 --- a/frontend/src/containers/pages/AuthoringTool/ToolBar/Background/PlayerListSubContainer.jsx +++ /dev/null @@ -1,48 +0,0 @@ -import { useState } from "react"; -import styles from "../../../../../styling/ToolBar.module.scss"; - -function PlayerListSubContainer({ user = {} }) { - const { name } = user; - const [selectedTags, setSelectedTags] = useState([]); - const availableTags = ["Doctor", "Pharmacist", "Nurse"]; // temp tags - - const toggleTag = (tag) => { - if (selectedTags.includes(tag)) { - setSelectedTags( - selectedTags.filter((selectedTag) => selectedTag !== tag) - ); - } else { - setSelectedTags([...selectedTags, tag]); - } - }; - - return ( -
    -
    -
    0 ? styles.selected : "" - }`} - > -

    {name}

    -
    -
    - {availableTags.map((tag) => ( - - ))} -
    -
    -
    - ); -} - -export default PlayerListSubContainer; diff --git a/frontend/src/styling/SceneNavigator.module.scss b/frontend/src/styling/SceneNavigator.module.scss index f82f811f..1692e0c8 100644 --- a/frontend/src/styling/SceneNavigator.module.scss +++ b/frontend/src/styling/SceneNavigator.module.scss @@ -20,34 +20,6 @@ gap: 10px; } - .playersTag, - .playersTagFull { - border: 1.8px solid magenta; - background-color: rgb(218, 209, 209); - border-radius: 15px; - padding: 5px 10px; - cursor: pointer; - height: 20px; - - &.hidden { - visibility: hidden; - } - - &.showing { - display: initial; - } - } - - .playersTagFull { - display: none; - position: absolute; - right: 16px; - } - - .playersTag.noTag { - background: none; - } - .sceneButton { border: 3px solid transparent; width: max-content; @@ -69,37 +41,3 @@ border: 3px solid #cfcfcf; } } - -.popupForSceneTagInput { - z-index: 2; - - position: absolute; - left: calc(100% + 10px); - --vertical-pos: 50%; - top: calc(var(--vertical-pos) + 100% - 100vh - 10px); - - display: flex; - flex-direction: column; - gap: 10px; - - background-color: white; - border: 2px solid black; - padding: 10px 20px; - border-radius: 10px; - - label { - display: flex; - flex: 1; - gap: 10px; - text-wrap: nowrap; - } - - button { - outline: none; - border: none; - cursor: pointer; - align-self: flex-end; - background: none; - text-decoration: underline; - } -}