Improvements from review: - Table header for things table - Moved fie…

…lds editor into modal - Load things table on startup - Environments made more user friendly Signed-off-by: thfries <thomas.fries0@gmail.com>
eclipse-ditto · Jul 3, 2022 · f63c6b9 · f63c6b9
1 parent efae5e6
commit f63c6b9
Show file tree

Hide file tree

Showing 14 changed files with 430 additions and 186 deletions.
diff --git a/ui/index.css b/ui/index.css
@@ -24,6 +24,17 @@
     --bs-table-hover-color: white;
 }
 
+thead {
+    position: sticky;
+    top: 0;
+    background-color: white;
+    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
+}
+
+tbody {
+    border-top: 0 !important;
+}
+
 body { 
     padding-top: 60px;
 }

diff --git a/ui/index.html b/ui/index.html
@@ -34,18 +34,18 @@
             <a class="navbar-brand">explorer</a>
             <div class="navbar-collapse collapse w-100 justify-content-center" id="mainNavbar">
                 <ul class="navbar-nav text-center">
-                    <li class="nav-item mainUser">
-                        <a class="nav-link active" data-bs-target="#collapseThings:not(.show)" data-bs-toggle="collapse" href="#">Things</a>
+                    <li class="nav-item mainUser" id="tabThings">
+                        <a class="nav-link active" data-bs-target="#collapseThings:not(.show)" data-bs-toggle="collapse">Things</a>
                     </li>
                     <li class="nav-item mainUser" id="tabEnvironments">
-                        <a class="nav-link" data-bs-target="#collapseSettings:not(.show)" data-bs-toggle="collapse" href="#">Environments</a>
+                        <a class="nav-link" data-bs-target="#collapseSettings:not(.show)" data-bs-toggle="collapse">Environments</a>
                     </li>
                 </ul>
             </div>
             <ul class="navbar-nav w-50">
                 <a class="nav-link active">Environment:</a>
                 <select class="form-select form-select-sm" id="environmentSelector" style="margin-top: auto; margin-bottom: auto;"></select>  
-                <button id="authorize" class="btn btn-outline-light btn-sm" style="margin-left:5px;" data-bs-toggle="modal" data-bs-target=".bd-example-modal-sm">Authorize</button>          
+                <button id="authorize" class="btn btn-outline-light btn-sm" style="margin-left:5px;" data-bs-toggle="modal" data-bs-target="#authorizationModal">Authorize</button>          
             </ul>
         </div>
     </nav>
@@ -75,6 +75,8 @@
             <div class="toast-body" id=successBody></div>
         </div>        
     </div>
+    <!-- Modals ------------------------------------------------------------------------------->
     <div id="authorizationHTML"></div>
+    <div id="fieldsHTML"></div>
 </body>
 </html>
diff --git a/ui/main.js b/ui/main.js
@@ -24,20 +24,28 @@ let mainNavbar;
 
 document.addEventListener('DOMContentLoaded', async function() {
   document.getElementById('thingsHTML').innerHTML = await (await fetch('modules/things/things.html')).text();
+  document.getElementById('fieldsHTML').innerHTML = await (await fetch('modules/things/fields.html')).text();
   document.getElementById('featuresHTML').innerHTML = await (await fetch('modules/things/features.html')).text();
   document.getElementById('environmentsHTML').innerHTML =
       await (await fetch('modules/environments/environments.html')).text();
   document.getElementById('authorizationHTML').innerHTML =
       await (await fetch('modules/environments/authorization.html')).text();
 
   await Things.ready();
+  Attributes.ready();
   await Fields.ready();
   await SearchFilter.ready();
-  Attributes.ready();
   Features.ready();
   Authorization.ready();
   Environments.ready();
 
+  // make dropdowns not cutting off
+  new bootstrap.Dropdown(document.querySelector('.dropdown-toggle'), {
+    popperConfig: {
+      strategy: 'fixed',
+    },
+  });
+
   // make top navbar activating
   mainNavbar = document.getElementById('mainNavbar');
   mainNavbar.querySelectorAll('.nav-link').forEach((e) => {
@@ -74,4 +82,6 @@ document.addEventListener('DOMContentLoaded', async function() {
       }
     });
   });
+
+  SearchFilter.performLastSearch();
 });
diff --git a/ui/modules/environments/authorization.html b/ui/modules/environments/authorization.html
@@ -10,7 +10,7 @@
   ~
   ~ SPDX-License-Identifier: EPL-2.0
   -->
-<div class="modal fade bd-example-modal-sm" tabindex="-1">
+<div id="authorizationModal" class="modal fade" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">

diff --git a/ui/modules/environments/environments.html b/ui/modules/environments/environments.html
@@ -10,10 +10,62 @@
   ~
   ~ SPDX-License-Identifier: EPL-2.0
   -->
