· 6 years ago · Jul 09, 2019, 09:42 AM
1import $ from 'jquery';
2
3import {
4 debounce, values
5} from 'min-dash';
6
7//import minimapModule from 'diagram-js-minimap';
8
9
10import diagramXML from '../resources/CreateDiagram.bpmn';
11import CustomModeler from './custom-modeler';
12
13import propertiesPanelModule from 'bpmn-js-properties-panel';
14import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
15import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda';
16import BpmnModdle from 'bpmn-moddle';
17import Tabulator from 'tabulator-tables';
18import apiCall from './apiCall';
19import BpmnJS from 'bpmn-js'
20import download from './download';
21import { ELOOP } from 'constants';
22import { resolve } from 'dns';
23
24
25var tabOverlays = [];
26var test = ''
27
28
29var canvas = $('#js-canvas');
30
31var bpmnModeler = new CustomModeler({
32 container: canvas,
33 propertiesPanel: {
34 parent: '#js-properties-panel'
35 },
36 additionalModules: [
37 //minimapModule,
38 propertiesPanelModule,
39 propertiesProviderModule
40 ],
41 keyboard: {
42 bindTo: document
43 },
44 //plugin -> se renseigner
45 moddleExtensions: {
46 camunda: camundaModdleDescriptor
47 }
48});
49
50
51function createNewDiagram(title) {
52 openDiagram(diagramXML);
53 localStorage.model_saved = "";
54 setidBPMN(title);
55}
56
57function openDiagram(xml) {
58 bpmnModeler.importXML(xml, function (err) {
59 /*
60 if (err) {
61 } else {
62 //bpmnModeler.get('minimap').open();
63 }
64 */
65 });
66}
67function loadHistoric() {
68 if (localStorage.getItem("model_saved")) {
69 var history_model_saved;
70 history_model_saved = JSON.parse(localStorage.getItem("model_saved"));
71 while (document.getElementById("camunda-historic-select").firstChild) {
72 document.getElementById("camunda-historic-select").removeChild(document.getElementById("camunda-historic-select").firstChild);
73 }
74 history_model_saved.forEach(function (element, key) {
75 var date_option = document.createElement("OPTION");
76 date_option.text = element[0];
77 date_option.value = key;
78 document.getElementById("camunda-historic-select").appendChild(date_option);
79 });
80
81 //console.log(document.getElementById("camunda-historic-select").value);
82 } else {
83 //console.log("NON");
84 }
85}
86
87// Est appellée pour chaque BusinessRuleTask cliquée / créée
88function saveDocumentation(e, tabulator_tables, json_tabulator_tables, elementRegistry, moddle, saved_successfully, data_tag_value, data_tag_element) {
89 var tmpElement = e.element;
90
91 // If clicked element is typeof business rule task
92 if (tmpElement.type.split(":")[1] == 'BusinessRuleTask' && tabulator_tables && $("[data-container-id=" + e.element.id + "]").length == 1) {
93 var current_table = tabulator_tables["tabulator_" + tmpElement.id];
94 if (current_table !== undefined) {
95 ({ data_tag_value, data_tag_element } = writeDecisionTablesData(data_tag_value, data_tag_element, current_table));
96
97 // JSON Format and save datas of clicked business task element
98 json_tabulator_tables["tabulator_" + tmpElement.id] = {
99 "data": current_table.getData(),
100 "columns": current_table.getColumnDefinitions(),
101 "data_tag_value": data_tag_value,
102 "data_tag_element": data_tag_element,
103
104 }
105 /*
106 Permet l'écriture et la lecture de la documentation d'un element
107 */
108 var clickedBusinessRuleTask = elementRegistry.get(tmpElement.id);
109 var new_documentation_value = moddle.create('bpmn:Documentation', {
110 "text": JSON.stringify(json_tabulator_tables["tabulator_" + tmpElement.id])
111 });
112
113 // Write the new documentation into the clicked element
114 clickedBusinessRuleTask.businessObject.documentation[0] = new_documentation_value;
115 if (saved_successfully == 0) {
116 alert('Decision table: ' + tmpElement.id + ' saved successfully.');
117 saved_successfully++;
118 }
119 }
120 } else {
121 console.log("erreur lors de la sauvegarde");
122 }
123}
124
125function writeDecisionTablesData(data_tag_value, data_tag_element, current_table) {
126 data_tag_value = [];
127 data_tag_element = [];
128 var row_key = 0;
129 current_table.getRows().forEach(function (element) {
130 let row = [];
131 for (var i = 0; i < element.getCells().length - 2; i++) {
132 row.push({
133 value: element.getCells()[i].getValue(),
134 column: element.getCells()[i].getColumn().getDefinition().title
135 });
136 }
137 data_tag_value.push(row);
138 data_tag_element.push({
139 value: element.getCells()[element.getCells().length - 2].getValue(),
140 column: element.getCells()[element.getCells().length - 2].getColumn().getDefinition().title
141 });
142 row_key++;
143 });
144 return { data_tag_value, data_tag_element };
145}
146
147function importDiagramme(callback) {
148 function onChange(event) {
149 var file = event.target.files[0];
150 var reader = new FileReader();
151 reader.onload = function (event) {
152 var xml = event.target.result;
153 callback(xml);
154 localStorage.setItem("dataSave", xml);
155
156 };
157 reader.readAsText(file);
158 }
159 var el = document.getElementById("button-import");
160 el.addEventListener("change", onChange, false);
161}
162
163// Callback from a <input type="file" onchange="onChange(event)">
164
165function saveDiagram(done) {
166
167 bpmnModeler.saveXML({ format: true }, function (err, xml) {
168 var parser = new DOMParser();
169 var xmlDoc = parser.parseFromString(xml, "text/xml");
170 xmlDoc.getElementsByTagName("bpmndi:BPMNPlane")[0].setAttribute('bpmnElement', test);
171 xmlDoc.getElementsByTagName("bpmn2:process")[0].setAttribute('id', test)
172 xmlDoc.getElementsByTagName("bpmn2:process")[0].setAttribute('name', test)
173 xml = new XMLSerializer().serializeToString(xmlDoc);
174 done(err, xml);
175 });
176 loadHistoric();
177}
178function createHTMLoverlay(width, height, color, cursor) {
179 return '<div style="background :' + color + ';width:' + width + 'px;height:' + height + 'px;text-align:center;border-radius: 10px;opacity: 0.4; cursor : ' + cursor + '" "></div>';
180
181}
182function enhanceDiagram(runIDp) {
183 var dataSaved = localStorage.dataSave;
184 deleteOverlays()
185 // console.log("TOTO :" + dataSaved)
186 var moddle = new BpmnModdle();
187 var elements = []
188 var elementName = []
189 moddle.fromXML(dataSaved, function (err, definitions) {
190 getElementsBPMN(definitions, elements);
191 var tabKeyword = []
192 var data = { runID: runIDp, nommodel: getIdBPMN() }
193 $.ajax({
194 url: 'https://sobpmnapi.eu-gb.mybluemix.net/getAllkeyword',
195 type: 'POST',
196 data: JSON.stringify(data),
197 dataType: "json", // tell jQuery not to process the data
198 contentType: "application/json", // tell jQuery not to set contentType
199 success: function (res) {
200
201 setOverlays(elements, res, tabKeyword);
202 }
203 })
204 })
205}
206
207function setOverlays(elements, res, tabKeyword) {
208 var overlays = bpmnModeler.get('overlays');
209 var keyword = setKeyword(elements, res, tabKeyword);
210 for (let i = 0; i < elements.length; i++) {
211 for (let j = 0; j < tabKeyword.length; j++) {
212 if (elements[i].name == tabKeyword[j].name) {
213 let message = '';
214 switch (tabKeyword[j].generalStatus) {
215 case 'vert':
216 var overlayText = createHTMLoverlay(elements[i].width, elements[i].height, 'green', 'default');
217 break;
218 case 'orange':
219 var overlayText = $(createHTMLoverlay(elements[i].width, elements[i].height, 'orange', 'pointer'));
220 let keywordPass = 0;
221 for (let x = 0; x < tabKeyword[j].ucs.length; x++) {
222 if (tabKeyword[j].ucs[x].status == 'PASS') {
223 keywordPass++;
224 }
225 else {
226 message += tabKeyword[j].ucs[x].name + ' : ' + tabKeyword[j].ucs[x].message + '\n';
227 }
228 }
229 overlayText.click(function (e) {
230 let log = confirm(message + "\n cliquez sur Ok pour voir les logs :");
231 if (log == true) {
232 document.location.href = "http://localhost:9013/logsRF/log.html";
233 }
234 });
235 var idOverlay = overlays.add(elements[i].id, {
236 html: '<div style="width:' + 70 + 'px;height:' + 50 + 'px;text-align:center;" "> ' + keywordPass + '/' + keyword.ucs.length + ' UC OK </div>',
237 position: {
238 bottom: elements[i].height + 20,
239 left: 20
240 }
241 });
242 tabOverlays.push(idOverlay);
243 break;
244 case 'rouge':
245 for (let x = 0; x < tabKeyword[j].ucs.length; x++) {
246 message += tabKeyword[j].ucs[x].name + ' : ' + tabKeyword[j].ucs[x].message + '\n';
247 }
248 var overlayText = $(createHTMLoverlay(elements[i].width, elements[i].height, 'red', 'pointer'));
249 overlayText.click(function (e) {
250 let log = confirm(message + "\n cliquez sur Ok pour voir les logs :");
251 if (log == true) {
252 document.location.href = "http://localhost:9013/logsRF/log.html";
253 }
254 });
255 break;
256 }
257 try {
258 var idOverlay = overlays.add(elements[i].id, {
259 html: overlayText,
260 position: {
261 top: 0,
262 left: 0
263 }
264 });
265 tabOverlays.push(idOverlay);
266 }
267 catch (err) {
268 document.location.reload(true);
269 }
270 }
271 }
272 }
273}
274
275function setKeyword(elements, res, tabKeyword) {
276 for (let k = 0; k < elements.length; k++) {
277 var keyword = new Object();
278 keyword.name = elements[k].name;
279 keyword.ucs = [];
280 for (let j = 0; j < res.length; j++) {
281 if (res[j].keyword == elements[k].name) {
282 var uc = new Object();
283 uc.name = res[j].nomScenario.substring(res[j].nomScenario.length - 4, res[j].nomScenario.length);
284 uc.status = res[j].status;
285 uc.message = res[j].message;
286 keyword.ucs.push(uc);
287 }
288 }
289 let { keywordPass, keywordFail } = getResKeyword(keyword);
290 setKeywordColor(keywordPass, keywordFail, keyword, tabKeyword);
291 }
292 return keyword;
293}
294
295function setKeywordColor(keywordPass, keywordFail, keyword, tabKeyword) {
296 if (keywordPass > 0) {
297 if (keywordFail > 0) {
298 keyword.generalStatus = 'orange';
299 }
300 else {
301 keyword.generalStatus = 'vert';
302 }
303 }
304 else {
305 keyword.generalStatus = 'rouge';
306 }
307 tabKeyword.push(keyword);
308}
309
310function getResKeyword(keyword) {
311 let keywordPass = 0;
312 let keywordFail = 0;
313 for (let l = 0; l < keyword.ucs.length; l++) {
314 if (keyword.ucs[l].status == 'PASS') {
315 keywordPass++;
316 }
317 else {
318 keywordFail++;
319 }
320 }
321 return { keywordPass, keywordFail };
322}
323
324function getElementsBPMN(definitions, elements) {
325 for (var i = 0; i < definitions.rootElements[0].flowElements.length; i++) {
326 if (definitions.rootElements[0].flowElements[i]['name'] != undefined) {
327 let elementBPMN = new Object();
328 switch (definitions.rootElements[0].flowElements[i].$type) {
329 case 'bpmn:Task':
330 elementBPMN.type = definitions.rootElements[0].flowElements[i].$type;
331 elementBPMN.width = 100;
332 elementBPMN.height = 80;
333 break;
334 case 'bpmn:StartEvent':
335 elementBPMN.type = definitions.rootElements[0].flowElements[i].$type;
336 elementBPMN.width = 36;
337 elementBPMN.height = 36;
338 break;
339 case 'bpmn:EndEvent':
340 elementBPMN.type = definitions.rootElements[0].flowElements[i].$type;
341 elementBPMN.width = 36;
342 elementBPMN.height = 36;
343 break;
344 case 'bpmn:ExclusiveGateway':
345 elementBPMN.type = definitions.rootElements[0].flowElements[i].$type;
346 elementBPMN.width = 50;
347 elementBPMN.height = 50;
348 break;
349 case 'bpmn:ParallelGateway':
350 elementBPMN.type = definitions.rootElements[0].flowElements[i].$type;
351 elementBPMN.width = 50;
352 elementBPMN.height = 50;
353 break;
354 case 'bpmn:ExclusiveGateway':
355 elementBPMN.type = definitions.rootElements[0].flowElements[i].$type;
356 elementBPMN.width = 50;
357 elementBPMN.height = 50;
358 break;
359 case 'bpmn:ServiceTask':
360 elementBPMN.type = definitions.rootElements[0].flowElements[i].$type;
361 elementBPMN.width = 100;
362 elementBPMN.height = 80;
363 break;
364 case 'bpmn:ComplexGateway':
365 elementBPMN.type = definitions.rootElements[0].flowElements[i].$type;
366 elementBPMN.width = 50;
367 elementBPMN.height = 50;
368 break;
369 }
370 elementBPMN.name = definitions.rootElements[0].flowElements[i]['name'];
371 elementBPMN.id = definitions.rootElements[0].flowElements[i]['id'];
372 elements.push(elementBPMN);
373 }
374 }
375}
376
377/*
378 Create adding buttons for decision table rows and columns
379 Doesn't take any parameters
380*/
381function createAddingButtons() {
382
383 // Create adding input button
384 var add_input = document.createElement('BUTTON');
385 add_input.setAttribute('id', 'add_input_tabulator');
386 add_input.innerHTML = 'Add input';
387
388 // Create delete input button
389 var delete_input = document.createElement('BUTTON');
390 delete_input.setAttribute('id', 'delete_input_tabulator');
391 delete_input.innerHTML = 'delete input';
392
393 // Create adding row button
394 var add_row = document.createElement('BUTTON');
395 add_row.setAttribute('id', 'add_row_tabulator');
396 add_row.innerHTML = 'Add row';
397
398 // Adding buttons to the DOM
399 $("#dialog").prepend(add_input);
400 $("#dialog").prepend(add_row);
401 $("#dialog").prepend(delete_input);
402}
403
404function getIdBPMN() {
405 if (localStorage.dataSave) {
406 var parser = new DOMParser();
407 var xmlDoc = parser.parseFromString(localStorage.dataSave, "text/xml");
408 return (xmlDoc.getElementsByTagName("bpmn2:process")[0].getAttribute('id'))
409 } else {
410 createNewDiagram(test)
411 console.log('pas localStorage')
412 return 'No name'
413 }
414}
415
416function setidBPMN(idBPMN) {
417 test = idBPMN
418 if (localStorage.dataSave) {
419 var parser = new DOMParser();
420 var xmlDoc = parser.parseFromString(localStorage.dataSave, "text/xml");
421 xmlDoc.getElementsByTagName("bpmndi:BPMNPlane")[0].setAttribute('bpmnElement', idBPMN);
422 console.log(xmlDoc.getElementsByTagName("bpmndi:BPMNPlane")[0].getAttribute("bpmnElement"));
423 xmlDoc.getElementsByTagName("bpmn2:process")[0].setAttribute('id', idBPMN)
424 xmlDoc.getElementsByTagName("bpmn2:process")[0].setAttribute('name', idBPMN)
425
426 localStorage.dataSave = new XMLSerializer().serializeToString(xmlDoc);
427 }
428
429
430}
431
432function getTests() {
433 var nameBPMN = { nommodel: getIdBPMN() }
434 console.log(nameBPMN);
435 $.ajax({
436 url: 'https://sobpmnapi.eu-gb.mybluemix.net/run/getRunID', // La ressource ciblée
437 type: 'POST', // Le type de la requête HTTP.
438 data: JSON.stringify(nameBPMN),
439 dataType: "json", // tell jQuery not to process the data
440 contentType: "application/json", // tell jQuery not to set contentType
441 success: function (res) {
442 var chooseRunId = 'Exécution de tests : <select id="runIDselect"style="width: 45px;"><option value="-1">N/A</option>';
443 var test = true;
444 var i = 0;
445 while (test) {
446 if (res['runID' + i]) {
447 chooseRunId += '<option value="' + res['runID' + i] + '">' + res['runID' + i] + '</option>'
448 i++;
449 } else {
450 test = false;
451 }
452 }
453 chooseRunId += '</select>'
454 //console.log(chooseRunId);
455 document.getElementById("runIDselect").innerHTML = chooseRunId;
456 },
457 error: function (resultat, statut, erreur) {
458 }
459
460 });
461}
462
463function deleteOverlays() {
464 if (tabOverlays.length > 0) {
465 var overlays = bpmnModeler.get('overlays');
466 for (let i = 0; i < tabOverlays.length; i++) {
467 overlays.remove(tabOverlays[i]);
468 }
469 tabOverlays = [];
470 }
471}
472
473function obtenirParametre(sVar) {
474 return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
475}
476
477function openBPMNShare(idp) {
478 return new Promise(function (resolve, reject) {
479 var id = { id: idp }
480 //console.log(id);
481 $.ajax({
482 // url: 'http://localhost:8080/getBPMN/', // La ressource ciblée
483 url: 'https://b2u-test-back.eu-gb.mybluemix.net/getBPMN/',
484 type: 'POST', // Le type de la requête HTTP.
485 headers: {
486 "Authorization": "Basic " + btoa('test' + ":" + 'azertyuiop')
487 },
488 data: JSON.stringify(id),
489 dataType: "json", // tell jQuery not to process the data
490 contentType: "application/json", // tell jQuery not to set contentType
491 success: function (res) {
492 console.log(res)
493 //console.log(res)
494 let xml = atob(res[0].BPMNx64)
495 console.log(xml)
496 openDiagram(xml)
497 setidBPMN(res[0].nameBPMN)
498 resolve('ok')
499 },
500 error: function (resultat, statut, erreur) {
501 createNewDiagram(' ');
502 resolve('ok')
503 }
504 })
505 })
506}
507
508/*
509 Add the decision table to the dialog box
510 Called when a new decision table is created
511*/
512function decision_table_div_created_promise(divDataTabulator, tabulator_tables, current_table, task_name, data_tag_value, data_tag_element) {
513 return new Promise(function (resolve, reject) {
514 var title_task_name = document.createAttribute("title");
515 title_task_name.value = task_name;
516 document.getElementById("dialog").setAttributeNode(title_task_name);
517 $("#dialog").prepend(divDataTabulator);
518 resolve(tabulator_tables, current_table, data_tag_value, data_tag_element);
519 });
520}
521
522/*
523 Create the decision table
524 Is called when changed event on element is catch
525 Taken parameters: All needed variables to create the decision table and emit modified variables to parent
526 Called on Listener: changedTypeEvent
527*/
528function createDataTabulator(task_id, tabulator_tables, going_tasks, json_tabulator_tables, e, nb_added_row, elementRegistry, moddle, saved_DecisionsTable, data_tag_value, data_tag_element) {
529 var task_selector = task_id;
530
531 if ($("#tabulator_" + task_selector.id).length == 0) {
532 var divDataTabulator = document.createElement("div");
533
534 divDataTabulator.setAttribute("id", "tabulator_" + task_selector.id);
535 decision_table_div_created_promise(divDataTabulator, tabulator_tables, "", task_selector.businessObject.name, data_tag_value, data_tag_element).then(function (tabulator_tables, data_tag_value, data_tag_element) {
536 var tabledata = [
537 { output1: "Task" },
538 ];
539 var myTasks = going_tasks;
540
541 var table = new Tabulator("#tabulator_" + task_selector.id, {
542 resizableRows:true,
543 height: 190, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
544 data: tabledata, //assign data to table
545 layout: "fitColumns", //fit columns to width of table (optional)
546 columns: [ //Define Table Columns
547 {
548 title: "Input", field: "input_field",
549 columns: [ //Define Table Columns
550 {
551 title: "Input",
552 field: "input1",
553 editor: "input",
554 editableTitle: true
555 }
556 ]
557 },
558 {
559 title: "Output", field: "output", editor: "select",
560 columns: [ //Define Table Columns
561 {
562 title: "Tasks",
563 field: "output1",
564 editor: "select",
565 editorParams: myTasks,
566 editableTitle: true
567 },
568 {
569 formatter: "buttonCross",
570 width: 40, align: "center",
571 cellClick: function (e, cell) {
572 cell.getRow().delete();
573 }
574 }
575 ],
576 editorParams: myTasks
577 }
578 ]
579 });
580
581 // Saves new table onto tables storage (used on documentation save)
582 tabulator_tables["tabulator_" + task_selector.id] = table;
583 saveDocumentation(e, tabulator_tables, json_tabulator_tables, elementRegistry, moddle, data_tag_value, data_tag_element);
584
585 var current_table = tabulator_tables["tabulator_" + task_selector.id];
586
587 // Event listener to the add input button for the tabulator
588 $("#add_input_tabulator").click(function () {
589
590 var last_added_input = table.getColumnDefinitions().length - 1;
591 // Create the new column with a dynamic field name depending on number added input
592 current_table.addColumn(
593 {
594 title: "Input",
595 field: "added_input" + last_added_input,
596 editor: "input",
597 editableTitle: true
598 },
599 true,
600 "input1",
601 )
602 });
603
604 // Event listener (click) on add row button
605 $("#add_row_tabulator").click(function () {
606 nb_added_row++;
607 // Add the new row
608 current_table.addRow({
609 field: "added_row" + nb_added_row,
610 output1: "Task"
611 }, true, nb_added_row);
612
613 });
614
615 // Event listener to the delete input button for the tabulator
616 $("#delete_input_tabulator").click(function () {
617 var last_index_input = table.getColumnDefinitions().length - 2;
618
619 // Delete the last column with a dynamic field name depending on number added input
620 current_table.deleteColumn("added_input" + last_index_input);
621 });
622 saved_DecisionsTable[task_selector.id] = 0;
623 });
624 } else {
625 console.log("decision table déjà existante");
626 }
627}
628
629function buttonsClicked(current_table, nb_added_row, e, tabulator_tables, json_tabulator_tables, elementRegistry, moddle, saved_DecisionsTable, data_tag_value, data_tag_element) {
630 // Event listener to the add input button for the tabulator
631 $("#add_input_tabulator").click(function () {
632 var last_added_input = current_table.getColumnDefinitions().length - 1;
633 // Create the new column with a dynamic field name depending on number added input
634 current_table.addColumn(
635 {
636 title: "Input",
637 field: "added_input" + last_added_input,
638 editor: "input",
639 editableTitle: true
640 },
641 true,
642 "input1",
643 )
644 });
645
646 // Event listener (click) on add row button
647 $("#add_row_tabulator").click(function () {
648
649 nb_added_row++;
650 // Add the new row
651 current_table.addRow({
652 field: "added_row" + nb_added_row,
653 output1: "Task"
654 }, true, nb_added_row);
655
656 });
657
658
659 // Event listener to the delete input button for the tabulator
660 $("#delete_input_tabulator").click(function () {
661 var last_index_input = current_table.getColumnDefinitions().length - 2;
662 // Delete the last column with a dynamic field name depending on number added input
663 current_table.deleteColumn("added_input" + last_index_input);
664 });
665
666 // Save documentation when "save decision table" button is clicked
667 $("#save_decision_tables").click(function () {
668 saveDocumentation(e, tabulator_tables, json_tabulator_tables, elementRegistry, moddle, data_tag_value, data_tag_element);
669 if (saved_DecisionsTable[e.element.id] == 0) {
670 alert("Decision table: " + e.element.id + " saved successfully");
671 saved_DecisionsTable[e.element.id] = 1;
672 }
673 });
674}
675
676// bootstrap diagram functions
677$(function () {
678 var tabulator_tables = [];
679 var json_tabulator_tables = [];
680 var data_tag_value = [];
681 var data_tag_element = [];
682 var outgoing_tasks = {};
683 var nb_added_row = 0;
684 var nb_added_input = 0;
685 var saved_DecisionsTable = [];
686 var recenterButton = $('#js-recenter');
687 var importButton = $('#button-import');
688 var downloadLink = $('#js-download-diagram');
689 var convertRobotButton = $('#js-convert-robot');
690 var convertFeatureButton = $('#js-convert-feature');
691 var historic_link = $("#js-load-historic");
692 var selectRunID = $('#runIDselect');
693 var sharebpmn = $('#js-share-diagram');
694 var changeName = $('#js-change-name');
695 var button_diff = $("#js-bpmn-diff");
696 var elementRegistry = bpmnModeler.get('elementRegistry');
697 var moddle = bpmnModeler.get('moddle');
698
699
700 downloadLink.hide();
701 // Creation de la datatable
702
703 if (localStorage.dataSave) {
704
705 }
706 else {
707 localStorage.dataSave = ""
708 localStorage.model_saved = "";
709 };
710 var reload = "";
711 var dataSave = "";
712 var model_saved = "";
713
714 var eventBus = bpmnModeler.get('eventBus');
715
716 var clickEvent = [
717 'element.click'
718 ];
719
720 var changedTypeEvent = [
721 'element.changed'
722 ];
723
724
725
726 changedTypeEvent.forEach(function (event) {
727 eventBus.on(event, function (e) {
728 saved_DecisionsTable[e.element.id] = 0;
729 if (e.element.type.split(":")[1] == 'BusinessRuleTask') {
730 $("[id*=tabulator_]").hide();
731 createDataTabulator(e.element, tabulator_tables, outgoing_tasks, json_tabulator_tables, e, nb_added_row, elementRegistry, moddle, saved_DecisionsTable, data_tag_value, data_tag_element);
732 $("[id*=_tabulator]").remove();
733
734 if(!(tabulator_tables["tabulator_" + e.element.id])) {
735 createAddingButtons();
736 openDialog();
737 document.getElementById("ui-id-1").innerHTML = e.element.businessObject.name;
738 // Save documentation when "save decision table" button is clicked
739
740 $("#save_decision_tables").click(function () {
741 saveDocumentation(e, tabulator_tables, json_tabulator_tables, elementRegistry, moddle, data_tag_value, data_tag_element);
742 if (saved_DecisionsTable[e.element.id] == 0) {
743 alert("Decision table: " + e.element.id + " saved successfully");
744 saved_DecisionsTable[e.element.id] = 1;
745 console.log("oui");
746 }
747 });
748 }
749 }
750 });
751 });
752
753 // Create listeners for each events on the clickEvent
754 clickEvent.forEach(function (event) {
755
756 // On element click
757 eventBus.on(event, function (e) {
758 saved_DecisionsTable[e.element.id] = 0;
759 var tmpElement = e.element;
760 outgoing_tasks = {};
761
762 // If clicked element has outgoing elements
763 if (tmpElement.businessObject.outgoing) {
764
765 // Saving on an object the outgoing elements of clicked element
766 if (tmpElement.businessObject.outgoing[0] != undefined) {
767
768 // If the outgoing element is a gateway element
769 if (tmpElement.businessObject.outgoing[0].targetRef.id.indexOf("Gateway") != -1) {
770
771 // Catching all targetRefs (outgoing tasks)
772 var targetRefs = tmpElement.businessObject.outgoing[0].targetRef.outgoing;
773 if (targetRefs != undefined) {
774
775 // Saving on an array the object outgoing elements
776 targetRefs.forEach(function (element) {
777 outgoing_tasks[element.targetRef.id] = element.targetRef.id;
778 });
779 }
780 }
781 }
782 }
783
784 // If clicked task is typeof BusinessRuleTask
785 if (tmpElement.type.split(":")[1] == 'BusinessRuleTask') {
786 openDialog();
787
788 // Get the documentation of clicked business task element
789 var elementRegistryCheck = elementRegistry.get(tmpElement.id).businessObject.documentation[0];
790
791 // If a documentation exists
792 if (elementRegistryCheck) {
793
794 // If clicked business rule task have not any linked Decision table
795 if ($("#tabulator_" + tmpElement.id).length == 0) {
796
797 // Decision table creation from saved documentation
798 var divDataTabulator = document.createElement("div");
799 divDataTabulator.setAttribute("id", "tabulator_" + tmpElement.id);
800
801 decision_table_div_created_promise(divDataTabulator, tabulator_tables, current_table, tmpElement.businessObject.name, data_tag_value, data_tag_element);
802
803 // Creating the new tabulator using saved data and columns from documentation
804 var table = new Tabulator("#tabulator_" + tmpElement.id,
805 {
806 resizableRows:true,
807 height: 190,
808 data: JSON.parse(elementRegistryCheck.text).data,
809 layout: "fitColumns",
810 columns: JSON.parse(elementRegistryCheck.text).columns
811 });
812 saved_DecisionsTable[tmpElement.id] = 0;
813
814 tabulator_tables["tabulator_" + tmpElement.id] = table;
815 current_table = tabulator_tables["tabulator_" + tmpElement.id];
816 createAddingButtons();
817 buttonsClicked(current_table, nb_added_row, e, tabulator_tables, json_tabulator_tables, elementRegistry, moddle, saved_DecisionsTable, data_tag_value, data_tag_element);
818
819 } else {
820 console.log("la table existe déjà");
821 }
822 document.getElementById("ui-id-1").innerHTML = tmpElement.businessObject.name;
823 }
824
825 if (tabulator_tables) {
826 // Get the tabulator object of clicked business task element
827 var current_table = tabulator_tables["tabulator_" + tmpElement.id];
828
829 if (current_table !== undefined) {
830 ({ data_tag_value, data_tag_element } = writeDecisionTablesData(data_tag_value, data_tag_element, current_table));
831 // JSON Format and save datas of clicked business task element
832 json_tabulator_tables["tabulator_" + tmpElement.id] = {
833 "data": current_table.getData(),
834 "columns": current_table.getColumnDefinitions(),
835 "data_tag_value": data_tag_value,
836 "data_tag_element": data_tag_element
837 }
838
839 // Creates and rewrite the documentation of clicked business task element
840 var clickedBusinessRuleTask = elementRegistry.get(tmpElement.id);
841 var new_documentation_value = moddle.create
842 (
843 'bpmn:Documentation',
844 {
845 "text": JSON.stringify(json_tabulator_tables["tabulator_" + tmpElement.id])
846 }
847 );
848
849 clickedBusinessRuleTask.businessObject.documentation[0] = new_documentation_value;
850 }
851 }
852
853 // Removes all adding/removing tabulator buttons
854 $("[id*=_tabulator]").remove();
855
856 // If a table exists an is clicked
857 if (current_table) {
858 createAddingButtons();
859 // Update columns to actualize new, removed, or modified tasks
860 current_table.getColumns(true)[current_table.getColumns(true).length - 1].delete();
861 var myNewColumnDefinitions = current_table.getColumnDefinitions();
862
863 // Adding new output column
864 myNewColumnDefinitions.push({
865 title: "Output", field: "output", editor: "select",
866
867 //Define Table Columns
868 columns: [
869 {
870 title: "Tasks",
871 field: "output1",
872 editor: "select",
873 editorParams: outgoing_tasks,
874 editableTitle: true
875 },
876 {
877 formatter: "buttonCross",
878 width: 40, align: "center",
879 cellClick: function (e, cell) {
880 cell.getRow().delete();
881 }
882 }
883 ],
884 editorParams: outgoing_tasks
885 });
886
887
888 current_table.setColumns(myNewColumnDefinitions);
889 }
890 buttonsClicked(current_table, nb_added_row, e, tabulator_tables, json_tabulator_tables, elementRegistry, moddle, saved_DecisionsTable, data_tag_value, data_tag_element);
891 // Displays the corresponding decision table
892 $("[id*=tabulator_]").hide();
893 $("#tabulator_" + tmpElement.id).show();
894
895 /*
896 If clicked element is not a businessRuleTask then
897 hide tabulator decision table and remove adding row
898 and adding column buttons
899 */
900 } else {
901
902 // Hides decision tables and remove adding buttons
903 openDialog();
904 closeDialog();
905 $("[id*=tabulator_]").hide();
906 $("[id*=_tabulator]").remove();
907 }
908 });
909 });
910
911
912 if (localStorage.dataSave) {
913
914 }
915 else {
916 localStorage.dataSave = ""
917 localStorage.model_saved = "";
918 };
919 var dataSave = localStorage.dataSave;
920 var model_saved = localStorage.model_saved;
921 var reload = "";
922
923 if (onbeforeunload) {
924 deleteOverlays();
925 var id = obtenirParametre('id');
926 var runID = obtenirParametre('runID')
927 if (id != '') {
928 openBPMNShare(id).then(res => {
929 if(runID != '') {
930 enhanceDiagram(runID)
931 }else{
932
933 }
934 })
935 } else {
936 var BPMNnom = true;
937 title = prompt("nom fichier : ");
938 test = title
939 while (BPMNnom) {
940 if (title == null || title == "") {
941 title = prompt("veuillez entrer un nom de ficheier valide")
942 } else {
943 BPMNnom = false;
944 }
945 }
946 reload = prompt("\n Bienvenue sur le Bpmn-Editor, saisissez la valeur 'NEW' pour créer un nouveau schéma.\n \n Par defaut n'importe qu'elle autre action récuperera le schéma en cours d'édition.\n \n Attention !! Si vous créez un nouveau schéma, celui en cours ne pourra être récupéré!", "");
947 if (reload == "NEW") {
948 createNewDiagram(title);
949 localStorage.dataSave = ""
950 }
951 else {
952 openDiagram(localStorage.dataSave);
953 setidBPMN(title)
954 getTests();
955 }
956 }
957 }
958
959 var title = "";
960 var encodedData;
961
962 $('.buttons a').click(function (e) {
963 if (!$(this).is('.active')) {
964 e.preventDefault();
965 e.stopPropagation();
966 }
967 });
968 $('svg').click(function () {
969 setTimeout(function () {
970 loadHistoric();
971 }, 100);
972 });
973 selectRunID.change(function () {
974 if ($("#runIDselect :selected").val() != -1) {
975 enhanceDiagram($("#runIDselect :selected").val());
976 } else {
977 deleteOverlays();
978 }
979 });
980
981
982 $(historic_link).click(function () {
983 openDiagram(JSON.parse(localStorage.getItem("model_saved"))[document.getElementById("camunda-historic-select").value][1]);
984 //console.log(document.getElementById("camunda-historic-select").selectedIndex);
985 });
986
987 downloadLink.click(function (e) {
988 var title = getIdBPMN();
989 title = title + ".bpmn";
990 downloadLink.attr({
991 'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData,
992 'download': title
993 });
994 });
995
996 recenterButton.click(function (e) {
997 var viewport = $('.viewport');
998 viewport.attr('transform', 'matrix(1,0,0,1,0,0)');
999 });
1000
1001 function convertTo(type){
1002
1003 let title = getIdBPMN()
1004 if (title == null || title == "") {
1005 return false;
1006 }
1007
1008 saveDiagram(function (err, xml) {
1009 if (err) {
1010 console.log(err);
1011 } else {
1012 setEncoded(downloadLink, err ? null : xml);
1013 apiCall.getFile(xml, title, type)
1014 .then(response => {
1015 let file = apiCall.appendFileData(response.zip, response.nameZip, type);
1016 console.log(file)
1017 download('data:' + file.mime + ";base64," + file.data, file.name + '.' + file.extension, file.mime);
1018 }).catch(err => {
1019 window.alert(err)
1020 });
1021 }
1022 });
1023 }
1024
1025 convertRobotButton.click(function (e) {
1026 convertTo(".robot")
1027 });
1028 convertFeatureButton.click(function (e) {
1029 convertTo(".feature")
1030 });
1031
1032 sharebpmn.click(function (e) {
1033 saveDiagram(function (err, xml) {
1034 if (err) {
1035 console.log(err);
1036 } else {
1037 setEncoded(downloadLink, err ? null : xml);
1038 var data = { monModel: getIdBPMN(), BPMNx64: btoa(xml) } // Encode to UTF8 & Base64
1039 $.ajax({
1040 url: 'https://sobpmnapi.eu-gb.mybluemix.net/setBPMN',
1041 // url: 'http://localhost:3002/setBPMN',
1042 type: 'POST',
1043 data: JSON.stringify(data),
1044 dataType: "json", // tell jQuery not to process the data
1045 contentType: "application/json", // tell jQuery not to set contentType
1046 success: function (res) {
1047 // console.log(res)
1048 //Changer le lien lors de la mise en prod
1049 var link = 'https://so-bpmn-editor.eu-gb.mybluemix.net' + res.id;
1050 alert(link)
1051 }
1052 })
1053 }
1054 });
1055 });
1056
1057 $(changeName).click(function (e) {
1058 var newName = prompt('Entrez le nouveau nom du BPMN')
1059 setidBPMN(newName)
1060 //Il faut faire une mofification du diagramme pour prendre en compte le nouveau nom
1061 downloadLink.hide()
1062 // sharebpmn.hide()
1063 });
1064
1065 function setEncoded(link, data) {
1066 var data2 = "";
1067 var array_increment;
1068 if (localStorage.getItem("model_saved")) {
1069 array_increment = JSON.parse(localStorage.getItem("model_saved"));
1070
1071
1072 } else {
1073 array_increment = [];
1074 }
1075
1076 data2 = data;
1077 var date_format_options = {
1078 year: "numeric",
1079 month: "2-digit",
1080 day: "numeric",
1081 hour: "numeric",
1082 minute: "numeric",
1083 second: "numeric"
1084 };
1085
1086 array_increment.push(new Array(new Date().toLocaleString("fr-FR", date_format_options), data2));
1087 dataSave = localStorage.setItem("dataSave", data2);
1088 model_saved = localStorage.setItem("model_saved", JSON.stringify(array_increment));
1089 encodedData = encodeURIComponent(data);
1090 if (data) {
1091 link.show();
1092 }
1093 else {
1094 link.hide();
1095 }
1096 }
1097
1098 // Import diagramme
1099 importButton.click(function (e) {
1100 importDiagramme(openDiagram);
1101 downloadLink.hide();
1102 });
1103
1104 var exportArtifacts = debounce(function () {
1105 saveDiagram(function (err, xml) {
1106 setEncoded(downloadLink, err ? null : xml);
1107 });
1108 }, 500);
1109
1110 bpmnModeler.on('commandStack.changed', exportArtifacts);
1111 window.onbeforeunload = function (e) {
1112 e = e || window.event;
1113 saveDiagram(function (err, xml) {
1114 if (err) {
1115 console.log(err);
1116 } else {
1117 setEncoded(downloadLink, err ? null : xml);
1118 var data = { monModel: getIdBPMN(), BPMNx64: btoa(xml) } // Encode to UTF8 & Base64
1119 }
1120 });
1121 }
1122});