Cosimulation feature 1

.gitignore

@@ -64,3 +64,4 @@ pkg/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/src/resources/coe

package.json

@@ -18,8 +18,8 @@
     "build": "rimraf release/ && node esbuild.config.mjs && electron-builder --x64",
     "build:win": "npm run build && .\\convert-to-msix.bat",
     "start": "node esbuild.config.mjs --dev && concurrently \"npm run serve\" \"npm run electron-start\"",
-    "serve": "serve dist -l 8080 --cors",
-    "electron-start": "wait-on http://localhost:8080 && npx electron dist/main.js",
+    "serve": "serve dist -l 3000 --cors",
+    "electron-start": "wait-on http://localhost:3000 && npx electron dist/main.js",
     "syntax": "npx eslint . --fix",
     "clean": "npx rimraf dist monocart-report release pkg test-results test/coverage-reports && npm ci"
   },
@@ -42,7 +42,11 @@
     },
     "win": {
       "icon": "src/resources/into-cps/appicon/into-cps-logo.png.ico",
-      "target": ["nsis", "msi", "portable"],
+      "target": [
+        "nsis",
+        "msi",
+        "portable"
+      ],
       "signAndEditExecutable": false,
       "forceCodeSigning": false
     },
@@ -69,7 +73,9 @@
     "monocart-coverage-reports": "^2.11.1",
     "playwright": "^1.48.2",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.0.1",
+    "tree-kill": "^1.2.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.14.0",
@@ -97,4 +103,4 @@
     "typescript-eslint": "^8.12.2",
     "wait-on": "^8.0.1"
   }
-}
+}

preload.js

@@ -6,5 +6,10 @@ contextBridge.exposeInMainWorld('electronAPI', {
   },
   removeToggleDarkModeListener: () => {
     ipcRenderer.removeAllListeners('toggle-dark-mode');
-  }
+  },
+  readJsonFile: (relativePath) => {
+    return ipcRenderer.invoke('read-json-file', relativePath)
+  },
+  startCoe: () => ipcRenderer.invoke('start-coe'),
+  stopCoe: () => ipcRenderer.invoke('stop-coe'),
 });

src/App.tsx

@@ -1,9 +1,11 @@
 import React, { useState, useEffect } from 'react';
+import { HashRouter as Router, Routes, Route } from 'react-router-dom';
 import { ThemeProvider, CssBaseline, Box } from '@mui/material';
 import { lightTheme, darkTheme } from './themes';
 import Sidebar from './components/Sidebar';
-import Main from './components/Main';
 import Bottom from './components/Bottom';
+import Main from './components/Main';
+import Cosimulation from './components/Cosimulation/Cosimulation';
 
 const App: React.FC = () => {
   const [darkMode, setDarkMode] = useState(false);
@@ -16,34 +18,35 @@ const App: React.FC = () => {
     const handleToggleDarkMode = () => {
       toggleDarkMode();
     };
-  
+
     if (window.electronAPI) {
       window.electronAPI.addToggleDarkModeListener(handleToggleDarkMode);
     } else {
       console.warn('window.electronAPI not found');
     }
-  
+
     return () => {
       if (window.electronAPI) {
         window.electronAPI.removeToggleDarkModeListener();
       }
     };
   }, []);
-
-
 
   return (
-    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
+    <ThemeProvider theme={darkMode ? lightTheme : darkTheme}>
       <CssBaseline />
-      <Box sx={{ display: 'flex', minHeight: '100vh' }}>
-        <Sidebar />
-
-        <Box component="main" sx={{ flexGrow: 1, p: 3, position: 'relative' }}>
-          <Main />
+      <Router>
+        <Box sx={{ display: 'flex', minHeight: '100vh' }}>
+          <Sidebar />
+          <Box component="main" sx={{ flexGrow: 1, p: 3, position: 'relative' }}>
+            <Routes>
+              <Route path="/" element={<Main />} />
+              <Route path="/cosimulation" element={<Cosimulation />} />
+            </Routes>
+          </Box>
+          <Bottom />
         </Box>
-
-        <Bottom />
-      </Box>
+      </Router>
     </ThemeProvider>
   );
 };