-<h5>Settings</h5>
-<hr/>
-<div style="position: relative; height:600px">
-    <div>
-        <div class="script_editor" id="settingsEditor"></div>
+<h5>Environments</h5>
+<hr />
+<div class="row resizable_pane" style="height:300px">
+    <div class="col-md-4 resizable_flex_column">
+        <div class="input-group input-group-sm mb-1 mt-1">
+            <label class="input-group-text">Name</label>
+            <input type="text" class="form-control" id="inputEnvironmentName">
+            <button class="btn btn-outline-secondary btn-sm" id="buttonCreateEnvironment">
+                <i class="bi bi-plus-square"></i>
+            </button>
+            <button class="btn btn-outline-secondary btn-sm" id="buttonDeleteEnvironment">
+                <i class="bi bi-trash3"></i>
+            </button>
+            <div class="invalid-feedback"></div>
+        </div>
+        <div class="table-wrap">
+            <table class="table table-striped table-hover table-sm">
+                <tbody id="tbodyEnvironments"></tbody>
+            </table>
+        </div>
     </div>
-</div>
+    <div class="col-md-8 resizable_flex_column">
+        <ul class="nav nav-tabs">
+            <li class="nav-item">
+                <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabEnvDetails">Environment Details</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tabEnvJson">Full JSON</a>
+            </li>
+        </ul>
+        <div class="tab-content" style="flex-grow: 1;">
+            <div class="tab-pane container active no-margin" id="tabEnvDetails">
+                <div class="input-group input-group-sm mt-1">
+                    <label class="input-group-text" data-bs-toggle="tooltip"
+                        title="URI including protocol, host and port (e.g. http://localhost:8080)">API URI</label>
+                    <input type="text" class="form-control form-control-sm" id="inputApiUri"></input>
+                    <button class="btn btn-outline-secondary btn-sm button_round_left" id="buttonUpdateFields"
+                        data-bs-toggle="tooltip" title="Save selected field details">
+                        <i class="bi bi-save2"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="tab-pane container no-margin" id="tabEnvJson">
+                <div class="input-group input-group-sm mb-1">
+                    <div class="form-control-sm" style="flex-grow: 1;"></div>
+                    <button class="btn btn-outline-secondary btn-sm button_round_left" id="buttonUpdateJson"
+                        data-bs-toggle="tooltip" title="Save selected environment json">
+                        <i class="bi bi-save2"></i>
+                    </button>
+                </div>
+                <div class="ace_container" style="height: 100%;">
+                    <div>
+                        <div class="script_editor" id="settingsEditor"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/ui/modules/environments/environments.js b/ui/modules/environments/environments.js
@@ -14,7 +14,6 @@
 import * as API from '../api.js';
 /* eslint-disable arrow-parens */
 /* eslint-disable prefer-const */
-/* eslint-disable no-invalid-this */
 /* eslint-disable require-jsdoc */
 import * as Utils from '../utils.js';
 
@@ -29,17 +28,23 @@ let environments = {
   },
 };
 
