Skip to content

Commit 3584123

Browse files
author
Yevhen Zavhorodnii
committed
Use less vanilla JS and more jQuery
1 parent 328d7a3 commit 3584123

File tree

2 files changed

+136
-135
lines changed

2 files changed

+136
-135
lines changed

‎server/static/edit-model.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
</div>
2323

2424
<div class="buttons-container">
25-
<button onclick="restoreChanges()">Restore Changes</button>
26-
<button onclick="exportDiagram()">Export</button>
25+
<button id="btnRestoreChanges">Restore Changes</button>
26+
<button id="btnExportDiagram">Export</button>
2727
</div>
2828

2929
<div class="diagram-container">

‎server/static/js/edit-model.js

Lines changed: 134 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -3,151 +3,152 @@ var myDiagram;
33
var currentFile;
44
var diagramYaml;
55

6-
document.getElementById('fileInput').addEventListener('change', function(event) {
7-
const file = event.target.files[0];
8-
if (file) {
9-
const reader = new FileReader();
10-
reader.onload = function(e) {
11-
try {
12-
currentFile = e.target.result;
13-
14-
const yamlData = jsyaml.load(e.target.result);
15-
console.log(yamlData);
16-
updateDiagramModel(yamlData, document.getElementById('showDataAssetsCheckBox').checked);
17-
} catch (error) {
18-
console.error('Error parsing YAML:', error);
19-
alert('Failed to parse YAML file.');
20-
}
21-
};
22-
reader.readAsText(file);
23-
}
24-
});
6+
$(document).ready(function() {
7+
myDiagram = new go.Diagram('myDiagramDiv');
8+
myDiagram.layout = new go.LayeredDigraphLayout({
9+
layerSpacing: 50,
10+
setsPortSpots: false
11+
});
12+
13+
myDiagram.nodeTemplate = new go.Node('Auto', {
14+
click: nodeClicked,
15+
})
16+
.add(
17+
new go.Shape({ name: 'SHAPE', figure: 'RoundedRectangle', fill: 'lightgray' }).bind('fill', 'color')
18+
)
19+
.add(
20+
new go.TextBlock({ margin: 2, textAlign: 'center' }).bind('text', 'caption')
21+
);
22+
23+
24+
$('#fileInput').on('change', function(event) {
25+
const file = event.target.files[0];
26+
if (file) {
27+
const reader = new FileReader();
28+
reader.onload = function(e) {
29+
try {
30+
currentFile = e.target.result;
31+
32+
const yamlData = jsyaml.load(e.target.result);
33+
console.log(yamlData);
34+
35+
const showDataAssets = $('#showDataAssetsCheckBox').is(':checked');
36+
updateDiagramModel(yamlData, showDataAssets);
37+
} catch (error) {
38+
console.error('Error parsing YAML:', error);
39+
alert('Failed to parse YAML file.');
40+
}
41+
};
42+
reader.readAsText(file);
43+
}
44+
});
2545

26-
document.getElementById('showDataAssetsCheckBox').addEventListener('change', function(event) {
27-
restoreChanges();
28-
});
46+
$('#showDataAssetsCheckBox').on('change', function() {
47+
restoreChanges();
48+
});
2949

30-
function nodeClicked(e, obj) {
31-
var evt = e.copy();
32-
var node = obj.part;
33-
var type = evt.clickCount === 2 ? 'Double-Clicked: ' : 'Clicked: ';
34-
console.log(type + 'on ' + node);
35-
if (evt.clickCount === 2) {
36-
var editorSchema = node.data.type === 'data_asset' ?
37-
schema.properties.data_assets.additionalProperties.properties :
38-
schema.properties.technical_assets.additionalProperties.properties;
39-
openPropertyEditor(node.data.threagile_model, 'itemPropertyEditor', editorSchema);
40-
}
41-
}
42-
43-
function init() {
44-
myDiagram = new go.Diagram('myDiagramDiv');
45-
myDiagram.layout = new go.LayeredDigraphLayout({
46-
layerSpacing: 50,
47-
setsPortSpots: false
48-
});
49-
50-
myDiagram.nodeTemplate = new go.Node('Auto', {
51-
click: nodeClicked,
52-
})
53-
.add(
54-
new go.Shape({ name: 'SHAPE', figure: 'RoundedRectangle', fill: 'lightgray' }).bind('fill', 'color')
55-
)
56-
.add(
57-
new go.TextBlock({ margin: 2, textAlign: 'center' }).bind('text', 'caption')
58-
);
59-
}
60-
61-
function updateDiagramModel(yamlData, showDataAssets) {
62-
diagramYaml = yamlData;
63-
64-
let nodeDataArray = [];
65-
if (showDataAssets) {
66-
for (const daKey in yamlData.data_assets) {
67-
if (yamlData.data_assets.hasOwnProperty(daKey)) {
68-
const data_asset = yamlData.data_assets[daKey];
69-
console.log(`${daKey}: ${data_asset}`);
70-
nodeDataArray.push({ key: data_asset.id, threagile_model: data_asset, type: 'data_asset', caption: daKey, color: 'lightgreen' });
71-
}
50+
$('#btnRestoreChanges').on('click', function() {
51+
if (currentFile) {
52+
const yamlData = jsyaml.load(currentFile);
53+
console.log(yamlData);
54+
updateDiagramModel(yamlData, $('#showDataAssetsCheckBox').is(':checked'));
55+
}
56+
});
57+
58+
$('#btnExportDiagram').on('click', function() {
59+
try {
60+
const yamlData = jsyaml.dump(diagramYaml);
61+
const blob = new Blob([yamlData], { type: 'text/yaml' });
62+
const downloadLink = document.createElement('a');
63+
downloadLink.href = URL.createObjectURL(blob);
64+
downloadLink.download = 'diagram.yaml'; // Default file name
65+
downloadLink.click();
66+
URL.revokeObjectURL(downloadLink.href);
67+
} catch (e) {
68+
alert('Failed to export diagram.');
69+
console.error("Error exporting diagram:", e);
70+
}
71+
});
72+
73+
function nodeClicked(e, obj) {
74+
var evt = e.copy();
75+
var node = obj.part;
76+
var type = evt.clickCount === 2 ? 'Double-Clicked: ' : 'Clicked: ';
77+
console.log(type + 'on ' + node);
78+
if (evt.clickCount === 2) {
79+
var editorSchema = node.data.type === 'data_asset' ?
80+
schema.properties.data_assets.additionalProperties.properties :
81+
schema.properties.technical_assets.additionalProperties.properties;
82+
openPropertyEditor(node.data.threagile_model, 'itemPropertyEditor', editorSchema);
7283
}
7384
}
7485

75-
let nodesLinks = [];
76-
for (const taKey in yamlData.technical_assets) {
77-
if (yamlData.technical_assets.hasOwnProperty(taKey)) {
78-
const technical_asset = yamlData.technical_assets[taKey];
79-
console.log(`${taKey}: ${technical_asset}`);
80-
nodeDataArray.push({ key: technical_asset.id, threagile_model: technical_asset, type: 'technical_asset', caption: taKey, color: 'lightblue' });
81-
82-
if (technical_asset.communication_links) {
83-
for (const clKey in technical_asset.communication_links) {
84-
const communicationLink = technical_asset.communication_links[clKey];
85-
console.log(`${clKey}: ${communicationLink}`);
86-
nodesLinks.push({ from: technical_asset.id, to: communicationLink.target });
87-
88-
if (showDataAssets && communicationLink.data_assets_sent) {
89-
communicationLink.data_assets_sent.forEach((dataAsset) => {
90-
nodesLinks.push({ from: technical_asset.id, to: dataAsset });
91-
nodesLinks.push({ from: communicationLink.target, to: dataAsset });
92-
})
93-
}
86+
function updateDiagramModel(yamlData, showDataAssets) {
87+
diagramYaml = yamlData;
9488

95-
if (showDataAssets && communicationLink.data_assets_received) {
96-
communicationLink.data_assets_received.forEach((dataAsset) => {
97-
nodesLinks.push({ from: technical_asset.id, to: dataAsset });
98-
nodesLinks.push({ from: communicationLink.target, to: dataAsset });
99-
})
100-
}
89+
let nodeDataArray = [];
90+
if (showDataAssets) {
91+
for (const daKey in yamlData.data_assets) {
92+
if (yamlData.data_assets.hasOwnProperty(daKey)) {
93+
const data_asset = yamlData.data_assets[daKey];
94+
console.log(`${daKey}: ${data_asset}`);
95+
nodeDataArray.push({ key: data_asset.id, threagile_model: data_asset, type: 'data_asset', caption: daKey, color: 'lightgreen' });
10196
}
10297
}
98+
}
10399

104-
if (showDataAssets && technical_asset.data_assets_processed) {
105-
technical_asset.data_assets_processed.forEach((dataAsset) => {
106-
nodesLinks.push({ from: technical_asset.id, to: dataAsset });
107-
});
108-
}
100+
let nodesLinks = [];
101+
for (const taKey in yamlData.technical_assets) {
102+
if (yamlData.technical_assets.hasOwnProperty(taKey)) {
103+
const technical_asset = yamlData.technical_assets[taKey];
104+
console.log(`${taKey}: ${technical_asset}`);
105+
nodeDataArray.push({ key: technical_asset.id, threagile_model: technical_asset, type: 'technical_asset', caption: taKey, color: 'lightblue' });
106+
107+
if (technical_asset.communication_links) {
108+
for (const clKey in technical_asset.communication_links) {
109+
const communicationLink = technical_asset.communication_links[clKey];
110+
console.log(`${clKey}: ${communicationLink}`);
111+
nodesLinks.push({ from: technical_asset.id, to: communicationLink.target });
112+
113+
if (showDataAssets && communicationLink.data_assets_sent) {
114+
communicationLink.data_assets_sent.forEach((dataAsset) => {
115+
nodesLinks.push({ from: technical_asset.id, to: dataAsset });
116+
nodesLinks.push({ from: communicationLink.target, to: dataAsset });
117+
})
118+
}
119+
120+
if (showDataAssets && communicationLink.data_assets_received) {
121+
communicationLink.data_assets_received.forEach((dataAsset) => {
122+
nodesLinks.push({ from: technical_asset.id, to: dataAsset });
123+
nodesLinks.push({ from: communicationLink.target, to: dataAsset });
124+
})
125+
}
126+
}
127+
}
109128

110-
if (showDataAssets && technical_asset.data_assets_stored) {
111-
technical_asset.data_assets_stored.forEach((dataAsset) => {
112-
nodesLinks.push({ from: technical_asset.id, to: dataAsset });
113-
});
129+
if (showDataAssets && technical_asset.data_assets_processed) {
130+
technical_asset.data_assets_processed.forEach((dataAsset) => {
131+
nodesLinks.push({ from: technical_asset.id, to: dataAsset });
132+
});
133+
}
134+
135+
if (showDataAssets && technical_asset.data_assets_stored) {
136+
technical_asset.data_assets_stored.forEach((dataAsset) => {
137+
nodesLinks.push({ from: technical_asset.id, to: dataAsset });
138+
});
139+
}
114140
}
115141
}
116-
}
117-
118-
myDiagram.model = new go.GraphLinksModel(nodeDataArray, nodesLinks);
119-
openPropertyEditor(yamlData, 'projectInfo', schema.properties);
120-
}
121142

122-
function restoreChanges() {
123-
if (currentFile) {
124-
const yamlData = jsyaml.load(currentFile);
125-
console.log(yamlData);
126-
updateDiagramModel(yamlData, document.getElementById('showDataAssetsCheckBox').checked);
127-
}
128-
}
129-
130-
function exportDiagram() {
131-
try {
132-
const yamlData = jsyaml.dump(diagramYaml);
133-
const blob = new Blob([yamlData], { type: 'text/yaml' });
134-
const downloadLink = document.createElement('a');
135-
downloadLink.href = URL.createObjectURL(blob);
136-
downloadLink.download = 'diagram.yaml'; // Default file name
137-
downloadLink.click();
138-
URL.revokeObjectURL(downloadLink.href);
139-
} catch (e) {
140-
alert('Failed to export diagram.');
141-
console.error("Error exporting diagram:", e);
143+
myDiagram.model = new go.GraphLinksModel(nodeDataArray, nodesLinks);
144+
openPropertyEditor(yamlData, 'projectInfo', schema.properties);
142145
}
143-
}
144146

145-
function openPropertyEditor(nodeData, id, schema) {
146-
const classEditor = new EditorGenerator(nodeData, schema, id);
147-
// TODO: do not hard code hidden properties
148-
classEditor.generateEditor(['communication_links', 'data_assets_processed', 'data_assets_stored',
149-
'data_assets_sent', 'data_assets_received', 'data_assets', 'technical_assets',
150-
'trust_boundaries', 'shared_runtimes', 'individual_risk_categories']);
151-
}
152-
153-
window.addEventListener('DOMContentLoaded', init);
147+
function openPropertyEditor(nodeData, id, schema) {
148+
const classEditor = new EditorGenerator(nodeData, schema, id);
149+
// TODO: do not hard code hidden properties
150+
classEditor.generateEditor(['communication_links', 'data_assets_processed', 'data_assets_stored',
151+
'data_assets_sent', 'data_assets_received', 'data_assets', 'technical_assets',
152+
'trust_boundaries', 'shared_runtimes', 'individual_risk_categories']);
153+
}
154+
});

0 commit comments

Comments
 (0)