Merge branch 'main' into Eht_new_working_branch

Mapalyze/Mapalyze/ClientApp/src/App.js

@@ -1,31 +1,33 @@
-import React, { Component } from 'react';
-import { Route, Routes } from 'react-router-dom';
-//import AppRoutes from './AppRoutes';
-import { Layout } from './components/Layout';
-import Home from './components/Home';
-import Login from './components/Login';
-import AboutUs from './components/AboutUs';
-import SignUp from './components/SignUp';
-import AppInterface from './components/AppInterface';
-
+// App.js
+import React, { Component } from "react";
+import { Route, Routes, BrowserRouter } from "react-router-dom";
+import { AuthProvider } from "./AuthContext";
+import { Layout } from "./components/Layout";
+import Home from "./components/Home";
+import Login from "./components/Login";
+import AboutUs from "./components/AboutUs";
+import SignUp from "./components/SignUp";
+import AppInterface from "./components/AppInterface";
+import ProtectedRoute from "./ProtectedRoute";
 export default class App extends Component {
   static displayName = App.name;
 
   render() {
     return (
-      <div  className="">
-      <div className="">
-        <Layout/>
-        <Routes>
-          <Route path="/" element={<Home/>} />
-          <Route path="/AboutUs" element={<AboutUs/>}/>
-          <Route path="/Login" element={<Login/>}/>
-          <Route path="/Signup" element={<SignUp/>}/>
-          <Route path="/App" element={<AppInterface/>}/>
-        </Routes>
-
-      </div>
-      </div>
+      <AuthProvider>
+        <BrowserRouter>
+          <Layout />
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/AboutUs" element={<AboutUs />} />
+            <Route path="/Login" element={<Login />} />
+            <Route path="/Signup" element={<SignUp />} />
+            <Route path="/App" element={<ProtectedRoute />}>
+              <Route index element={<AppInterface />} />
+            </Route>
+          </Routes>
+        </BrowserRouter>
+      </AuthProvider>
     );
   }
 }

Mapalyze/Mapalyze/ClientApp/src/AuthContext.js