-let theEnv;
 let settingsEditor;
 
 let dom = {
   environmentSelector: null,
+  buttonCreateEnvironment: null,
+  buttonDeleteEnvironment: null,
+  buttonUpdateFields: null,
+  buttonUpdateJson: null,
+  inputEnvironmentName: null,
+  inputApiUri: null,
+  tbodyEnvironments: null,
 };
 
 let observers = [];
 
 export function current() {
-  return environments[theEnv];
+  return environments[dom.environmentSelector.value];
 };
 
 export function addChangeListener(observer) {
@@ -60,65 +65,96 @@ export function ready() {
 
   settingsEditor = ace.edit('settingsEditor');
   settingsEditor.session.setMode('ace/mode/json');
-  settingsEditor.setValue(JSON.stringify(environments, null, 2), -1);
-  environmentsJsonChanged();
 
-  settingsEditor.on('blur', () => {
-    environments = JSON.parse(settingsEditor.getValue());
+  dom.buttonUpdateJson.onclick = () => {
+    environments[dom.inputEnvironmentName.value] = JSON.parse(settingsEditor.getValue());
     environmentsJsonChanged();
+  };
+
+  dom.buttonUpdateFields.onclick = () => {
+    environments[dom.inputEnvironmentName.value].api_uri = dom.inputApiUri.value;
+    environmentsJsonChanged();
+  };
+
+  dom.tbodyEnvironments.addEventListener('click', (event) => {
+    if (event.target && event.target.tagName === 'TD') {
+      dom.inputEnvironmentName.value = event.target.parentNode.id;
+      updateEnvEditors();
+    }
   });
 
-  document.getElementById('tabEnvironments').onclick = () => {
-    settingsEditor.setValue(JSON.stringify(environments, null, 2), -1);
+  dom.buttonCreateEnvironment.onclick = () => {
+    Utils.assert(dom.inputEnvironmentName.value, 'Please provide an environment name', dom.inputEnvironmentName);
+    Utils.assert(!environments[dom.inputEnvironmentName.value], 'Name already used', dom.inputEnvironmentName);
+    environments[dom.inputEnvironmentName.value] = {
+      api_uri: '',
+    };
+    environmentsJsonChanged();
+  };
+
+  dom.buttonDeleteEnvironment.onclick = () => {
+    Utils.assert(dom.inputEnvironmentName.value, 'No environment selected');
+    Utils.assert(Object.keys(environments).length >= 2, 'At least one environment is required');
+    delete environments[dom.inputEnvironmentName.value];
+    dom.inputEnvironmentName.value = null;
+    environmentsJsonChanged();
   };
 
+  // Ensure that ace editor to refresh when updated while hidden
+  document.querySelector('a[data-bs-target="#tabEnvJson"]').addEventListener('shown.bs.tab', () => {
+    settingsEditor.renderer.updateFull();
+  });
+
+  // Ensure to togle right Ditto user for rest or dev ops api
   document.querySelectorAll('.mainUser,.devOpsUser').forEach((menuTab) => {
     menuTab.addEventListener('click', (event) => {
       API.setAuthHeader(event.target.parentNode.classList.contains('devOpsUser'));
     });
   });
 
-  document.getElementById('environmentSelector').onchange = (event) => {
-    theEnv = event.target.value;
-    activateEnvironment();
-  };
-}
+  document.getElementById('environmentSelector').onchange = notifyAll;
 
-export function togglePinnedThing(evt) {
-  if (evt.target.checked) {
-    current().pinnedThings.push(this.id);
-  } else {
-    const index = current().pinnedThings.indexOf(this.id);
-    if (index > -1) {
-      current().pinnedThings.splice(index, 1);
-    };
-  };
   environmentsJsonChanged();
-};
+}
 
 export function environmentsJsonChanged() {
   localStorage.setItem('ditto-ui-env', JSON.stringify(environments));
 
-  dom.environmentSelector.innerHTML = '';
-  if (theEnv && !current()) {
-    theEnv = null;
+  updateEnvSelector();
+  updateEnvEditors();
+  updateEnvTable();
+  notifyAll();
+}
+
+function updateEnvSelector() {
+  if (!dom.environmentSelector.value || !environments[dom.environmentSelector.value]) {
+    dom.environmentSelector.value = environments[0];
   };
-  for (const key of Object.keys(environments)) {
+
+  dom.environmentSelector.innerHTML = '';
+  Object.keys(environments).forEach((key) => {
+    // todo: replace with Utils.addDropDownEntries(dom.environmentSelector, [key]);
     let option = document.createElement('option');
     option.text = key;
     dom.environmentSelector.add(option);
-    if (!theEnv) {
-      theEnv = key;
-    };
-  };
-  dom.environmentSelector.value = theEnv;
-  activateEnvironment();
+  });
 }
 
-function activateEnvironment() {
-  if (!current()['pinnedThings']) {
-    current().pinnedThings = [];
-  };
+function updateEnvEditors() {
+  const selectedEnvironment = environments[dom.inputEnvironmentName.value];
+  if (selectedEnvironment) {
+    settingsEditor.setValue(JSON.stringify(selectedEnvironment, null, 2), -1);
+    dom.inputApiUri.value = selectedEnvironment.api_uri;
+  } else {
+    dom.inputEnvironmentName.value = null;
+    settingsEditor.setValue('');
+    dom.inputApiUri.value = null;
+  }
+}
 
-  notifyAll();
+function updateEnvTable() {
+  dom.tbodyEnvironments.innerHTML = '';
+  Object.keys(environments).forEach((key) => {
+    Utils.addTableRow(dom.tbodyEnvironments, key, null, key === dom.inputEnvironmentName.value);
+  });
 }
diff --git a/ui/modules/things/features.js b/ui/modules/things/features.js
@@ -61,7 +61,11 @@ export function ready() {
   featurePropertiesEditor.session.setMode('ace/mode/json');
   featureDesiredPropertiesEditor.session.setMode('ace/mode/json');
 
-  featurePropertiesEditor.on('dblclick', function() {
+  featurePropertiesEditor.on('dblclick', (event) => {
+    if (!event.domEvent.shiftKey) {
+      return;
+    }
+
     setTimeout(() => {
       const token = featurePropertiesEditor.getSelectedText();
       if (token) {
@@ -71,7 +75,7 @@ export function ready() {
           path: path,
           resultType: 'pointer',
         });
-        Fields.setFieldPath('features/' + dom.theFeatureId.value + '/properties' + res);
+        Fields.proposeNewField('features/' + dom.theFeatureId.value + '/properties' + res);
       };
     }, 10);
   });
@@ -188,6 +192,9 @@ function onThingChanged(thing) {
   }
 }
 
+/**
+ * Calls Ditto to send a message with the parameters of the fields in the UI
+ */
 function messageFeature() {
   const subject = dom.messageFeatureSubject.value;
   const feature = dom.theFeatureId.value;