some small fixes for usability and performance improvements:

* replaced requesting "_policy" with requesting "policyId"
* made it possible to define an "own" thingId when creating things, using "If-Match" and "If-None-Match" headers
* added new definition template for an example WoT ThingModel

Signed-off-by: Thomas Jaeckle <thomas.jaeckle@bosch.io>

ui/modules/policies/policies.js

@@ -220,7 +220,7 @@ function validations(entryFilled, entrySelected, subjectFilled, subjectSelected,
 }
 
 function onThingChanged(thing) {
-  dom.inputPolicyId.value = (thing && thing._policy) ? thing._policy.policyId : null;
+  dom.inputPolicyId.value = (thing && thing.policyId) ? thing.policyId : null;
   viewDirty = true;
 }
 

ui/modules/things/things.html

@@ -74,7 +74,7 @@ <h5>Things</h5>
                         <div class="resizable_flex_column">
                             <div class="input-group input-group-sm mb-1 mt-1 has-validation">
                                 <label class="input-group-text">Thing ID</label>
-                                <input type="text" class="form-control" disabled="true" id="thingId">
+                                <input type="text" class="form-control" id="thingId">
                                 <button class="btn btn-outline-secondary btn-sm" id="buttonCreateThing"
                                     data-bs-toggle="tooltip" title="Create an empty thing with a default policy">
                                     <i class="bi bi-plus-circle"></i>
@@ -88,7 +88,7 @@ <h5>Things</h5>
                                 <div class="invalid-feedback"></div>
                             </div>
                             <div class="input-group input-group-sm mb-1">
-                                <label class="input-group-text">Definition</label>
+                                <label class="input-group-text">Definition template</label>
                                 <div class="btn-group dropend">
                                     <button class="btn btn-outline-secondary btn-sm dropdown-toggle"
                                     data-bs-toggle="dropdown"></button>

ui/modules/things/things.js

@@ -78,12 +78,26 @@ export async function ready() {
 
   dom.buttonCreateThing.onclick = async () => {
     const editorValue = thingJsonEditor.getValue();
-    API.callDittoREST('POST', '/things', editorValue === '' ? {} : JSON.parse(editorValue))
+    if (dom.thingId.value !== undefined && dom.thingId.value !== '') {
+      API.callDittoREST('PUT',
+                        '/things/' + dom.thingId.value,
+                        editorValue === '' ? {} : JSON.parse(editorValue),
+                        {
+                          'if-none-match': '*',
+                        }
+      ).then((data) => {
+          refreshThing(data.thingId, () => {
+            getThings([data.thingId]);
+          });
+        });
+    } else {
+      API.callDittoREST('POST', '/things', editorValue === '' ? {} : JSON.parse(editorValue))
         .then((data) => {
           refreshThing(data.thingId, () => {
             getThings([data.thingId]);
           });
         });
+    }
   };
 
   dom.buttonSaveThing.onclick = () => {
@@ -148,7 +162,7 @@ function fillThingsTable(thingsList) {
   });
   if (!thingSelected) {
     setTheThing(null);
-  };
+  }
 
   function fillHeaderRow() {
     dom.thingsTableHead.innerHTML = '';
@@ -197,7 +211,7 @@ export function searchThings(filter, cursor) {
 
   API.callDittoREST('GET',
       '/search/things?' + Fields.getQueryParameter() +
-      ((filter && filter != '') ? '&filter=' + encodeURIComponent(filter) : '') +
+      ((filter && filter !== '') ? '&filter=' + encodeURIComponent(filter) : '') +
       '&option=sort(%2BthingId)' +
       // ',size(3)' +
       (cursor ? ',cursor(' + cursor + ')' : ''),
@@ -239,6 +253,9 @@ function modifyThing(method) {
   API.callDittoREST(method,
       '/things/' + dom.thingId.value,
       method === 'PUT' ? JSON.parse(thingJsonEditor.getValue()) : null,
+      {
+        'if-match': '*',
+      }
   ).then(() => {
     method === 'PUT' ? refreshThing(dom.thingId.value) : SearchFilter.performLastSearch();
   });
@@ -252,7 +269,7 @@ function modifyThing(method) {
 export function refreshThing(thingId, successCallback) {
   API.callDittoREST('GET',
       `/things/${thingId}?` +
-      'fields=thingId%2Cdefinition%2Cattributes%2Cfeatures%2C_created%2C_modified%2C_revision%2C_policy')
+      'fields=thingId%2CpolicyId%2Cdefinition%2Cattributes%2Cfeatures%2C_created%2C_modified%2C_revision')
       .then((thing) => {
         setTheThing(thing);
         successCallback && successCallback();
@@ -276,7 +293,7 @@ function setTheThing(thingJson) {
     dom.thingDetails.innerHTML = '';
     if (theThing) {
       Utils.addTableRow(dom.thingDetails, 'thingId', false, true, theThing.thingId);
-      Utils.addTableRow(dom.thingDetails, 'policyId', false, true, theThing._policy.policyId);
+      Utils.addTableRow(dom.thingDetails, 'policyId', false, true, theThing.policyId);
       Utils.addTableRow(dom.thingDetails, 'definition', false, true, theThing.definition ?? '');
       Utils.addTableRow(dom.thingDetails, 'revision', false, true, theThing._revision);
       Utils.addTableRow(dom.thingDetails, 'created', false, true, theThing._created);
@@ -292,8 +309,6 @@ function setTheThing(thingJson) {
       delete thingCopy['_revision'];
       delete thingCopy['_created'];
       delete thingCopy['_modified'];
-      delete thingCopy['_policy'];
-      thingCopy.policyId = theThing._policy.policyId;
       thingJsonEditor.setValue(JSON.stringify(thingCopy, null, 2), -1);
     } else {
       dom.thingId.value = null;

ui/templates/thingTemplates.json

@@ -1,5 +1,8 @@
 {
   "(empty thing)": {},
+  "WoT ThingModel 'floor-lamp' 1.0.0": {
+    "definition": "https://eclipse.github.io/ditto-examples/wot/models/floor-lamp-1.0.0.tm.jsonld"
+  },
   "com.acme:coffeebrewer:0.1.0": {
     "definition": "com.acme:coffeebrewer:0.1.0",
     "attributes": {