@@ -0,0 +1,36 @@
+import React, { createContext, useState, useEffect } from "react";
+
+// Create authentication context
+export const AuthContext = createContext(null);
+
+// Provider component for managing auth state
+export const AuthProvider = ({ children }) => {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // Check session storage for login state on component mount
+  useEffect(() => {
+    const userLoggedIn = sessionStorage.getItem("isLoggedIn") === "true";
+    setIsLoggedIn(userLoggedIn);
+  }, []);
+
+  // Set login state and store in session storage
+  const login = () => {
+    setIsLoggedIn(true);
+    sessionStorage.setItem("isLoggedIn", "true");
+  };
+
+  // Implement the logout function
+  const logout = () => {
+    // Clear the session storage or any other persistent storage used
+    sessionStorage.removeItem("isLoggedIn");
+    // Update the state to reflect the user is logged out
+    setIsLoggedIn(false);
+  };
+
+  // Provide auth state and handlers to child components
+  return (
+    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};

Mapalyze/Mapalyze/ClientApp/src/ProtectedRoute.js

@@ -0,0 +1,17 @@
+import React, { useContext } from "react";
+import { Navigate, Outlet } from "react-router-dom";
+import { AuthContext } from "./AuthContext";
+
+const ProtectedRoute = () => {
+  const { isLoggedIn } = useContext(AuthContext);
+
+  // If not logged in, redirect to the login page
+  if (!isLoggedIn) {
+    return <Navigate to="/Login" replace />;
+  }
+
+  // If logged in, render the child components
+  return <Outlet />;
+};
+
+export default ProtectedRoute;

Mapalyze/Mapalyze/ClientApp/src/components/AppInterface.js

@@ -1,8 +1,15 @@
 import React, { Component } from "react";
+import axios from "axios"; // Import axios for HTTP requests
 
+// Define a class component named AppInterface
 export class AppInterface extends Component {
   static displayName = AppInterface.name;
 
+  // Initialize state to hold the selected file
+  state = {
+    selectedFile: null,
+  };
+
   constructor(props) {
     super(props);
 
@@ -16,69 +23,73 @@ export class AppInterface extends Component {
 
   // Function to trigger the file input dialog
   handleFileInputClick = () => {
-    this.fileInput.click();
+    this.fileInput.click(); // Programmatically click the file input
   };
 
-  // Function to handle file selection
+  // Function to handle file selection and read file contents
   handleFileInputChange = (e) => {
-    const selectedFile = e.target.files[0];
-    if (selectedFile) {
-      // Get the file extension
-      const fileExtension = selectedFile.name.split(".").pop().toLowerCase();
-
-      // Check if the file type is allowed (JPG, JPEG, or PDF)
-      if (["jpg", "jpeg", "pdf"].includes(fileExtension)) {
-        // You can now work with the selected file here
-
-        // Create a download link for the selected file
-        const downloadLink = document.createElement("a");
-        downloadLink.href = URL.createObjectURL(selectedFile);
-        downloadLink.download = selectedFile.name;
-
-        // Trigger a click event on the download link to prompt the user to download the file
-        downloadLink.click();
-      } else {
-        alert("Please select a valid JPG, JPEG, or PDF file.");
-        // Clear the file input
-        this.fileInput.value = "";
-      }
+    const file = e.target.files[0]; // Get the selected file
+    if (file) {
+      // Display file information
+      const fileInfo = `File name: ${file.name}, File size: ${(
+        file.size / 1024
+      ).toFixed(2)} KB`;
+      this.setState({ selectedFile: file, fileInfo: fileInfo });
+
+      // Read the file contents using FileReader
+      const reader = new FileReader();
+      reader.onload = (readEvent) => {
+        console.log(readEvent.target.result); // Log the file contents to the console
+      };
+      reader.readAsText(file); // Read the file as text
     }
   };
 
-  // Function to toggle the editor
-  toggleEditor = () => {
-    this.setState(
-      (prevState) => ({
-        editorOpen: !prevState.editorOpen,
-      }),
-      () => {
-        if (this.state.editorOpen && this.editorIframe.current) {
-          // Reload the iframe when opening the editor
-          this.editorIframe.current.src =
-            "https://cvdlab.github.io/react-planner/";
-        }
+  // Function to send the selected file to a server and navigate to another app
+  handleRender = async () => {
+    if (this.state.selectedFile) {
+      try {
+        const formData = new FormData();
+        formData.append("file", this.state.selectedFile);
+
+        // Post the file to the server using axios
+        await axios.post("http://localhost:4000/upload-json", formData, {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        });
+
+        // Open a new tab with the React-Planner app
+        window.open("http://localhost:9000", "_blank");
+      } catch (error) {
+        console.error("Error uploading file: ", error);
       }
-    );
+    } else {
+      alert("Please select a JSON file to render.");
+    }
   };
 
-
-
+  // Render method to display the UI
   render() {
+    // Unified button styling
+    const buttonClass =
+      "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 mt-5";
+
     return (
-      <div className="relative min-h-screen flex items-center justify-center bg-gradient-to-b from-gray-900 to-gray-600 bg-gradient-to-r dark:bg-gradient-to-b from-gray-900 to-gray-600 bg-gradient-to-r'">
+      <div className="relative min-h-screen flex items-center justify-center bg-gradient-to-b from-gray-900 to-gray-600">
         <div className="flex flex-col items-center justify-center text-left text-white ml-36 mr-36 mt-28">
-          <p>Upload Floor Plans </p>
-          <p>Render Floor Plans </p>
-          <p>Fiddle With Editor </p>
+          <p>This is the app AppInterface</p>
+          <p>Upload your JSON file here</p>
           <button
             onClick={this.handleFileInputClick}
-            type="button"
-            className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 mt-5"
+            className={buttonClass} // Apply unified button styling
           >
-            Import
-
+            Import JSON
           </button>
-
+          {this.state.fileInfo && (
+            <div className="text-sm mt-2">{this.state.fileInfo}</div>
+          )}
+          <br />
           {/*
             <button
               className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 mt-5"
@@ -99,31 +110,28 @@ export class AppInterface extends Component {
               />
             )}
             */}
-            <a href = "https://ashy-cliff-050f7cc10.4.azurestaticapps.net" >
-            <button className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 mt-5 ">
-              Editor
-            </button>
-            </a>
-
           <button
-            type="button"
-            className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 mt-5"
+            onClick={this.handleRender}
+            className={buttonClass} // Apply unified button styling
           >
-            Render
+            Render and Go to React-Planner
           </button>
           <br />
-
-          {/* Hidden file input element */}
           <input
             type="file"
+            accept=".json"
             style={{ display: "none" }}
             ref={(input) => (this.fileInput = input)}
             onChange={this.handleFileInputChange}
           />
+          <a href="https://ashy-cliff-050f7cc10.4.azurestaticapps.net">
+            <button className={buttonClass}>Editor</button>{" "}
+            {/* Apply unified button styling */}
+          </a>
         </div>
       </div>
     );
   }
 }
 
-export default AppInterface;
+export default AppInterface;

Mapalyze/Mapalyze/ClientApp/src/components/Home.js

@@ -7,10 +7,10 @@ export class Home extends Component {
   render() {
     return (
       <div className='flex flex-wrap items-center justify-center bg-gray-200 dark:bg-gray-900 w-full mt-24 z-10'>
-        <Conversioneg/>
-        <Videocomponent/>
+        <Conversioneg />
+        <Videocomponent />
       </div>
-     
+
     );
   }
 }