Merge branch 'feat/dmnapp/purehtmljs' into 'develop'

Feat/dmnapp/purehtmljs

See merge request jonasblatt/ma-jonasblatt-dmn-verifier!9

dmnverifierapi/src/main/java/de/unikoblenz/fgbks/core/dmn/verification/verifier/types/SubsumptionVerification.java

@@ -12,7 +12,10 @@ public class SubsumptionVerification extends AbstractVerificationType {
   private static final SubsumptionVerification instance = new SubsumptionVerification();
 
   private SubsumptionVerification() {
-    super(new Name("SubsumptionVerification"), new Description("test")); // TODO
+    super(
+        new Name("SubsumptionVerification"),
+        new Name("Rule Subsumptions"),
+        new Description("test")); // TODO
   }
 
   public static SubsumptionVerification getInstance() {

dmnverifierapi/src/main/java/de/unikoblenz/fgbks/core/dmn/verification/verifier/types/VerificationType.java

@@ -17,6 +17,10 @@ public interface VerificationType extends ValueObject {
   @JsonbProperty("name")
   Name getName();
 
+  @NotNull
+  @JsonbProperty("niceName")
+  Name getNiceName();
+
   @NotNull
   @JsonbProperty("description")
   Description getDescription();

dmnverifierapi/src/main/resources/application.properties

 # Configuration file
 # Quarkus cors settings
 quarkus.http.cors=true
-quarkus.http.cors.origins=http://localhost:8081,http://localhost:80
+%dev.quarkus.http.cors.origins=http://localhost:8081,http://192.168.2.109:8081
+quarkus.http.cors.origins=http://localhost,http://dmn.fg-bks.uni-koblenz.de,http://141.26.209.83
 quarkus.http.cors.headers=accept,authorization,content-type,x-requested-with
-quarkus.http.cors.methods=GET, POST, OPTIONS
+quarkus.http.cors.methods=GET,POST,OPTIONS
 # Amount of threads for calculating the verifications
 verifier.threads=8
 # No parallel execution in dev mode

dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css

+/** General configuration */
 html, body {
-  height: 100%;
   padding: 0;
-  margin: 0;
-  font-size: 10pt;
+  font-size: 11pt;
+}
+
+h1 {
+  font-weight: 400;
+  line-height: 1.2;
+  font-size: 1.8em;
+  font-family: Impact, Charcoal, sans-serif;
+  margin-top: 8px;
+  color: #0b3004;
 }
 
 h2 {
   margin: 10px;
 }
 
-input {
-  color: blue;
+select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  border: none;
+  border-radius: 2px;
+  color: #0b3004;
+  cursor: pointer;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+  height: 35px;
+  outline: none;
+  padding-left: 5px;
+}
+
+select option {
+  color: #000;
+}
+
+select optgroup {
+  color: #111;
+}
+
+select::-ms-expand {
+  display: none;
+}
+
+select:focus::-ms-value {
+  background-color: transparent;
+}
+
+.clickable {
+  box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, .3);
+}
+
+.clickable:hover {
+  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);
+}
+
+.clickable:active {
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, .3);
+}
+
+/** Top-line configuration */
+
+.dmn-root {
+  margin: -2px;
+}
+
+.dmn-top {
+  height: 60px;
+  padding-left: 6px;
+  padding-top: 6px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.dmn-top-item {
+  flex-grow: 20;
+}
+
+.dmn-top-item > input {
+  display: none;
+}
+
+.dmn-top-item > label {
+  height: 52px;
+  border: 2px solid #0b3004;
+  border-radius: 5px;
+  display: block;
+  background-size: cover;
+  background-position: center;
+}
+
+.dmn-upload {
+  flex-grow: 1;
+  border: 2px black;
+}
+
+.dmn-upload > label {
+  background-image: url("img/upload.png");
+  width: 50px;
+}
+
+.dmn-empty-file {
+  flex-grow: 1;
+}
+
+.dmn-empty-file > label {
+  background-image: url("img/emptyFile.png");
+  width: 50px;
+}
+
+.dmn-download {
+  flex-grow: 1;
+}
+
+.dmn-download > label {
+  background-image: url("img/download.png");
+  width: 50px;
+}
+
+/** Verifier configuration */
+
+#dmn-verifier-header {
+  padding: 3px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+#dmn-button-verify {
+  flex-grow: 1;
+  max-width: 90px;
+  height: 35px;
+  background: white;
+  border-radius: 2px;
+}
+
+.dmn-verifier-header-item {
+  margin: 8px 12px;
+}
+
+.dmn-verifier-select {
+  flex-grow: 4;
 }
 
