Skip to content
Snippets Groups Projects
Commit f0ee5a4a authored by Jonas Blatt's avatar Jonas Blatt :ant:
Browse files

Merge branch 'develop' into 'master' 

Develop

See merge request jonasblatt/ma-jonasblatt-dmn-verifier!36
parents fd973af3 8bd2f77d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
dmnverifierfrontend/src/main/resources/META-INF/resources/index.html
+ 1
− 0
View file @ f0ee5a4a
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>DMN App</title> <title>DMN App</title>
<link href="https://unpkg.com/dmn-js@7.0.1/dist/assets/diagram-js.css" rel="stylesheet"> <link href="https://unpkg.com/dmn-js@7.0.1/dist/assets/diagram-js.css" rel="stylesheet">
<link href="https://unpkg.com/dmn-js@7.0.1/dist/assets/dmn-js-shared.css" rel="stylesheet"> <link href="https://unpkg.com/dmn-js@7.0.1/dist/assets/dmn-js-shared.css" rel="stylesheet">
......
dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifier.js
+ 151
− 92
View file @ f0ee5a4a
...@@ -2,6 +2,10 @@ let rootUrl = 'http://' + window.location.hostname + ':8080/'; ...@@ -2,6 +2,10 @@ let rootUrl = 'http://' + window.location.hostname + ':8080/';
let dmnApi = rootUrl + 'api/dmn/'; let dmnApi = rootUrl + 'api/dmn/';
let inactiveBackend = true; let inactiveBackend = true;
$(document).ready(function () {
// load types
loadAvailableTypes();
});
/** /**
* Global definition for verification results * Global definition for verification results
* @type {VerifierResultSet} * @type {VerifierResultSet}
...@@ -15,75 +19,97 @@ let verifierResults = {}; ...@@ -15,75 +19,97 @@ let verifierResults = {};
let types = []; let types = [];
let $verifierTypes; let $verifierTypes;
let lastTypeSelect = undefined;
let $select = $(`
<select name="verifier" id="verifier"
class="dmn-verifier-header-item dmn-verifier-select clickable"
title="Select calculated verification"
onchange="renderVerifierResult(this)">
`);
function handleStatus() { function handleStatus() {
let $dot = $('#backend-status'); let $dot = $('#backend-status');
if (inactiveBackend) { if (inactiveBackend) {
verifierResults = {};
$dot.removeClass('active'); $dot.removeClass('active');
$dot.addClass('inactive'); $dot.addClass('inactive');
alert(
"Error: The backend is currently not available. Please try again later.")
} else { } else {
$dot.removeClass('inactive'); $dot.removeClass('inactive');
$dot.addClass('active'); $dot.addClass('active');
} }
cleanDmnVerifierRoot();
} }
// load types function loadAvailableTypes() {
$.ajax({ $.ajax({
timeout: 500, timeout: 1000,
url: dmnApi + 'verification/types', url: dmnApi + 'verification/types',
type: 'GET', type: 'GET',
contentType: 'text/xml', contentType: 'text/xml',
error: function (err) { error: function (err) {
verifierResults = {}; inactiveBackend = true;
inactiveBackend = true; handleStatus();
handleStatus(); },
}, success: function (data) {
success: function (data) { inactiveBackend = false;
inactiveBackend = false; types = data;
handleStatus(); // sort types by classification and name
types = data; types.sort(function (
// sort types by classification and name /** VerificationType */ firstEl, /** VerificationType */ secondEl) {
types.sort(function ( if (firstEl.classification.name
/** VerificationType */ firstEl, /** VerificationType */ secondEl) { === secondEl.classification.name) {
if (firstEl.classification.name if (firstEl.niceName === secondEl.niceName) {
=== secondEl.classification.name) { return 0;
if (firstEl.niceName === secondEl.niceName) { }
return 0; return firstEl.niceName < secondEl.niceName ? -1 : 1;
} else if (firstEl.classification.name
< secondEl.classification.name) {
return -1;
} else {
return 1;
} }
return firstEl.niceName < secondEl.niceName ? -1 : 1; });
} else if (firstEl.classification.name $verifierTypes = renderTypeOptions();
< secondEl.classification.name) { handleStatus();
return -1; }
} else { });
return 1; }
}
});
$verifierTypes = renderTypeOptions();
}
});
function cleanDmnVerifierRoot() { function cleanDmnVerifierRoot() {
let $root = $('#root-dmn-verifier').empty(); let $root = $('#root-dmn-verifier').empty();
let $header = $(` let $header = $(`
<div id="dmn-verifier-header"> <div id="dmn-verifier-header">
`); `);
// add types // check, if backend is available
$header.append($verifierTypes); if ($verifierTypes === undefined) {
$verifierTypes.select2({ $header.append($(`
containerCssClass: "dmn-verifier-header-item dmn-verifier-select clickable", <button class="clickable dmn-verifier-header-item" id="dmn-button-reload-verifier"
placeholder: { title="Reconnect backend" onClick="loadAvailableTypes()">
id: -1, Reconnect verification backend</button>
text: "All verifier" `));
}, } else {
allowClear: true $header.append($verifierTypes);
}); $verifierTypes.select2({
// Add Button containerCssClass: "dmn-verifier-header-item dmn-verifier-select clickable",
$header.append($(` placeholder: {
<button class="clickable dmn-verifier-header-item" id="dmn-button-verify" id: -1,
title="Request verifications" onClick="checkVerifications()"> text: "All verifier"
Verify</button> },
`)); allowClear: true
// add header to root });
// Add Button
$header.append($(`
<button class="clickable dmn-verifier-header-item" id="dmn-button-verify"
title="Request verifications" onClick="checkVerifications()">
Verify</button>
`));
$select.empty();
$header.append($select);
}
// add header to root
$root.append($header); $root.append($header);
$root.append($(`<div id="dmn-verifier-content">`)); $root.append($(`<div id="dmn-verifier-content">`));
return $root; return $root;
...@@ -97,8 +123,7 @@ function checkVerifications() { ...@@ -97,8 +123,7 @@ function checkVerifications() {
function getVerifications() { function getVerifications() {
dmnModeler.saveXML({format: true}, function (err, xml) { dmnModeler.saveXML({format: true}, function (err, xml) {
if (err) { if (err) {
return console.log( return alert(err);
'There is an error in requesting the dmn verifications.. ' + err);
} else { } else {
console.log('Requesting dmn verifications..'); console.log('Requesting dmn verifications..');
} }
...@@ -122,6 +147,10 @@ function getVerifications() { ...@@ -122,6 +147,10 @@ function getVerifications() {
contentType: 'text/xml', contentType: 'text/xml',
data: xml, data: xml,
error: function (err) {
alert(
'Error: There was a fatal error while parsing the xml of the dmn.');
},
success: function (data) { success: function (data) {
console.log('successful dmn verification request:'); console.log('successful dmn verification request:');
console.log(data); console.log(data);
...@@ -181,16 +210,10 @@ function renderTypeOptions() { ...@@ -181,16 +210,10 @@ function renderTypeOptions() {
} }
function renderDmnVerifierOptions() { function renderDmnVerifierOptions() {
let $header = $('#dmn-verifier-header');
let $select = $(`
<select name="verifier" id="verifier"
class="dmn-verifier-header-item dmn-verifier-select clickable"
title="Select calculated verification"
onchange="renderVerifierResult(this)">
`);
$select.append($(`<option>Select a verifier</option>`)); $select.append($(`<option>Select a verifier</option>`));
let currentOpt = ''; let currentOpt = '';
let $curGroup; let $curGroup;
let selOpt = false;
for (let i = 0; i < verifierResults.verifier.length; i++) { for (let i = 0; i < verifierResults.verifier.length; i++) {
let verifier = verifierResults.verifier[i]; let verifier = verifierResults.verifier[i];
let bolNewGroup = currentOpt let bolNewGroup = currentOpt
...@@ -199,58 +222,79 @@ function renderDmnVerifierOptions() { ...@@ -199,58 +222,79 @@ function renderDmnVerifierOptions() {
if (currentOpt === currentOpt) { if (currentOpt === currentOpt) {
$select.append($curGroup); $select.append($curGroup);
} }
$curGroup = ($( $curGroup = ($(`
`<optgroup label="${verifier.type.classification.niceName}"> <optgroup label="${verifier.type.classification.niceName}">
`)); `));
currentOpt = verifier.type.classification.niceName; currentOpt = verifier.type.classification.niceName;
} }
if (verifierResults.verifier.length === 1) { let $option;
$curGroup.append($(` if (verifierResults.verifier.length === 1 ||
<option value="${verifier.type.name}" selected>${verifier.type.niceName} (${verifier.size})</option> lastTypeSelect !== undefined && lastTypeSelect === verifier.type.name) {
`)); selOpt = true;
$option = $(`
<option value="${verifier.type.name}" selected>${verifier.type.niceName} (${verifier.size})</option>
`);
} else { } else {
$curGroup.append($(` $option = $(`
<option value="${verifier.type.name}">${verifier.type.niceName} (${verifier.size})</option> <option value="${verifier.type.name}">${verifier.type.niceName} (${verifier.size})</option>
`)); `);
} }
if (verifier.size === 0) {
$option.css('color', '#999')
}
$curGroup.append($option);
} }
$select.append($curGroup); $select.append($curGroup);
$header.append($select);
if (verifierResults.verifier.length === 1) { if (selOpt) {
renderVerifierResult($select[0].selectedOptions[0]); renderVerifierResult($select[0].selectedOptions[0]);
} }
} }
/** /**
* *
* @param verifier * @param verifierSelect
* @type VerifierResult * @Type option
*/ */
function renderSelectEntry(verifier) { function renderVerifierResult(verifierSelect) {
return $(` let verifier = findVerifierByName(verifierSelect.value);
<option value="${verifier.type.name}">${verifier.type.niceName} (${verifier.size})</option> if (verifier === undefined) {
`); lastTypeSelect = undefined;
} else {
lastTypeSelect = verifier.type.name;
renderVerifier(verifier);
}
} }
/** /**
* *
* @param verifierSelect * @param verifier
* @Type option * @Type VerifierResult
*/ */
function renderVerifierResult(verifierSelect) { function renderVerifier(verifier) {
let verifier = findVerifierByName(verifierSelect.value); let $verifierContent = $('#dmn-verifier-content');
let $verifierEntries = $('#dmn-verifier-content'); $verifierContent.empty();
$verifierEntries.empty(); $verifierContent.css('display', 'none');
if (verifier !== undefined) { let $verifierType = $(`<div class="verifier-type"></div>`);
$verifierEntries.append($(` let $verifierEntries = $(`<div class="verifier-entries"></div>`);
<div>${verifier.type.niceName}: ${verifier.type.description}</div>
// Add name and description of verifier
$verifierType.append($(`
<div class="verifier-type-name"><h2>${verifier.type.niceName}</h2></div>
`));
$verifierType.append($(`
<div class="verifier-type-description"><p>${verifier.type.description}</p></div>
`)); `));
let $entryList = $(`<ul>`);
$verifierEntries.append($entryList); // Add entries if min 1 result
if (verifier.entries.length > 0) {
for (let i = 0; i < verifier.entries.length; i++) { for (let i = 0; i < verifier.entries.length; i++) {
$entryList.append(renderVerificationEntry(verifier.entries[i])); $verifierEntries.append(renderVerificationEntry(verifier.entries[i]));
} }
} }
$verifierContent.append($verifierType);
$verifierContent.append($verifierEntries);
$verifierContent.fadeIn(250);
} }
/** /**
...@@ -259,10 +303,25 @@ function renderVerifierResult(verifierSelect) { ...@@ -259,10 +303,25 @@ function renderVerifierResult(verifierSelect) {
* @Type VerificationEntry * @Type VerificationEntry
*/ */
function renderVerificationEntry(verificationEntry) { function renderVerificationEntry(verificationEntry) {
console.log(verificationEntry); let $entryContainer = $(`<div class="verification-container"></div>`);
return $(` $entryContainer.append($(`
<li class="dmn-${verificationEntry.verificationClassification}">${verificationEntry.message}</li> <span class="dmn-verification-icon dmn-${verificationEntry.verificationClassification}"/>
`); `));
$entryContainer.append($(`
<div class="verification-message">${verificationEntry.message}</div>
`));
// "dmn-${verificationEntry.verificationClassification}"
let $fixButtons = $(`<div class="verification-container-fix-buttons"></div>`);
/*
$fixButtons.append(
$(`<button class="verification-fix-button clickable">Show</button>`));
$fixButtons.append(
$(`<button class="verification-fix-button clickable">Fix</button>`));
$fixButtons.append(
$(`<button class="verification-fix-button clickable">Fix</button>`)); */
$entryContainer.append($fixButtons); // TODO: render buttons
return $entryContainer;
} }
/** /**
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment