Home-IoT/esphome
1
0
Fork 0
mirror of https://github.com/esphome/esphome.git synced 2024-11-14 02:58:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Added save & validate button in editor window (#511)

Browse source 
* Added save & validate button in editor window

It felt a bit cumbersome to save&close the editor window, then click the validate button, see an error, locate your device from the list and open the editor again. Now it is possible to save&validate a configuration without leaving the editor.

* Changed modal behavior to close one before the other

* set data-node dynamically

* show upload button on successful validation

* Use disabled class

* Update index.html

* Fix mistake


Co-authored-by: Otto Winter <otto@otto-winter.com>
This commit is contained in:
gitolicious 2019-05-08 15:39:22 +02:00 committed by Otto Winter
parent f2506bb23b
commit 86848b39db
2 changed files with 10 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
esphome/dashboard/static/esphome.js
View file

@ -430,6 +430,9 @@ const validateModal = new LogModalElem({
name: 'validate', name: 'validate',
onPrepare: (modalElem, config) => { onPrepare: (modalElem, config) => {
modalElem.querySelector(".stop-logs").innerHTML = "Stop"; modalElem.querySelector(".stop-logs").innerHTML = "Stop";
modalElem.querySelector(".action-edit").setAttribute('data-node', validateModal.activeConfig);
modalElem.querySelector(".action-upload").setAttribute('data-node', validateModal.activeConfig);
modalElem.querySelector(".action-upload").classList.add('disabled');
}, },
onProcessExit: (modalElem, code) => { onProcessExit: (modalElem, code) => {
if (code === 0) { if (code === 0) {
@ -437,6 +440,7 @@ const validateModal = new LogModalElem({
html: `<code class="inlinecode">${validateModal.activeConfig}</code> is valid 👍`, html: `<code class="inlinecode">${validateModal.activeConfig}</code> is valid 👍`,
displayLength: 5000, displayLength: 5000,
}); });
modalElem.querySelector(".action-upload").classList.remove('disabled');
} else { } else {
M.toast({ M.toast({
html: `<code class="inlinecode">${validateModal.activeConfig}</code> is invalid 😕`, html: `<code class="inlinecode">${validateModal.activeConfig}</code> is invalid 😕`,
@ -552,6 +556,7 @@ editor.session.setOption('useSoftTabs', true);
editor.session.setOption('tabSize', 2); editor.session.setOption('tabSize', 2);
const saveButton = editModalElem.querySelector(".save-button"); const saveButton = editModalElem.querySelector(".save-button");
const saveValidateButton = editModalElem.querySelector(".save-validate-button");
const saveEditor = () => { const saveEditor = () => {
fetch(`./edit?configuration=${activeEditorConfig}`, { fetch(`./edit?configuration=${activeEditorConfig}`, {
credentials: "same-origin", credentials: "same-origin",
@ -572,12 +577,14 @@ editor.commands.addCommand({
}); });
saveButton.addEventListener('click', saveEditor); saveButton.addEventListener('click', saveEditor);
saveValidateButton.addEventListener('click', saveEditor);
document.querySelectorAll(".action-edit").forEach((btn) => { document.querySelectorAll(".action-edit").forEach((btn) => {
btn.addEventListener('click', (e) => { btn.addEventListener('click', (e) => {
activeEditorConfig = e.target.getAttribute('data-node'); activeEditorConfig = e.target.getAttribute('data-node');
const modalInstance = M.Modal.getInstance(editModalElem); const modalInstance = M.Modal.getInstance(editModalElem);
const filenameField = editModalElem.querySelector('.filename'); const filenameField = editModalElem.querySelector('.filename');
editModalElem.querySelector(".save-validate-button").setAttribute('data-node', activeEditorConfig);
filenameField.innerHTML = activeEditorConfig; filenameField.innerHTML = activeEditorConfig;
fetch(`./edit?configuration=${activeEditorConfig}`, {credentials: "same-origin"}) fetch(`./edit?configuration=${activeEditorConfig}`, {credentials: "same-origin"})

3
esphome/dashboard/templates/index.html
View file

@ -147,6 +147,8 @@
<pre class="log"></pre> <pre class="log"></pre>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a class="modal-close waves-effect waves-green btn-flat action-edit">Edit</a>
<a class="modal-close waves-effect waves-green btn-flat action-upload">Upload</a>
<a class="modal-close waves-effect waves-green btn-flat stop-logs">Stop</a> <a class="modal-close waves-effect waves-green btn-flat stop-logs">Stop</a>
</div> </div>
</div> </div>
@ -430,6 +432,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a class="waves-effect waves-green btn-flat save-button">Save</a> <a class="waves-effect waves-green btn-flat save-button">Save</a>
<a class="modal-close waves-effect waves-green btn-flat action-validate save-validate-button">Save &amp; Validate</a>
<a class="modal-close waves-effect waves-green btn-flat">Close</a> <a class="modal-close waves-effect waves-green btn-flat">Close</a>
</div> </div>
</div> </div>