end-2-end PoC

capella_model_explorer/frontend/src/App.jsx

@@ -5,6 +5,7 @@ import './App.css'
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
 import { WiredTemplatesList } from './components/WiredTemplatesList'
 import { TemplateDetails } from './components/TemplateDetails'
+import { InstanceView } from './components/InstanceView'
 
 
 function App() {
@@ -13,8 +14,9 @@ function App() {
   return (
     <Router>
       <Routes>
-        <Route path="/templates" element={<WiredTemplatesList templates_endpoint="http://localhost:8000/api/templates" />} />
-        <Route path="/templates/:templateName" element={<TemplateDetails />} />
+        <Route path="/templates" element={<WiredTemplatesList endpoint="http://localhost:8000/api/templates" />} />
+        <Route path="/templates/:templateName" element={<TemplateDetails endpoint="http://localhost:8000/api/templates/" />} />
+        <Route path="/templates/:templateName/:objectID" element={<InstanceView endpoint="http://localhost:8000/api/templates/" />} />
       </Routes>
     </Router>
   )

capella_model_explorer/frontend/src/components/InstanceView.jsx

@@ -0,0 +1,33 @@
+import React, {useEffect, useState} from 'react';
+import { useParams } from 'react-router-dom';
+
+
+export const InstanceView = ({endpoint}) => {
+    let { templateName, objectID } = useParams();
+    const [details, setDetails] = useState([]);
+
+    useEffect(() => {
+        const fetchDetails = async () => {
+            try {
+                const url = endpoint + `${templateName}/${objectID}`;
+                console.log(url);
+                const response = await fetch(url, {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'text/html'
+                    },
+                });
+                const data = await response.text();
+                setDetails(data);
+            }
+            catch (error) {}
+            finally {}
+        };
+        fetchDetails();
+    }, [endpoint]);
+
+    return (
+    <div dangerouslySetInnerHTML={{__html: details}}>
+
+    </div>
+    );}

capella_model_explorer/frontend/src/components/TemplateDetails.jsx

@@ -1,13 +1,52 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
+import { useLocation } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
-export const TemplateDetails = ({template, onClickCallback}) => (
-    <div onClick={() => onClickCallback(template.idx)}
-        className='max-w-sm bg-white rounded-lg border border-gray-200 shadow-md m-4 cursor-pointer hover:bg-gray-100'>
+export const TemplateDetails = ({endpoint}) => {
+    const location = useLocation();
+    const template_id = location.state.idx;
+    const [details, setDetails] = useState([]);
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const fetchDetails = async () => {
+            try {
+                const response = await fetch(endpoint + template_id, {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                });
+                const data = await response.json();
+                setDetails(data);
+            }
+            catch (error) {}
+            finally {}
+        };
+        fetchDetails();
+    }, [endpoint]);
+
+    return (
+    <div>
         <div className='p-5'>
             <h5 className='mb-2 text-2xl font-bold text-gray-900'>
-                {template.name}
+                {details.name}
             </h5>
-            <p className='mb-3 font-normal text-gray-700'>{template.description}</p>
+            <p className='mb-3 font-normal text-gray-700'>{details.description}</p>
+        </div>
+        <div className='flex flex-wrap justify-center items-center'>
+            {details.objects && details.objects.length === 0 && <p>No objects found</p>}
+            {details.objects && details.objects.length > 0 && details.objects.map(object => (
+            <div key={object.idx} 
+                onClick={() => navigate(`/templates/${template_id}/${object.idx}`, {state: {template_id: template_id, object_idx: object.idx}})}
+                className='max-w-sm bg-white rounded-lg border border-gray-200 shadow-md m-4 cursor-pointer hover:bg-gray-100'>
+                <div className='p-4'>
+                    <h5 className='text-lg font-bold text-gray-900'>
+                        {object.name}
+                    </h5>
+                </div>
+            </div> 
+            ))}
         </div>
     </div>
-    );
+    );}

capella_model_explorer/frontend/src/components/WiredTemplatesList.jsx

@@ -3,29 +3,26 @@ import { useNavigate } from 'react-router-dom';
 import { TemplatesList } from './TemplatesList';
 
 
-export const WiredTemplatesList = ({templates_endpoint}) => {
+export const WiredTemplatesList = ({endpoint}) => {
     const [templates, setTemplates] = useState([])
     const navigate = useNavigate();
 
     useEffect(() => {
         const fetchTemplates = async () => {
             try {
-                const response = await fetch(templates_endpoint, {
+                const response = await fetch(endpoint, {
                     method: 'GET',
                     headers: {
-                        'Content-Type': 'application/json',
-                        // set no-cors mode to avoid CORS issues
-                        'mode': 'no-cors',
+                        'Content-Type': 'application/json'
                     },
                 });
                 const data = await response.json();
                 setTemplates(data);
-                console.log(data);
             }
             catch (error) {}
             finally {}
         };
         fetchTemplates();
-    }, [templates_endpoint]);
+    }, [endpoint]);
 
-    return <TemplatesList templates={templates} cardClickCallback={(idx) => navigate(`/templates/${idx}`)} />;}
+    return <TemplatesList templates={templates} cardClickCallback={(idx) => navigate(`/templates/${idx}`, {state: {idx: idx}})} />;}