src/components/Bottom.tsx

@@ -6,7 +6,18 @@ import StopCircleIcon from '@mui/icons-material/StopCircle';
 const Bottom: React.FC = () => {
   const [coeRunning, setCoeRunning] = useState(false);
 
-  const toggleCoeState = () => setCoeRunning((prev) => !prev);
+  const toggleCoeState = async () => {
+    try {
+      if (coeRunning) {
+        await window?.electronAPI?.stopCoe();
+      } else {
+        await window?.electronAPI?.startCoe();
+      }
+      setCoeRunning(!coeRunning);
+    } catch (error) {
+      console.error('Error toggling COE:', error);
+    }
+  };
 
   return (
     <Box
@@ -18,12 +29,18 @@ const Bottom: React.FC = () => {
         bgcolor: 'background.paper',
         boxShadow: 3,
       }}
-    >      
+    >
       <BottomNavigation showLabels sx={{ justifyContent: 'flex-start' }}>
         <BottomNavigationAction
           id="coe-btn-launch-bottom"
           label={<Typography>{coeRunning ? 'Stop COE' : 'Start COE'}</Typography>}
-          icon={coeRunning ? <StopCircleIcon id="coeIconColor" color="error" /> : <PlayCircleOutlineIcon id="coeIconColor" color="primary" />}
+          icon={
+            coeRunning ? (
+              <StopCircleIcon id="coeIconColor" color="error" />
+            ) : (
+              <PlayCircleOutlineIcon id="coeIconColor" color="primary" />
+            )
+          }
           onClick={toggleCoeState}
         />
       </BottomNavigation>

src/components/Cosimulation/Cosimulation.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import { Typography, Skeleton, Box } from '@mui/material';
+import { renderJson } from '../../utils/renderJson';
+
+const Cosimulation: React.FC = () => {
+  const filePath = 'cosimulation/2018may7/coe.json';
+  const [jsonData, setJsonData] = useState<any>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchJson = async () => {
+      try {
+        console.log('window.electronAPI:', window?.electronAPI);
+        console.log('readJsonFile exists:', typeof window?.electronAPI?.readJsonFile === 'function');
+
+        console.log('Fetching JSON from:', filePath);
+        const data = await window?.electronAPI?.readJsonFile(filePath); // Dovrebbe ora ricevere i dati
+        console.log('Data fetched:', data); // Dovrebbe loggare il JSON correttamente
+        setJsonData(data);
+      } catch (err) {
+        console.error('Error fetching JSON:', err);
+        setError('Failed to load JSON file.');
+      }
+    };
+
+    fetchJson();
+  }, []);
+
+
+  return (
+    <Box>
+      <Typography variant="h4" component="h1" gutterBottom>
+        Cosimulation
+      </Typography>
+      <Typography variant="h6" component="h6" gutterBottom>
+        {filePath}
+      </Typography>
+      {error ? (
+        <Typography variant="body2" color="error">
+          {error}
+        </Typography>
+      ) : jsonData ? (
+        renderJson(jsonData)
+      ) : (
+        <Skeleton animation="wave" />
+      )}
+    </Box>
+  );  
+};
+
+export default Cosimulation;

src/components/Sidebar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Drawer, List, Divider, Toolbar } from '@mui/material';
+import { Drawer, List, ListItem, ListItemText, ListItemButton, Toolbar } from '@mui/material';
+import { NavLink } from 'react-router-dom';
 
 const Sidebar: React.FC = () => (
   <Drawer
@@ -11,8 +12,17 @@ const Sidebar: React.FC = () => (
     }}
   >
     <Toolbar />
-    <Divider />
     <List>
+      <ListItem disablePadding>
+        <ListItemButton component={NavLink} to="/">
+          <ListItemText primary="Home" />
+        </ListItemButton>
+      </ListItem>
+      <ListItem disablePadding>
+        <ListItemButton component={NavLink} to="/cosimulation">
+          <ListItemText primary="Cosimulation" />
+        </ListItemButton>
+      </ListItem>
     </List>
   </Drawer>
 );