Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add a tab "Message to Thing" to send thing messages * add a loading spinner to the "Send" (message) button and deactivate it while sending * update a complete Thing using "PATCH" and with the new 3.4.0 header "if-equal: skip-minimizing-merge" * only send eTag if it could be retrieved when updating complete thing * added missing "ilike" predicate to the search slot Signed-off-by: Thomas Jäckle <thomas.jaeckle@beyonnex.io>
- Loading branch information
Showing
9 changed files
with
272 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| <!-- | ||
| ~ Copyright (c) 2023 Contributors to the Eclipse Foundation | ||
| ~ | ||
| ~ See the NOTICE file(s) distributed with this work for additional | ||
| ~ information regarding copyright ownership. | ||
| ~ | ||
| ~ This program and the accompanying materials are made available under the | ||
| ~ terms of the Eclipse Public License 2.0 which is available at | ||
| ~ http://www.eclipse.org/legal/epl-2.0 | ||
| ~ | ||
| ~ SPDX-License-Identifier: EPL-2.0 | ||
| --> | ||
| <div class="tab-pane container fade no-margin"> | ||
| <div class="resizable_flex_column"> | ||
| <div class="input-group input-group-sm mb-1 mt-1 has-validation"> | ||
| <label class="input-group-text">Subject and Timeout</label> | ||
| <input type="text" class="form-control" id="inputThingMessageSubject"></input> | ||
| <input type="number" class="form-control form-control-sm" id="inputThingMessageTimeout" value="10"></input> | ||
| <button class="btn btn-outline-secondary btn-sm" id="buttonThingMessageSend"> | ||
| <i class="bi bi-send"></i> | ||
| Send | ||
| <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> | ||
| </button> | ||
| <div class="invalid-feedback"></div> | ||
| </div> | ||
| <div class="input-group input-group-sm mb-1 has-validation"> | ||
| <label class="input-group-text">Template</label> | ||
| <div class="btn-group dropend"> | ||
| <button id="buttonThingMessageFavorite" class="btn btn-outline-secondary btn-sm" data-bs-toggle="tooltip" | ||
| title="Save favorite for message on this feature"> | ||
| <i id="favIconThingMessage" class="bi bi-star"></i> | ||
| </button> | ||
| <button class="btn btn-outline-secondary btn-sm dropdown-toggle dropdown-toggle-split" | ||
| data-bs-toggle="dropdown"></button> | ||
| <ul id="ulThingMessageTemplates" class="dropdown-menu" style="position: fixed; top: auto;"> | ||
| </ul> | ||
| </div> | ||
| <input type="text" class="form-control" id="inputThingMessageTemplate"> | ||
| <div class="invalid-feedback"></div> | ||
| </div> | ||
| <div class="input-group input-group-sm" style="flex-grow: 1; display: flex;"> | ||
| <label class="input-group-text">Payload<br>and<br>Response</label> | ||
| <div class="ace_container" style="flex-grow: 1;"> | ||
| <div class="script_editor" id="acePayloadThingMessage"></div> | ||
| </div> | ||
| <div class="ace_container" style="flex-grow: 1;"> | ||
| <div class="script_editor" id="aceResponseThingMessage"></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| /* | ||
| * Copyright (c) 2023 Contributors to the Eclipse Foundation | ||
| * | ||
| * See the NOTICE file(s) distributed with this work for additional | ||
| * information regarding copyright ownership. | ||
| * | ||
| * This program and the accompanying materials are made available under the | ||
| * terms of the Eclipse Public License 2.0 which is available at | ||
| * http://www.eclipse.org/legal/epl-2.0 | ||
| * | ||
| * SPDX-License-Identifier: EPL-2.0 | ||
| */ | ||
|
|
||
| /* eslint-disable require-jsdoc */ | ||
| import * as API from '../api.js'; | ||
| import * as Environments from '../environments/environments.js'; | ||
| import * as Utils from '../utils.js'; | ||
| import messagesHTML from './thingMessages.html'; | ||
| import * as Things from './things.js'; | ||
|
|
||
| const dom = { | ||
| inputThingMessageSubject: null, | ||
| inputThingMessageTimeout: null, | ||
| inputThingMessageTemplate: null, | ||
| buttonThingMessageSend: null, | ||
| buttonThingMessageFavorite: null, | ||
| ulThingMessageTemplates: null, | ||
| favIconThingMessage: null, | ||
| }; | ||
|
|
||
| let acePayload; | ||
| let aceResponse; | ||
|
|
||
| /** | ||
| * Initializes components. Should be called after DOMContentLoaded event | ||
| */ | ||
| export async function ready() { | ||
| Environments.addChangeListener(onEnvironmentChanged); | ||
|
|
||
| Utils.addTab( | ||
| document.getElementById('tabItemsThing'), | ||
| document.getElementById('tabContentThing'), | ||
| 'Message to Thing', | ||
| messagesHTML, | ||
| ); | ||
|
|
||
| Utils.getAllElementsById(dom); | ||
|
|
||
| acePayload = Utils.createAceEditor('acePayloadThingMessage', 'ace/mode/json'); | ||
| aceResponse = Utils.createAceEditor('aceResponseThingMessage', 'ace/mode/json', true); | ||
|
|
||
|
|
||
| dom.buttonThingMessageSend.onclick = () => { | ||
| Utils.assert(dom.inputThingMessageSubject.value, 'Please give a Subject', dom.inputThingMessageSubject); | ||
| Utils.assert(dom.inputThingMessageTimeout.value, 'Please give a timeout', dom.inputThingMessageTimeout); | ||
| dom.buttonThingMessageSend.classList.add('busy'); | ||
| dom.buttonThingMessageSend.disabled = true; | ||
| messageThing(); | ||
| }; | ||
|
|
||
| dom.buttonThingMessageFavorite.onclick = () => { | ||
| const templateName = dom.inputThingMessageTemplate.value; | ||
| Utils.assert(templateName, 'Please give a name for the template', dom.inputThingMessageTemplate); | ||
| Environments.current().messageTemplates['/'] = Environments.current().messageTemplates['/'] || {}; | ||
| if (Object.keys(Environments.current().messageTemplates['/']).includes(templateName) && | ||
| dom.favIconThingMessage.classList.contains('bi-star-fill')) { | ||
| dom.favIconThingMessage.classList.replace('bi-star-fill', 'bi-star'); | ||
| delete Environments.current().messageTemplates['/'][templateName]; | ||
| } else { | ||
| dom.favIconThingMessage.classList.replace('bi-star', 'bi-star-fill'); | ||
| Environments.current().messageTemplates['/'][templateName] = { | ||
| subject: dom.inputThingMessageSubject.value, | ||
| timeout: dom.inputThingMessageTimeout.value, | ||
| payload: JSON.parse(acePayload.getValue()), | ||
| }; | ||
| acePayload.session.getUndoManager().markClean(); | ||
| } | ||
| Environments.environmentsJsonChanged('messageTemplates'); | ||
| }; | ||
|
|
||
| dom.ulThingMessageTemplates.addEventListener('click', (event) => { | ||
| if (event.target && event.target.classList.contains('dropdown-item')) { | ||
| dom.favIconThingMessage.classList.replace('bi-star', 'bi-star-fill'); | ||
| const template = Environments.current().messageTemplates['/'][event.target.textContent]; | ||
| dom.inputThingMessageTemplate.value = event.target.textContent; | ||
| dom.inputThingMessageSubject.value = template.subject; | ||
| dom.inputThingMessageTimeout.value = template.timeout; | ||
| acePayload.setValue(JSON.stringify(template.payload, null, 2), -1); | ||
| acePayload.session.getUndoManager().markClean(); | ||
| } | ||
| }); | ||
|
|
||
| [dom.inputThingMessageTemplate, dom.inputThingMessageSubject, dom.inputThingMessageTimeout].forEach((e) => { | ||
| e.addEventListener('change', () => { | ||
| dom.favIconThingMessage.classList.replace('bi-star-fill', 'bi-star'); | ||
| }); | ||
| }); | ||
|
|
||
| acePayload.on('input', () => { | ||
| if (!acePayload.session.getUndoManager().isClean()) { | ||
| dom.favIconThingMessage.classList.replace('bi-star-fill', 'bi-star'); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * Calls Ditto to send a message with the parameters of the fields in the UI | ||
| */ | ||
| function messageThing() { | ||
| const payload = acePayload && acePayload.getValue().length > 0 && JSON.parse(acePayload.getValue()); | ||
| aceResponse.setValue(''); | ||
| API.callDittoREST('POST', '/things/' + Things.theThing.thingId + | ||
| '/inbox/messages/' + dom.inputThingMessageSubject.value + | ||
| '?timeout=' + dom.inputThingMessageTimeout.value, | ||
| payload, | ||
| ).then((data) => { | ||
| dom.buttonThingMessageSend.classList.remove('busy'); | ||
| dom.buttonThingMessageSend.disabled = false; | ||
| if (dom.inputThingMessageTimeout.value > 0) { | ||
| aceResponse.setValue(JSON.stringify(data, null, 2), -1); | ||
| } | ||
| }).catch((err) => { | ||
| dom.buttonThingMessageSend.classList.remove('busy'); | ||
| dom.buttonThingMessageSend.disabled = false; | ||
| aceResponse.setValue(''); | ||
| }); | ||
| } | ||
|
|
||
| function onEnvironmentChanged(modifiedField) { | ||
| Environments.current()['messageTemplates'] = Environments.current()['messageTemplates'] || {}; | ||
|
|
||
| if (!modifiedField) { | ||
| clearAllFields(); | ||
| } | ||
| if (modifiedField === 'messageTemplates') { | ||
| refillTemplates(); | ||
| } | ||
| } | ||
|
|
||
| function clearAllFields() { | ||
| dom.favIconThingMessage.classList.replace('bi-star-fill', 'bi-star'); | ||
| dom.inputThingMessageTemplate.value = null; | ||
| dom.inputThingMessageSubject.value = null; | ||
| dom.inputThingMessageTimeout.value = '10'; | ||
| acePayload.setValue(''); | ||
| aceResponse.setValue(''); | ||
| dom.ulThingMessageTemplates.innerHTML = ''; | ||
| } | ||
|
|
||
| function refillTemplates() { | ||
| dom.ulThingMessageTemplates.innerHTML = ''; | ||
| Utils.addDropDownEntries(dom.ulThingMessageTemplates, ['Saved message templates'], true); | ||
| if (Environments.current().messageTemplates['/']) { | ||
| Utils.addDropDownEntries( | ||
| dom.ulThingMessageTemplates, | ||
| Object.keys(Environments.current().messageTemplates['/']), | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.