Merge pull request #14 from columbiaspace/Finn's

added '+' button

src/helpers/ExpandableCard.css

@@ -16,7 +16,6 @@ body {
   max-width: 1200px; /* Maximum width of the container, centers content within */
 }
 
-
 .page-title {
   text-align: center; /* Centering the text horizontally */
   margin-top: 20px; /* Adds space above the title */
@@ -25,7 +24,6 @@ body {
   color: #007bff; /* Applies a blue color for style */
 }
 
-
 /* Card styles */
 .card {
   background-color: #ffffff;
@@ -70,14 +68,57 @@ body {
   border-bottom: none; /* No border for the last step */
 }
 
-/* Add responsive design features */
+/* Header area with title and add new button */
+.header-area {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px; /* Adjust spacing as needed */
+}
+
+.add-procedure-btn {
+  background-color: #d3d3d3; /* Light gray background */
+  color: #000000; /* White text */
+  font-weight: bold; /* Bold font */
+  border: 1px solid #ccc; /* Light grey border */
+  width: 300px; /* Match other cards */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: transform 0.3s ease;
+}
+
+.add-procedure-btn:hover {
+  transform: scale(1.05);
+}
+
 @media (max-width: 768px) {
   .container {
     justify-content: center; /* Center cards on smaller screens */
   }
 
-  .card {
+  .card, .add-procedure-btn {
     width: 90%; /* Full width on smaller screens */
     margin: 10px auto; /* Auto margin for horizontal centering */
   }
+
+  .header-area {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .add-procedure-btn {
+    margin-top: 10px; /* Spacing after the title on smaller screens */
+  }
+
+  .modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 20px;
+    background: white;
+    border: 1px solid #ccc;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+  }
 }

src/pages/focus/equipment.js

@@ -1,16 +1,84 @@
-import React from "react";
+import React, { useState } from 'react';
 import ExpandableCard from "../../helpers/ExpandableCard.jsx";
 import "../../pages-style/page.css";
 import equipmentData from "../../assets/ProcedureLists/EquipmentRepair.json";
 
 const EquipmentPage = () => {
+  const [showModal, setShowModal] = useState(false);
+  const [procedureData, setProcedureData] = useState({ title: '', steps: [] });
+  const [currentStep, setCurrentStep] = useState(0);
+  const [inputValue, setInputValue] = useState('');
+  const [procedures, setProcedures] = useState([]);
+
+  const handleAddNewProcedure = () => {
+    setShowModal(true);
+  };
+
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+  };
+
+  const handleNext = () => {
+    if (currentStep === 0) { // Set title
+      setProcedureData(prevData => ({ ...prevData, title: inputValue }));
+    } else if (currentStep % 2 === 1) { // Set subtitle
+      setProcedureData(prevData => ({
+        ...prevData,
+        steps: [...prevData.steps, { step: `Subtitle ${Math.ceil(currentStep / 2)}: ${inputValue}`, description: '' }]
+      }));
+    } else { // Set main text
+      const newSteps = [...procedureData.steps];
+      newSteps[newSteps.length - 1].description = inputValue;
+      setProcedureData(prevData => ({ ...prevData, steps: newSteps }));
+    }
+    setCurrentStep(prevStep => prevStep + 1);
+    setInputValue('');
+  };
+
+  const handleContinue = (shouldContinue) => {
+    if (!shouldContinue) {
+      if (currentStep % 2 === 0) { // Ensure the last main text is included
+        const newSteps = [...procedureData.steps];
+        if (newSteps.length > 0) {
+          newSteps[newSteps.length - 1].description = inputValue;
+          setProcedureData(prevData => ({ ...prevData, steps: newSteps }));
+        }
+      }
+      setProcedures(prevProcedures => [...prevProcedures, procedureData]);
+      setShowModal(false);
+      setProcedureData({ title: '', steps: [] });
+      setCurrentStep(0);
+      setInputValue('');
+    }
+  };
+
   return (
     <div className="pagecontainer">
       <div className="container">
-        <h2>Equipment Repair</h2>
+        <div className="header-area">
+          <h2>Equipment Repair</h2>
+          <button onClick={handleAddNewProcedure} className="add-procedure-btn">Add New Procedure</button>
+        </div>
         {Object.entries(equipmentData).map(([title, steps]) => (
           <ExpandableCard key={title} title={title} steps={steps} />
         ))}
+        {procedures.map((procedure, index) => (
+          <ExpandableCard key={index} title={procedure.title} steps={procedure.steps} />
+        ))}
+        {showModal && (
+          <div className="modal">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={handleInputChange}
+              placeholder={currentStep === 0 ? 'Title:' : currentStep % 2 === 1 ? 'Subtitle:' : 'Main text:'}
+            />
+            <button onClick={handleNext}>Next</button>
+            {(currentStep > 1 || (currentStep === 1 && procedureData.steps.length > 0)) && (
+              <button onClick={() => handleContinue(false)}>Finish</button>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );