Add status icon for backend + tool tips for buttons

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

@@ -2,6 +2,7 @@
 html, body {
   padding: 0;
   font-size: 11pt;
+  font-family: 'Open Sans', sans-serif;
 }
 
 h1 {
@@ -17,6 +18,27 @@ h2 {
   margin: 10px;
 }
 
+.status-dot {
+  height: 15px;
+  width: 15px;
+  background-color: #bbb;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.status-dot.active {
+  background-color: #0f0;
+}
+
+.status-dot.inactive {
+  background-color: #f00;
+}
+
+#backend-status {
+  float: right;
+  flex-grow: 1;
+}
+
 select {
   -moz-appearance: none;
   -webkit-appearance: none;

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

@@ -23,23 +23,26 @@
 <div class="dmn-root">
   <div class="dmn-top">
     <div class="dmn-top-item dmn-upload">
-      <label class="clickable" for="dmn-file-upload">
+      <label class="clickable" for="dmn-file-upload" title="Upload dmn">
       </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 class="clickable" for="dmn-file-empty" title="Create empty dmn">
       </label>
       <input id="dmn-file-empty" type="button"/>
     </div>
     <div class="dmn-top-item dmn-download">
-      <label class="clickable" for="dmn-file-download">
+      <label class="clickable" for="dmn-file-download" title="Download current dmn">
       </label>
       <input id="dmn-file-download" type="button"/>
     </div>
     <div class="dmn-top-item">
       <h1>Verification for Decision Modeling Notation</h1>
     </div>
+    <div class="dmn-top-item">
+      <span class="status-dot" id="backend-status" title="Backend status"/>
+    </div>
   </div>
   <div id="content-dmn">
     <div class="editor-parent">

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

 let rootUrl = 'http://' + window.location.hostname + ':8080/';
 let dmnApi = rootUrl + 'api/dmn/';
+let inactiveBackend = true;
 
 /**
  * Global definition for verification results
@@ -15,12 +16,31 @@ let types = [];
 
 let $verifierTypes;
 
+function handleStatus() {
+  let $dot = $('#backend-status');
+  if (inactiveBackend) {
+    $dot.removeClass('active');
+    $dot.addClass('inactive');
+  } else {
+    $dot.removeClass('inactive');
+    $dot.addClass('active');
+  }
+}
+
 // load types
 $.ajax({
+  timeout: 500,
   url: dmnApi + 'verification/types',
   type: 'GET',
   contentType: 'text/xml',
+  error: function (err) {
+    verifierResults = {};
+    inactiveBackend = true;
+    handleStatus();
+  },
   success: function (data) {
+    inactiveBackend = false;
+    handleStatus();
     types = data;
     // sort types by classification and name
     types.sort(function (
@@ -59,7 +79,8 @@ function cleanDmnVerifierRoot() {
   });
   // Add Button
   $header.append($(`
-    <button class="clickable dmn-verifier-header-item" id="dmn-button-verify" onClick="checkVerifications()">
+    <button class="clickable dmn-verifier-header-item" id="dmn-button-verify" 
+    title="Request verifications" onClick="checkVerifications()">
     Verify</button>
   `));
   // add header to root
@@ -95,6 +116,7 @@ function getVerifications() {
       }
     }
     $.ajax({
+      timeout: 0, // ??
       url: apiPath,
       type: 'POST',
       contentType: 'text/xml',
@@ -132,6 +154,7 @@ function getVerifications() {
 function renderTypeOptions() {
   let $select = $(`
     <select name="verifier[]" id="dmn-verifier-types" multiple="multiple"
+    title="Preselect verifications"
       class="dmn-verifier-header-item dmn-verifier-select clickable">
   `);
   let currentOpt = '';
@@ -162,6 +185,7 @@ function renderDmnVerifierOptions() {
   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>`));