Merge pull request #562 from bounswe/feature/frontend-imageannotate

Implementation - First Draft of - Customer Request - Add Components as Images To be Annotated to Resources

resq/frontend/src/components/Resource/ResourceCreation.js

@@ -17,6 +17,7 @@ import axios from 'axios';
 import {ResourceContext, ResourceProvider, useResource} from './ResourceContext';
 import ResourceDetail1 from "./ResourceDetail1";
 import ResourceDetail2 from "./ResourceDetail2";
+import ResourceDetail3 from "./ResourceDetail3";
 import ResourceAddress from "./ResourceAddress";
 import {createResource} from "../../AppService";
 
@@ -43,7 +44,7 @@ const customTheme = createTheme({
     },
 });
 
-const steps = ['Resource delivery address', 'Type of Resource', 'Resource Details'];
+const steps = ['Resource delivery address', 'Type of Resource', 'Resource Details', 'Add Image'];
 
 export default function Resource() {
     const [activeStep, setActiveStep] = React.useState(0);
@@ -60,6 +61,8 @@ export default function Resource() {
                 return <ResourceDetail1 resourceData={resourceData} setResourceData={setResourceData}/>;
             case 2:
                 return <ResourceDetail2 resourceData={resourceData} setResourceData={setResourceData}/>;
+            case 3:
+                return <ResourceDetail3 resourceData={resourceData} setResourceData={setResourceData}/>;
             default:
                 throw new Error('Unknown step');
         }

resq/frontend/src/components/Resource/ResourceDetail3.js

@@ -0,0 +1,24 @@
+// ResourceDetail3.jsx
+import React from 'react';
+
+const ResourceDetail3 = ({ resourceData, setResourceData }) => {
+  const handlePhotoChange = (event) => {
+    const file = event.target.files[0];
+
+    if (file) {
+      setResourceData((prevData) => ({
+        ...prevData,
+        photo: file,
+      }));
+    }
+  };
+
+  return (
+    <div>
+      <h3>Upload a Photo</h3>
+      <input type="file" accept="image/*" onChange={handlePhotoChange} />
+    </div>
+  );
+};
+
+export default ResourceDetail3;