Merge pull request #14 from GavinLynch04/ryan_branch

imageCapture updated, working in history tab

packages/backend/backend.js

@@ -161,6 +161,28 @@ app.post("/login", async (req, res) => {
         res.status(500).json({ error: "Internal server error" });
     }
 });
+const popupDataSchema = new mongoose.Schema({
+    // Define the schema based on the data structure of your popup
+    // Example:
+    date: { type: Date, required: true },
+    content: { type: String, required: true },
+    // Add other fields as necessary
+});
+
+const PopupData = mongoose.model('PopupData', popupDataSchema);
+
+app.post('/savePopupData', verifyToken, async (req, res) => {
+    try {
+        const newPopupData = new PopupData(req.body); // Create a new instance of PopupData model with request body data
+        await newPopupData.save(); // Save the new instance to the database
+
+        res.status(200).json({ message: 'Popup data saved successfully' });
+    } catch (err) {
+        console.error('Error saving popup data:', err);
+        res.status(500).json({ error: 'Internal Server Error' });
+    }
+});
+
 
 app.get("/process", verifyToken, async (req, res) => {
     const listFiles = [relativeFilePath];
@@ -212,6 +234,17 @@ app.get("/process", verifyToken, async (req, res) => {
     });
 });
 
+app.get('/getPopupData', verifyToken, async (req, res) => {
+    try {
+        const popupData = await PopupData.find({}); // Fetch all documents from PopupData collection
+        res.json(popupData);
+    } catch (err) {
+        console.error('Error fetching popup data:', err);
+        res.status(500).json({ error: 'Internal Server Error' });
+    }
+});
+
+
 app.listen(port, () => {
     console.log(`Server is running on port ${port}`);
 });

packages/frontend/src/App.js

@@ -4,7 +4,8 @@ import Header from './Header.js'
 import AddUsers from './AddUsers'
 import LoginSignup from "./LoginSignup";
 import ImageUpload from './ImageUpload';
-import ImageCapture from './ImageCapture.js'
+import ImageCapture from './ImageCapture';
+import History from './History.js';
 import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom';
 
 function CreateTable() {
@@ -52,6 +53,14 @@ function CreateTable() {
         )
     }
 
