Explorer UI - fixes for message templates

eclipse-ditto · Sep 2, 2022 · 38546b8 · 38546b8
1 parent 76f778c
commit 38546b8
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 12 deletions.
diff --git a/ui/modules/things/featureMessages.js b/ui/modules/things/featureMessages.js
@@ -63,6 +63,7 @@ export async function ready() {
   dom.buttonMessageFavourite.onclick = () => {
     const templateName = dom.inputMessageTemplate.value;
     const featureId = dom.theFeatureId.value;
+    Utils.assert(featureId, 'Please select a Feature', dom.tableValidationFeature);
     Utils.assert(templateName, 'Please give a name for the template', dom.inputMessageTemplate);
     Environments.current().messageTemplates[featureId] = Environments.current().messageTemplates[featureId] || {};
     if (Object.keys(Environments.current().messageTemplates[featureId]).includes(templateName) &&
@@ -82,13 +83,15 @@ export async function ready() {
   };
 
   dom.ulMessageTemplates.addEventListener('click', (event) => {
-    dom.favIconMessage.classList.replace('bi-star', 'bi-star-fill');
-    const template = Environments.current().messageTemplates[dom.theFeatureId.value][event.target.textContent];
-    dom.inputMessageTemplate.value = event.target.textContent;
-    dom.inputMessageSubject.value = template.subject;
-    dom.inputMessageTimeout.value = template.timeout;
-    acePayload.setValue(JSON.stringify(template.payload, null, 2), -1);
-    acePayload.session.getUndoManager().markClean();
+    if (event.target && event.target.classList.contains('dropdown-item')) {
+      dom.favIconMessage.classList.replace('bi-star', 'bi-star-fill');
+      const template = Environments.current().messageTemplates[dom.theFeatureId.value][event.target.textContent];
+      dom.inputMessageTemplate.value = event.target.textContent;
+      dom.inputMessageSubject.value = template.subject;
+      dom.inputMessageTimeout.value = template.timeout;
+      acePayload.setValue(JSON.stringify(template.payload, null, 2), -1);
+      acePayload.session.getUndoManager().markClean();
+    }
   });
 
   [dom.inputMessageTemplate, dom.inputMessageSubject, dom.inputMessageTimeout].forEach((e) => {

diff --git a/ui/modules/things/searchFilter.js b/ui/modules/things/searchFilter.js
@@ -48,9 +48,11 @@ export async function ready() {
   Utils.getAllElementsById(dom);
 
   dom.filterList.addEventListener('click', (event) => {
-    dom.searchFilterEdit.value = event.target.textContent;
-    checkIfFavourite();
-    Things.searchThings(event.target.textContent);
+    if (event.target && event.target.classList.contains('dropdown-item')) {
+      dom.searchFilterEdit.value = event.target.textContent;
+      checkIfFavourite();
+      Things.searchThings(event.target.textContent);
+    }
   });
 
   dom.searchThings.onclick = () => {

diff --git a/ui/modules/things/wotDescription.js b/ui/modules/things/wotDescription.js
@@ -27,8 +27,11 @@ export function WoTDescription(targetTab, forFeature) {
     const tabId = Utils.addTab(
         document.getElementById(targetTab.itemsId),
         document.getElementById(targetTab.contentId),
-        'Description',
+        'WoT TD',
         await( await fetch('modules/things/wotDescription.html')).text(),
+        'Generated WoT Thing Description. This requires a valid reference to a WoT Thing Model in the ' +
+        (forFeature ? 'Feature' : 'Thing') +
+        ' definition. The Ditto environment must have WoT support enabled.'
     );
 
     tabLink = document.querySelector(`a[data-bs-target="#${tabId}"]`);

diff --git a/ui/modules/utils.js b/ui/modules/utils.js
@@ -150,13 +150,18 @@ export function addDropDownEntries(target, items, isHeader) {
  * @param {HTMLElement} tabContentsNode root node for the tab contents
  * @param {String} title name of the new tab
  * @param {String} contentHTML tab content for the new tab
+ * @param {String} toolTip (optional) toolip on the tab item
  * @return {String} id of the tabpane content node
  */
-export function addTab(tabItemsNode, tabContentsNode, title, contentHTML) {
+export function addTab(tabItemsNode, tabContentsNode, title, contentHTML, toolTip) {
   const id = 'tab' + Math.random().toString(36).replace('0.', '');
 
   const li = document.createElement('li');
   li.classList.add('nav-item');
+  if (toolTip) {
+    li.setAttribute('data-bs-toggle', 'tooltip');
+    li.setAttribute('title', toolTip);
+  }
   li.innerHTML = `<a class="nav-link" data-bs-toggle="tab" data-bs-target="#${id}">${title}</a>`;
   tabItemsNode.appendChild(li);