Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Allow to save message templates for a feature
* Fixed environment layout for ace editor * Fixed deselection in things table * Support to load WoT TD for things and features Signed-off-by: thfries <thomas.fries0@gmail.com>
- Loading branch information
Showing
13 changed files
with
386 additions
and
85 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| <!-- | ||
| ~ Copyright (c) 2022 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="inputMessageSubject"></input> | ||
| <input type="number" class="form-control form-control-sm" id="inputMessageTimeout" value="10"></input> | ||
| <button class="btn btn-outline-secondary btn-sm" id="buttonMessageSend"> | ||
| <i class="bi bi-send"></i> | ||
| Send | ||
| </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="buttonMessageFavourite" class="btn btn-outline-secondary btn-sm" data-bs-toggle="tooltip" | ||
| title="Save favourite for message on this feature"> | ||
| <i id="favIconMessage" 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="ulMessageTemplates" class="dropdown-menu" style="position: fixed; top: auto;"> | ||
| </ul> | ||
| </div> | ||
| <input type="text" class="form-control" id="inputMessageTemplate"> | ||
| <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="acePayload"></div> | ||
| </div> | ||
| <div class="ace_container" style="flex-grow: 1;"> | ||
| <div class="script_editor" id="aceResponse"></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,163 @@ | ||
| /* | ||
| * Copyright (c) 2022 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 * as Things from './things.js'; | ||
| import * as Features from './features.js'; | ||
|
|
||
| const dom = { | ||
| inputMessageSubject: null, | ||
| inputMessageTimeout: null, | ||
| inputMessageTemplate: null, | ||
| buttonMessageSend: null, | ||
| buttonMessageFavourite: null, | ||
| ulMessageTemplates: null, | ||
| favIconMessage: null, | ||
| theFeatureId: null, | ||
| tableValidationFeature: null, | ||
| }; | ||
|
|
||
| let acePayload; | ||
| let aceResponse; | ||
|
|
||
| /** | ||
| * Initializes components. Should be called after DOMContentLoaded event | ||
| */ | ||
| export async function ready() { | ||
| Environments.addChangeListener(onEnvironmentChanged); | ||
| Features.addChangeListener(onFeatureChanged); | ||
|
|
||
| Utils.addTab( | ||
| document.getElementById('tabItemsFeatures'), | ||
| document.getElementById('tabContentFeatures'), | ||
| 'Message to Feature', | ||
| await( await fetch('modules/things/featureMessages.html')).text(), | ||
| ); | ||
|
|
||
| Utils.getAllElementsById(dom); | ||
|
|
||
| acePayload = Utils.createAceEditor('acePayload', 'ace/mode/json'); | ||
| aceResponse = Utils.createAceEditor('aceResponse', 'ace/mode/json', true); | ||
|
|
||
|
|
||
| dom.buttonMessageSend.onclick = () => { | ||
| Utils.assert(dom.theFeatureId.value, 'Please select a Feature', dom.tableValidationFeature); | ||
| Utils.assert(dom.inputMessageSubject.value, 'Please give a Subject', dom.inputMessageSubject); | ||
| Utils.assert(dom.inputMessageTimeout.value, 'Please give a timeout', dom.inputMessageTimeout); | ||
| messageFeature(); | ||
| }; | ||
|
|
||
| dom.buttonMessageFavourite.onclick = () => { | ||
| const templateName = dom.inputMessageTemplate.value; | ||
| const featureId = dom.theFeatureId.value; | ||
| 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) && | ||
| dom.favIconMessage.classList.contains('bi-star-fill')) { | ||
| dom.favIconMessage.classList.replace('bi-star-fill', 'bi-star'); | ||
| delete Environments.current().messageTemplates[featureId][templateName]; | ||
| } else { | ||
| dom.favIconMessage.classList.replace('bi-star', 'bi-star-fill'); | ||
| Environments.current().messageTemplates[featureId][templateName] = { | ||
| subject: dom.inputMessageSubject.value, | ||
| timeout: dom.inputMessageTimeout.value, | ||
| payload: JSON.parse(acePayload.getValue()), | ||
| }; | ||
| acePayload.session.getUndoManager().markClean(); | ||
| } | ||
| Environments.environmentsJsonChanged('messageTemplates'); | ||
| }; | ||
|
|
||
| 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(); | ||
| }); | ||
|
|
||
| [dom.inputMessageTemplate, dom.inputMessageSubject, dom.inputMessageTimeout].forEach((e) => { | ||
| e.addEventListener('change', () => { | ||
| dom.favIconMessage.classList.replace('bi-star-fill', 'bi-star'); | ||
| }); | ||
| }); | ||
|
|
||
| acePayload.on('input', () => { | ||
| if (!acePayload.session.getUndoManager().isClean()) { | ||
| dom.favIconMessage.classList.replace('bi-star-fill', 'bi-star'); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * Calls Ditto to send a message with the parameters of the fields in the UI | ||
| */ | ||
| function messageFeature() { | ||
| const payload = acePayload.getValue(); | ||
| aceResponse.setValue(''); | ||
| API.callDittoREST('POST', '/things/' + Things.theThing.thingId + | ||
| '/features/' + dom.theFeatureId.value + | ||
| '/inbox/messages/' + dom.inputMessageSubject.value + | ||
| '?timeout=' + dom.inputMessageTimeout.value, | ||
| payload, | ||
| ).then((data) => { | ||
| if (timeout > 0) { | ||
| aceResponse.setValue(JSON.stringify(data, null, 2), -1); | ||
| }; | ||
| }).catch((err) => { | ||
| aceResponse.setValue(''); | ||
| }); | ||
| }; | ||
|
|
||
| function onEnvironmentChanged(modifiedField) { | ||
| Environments.current()['messageTemplates'] = Environments.current()['messageTemplates'] || {}; | ||
|
|
||
| if (!modifiedField) { | ||
| clearAllFields(); | ||
| } | ||
| if (modifiedField === 'messageTemplates') { | ||
| refillTemplates(); | ||
| } | ||
| }; | ||
|
|
||
| function clearAllFields() { | ||
| dom.favIconMessage.classList.replace('bi-star-fill', 'bi-star'); | ||
| dom.inputMessageTemplate.value = null; | ||
| dom.inputMessageSubject.value = null; | ||
| dom.inputMessageTimeout.value = '10'; | ||
| acePayload.setValue('{}'); | ||
| aceResponse.setValue(''); | ||
| dom.ulMessageTemplates.innerHTML = ''; | ||
| } | ||
|
|
||
| function refillTemplates() { | ||
| dom.ulMessageTemplates.innerHTML = ''; | ||
| Utils.addDropDownEntries(dom.ulMessageTemplates, ['Saved message templates'], true); | ||
| if (dom.theFeatureId.value && Environments.current().messageTemplates[dom.theFeatureId.value]) { | ||
| Utils.addDropDownEntries( | ||
| dom.ulMessageTemplates, | ||
| Object.keys(Environments.current().messageTemplates[dom.theFeatureId.value]), | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| function onFeatureChanged(featureId) { | ||
| clearAllFields(); | ||
| refillTemplates(); | ||
| }; | ||
|
|
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
Oops, something went wrong.