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

#8 Format text of verification results

parent 7242d996
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/css/stylesheets.css
+ 25
− 6
View file @ f3fa9f24
...@@ -18,6 +18,10 @@ h2 { ...@@ -18,6 +18,10 @@ h2 {
margin: 10px; margin: 10px;
} }
p {
margin: 5px;
}
.status-dot { .status-dot {
height: 15px; height: 15px;
width: 15px; width: 15px;
...@@ -70,6 +74,12 @@ select:focus::-ms-value { ...@@ -70,6 +74,12 @@ select:focus::-ms-value {
background-color: transparent; background-color: transparent;
} }
span.select2 {
display: table;
table-layout: fixed;
width: 25% !important;
}
.clickable { .clickable {
box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, .3); box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, .3);
} }
...@@ -181,7 +191,21 @@ select:focus::-ms-value { ...@@ -181,7 +191,21 @@ select:focus::-ms-value {
#dmn-verifier-types { #dmn-verifier-types {
flex-grow: 1; flex-grow: 1;
max-width: 200px; max-width: 250px;
}
.verifier-type-name {
border-top: #0d82b7 2px;
border-top-style: dashed;
}
.verifier-type-description {
border-left: #0d82b7 5px;
border-left-style: solid;
}
.verifier-type-description > p {
max-width: 400px;
} }
.dmn-ERROR { .dmn-ERROR {
...@@ -200,8 +224,3 @@ select:focus::-ms-value { ...@@ -200,8 +224,3 @@ select:focus::-ms-value {
list-style-image: url("img/INFO.png"); list-style-image: url("img/INFO.png");
} }
span.select2 {
display: table;
table-layout: fixed;
width: 25% !important;
}
dmnverifierfrontend/src/main/resources/META-INF/resources/index.html
+ 1
− 0
View file @ f3fa9f24
...@@ -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
+ 54
− 22
View file @ f3fa9f24
...@@ -19,6 +19,13 @@ let verifierResults = {}; ...@@ -19,6 +19,13 @@ 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');
...@@ -98,6 +105,8 @@ function cleanDmnVerifierRoot() { ...@@ -98,6 +105,8 @@ function cleanDmnVerifierRoot() {
title="Request verifications" onClick="checkVerifications()"> title="Request verifications" onClick="checkVerifications()">
Verify</button> Verify</button>
`)); `));
$select.empty();
$header.append($select);
} }
// add header to root // add header to root
...@@ -201,16 +210,10 @@ function renderTypeOptions() { ...@@ -201,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
...@@ -219,24 +222,26 @@ function renderDmnVerifierOptions() { ...@@ -219,24 +222,26 @@ 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) { if (verifierResults.verifier.length === 1 ||
lastTypeSelect !== undefined && lastTypeSelect === verifier.type.name) {
selOpt = true;
$curGroup.append($(` $curGroup.append($(`
<option value="${verifier.type.name}" selected>${verifier.type.niceName} (${verifier.size})</option> <option value="${verifier.type.name}" selected>${verifier.type.niceName} (${verifier.size})</option>
`)); `));
} else { } else {
$curGroup.append($(` $curGroup.append($(`
<option value="${verifier.type.name}">${verifier.type.niceName} (${verifier.size})</option> <option value="${verifier.type.name}">${verifier.type.niceName} (${verifier.size})</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]);
} }
} }
...@@ -248,18 +253,46 @@ function renderDmnVerifierOptions() { ...@@ -248,18 +253,46 @@ function renderDmnVerifierOptions() {
*/ */
function renderVerifierResult(verifierSelect) { function renderVerifierResult(verifierSelect) {
let verifier = findVerifierByName(verifierSelect.value); let verifier = findVerifierByName(verifierSelect.value);
let $verifierEntries = $('#dmn-verifier-content'); if (verifier === undefined) {
$verifierEntries.empty(); lastTypeSelect = undefined;
if (verifier !== undefined) { } else {
$verifierEntries.append($(` lastTypeSelect = verifier.type.name;
<div>${verifier.type.niceName}: ${verifier.type.description}</div> renderVerifier(verifier);
}
}
/**
*
* @param verifier
* @Type VerifierResult
*/
function renderVerifier(verifier) {
let $verifierContent = $('#dmn-verifier-content');
$verifierContent.empty();
$verifierContent.css('display', 'none');
let $verifierType = $(`<div class="verifier-type"></div>`);
let $verifierEntries = $(`<div class="verifier-entries"></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>
`)); `));
// Add entries if min 1 result
if (verifier.entries.length > 0) {
let $entryList = $(`<ul>`); let $entryList = $(`<ul>`);
$verifierEntries.append($entryList); $verifierEntries.append($entryList);
for (let i = 0; i < verifier.entries.length; i++) { for (let i = 0; i < verifier.entries.length; i++) {
$entryList.append(renderVerificationEntry(verifier.entries[i])); $entryList.append(renderVerificationEntry(verifier.entries[i]));
} }
} }
$verifierContent.append($verifierType);
$verifierContent.append($verifierEntries);
$verifierContent.fadeIn(300);
//$verifierType.animate({left: '100px'}, "slow")
} }
/** /**
...@@ -268,7 +301,6 @@ function renderVerifierResult(verifierSelect) { ...@@ -268,7 +301,6 @@ function renderVerifierResult(verifierSelect) {
* @Type VerificationEntry * @Type VerificationEntry
*/ */
function renderVerificationEntry(verificationEntry) { function renderVerificationEntry(verificationEntry) {
console.log(verificationEntry);
return $(` return $(`
<li class="dmn-${verificationEntry.verificationClassification}">${verificationEntry.message}</li> <li class="dmn-${verificationEntry.verificationClassification}">${verificationEntry.message}</li>
`); `);
......
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