diff --git a/.env b/.env index e31a9ea..d5f3d5e 100644 --- a/.env +++ b/.env @@ -1 +1,2 @@ -MONGO_URI=mongodb+srv://JordanCheckoff:Baseball54@cluster0.mucu7je.mongodb.net/?retryWrites=true&w=majority; \ No newline at end of file +MONGO_URI=mongodb+srv://JordanCheckoff:Baseball54@cluster0.mucu7je.mongodb.net/?retryWrites=true&w=majority; +API_URL=https://orchestration-engine-qjfcs.ondigitalocean.app \ No newline at end of file diff --git a/README.md b/README.md index ce2c30b..caea136 100644 --- a/README.md +++ b/README.md @@ -6,4 +6,4 @@ Install packages using `yarn install`. ## Development -Start a development server using `yarn dev` and navigate to `localhost:3000`. Changes in code will automatically cause the website to be re-built and update the browser. +Start a development server using `yarn dev` and navigate to `localhost:8080`. Changes in code will automatically cause the website to be re-built and update the browser. diff --git a/components/DiagContext.module.css b/components/DiagContext.module.css new file mode 100644 index 0000000..8be3b5f --- /dev/null +++ b/components/DiagContext.module.css @@ -0,0 +1,21 @@ +.container{ + width: 100%; + height: 60%; +} + +.context_space { + padding: 20px; + background-color: white; + width: 100%; + height: 90%; + box-sizing: border-box; + position: relative; +} + +.context_scrollable { + background-color: white; + width: 100%; + height: 100%; + box-sizing: border-box; + position: relative; +} \ No newline at end of file diff --git a/components/DiagContext.tsx b/components/DiagContext.tsx new file mode 100644 index 0000000..86d8a3f --- /dev/null +++ b/components/DiagContext.tsx @@ -0,0 +1,141 @@ +import React, { useState, useCallback} from 'react'; +import styles from './DiagContext.module.css'; +import { options } from '../lib/context/options'; +import P5Canvas from './diagnosis/P5Canvas'; + +const Context: React.FC = ({ items, setItems, context_lib, canvas, setCanvas}) => { + const [popupOptions, setPopupOptions] = useState( + options.filter((option) => !items.some((item) => item.title === option)) + ); + + const [isPopupOpen, setPopupOpen] = useState(false); + + const openPopup = () => { + setPopupOpen(true); + }; + + const closePopup = () => { + setPopupOpen(false); + }; + + const addOptionToContext = (option: any) => { + const newItem = { title: option, data: context_lib[option] }; + setItems([...items, newItem]); + setPopupOptions(popupOptions.filter((popOption) => popOption !== option)); + setCanvas([...canvas, { type: newItem.title, xPos: 50, yPos: 50 }]); + }; + + const removeItem = (index) => { + const removedItem = items[index]; + const updatedItems = [...items]; + updatedItems.splice(index, 1); + setItems(updatedItems); + setPopupOptions([...popupOptions, removedItem.title]); // Add the removed item back to popupOptions + }; + + const test = ['Sprint log-Total Points Commited This Sprint', 'PRC-link to PRC'] + + return ( +
+

Context

+ {/*
*/} + {/* + +
+ {isPopupOpen && ( +
+
+

+ Select an option to add +

+
    + {popupOptions.map((option, index) => ( +
  • + +
    • + ))} +
+ +
+
+ )} + */} +
+ < div className={styles.context_scrollable} style={{whiteSpace: 'pre-line', overflowY: 'auto'}}> + {items.map((option, index) => ( +
+ {(option.title === 'PRC-link to PRC' || option.title === 'Link to Sprint Log') ? ( + + {option.title}: {option.data} + + ) : ( + `${option.title}: ${option.data}` + )} + +
+ ))} +
+ +
+ {isPopupOpen && ( +
+
+

+ Select an option to add +

+ + +
+
+ )} + + // + ); +}; + +export default Context; diff --git a/components/DiagSidebar.module.css b/components/DiagSidebar.module.css new file mode 100644 index 0000000..0c9ca9f --- /dev/null +++ b/components/DiagSidebar.module.css @@ -0,0 +1,8 @@ +.problem_textbox { + width: 100%; + height: 100%; + margin: 10px 0; + padding: 10px; + box-sizing: border-box; + } + \ No newline at end of file diff --git a/components/DiagSidebar.tsx b/components/DiagSidebar.tsx new file mode 100644 index 0000000..0f15402 --- /dev/null +++ b/components/DiagSidebar.tsx @@ -0,0 +1,32 @@ +import React, { useState, useEffect } from 'react'; +import styles from './DiagSidebar.module.css'; + +interface SidebarProps { + content: string; + setContent: (content: string) => void; + title: string; + project: string; +} + +const Sidebar: React.FC = ({ content, setContent, title, project}) => { + useEffect(() => { + }, []); + + const handleContentChange = (event: React.ChangeEvent) => { + setContent(event.target.value); + }; + + return ( +
+

Your detector for {title} has been triggered for {project}.

+

Detector Debrief

+