-#dmn-file-upload {
-  width: 100%;
+#dmn-verifier-types {
+  flex-grow: 1;
+  max-width: 200px;
 }
 
 .dmn-ERROR {
@@ -29,6 +162,6 @@ input {
   list-style-image: url("img/FATAL_ERROR.png");
 }
 
-.dmn-INFORMATION {
+.dmn-INFO {
   list-style-image: url("img/INFO.png");
 }

dmnverifierfrontend/src/main/resources/META-INF/resources/dmn/emptyDMN.dmn

+<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="http://www.omg.org/spec/DMN/20151101/dmn.xsd" xmlns:biodi="http://bpmn.io/schema/dmn/biodi/1.0" id="Definitions_1kjh9a2" name="DRD" namespace="http://camunda.org/schema/1.0/dmn">
+  <decision id="Decision_13nychf" name="Decision 1">
+    <extensionElements>
+      <biodi:bounds x="120" y="145" width="180" height="80" />
+    </extensionElements>
+    <decisionTable id="decisionTable_1">
+      <input id="input_1">
+        <inputExpression id="inputExpression_1" typeRef="string">
+          <text></text>
+        </inputExpression>
+      </input>
+      <output id="output_1" typeRef="string" />
+    </decisionTable>
+  </decision>
+</definitions>

dmnverifierfrontend/src/main/resources/META-INF/resources/index.html

@@ -18,22 +18,42 @@
   <link href="css/dmnEditorTabs.css" rel="stylesheet" type="text/css"/>
 </head>
 <body>
-<input id="dmn-file-upload" type="file">
-<div id="content-dmn">
-  <div class="editor-parent">
-    <div class="editor-container"></div>
-    <div class="editor-tabs"></div>
+<div class="dmn-root">
+  <div class="dmn-top">
+    <div class="dmn-top-item dmn-upload">
+      <label class="clickable" for="dmn-file-upload">
+      </label>
+      <input id="dmn-file-upload" type="file"/>
+    </div>
+    <div class="dmn-top-item dmn-empty-file">
+      <label class="clickable" for="dmn-file-empty">
+      </label>
+      <input id="dmn-file-empty" type="button"/>
+    </div>
+    <div class="dmn-top-item dmn-download">
+      <label class="clickable" for="dmn-file-download">
+      </label>
+      <input id="dmn-file-download" type="button"/>
+    </div>
+    <div class="dmn-top-item">
+      <h1>Verification for Decision Modeling Notation</h1>
+    </div>
   </div>
+  <div id="content-dmn">
+    <div class="editor-parent">
+      <div class="editor-container"></div>
+      <div class="editor-tabs"></div>
+    </div>
+  </div>
+  <div id="root-dmn-verifier"></div>
 </div>
-<div id="root-dmn-verifier"></div>
-</div>
-
 <!-- load jquery -->
 <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js" type="text/javascript"></script>
 <!-- load dmn modeler -->
 <script src="https://unpkg.com/dmn-js@7.0.1/dist/dmn-modeler.development.js"></script>
 
-<script src="js/upload.js" type="text/javascript"></script>
+<script src="js/dmnUpload.js" type="text/javascript"></script>
+<script src="js/dmnDownload.js" type="text/javascript"></script>
 <script src="js/dmnViewer.js" type="text/javascript"></script>
 <script src="js/dmnVerifier.js" type="text/javascript"></script>
 </body>

dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnDownload.js

+document.addEventListener("DOMContentLoaded", function () {
+  $('#dmn-file-download').on('click', exportDiagram());
+});
+
+function download(filename, dmnXml) {
+  let el = document.createElement('a');
+  el.setAttribute('href',
+      'data:text/xml;charset=utf-8,' + encodeURIComponent(dmnXml));
+  el.setAttribute('download', filename);
+  el.style.display = 'none';
+  document.body.appendChild(el);
+  el.click();
+  document.body.removeChild(el);
+}

dmnverifierfrontend/src/main/resources/META-INF/resources/js/upload.js → dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnUpload.js

 document.addEventListener("DOMContentLoaded", function () {
   $('#dmn-file-upload').on('change', loadDmnFromFile);
+  $('#dmn-file-empty').on('click', loadEmptyFile);
 });
 
 function loadDmnFromFile(evt) {
@@ -13,4 +14,15 @@ function loadDmnFromFile(evt) {
   fileReader.readAsText(dmnFile, "UTF-8");
 }
 
+function loadEmptyFile() {
+  $.ajax({
+    url: 'dmn/emptyDMN.dmn',
+    type: 'GET',
+    contentType: 'text/xml',
+    success: function (data) {
+      openDiagram(data);
+    }
+  });
+}
+
 

dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerificationResultSet..js

@@ -55,6 +55,7 @@
  * @type {object}
  * @property {string} description
  * @property {string} name
+ * @property {string} niceName
  * @property {VerificationClassification} classification
  */
 
@@ -63,4 +64,5 @@
  * @type {object}
  * @property {string} description
  * @property {string} name
+ *  * @property {string} niceName
  */

dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifier.js

-let rootUrl = 'http://localhost:8080/';
+let rootUrl = 'http://192.168.2.109:8080/';
 let dmnApi = rootUrl + 'api/dmn/';
 
 /**
@@ -7,16 +7,61 @@ let dmnApi = rootUrl + 'api/dmn/';
  */
 let verifierResults = {};
 
+/**
+ *
+ * @type {Array.<VerificationType>}
+ */
+let types = [];
+
+let $verifierTypes;
+
+// load types
+$.ajax({
+  url: dmnApi + 'verification/type',
+  type: 'GET',
+  contentType: 'text/xml',
+  success: function (data) {
+    types = data;
+    // sort types by classification and name
+    types.sort(function (
+        /** VerificationType */ firstEl, /** VerificationType */ secondEl) {
+      if (firstEl.classification.name
+          === secondEl.classification.name) {
+        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;
+      }
+    });
+    $verifierTypes = renderTypeOptions();
+  }
+});
+
 function cleanDmnVerifierRoot() {
   let $root = $('#root-dmn-verifier').empty();
-  $root.append($(`
-    <button id="button-dmn-verify" onClick="checkVerifications()">
-    Get verifications</button>
+  let $header = $(`      
+      <div id="dmn-verifier-header">
+  `);
+  // add types
+  $header.append($verifierTypes);
+  // Add Button
+  $header.append($(`
+    <button class="clickable dmn-verifier-header-item" id="dmn-button-verify" onClick="checkVerifications()">
+    Verify</button>
   `));
+  // add header to root
+  $root.append($header);
+  $root.append($(`<div id="dmn-verifier-content">`));
   return $root;
 }
 
 function checkVerifications() {
+  cleanDmnVerifierRoot();
   getVerifications();
 }
 
@@ -28,8 +73,13 @@ function getVerifications() {
     } else {
       console.log('Requesting dmn verifications..');
     }
+    let apiPath = dmnApi + 'verification';
+    // check, if a verifier is preselected
+    if ($verifierTypes[0].selectedOptions[0].value !== 'all') {
+      apiPath += "/type/" + $verifierTypes[0].selectedOptions[0].value;
+    }
     $.ajax({
-      url: dmnApi + 'verification',
+      url: apiPath,
       type: 'POST',
       contentType: 'text/xml',
       data: xml,
@@ -63,31 +113,73 @@ function getVerifications() {
   });
 }
 
+function renderTypeOptions() {
+  let $select = $(`
+    <select name="verifier" id="dmn-verifier-types"
+      class="dmn-verifier-header-item dmn-verifier-select clickable">
+  `);
+  $select.append($(`<option value="all">All verifier</option>`));
+  let currentOpt = '';
+  let $curGroup;
+  for (let i = 0; i < types.length; i++) {
+    let bolNewGroup = currentOpt
+        !== types[i].classification.niceName;
+    if (bolNewGroup) {
+      if (currentOpt === currentOpt) {
+        $select.append($curGroup);
+      }
+      $curGroup = ($(
+          `<optgroup label="${types[i].classification.niceName}">
+      `));
+      currentOpt = types[i].classification.niceName;
+    }
+    $curGroup.append($(`
+      <option value="${types[i].name}">${types[i].niceName}</option>`
+    ));
+
+  }
+  $select.append($curGroup);
+  return $select;
+}
+
 function renderDmnVerifierOptions() {
-  // reset div
-  let $root = cleanDmnVerifierRoot();
+  let $header = $('#dmn-verifier-header');
   let $select = $(`
-    <select name="verifier" id="verifier" onchange="renderVerifierResult(this)">
+    <select name="verifier" id="verifier"
+      class="dmn-verifier-header-item dmn-verifier-select clickable"
+      onchange="renderVerifierResult(this)">
   `);
   $select.append($(`<option>Select a verifier</option>`));
   let currentOpt = '';
   let $curGroup;
   for (let i = 0; i < verifierResults.verifier.length; i++) {
+    let verifier = verifierResults.verifier[i];
     let bolNewGroup = currentOpt
-        !== verifierResults.verifier[i].type.classification.name;
+        !== verifier.type.classification.niceName;
     if (bolNewGroup) {
       if (currentOpt === currentOpt) {
         $select.append($curGroup);
       }
       $curGroup = ($(
-          `<optgroup label="${verifierResults.verifier[i].type.classification.name}">
+          `<optgroup label="${verifier.type.classification.niceName}">
       `));
-      currentOpt = verifierResults.verifier[i].type.classification.name;
+      currentOpt = verifier.type.classification.niceName;
     }
-    $curGroup.append(renderSelectEntry(verifierResults.verifier[i]));
+    if (verifierResults.verifier.length === 1) {
+      $curGroup.append($(`
+      <option value="${verifier.type.name}" selected>${verifier.type.niceName} (${verifier.size})</option>
+    `));
+    } else {
+      $curGroup.append($(`
+      <option value="${verifier.type.name}">${verifier.type.niceName} (${verifier.size})</option>
+    `));
+    }
+  }
+  $select.append($curGroup);
+  $header.append($select);
+  if (verifierResults.verifier.length === 1) {
+    renderVerifierResult($select[0].selectedOptions[0]);
   }
-  $root.append($select);
-  $root.append($(`<div id="verifier-entries">`));
 }
 
 /**
@@ -97,7 +189,7 @@ function renderDmnVerifierOptions() {
  */
 function renderSelectEntry(verifier) {
   return $(`
-      <option value="${verifier.type.name}">${verifier.type.name} (${verifier.size})</option>
+      <option value="${verifier.type.name}">${verifier.type.niceName} (${verifier.size})</option>
     `);
 }
 
@@ -108,11 +200,11 @@ function renderSelectEntry(verifier) {
  */
 function renderVerifierResult(verifierSelect) {
   let verifier = findVerifierByName(verifierSelect.value);
-  let $verifierEntries = $('#verifier-entries');
+  let $verifierEntries = $('#dmn-verifier-content');
   $verifierEntries.empty();
   if (verifier !== undefined) {
     $verifierEntries.append($(`
-    <div>${verifier.type.name}: ${verifier.type.description}</div>
+    <div>${verifier.type.niceName}: ${verifier.type.description}</div>
   `));
     let $entryList = $(`<ul>`);
     $verifierEntries.append($entryList);

dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnViewer.js

@@ -12,13 +12,15 @@ $tabs.delegate('.tab', 'click', function (e) {
   dmnModeler.open(view);
 });
 
+// calc height
+let dmnModelerHeight = $(window).height() / 2.5;
 /**
  *
  * @type {DmnJS}
  */
 let dmnModeler = new DmnJS({
   container: $container,
-  height: 450,
+  height: dmnModelerHeight,
   width: '100%',
   keyboard: {
     bindTo: window
@@ -52,7 +54,7 @@ function exportDiagram() {
     } else {
       console.log('saving dmn..');
     }
-    // TODO, download
+    download("dmnTable.dmn", xml);
   });
 }