Merge pull request #19 from columbiaspace/MG

Dropdown for ingress

src/assets/ProcedureLists/EgressProcedureList.js

@@ -1,6 +1,8 @@
-import image1 from '../Images/DCU_Front.jpg';
-import image2 from '../Images/dog2.png';
-import image3 from '../Images/dog3.png';
+import image1 from '../Images/Egress1.jpg';
+import image2 from '../Images/Egress2.jpg';
+import image3 from '../Images/Egress3.jpg';
+import image4 from '../Images/Egress4.jpg';
+
 // import supplywaste from '../Images/supplywaste.jpg'
 export const EgressProcedureList = [
   {
@@ -21,7 +23,7 @@ export const EgressProcedureList = [
   {
     name: 'END Depress, Check Switches and Disconnect',
     description: 'HMD 1. Wait until SUIT P, O2 P = 4\nUIA 2. DEPRESS PUMP PWR - OFF\nBOTH DCU 3. BATT - LOCAL\nUIA 9. EV-1, EV-2 PWR - OFF\nBOTH DCU 4. Verify OXY - PRI\nBOTH DCU 5. Verify COMMS - A\nBOTH DCU 6. Verify FAN - PRI\nBOTH DCU 7. Verify PUMP - CLOSE\nBOTH DCU 8. Verify CO2 - A\nUIA and DCU 9. EV1 and EV2 disconnect UIA and DCU umbilical',
-    image: null,
+    image: image4,
   },
 
   // Add more procedures as needed

src/assets/ProcedureLists/IngressProcedureList.js

@@ -1,4 +1,4 @@
-import image1 from '../Images/DCU_Front.jpg';
+import image1 from '../Images/Ingress1.jpg';
 import image2 from '../Images/Ingress2.jpg';
 import image3 from '../Images/Ingress3.jpg';
 import image4 from '../Images/Ingress4.jpg';

src/components/ProcedureItem.js

@@ -8,7 +8,7 @@ function ProcedureItem({ name, description, className }) {
 
     return (
         <div className={`ProcedureItem ${className}`}>
-            <h1>{name}</h1>
+            <h1 className="procedureTitle">{name}</h1>
             <ul className='procedureDescription'>{descriptionItems}</ul>
         </div>
     );

src/components/procedureitem.css

@@ -1,16 +1,59 @@
 .ProcedureItem {
-    /* Styles for the procedure item */
-    max-width: 100%; /* Ensures the div doesn't grow beyond its container */
-    overflow-wrap: break-word; /* Allows long words to break and wrap onto the next line */
-}
-
-.procedureDescription {
-    list-style-type: disc; /* Adds bullets to the list */
-    margin-left: 20px; /* Indent the list for better readability */
-    padding: 0;
-    word-wrap: break-word; /* Wraps long words to the next line */
-}
-
-.procedureDescription li {
-    margin-bottom: 5px; /* Space between list items */
-}
+    display: flex;
+    flex-direction: column;
+    width: 100%; /* Ensure ProcedureItem spans the entire width */
+    margin-bottom: 20px; /* Add margin to separate ProcedureItems */
+  }
+
+  .procedureTitle {
+    margin-bottom: 10px; /* Add margin between title and description */
+    flex-grow: 1; /* Allow title to grow to fill available space */
+  }
+
+  .procedureDescription {
+    padding-left: 20px; /* Add padding to the description for better readability */
+    flex-grow: 1; /* Allow description to grow to fill available space */
+  }
+
+  .left-column {
+    flex: 3;
+    padding: 20px;
+    background-color: #f0f0f0;
+  }
+
+  .right-column {
+    flex: 1;
+    padding: 20px;
+    background-color: #e0e0e0;
+    max-height: 400px; /* Set a maximum height for the right column */
+    overflow-y: auto; /* Enable vertical scrolling if content exceeds the maximum height */
+  }
+
+  .select-container {
+    margin-bottom: 10px;
+  }
+
+  .select-container select {
+    width: 100%;
+    padding: 8px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+
+  .select-container select:focus {
+    outline: none;
+    border-color: #007bff;
+  }
+
+  .navigation-buttons {
+    margin-top: 10px;
+  }
+
+  .navigation-buttons button {
+    margin-right: 10px;
+    padding: 8px 12px;
+    cursor: pointer;
+  }
+

src/pages-style/ingressegress 2.css

@@ -1,51 +1,35 @@
 .ingressegress-container {
     display: flex;
-    height: 73vh;
-}
-
-.left-column {
-    flex: 1;
+  }
+
+  .left-column {
+    flex: 3;
     padding: 20px;
     background-color: #f0f0f0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.left-column img {
-    width: auto;
-    height: 300px;
-    margin-bottom: 20px;
-}
-
-.ProcedureList {
+  }
+
+  .right-column {
     flex: 1;
     padding: 20px;
     background-color: #e0e0e0;
-}
-
-.ProcedureList {
-    text-wrap: true;
-    width: 50%;
-    height: 100%;
-}
-
-.ProcedureItem {
-    display: none;
-    height: 60vh;
-}
-
-.ProcedureItem.show {
-    display: block;
-}
-
-.navigation-buttons {
-    display: flex;
-    justify-content: center; /* Align buttons in the center horizontally */
-    margin-top: 10px;
-}
-
-.navigation-buttons button {
-    padding: 8px 12px;
-    cursor: pointer;
-}
+    max-height: 400px; /* Set a maximum height for the right column */
+    overflow-y: auto; /* Enable vertical scrolling if content exceeds the maximum height */
+  }
+
+  .select-container {
+    margin-bottom: 10px;
+  }
+
+  .select-container select {
+    width: 100%;
+    padding: 8px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+
+  .select-container select:focus {
+    outline: none;
+    border-color: #007bff;
+  }

src/pages/focus/egress.js

@@ -17,7 +17,7 @@ function Egress() {
   };
 
   return (
-    <div className="pagecontainer">
+    <div className="ingressegress-container">
       <div className="left-column">
         <h1>Egress</h1>
         {EgressProcedureList[currentProcedure].image && (

src/pages/focus/ingress.js

@@ -1,45 +1,49 @@
-import React, { useState } from 'react';
-import '../../pages-style/ingressegress.css';
+import React, { useState, useRef } from 'react';
+import '../../pages-style/ingressegress 2.css';
 import '../../pages-style/page.css'
 import { IngressProcedureList } from '../../assets/ProcedureLists/IngressProcedureList';
 import ProcedureItem from '../../components/ProcedureItem';
 
-
 function Ingress() {
   const [currentProcedure, setCurrentProcedure] = useState(0);
+  const procedureDropdownRef = useRef(null);
 
-  const handleNextProcedure = () => {
-    setCurrentProcedure((prevIndex) => (prevIndex + 1) % IngressProcedureList.length);
-  };
-
-  const handlePrevProcedure = () => {
-    setCurrentProcedure((prevIndex) => (prevIndex - 1 + IngressProcedureList.length) % IngressProcedureList.length);
+  const handleProcedureChange = () => {
+    const selectedIndex = procedureDropdownRef.current.selectedIndex;
+    setCurrentProcedure(selectedIndex);
   };
 
   return (
-    <div className="pagecontainer">
+    <div className="ingressegress-container">
       <div className="left-column">
         <h1>Ingress</h1>
         {IngressProcedureList[currentProcedure].image && (
           <img src={IngressProcedureList[currentProcedure].image} alt={IngressProcedureList[currentProcedure].name} />
         )}
       </div>
-      <div className="ProcedureList">
-        {IngressProcedureList.map((Item, index) => (
+      <div className="right-column">
+        <h2>Select Procedure</h2>
+        <div className="select-container">
+          <select ref={procedureDropdownRef} onChange={handleProcedureChange} value={currentProcedure}>
+            {IngressProcedureList.map((Item, index) => (
+              <option key={index} value={index}>{Item.name}</option>
+            ))}
+          </select>
+        </div>
+        <div className="ProcedureList">
           <ProcedureItem
-            key={index}
-            name={Item.name}
-            description={Item.description}
-            className={index === currentProcedure ? 'show' : ''}
+            name={IngressProcedureList[currentProcedure].name}
+            description={IngressProcedureList[currentProcedure].description}
+            className="show"
           />
-        ))}
+        </div>
         <div className="navigation-buttons">
-          <button onClick={handlePrevProcedure}>&lt; Previous</button>
-          <button onClick={handleNextProcedure}>Next &gt;</button>
+          <button onClick={() => setCurrentProcedure((prevIndex) => (prevIndex - 1 + IngressProcedureList.length) % IngressProcedureList.length)}>&lt; Previous</button>
+          <button onClick={() => setCurrentProcedure((prevIndex) => (prevIndex + 1) % IngressProcedureList.length)}>Next &gt;</button>
         </div>
       </div>
     </div>
   );
 }
 
-export default Ingress;
+export default Ingress;