Added server.js which acts like backend for react-planner and update…

es/translator/en.js

@@ -38,6 +38,7 @@ export default {
   "Length": "Length",
   "Lines": "Lines",
   "Load project": "Load project",
+  "Fetch and generate": "Fetch and generate",
   "Mouse X Coordinate": "Mouse X Coordinate",
   "Mouse Y Coordinate": "Mouse Y Coordinate",
   "Name": "Name",

lib/translator/en.js

@@ -43,6 +43,7 @@ exports.default = {
   "Length": "Length",
   "Lines": "Lines",
   "Load project": "Load project",
+  "Fetch and generate": "Fetch and generate",
   "Mouse X Coordinate": "Mouse X Coordinate",
   "Mouse Y Coordinate": "Mouse Y Coordinate",
   "Name": "Name",

package.json

@@ -72,6 +72,7 @@
     "immutable": "3.8.2",
     "immutablediff": "0.4.4",
     "immutablepatch": "0.5.0",
+    "multer": "^1.4.5-lts.1",
     "polylabel": "1.0.2",
     "prop-types": "15.7.2",
     "react-icons": "3.5.0",

server/server.js

@@ -0,0 +1,80 @@
+const express = require('express');
+const cors = require('cors');
+const multer = require('multer');
+const fs = require('fs');
+
+// Ensure the uploads directory exists
+const uploadsDir = './uploads';
+fs.existsSync(uploadsDir) || fs.mkdirSync(uploadsDir);
+
+const storage = multer.diskStorage({
+  destination: function (req, file, cb) {
+    cb(null, uploadsDir) // Save to the 'uploads' directory
+  },
+  filename: function (req, file, cb) {
+    cb(null, file.originalname)
+  }
+});
+
+const fileFilter = (req, file, cb) => {
+  // Accept JSON files only
+  if (file.mimetype === 'application/json' || file.originalname.endsWith('.json')) {
+    cb(null, true);
+  } else {
+    cb(new Error('Not a JSON file'), false);
+  }
+};
+
+const upload = multer({ storage: storage, fileFilter: fileFilter });
+
+const app = express();
+app.use(cors({
+  origin: ['http://localhost:9000', 'http://localhost:44463'], // Frontend domains
+  optionsSuccessStatus: 200
+}));
+
+app.post('/upload-json', upload.single('file'), (req, res) => {
+  if (req.file) {
+    fs.readFile(req.file.path, 'utf8', (err, data) => {
+      if (err) {
+        console.error('Error reading the file:', err);
+        return res.status(500).json({ message: 'Error reading the file' });
+      }
+
+      // Assuming the file content is a JSON object
+      const jsonData = JSON.parse(data);
+      console.log(jsonData); // Print the JSON content to the server console
+
+      // Save the JSON data to a single project data file
+      fs.writeFile('./uploads/project-data.json', data, (writeErr) => {
+        if (writeErr) {
+          console.error('Error writing project data:', writeErr);
+          return res.status(500).json({ message: 'Error writing project data' });
+        }
+
+        // Delete the uploaded file after saving project data
+        fs.unlinkSync(req.file.path);
+
+        res.json({ message: 'JSON data received', data: jsonData });
+      });
+    });
+  } else {
+    res.status(400).json({ message: 'No file received or the file is not a JSON file' });
+  }
+});
+
+app.get('/get-project-data', (req, res) => {
+  // Read the project data from the project data file
+  fs.readFile('./uploads/project-data.json', 'utf8', (err, data) => {
+    if (err) {
+      console.error('Error reading project data:', err);
+      return res.status(500).json({ message: 'Error reading project data' });
+    }
+
+    const jsonData = JSON.parse(data);
+    res.json(jsonData);
+  });
+});
+
+const PORT = 4000;
+app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

server/uploads/project-data.json

@@ -0,0 +1 @@
+{"unit":"cm","layers":{"layer-1":{"id":"layer-1","altitude":0,"order":0,"opacity":1,"name":"default","visible":true,"vertices":{"08z4oGx64Zc":{"id":"08z4oGx64Zc","type":"","prototype":"vertices","name":"Vertex","misc":{},"selected":false,"properties":{},"visible":true,"x":305.2264150943396,"y":1752.7924528301887,"lines":["MDPX15vJ_v6","pabcfjxbcUg"],"areas":[]},"4-iERxsNqNJ":{"id":"4-iERxsNqNJ","type":"","prototype":"vertices","name":"Vertex","misc":{},"selected":false,"properties":{},"visible":true,"x":1085.4150943396226,"y":1718.8301886792453,"lines":["MDPX15vJ_v6","fCTYKHBL9k"],"areas":[]},"0KOBdCFEfot":{"id":"0KOBdCFEfot","type":"","prototype":"vertices","name":"Vertex","misc":{},"selected":false,"properties":{},"visible":true,"x":284.47169811320754,"y":1269.7735849056605,"lines":["pabcfjxbcUg","PVADZ5AzMwQ"],"areas":[]},"hwn6Y7hSvZi":{"id":"hwn6Y7hSvZi","type":"","prototype":"vertices","name":"Vertex","misc":{},"selected":false,"properties":{},"visible":true,"x":1109,"y":1255.622641509434,"lines":["PVADZ5AzMwQ","fCTYKHBL9k"],"areas":[]}},"lines":{"MDPX15vJ_v6":{"id":"MDPX15vJ_v6","type":"wall","prototype":"lines","name":"Wall","misc":{},"selected":false,"properties":{"height":{"length":300},"thickness":{"length":20},"textureA":"bricks","textureB":"bricks"},"visible":true,"vertices":["08z4oGx64Zc","4-iERxsNqNJ"],"holes":[]},"pabcfjxbcUg":{"id":"pabcfjxbcUg","type":"wall","prototype":"lines","name":"Wall","misc":{},"selected":false,"properties":{"height":{"length":300},"thickness":{"length":20},"textureA":"bricks","textureB":"bricks"},"visible":true,"vertices":["0KOBdCFEfot","08z4oGx64Zc"],"holes":[]},"PVADZ5AzMwQ":{"id":"PVADZ5AzMwQ","type":"wall","prototype":"lines","name":"Wall","misc":{},"selected":false,"properties":{"height":{"length":300},"thickness":{"length":20},"textureA":"bricks","textureB":"bricks"},"visible":true,"vertices":["0KOBdCFEfot","hwn6Y7hSvZi"],"holes":[]},"fCTYKHBL9k":{"id":"fCTYKHBL9k","type":"wall","prototype":"lines","name":"Wall","misc":{},"selected":false,"properties":{"height":{"length":300},"thickness":{"length":20},"textureA":"bricks","textureB":"bricks"},"visible":true,"vertices":["4-iERxsNqNJ","hwn6Y7hSvZi"],"holes":[]}},"holes":{},"areas":{"mPPCRJDkrc":{"id":"mPPCRJDkrc","type":"area","prototype":"areas","name":"Area","misc":{},"selected":false,"properties":{"patternColor":"#F5F4F4","thickness":{"length":0},"texture":"none"},"visible":true,"vertices":["hwn6Y7hSvZi","4-iERxsNqNJ","08z4oGx64Zc","0KOBdCFEfot"],"holes":[]}},"items":{},"selected":{"vertices":[],"lines":[],"holes":[],"areas":[],"items":[]}}},"grids":{"h1":{"id":"h1","type":"horizontal-streak","properties":{"step":20,"colors":["#808080","#ddd","#ddd","#ddd","#ddd"]}},"v1":{"id":"v1","type":"vertical-streak","properties":{"step":20,"colors":["#808080","#ddd","#ddd","#ddd","#ddd"]}}},"selectedLayer":"layer-1","groups":{},"width":3000,"height":2000,"meta":{},"guides":{"horizontal":{},"vertical":{},"circular":{}}}

src/components/toolbar/toolbar-load-button.jsx

@@ -1,21 +1,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {FaFolderOpen as IconLoad} from 'react-icons/fa';
+import { FaFolderOpen as IconLoad, FaCloudDownloadAlt as IconFetch } from 'react-icons/fa';
 import ToolbarButton from './toolbar-button';
-import {browserUpload}  from '../../utils/browser';
+import { browserUpload } from '../../utils/browser';
 
-export default function ToolbarLoadButton({state}, {translator, projectActions}) {
+export default function ToolbarLoadButton({ state }, { translator, projectActions }) {
 
-  let loadProjectFromFile = event => {
-    event.preventDefault();
-    browserUpload().then((data) => {
-      projectActions.loadProject(JSON.parse(data));
-    });
+  // let loadProjectFromFile = event => {
+  //   event.preventDefault();
+  //   browserUpload().then((data) => {
+  //     projectActions.loadProject(JSON.parse(data));
+  //   });
+  // };
+
+  let fetchAndLoadProject = () => {
+    fetch('http://localhost:4000/get-project-data')
+      .then(response => response.json())
+      .then(data => {
+        // Assuming 'data' contains the generated project data
+        projectActions.loadProject(data);
+      })
+      .catch(error => {
+        console.error('Error fetching and loading project:', error);
+      });
   };
 
   return (
-    <ToolbarButton active={false} tooltip={translator.t("Load project")} onClick={loadProjectFromFile}>
-      <IconLoad />
+    <ToolbarButton active={false} tooltip={translator.t("Fetch and generate")} onClick={fetchAndLoadProject}>
+      <IconFetch />
     </ToolbarButton>
   );
 }

src/translator/en.js

@@ -38,6 +38,7 @@ export default {
   "Length":"Length",
   "Lines":"Lines",
   "Load project": "Load project",
+  "Fetch and generate": "Fetch and generate",
   "Mouse X Coordinate":"Mouse X Coordinate",
   "Mouse Y Coordinate":"Mouse Y Coordinate",
   "Name": "Name",