+    const HistoryPage = () => {
+        return (
+            <div>
+                <Header/>
+                <History />
+            </div>
+        )
+    }
 
     const HomePage = () => {
         return (
@@ -75,8 +84,8 @@ function CreateTable() {
                     path="/imageUpload"
                     element={<PrivateRoute element={<Upload />} />}
                 />
-                <Route path="/history" />
-                <Route path="/imageCapture" element={<ICAP />} />
+                <Route path="/history" element={<HistoryPage />} />
+                <Route path="/imageCapture" element={<PrivateRoute element={<ICAP />}/>} />
                 <Route path="/" element={<LoginSignup />} />
                 <Route
                     path="/home"

packages/frontend/src/CSS Files/History.css

@@ -0,0 +1,33 @@
+.image-capture-container {
+    text-align: center;
+    margin-top: 20px;
+  }
+
+
+
+  .image-capture-container video,
+
+  .image-capture-container img {
+    max-width: 100%;
+    height: auto;
+    border: 1px solid #000;
+  }
+  .button {
+    padding: 10px 20px;
+    margin: 10px;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    transition: background-color 0.3s ease;
+  }
+
+  .button:hover {
+    background-color: rgb(179, 0, 39);
+  }
+
+  canvas {
+    display: none;
+  }

packages/frontend/src/Header.js

@@ -20,7 +20,7 @@ function Header() {
                 <a href="/home">Home</a>
                 <a href="/imageUpload">Image Upload</a>
                 <a href="/imageCapture">Image Capture</a>
-                <a href="/#">History</a>
+                <a href="/history">History</a>
                 <button
                     className="navigation-button navigation-close-button"
                     onClick={showNavbar}>

packages/frontend/src/History.js

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import './CSS Files/History.css'; // Ensure the CSS file path is correct
+
+const History = () => {
+    const [data, setData] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+    const [receipts, setReceipts] = useState([]); // Initialize receipts as an empty array
+    useEffect(() => {
+        async function fetchPopupData() {
+            const token = localStorage.getItem('token'); // Or use context if you have a context-based auth system
+
+            try {
+                const response = await fetch('http://localhost:8000/getPopupData', {
+                    headers: {
+                        'Authorization': `Bearer ${token}`, // Include the JWT token if required
+                    },
+                });
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                const data = await response.json();
+                setReceipts(data); // Assuming you have a state variable named 'receipts'
+                setLoading(false);
+            } catch (error) {
+                console.error('Error fetching data:', error);
+                setError(error.message);
+                setLoading(false);
+            }
+        }
+        fetchPopupData();
+    }, []);
+
+
+    if (loading) {
+        return <div>Loading history...</div>;
+    }
+
+    if (error) {
+        return <div>Error fetching history: {error}</div>;
+    }
+
+    return (
+        <div className="history-container">
+            <h1>History</h1>
+            {data.length > 0 ? (
+                data.map((item, index) => (
+                    <div key={index} className="history-item">
+                        {/* Render your data here */}
+                        <p>Date: {item.date}</p>
+                        <p>Content: {item.content}</p>
+                        {/* Add more fields as needed */}
+                    </div>
+                ))
+            ) : (
+                <div>No history data available.</div>
+            )}
+        </div>
+    );
+};
+
+export default History;
+
+
+
+

packages/frontend/src/ImageCapture.js

@@ -1,5 +1,4 @@
 import React, { useRef, useState } from 'react';
-import axios from 'axios';
 import './CSS Files/ImageCapture.css';
 
 
@@ -24,53 +23,48 @@ const ImageCapture = () => {
 
 
     const handleFileUpload = async () => {
+        const fetchResponse = await fetch(image);
+        const blob = await fetchResponse.blob();
         const formData = new FormData();
-        formData.append('file', file);
-
+        formData.append('file', blob, 'image.png');
+    
         try {
             const token = localStorage.getItem('token');
             console.log(token);
-            await fetch('http://localhost:8000/upload', {
+            const uploadResponse = await fetch('http://localhost:8000/upload', {
                 method: 'POST',
                 body: formData,
                 headers: {
                     'Authorization': `Bearer ${token}`,
                 },
             });
-
+
+            if (!uploadResponse.ok) {
+                throw new Error(`HTTP error! Status: ${uploadResponse.status}`);
+            }
+
             const userConfirmed = window.confirm('File uploaded successfully. Do you want to process this data?');
-
+    
             if (userConfirmed) {
-                const token = localStorage.getItem('token');
-
-                const requestOptions = {
-                    method: 'GET',
+                const processResponse = await fetch('http://localhost:8000/process', {
+                    method: 'POST',
                     headers: {
-                        'Content-Type': 'multipart/form-data',
-                        Authorization: `Bearer ${token}`, // Include the token in the Authorization header
+                        'Authorization': `Bearer ${token}`,
                     },
-                };
-
-                fetch('http://localhost:8000/process', requestOptions)
-                    .then((response) => {
-                        if (!response.ok) {
-                            throw new Error(`HTTP error! Status: ${response.status}`);
-                        }
-                        return response.json();
-                    })
-                    .then((data) => {
-                        console.log('File uploaded successfully:', data);
-
-                    })
-                    .catch((error) => {
-                        console.error('Error uploading file:', error.message);
-                    });
+                });
+
+                if (!processResponse.ok) {
+                    throw new Error(`HTTP error! Status: ${processResponse.status}`);
+                }
+
+                const data = await processResponse.json();
+                console.log('File processed successfully:', data);
             }
         } catch (error) {
             console.error('Error uploading file:', error);
         }
-            console.log('File uploaded successfully');
     };
+    ;
 
 
     const startVideo = () => {