diff --git a/capella_model_explorer/frontend/src/App.jsx b/capella_model_explorer/frontend/src/App.jsx
index f5e8739..351bd54 100644
--- a/capella_model_explorer/frontend/src/App.jsx
+++ b/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 (
- } />
- } />
+ } />
+ } />
+ } />
)
diff --git a/capella_model_explorer/frontend/src/components/InstanceView.jsx b/capella_model_explorer/frontend/src/components/InstanceView.jsx
new file mode 100644
index 0000000..9c38d6e
--- /dev/null
+++ b/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 (
+
+
+
+ );}
\ No newline at end of file
diff --git a/capella_model_explorer/frontend/src/components/TemplateDetails.jsx b/capella_model_explorer/frontend/src/components/TemplateDetails.jsx
index 94e1177..309fa79 100644
--- a/capella_model_explorer/frontend/src/components/TemplateDetails.jsx
+++ b/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}) => (
- 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 (
+
- {template.name}
+ {details.name}
-
{template.description}
+
{details.description}
+
+
+ {details.objects && details.objects.length === 0 &&
No objects found
}
+ {details.objects && details.objects.length > 0 && details.objects.map(object => (
+
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'>
+
+
+ {object.name}
+
+
+
+ ))}
- );
+ );}
diff --git a/capella_model_explorer/frontend/src/components/WiredTemplatesList.jsx b/capella_model_explorer/frontend/src/components/WiredTemplatesList.jsx
index 17caa31..731de2c 100644
--- a/capella_model_explorer/frontend/src/components/WiredTemplatesList.jsx
+++ b/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
navigate(`/templates/${idx}`)} />;}
\ No newline at end of file
+ return navigate(`/templates/${idx}`, {state: {idx: idx}})} />;}
\ No newline at end of file