thor/esphome-dev
1
0
Fork 0
mirror of https://github.com/Threnklyn/esphome-dev.git synced 2026-06-06 21:09:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

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