Skip to content

Commit

Permalink
extended HTML overview for relations and connections.
Browse files Browse the repository at this point in the history
  • Loading branch information
@DrMarkusVoss
DrMarkusVoss committed Apr 18, 2024
1 parent 47a3ba7 commit a2cff65
Showing 1 changed file with 199 additions and 9 deletions.
208 changes: 199 additions & 9 deletions test/examples/WeatherStation/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,25 +20,87 @@
margin-bottom: 12px;
}

#myInputC {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}

#myInputR {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}

#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}

#myTableR {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}

#myTableC {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}

#myTable th, #myTable td {
text-align: left;
padding: 12px;
}

#myTableR th, #myTableR td {
text-align: left;
padding: 12px;
}

#myTableC th, #myTableC td {
text-align: left;
padding: 12px;
}

#myTable tr {
border-bottom: 1px solid #ddd;
}

#myTableR tr {
border-bottom: 1px solid #ddd;
}

#myTableC tr {
border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}

#myTableR tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}

#myTableC tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
/* END FILTERED TABLE */

/* TABS */
Expand Down Expand Up @@ -93,6 +155,8 @@
<IMG class="displayed" id="myImg" src="./../../../arch/pumla_logo.png" alt="Snow" style="width:100%;max-width:400px">
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Elements')">Elements</button>
<button class="tablinks" onclick="openTab(event, 'Relations')">Relations</button>
<button class="tablinks" onclick="openTab(event, 'Connections')">Connections</button>
<button class="tablinks" onclick="openTab(event, 'Diagrams')">Diagrams</button>
<button class="tablinks" onclick="openTab(event, 'Functions')">Functions</button>
</div>
Expand All @@ -112,23 +176,35 @@ <h2>Architecture Elements</h2>
</table>
<script>
var g_fulltext = "none"
var g_mr_json
var g_mr_json_elems
var g_mr_json_rels
var g_mr_json_cons

// read the modelrepo and call function to convert it to JSON object
fetch('modelrepo_json.puml')
.then(response => response.text())
.then(text => getJSON(text.replace("!$allelems = ", "")))
.then(text => getJSON(text))

// convert a JSON txt string into a JSON object
// and then add the relevant objecs and attributes to the table
function getJSON(txt) {
txt1 = txt.split("\n\n")
g_fulltext = txt1[0];
g_fulltext = txt1;
// console.log(g_fulltext)
g_mr_json = JSON.parse(g_fulltext);
g_mr_json_elems = JSON.parse(txt1[0].replace("!$allelems = ", ""));
g_mr_json_rels = JSON.parse(txt1[1].replace("!$allrelations = ", ""));
g_mr_json_cons = JSON.parse(txt1[2].replace("!$allconnections = ", ""));

setupElems();
setupRels();
setupCons();
}

function setupElems() {

const tbody = document.getElementById('myTable').getElementsByTagName('tbody')[0];

for (let i = 0; i<g_mr_json.elements.length; i++) {
for (let i = 0; i<g_mr_json_elems.elements.length; i++) {
let row = tbody.insertRow();

let cell0 = row.insertCell(0);
Expand All @@ -137,11 +213,11 @@ <h2>Architecture Elements</h2>
let cell3 = row.insertCell(3);

cell0.innerHTML = i+1
cell1.innerHTML = g_mr_json.elements[i].name;
cell2.innerHTML = g_mr_json.elements[i].alias
cell3.innerHTML = g_mr_json.elements[i].stereotypes;
cell1.innerHTML = g_mr_json_elems.elements[i].name;
cell2.innerHTML = g_mr_json_elems.elements[i].alias
cell3.innerHTML = g_mr_json_elems.elements[i].stereotypes;
};
}
}

// function to handle the search filter
function myFunction() {
Expand All @@ -167,6 +243,120 @@ <h2>Architecture Elements</h2>
</script>
</div>

<div id="Relations" class="tabcontent">
<h2>Architecture Relations</h2>

<input type="text" id="myInput" onkeyup="myFunctionR()" placeholder="Search for names.." title="Type in a name">

<table id="myTableR">
<tr class="header">
<th style="width:5%;">count</th>
<th style="width:35%;">id</th>
<th style="width:30%;">start</th>
<th style="width:30%;">end</th>
</tr>
</table>
<script>

function setupRels() {

const tbodyR = document.getElementById('myTableR').getElementsByTagName('tbody')[0];

for (let i = 0; i<g_mr_json_rels.relations.length; i++) {
let row = tbodyR.insertRow();

let cell0 = row.insertCell(0);
let cell1 = row.insertCell(1);
let cell2 = row.insertCell(2);
let cell3 = row.insertCell(3);

cell0.innerHTML = i+1
cell1.innerHTML = g_mr_json_rels.relations[i].id;
cell2.innerHTML = g_mr_json_rels.relations[i].start
cell3.innerHTML = g_mr_json_rels.relations[i].end;
};
}

// function to handle the search filter
function myFunctionR() {
var input, filter, table, tr, td, i, txtValue;

input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}

}
}
</script>
</div>

<div id="Connections" class="tabcontent">
<h2>Architecture Connections</h2>

<input type="text" id="myInputC" onkeyup="myFunctionC()" placeholder="Search for names.." title="Type in a name">

<table id="myTableC">
<tr class="header">
<th style="width:5%;">count</th>
<th style="width:35%;">id</th>
<th style="width:30%;">start</th>
<th style="width:30%;">end</th>
</tr>
</table>
<script>
function setupCons() {

const tbodyC = document.getElementById('myTableC').getElementsByTagName('tbody')[0];

for (let i = 0; i<g_mr_json_cons.connections.length; i++) {
let row = tbodyC.insertRow();

let cell0 = row.insertCell(0);
let cell1 = row.insertCell(1);
let cell2 = row.insertCell(2);
let cell3 = row.insertCell(3);

cell0.innerHTML = i+1
cell1.innerHTML = g_mr_json_cons.connections[i].id;
cell2.innerHTML = g_mr_json_cons.connections[i].start
cell3.innerHTML = g_mr_json_cons.connections[i].end;
};
}
// function to handle the search filter
function myFunctionC() {
var input, filter, table, tr, td, i, txtValue;

input = document.getElementById("myInputC");
filter = input.value.toUpperCase();
table = document.getElementById("myTableC");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}

}
}
</script>
</div>

<div id="Diagrams" class="tabcontent">
<h3>Diagrams</h3>
<p> A list of diagrams or some sorting could be here.</p>
Expand Down

0 comments on commit a2cff65

Please sign in to comment.