mirror of
https://github.com/esphome/esphome.git
synced 2024-11-10 17:27:45 +01:00
added download, edit and retry buttons to upload modal (#557)
* added download, edit and retry buttons to upload modal * changed hide for disabled, resorted buttons * moved upload action buttons to menu * button changes moved edit button from menu in upload modal swapped validation button for upload in edit modal
This commit is contained in:
parent
a9ae70cff1
commit
6f3c126805
2 changed files with 35 additions and 4 deletions
|
@ -406,16 +406,27 @@ const logsModal = new LogModalElem({
|
||||||
});
|
});
|
||||||
logsModal.setup();
|
logsModal.setup();
|
||||||
|
|
||||||
|
const retryUploadButton = document.querySelector('.retry-upload');
|
||||||
|
const editAfterUploadButton = document.querySelector('.edit-after-upload');
|
||||||
|
const downloadAfterUploadButton = document.querySelector('.download-after-upload');
|
||||||
const uploadModal = new LogModalElem({
|
const uploadModal = new LogModalElem({
|
||||||
name: 'upload',
|
name: 'upload',
|
||||||
onPrepare: (modalElem, config) => {
|
onPrepare: (modalElem, config) => {
|
||||||
|
downloadAfterUploadButton.classList.add('disabled');
|
||||||
|
retryUploadButton.setAttribute('data-node', uploadModal.activeConfig);
|
||||||
|
retryUploadButton.classList.add('disabled');
|
||||||
|
editAfterUploadButton.setAttribute('data-node', uploadModal.activeConfig);
|
||||||
modalElem.querySelector(".stop-logs").innerHTML = "Stop";
|
modalElem.querySelector(".stop-logs").innerHTML = "Stop";
|
||||||
},
|
},
|
||||||
onProcessExit: (modalElem, code) => {
|
onProcessExit: (modalElem, code) => {
|
||||||
if (code === 0) {
|
if (code === 0) {
|
||||||
M.toast({html: "Program exited successfully."});
|
M.toast({html: "Program exited successfully."});
|
||||||
|
// if compilation succeeds but OTA fails, you can still download the binary and upload manually
|
||||||
|
downloadAfterUploadButton.classList.remove('disabled');
|
||||||
} else {
|
} else {
|
||||||
M.toast({html: `Program failed with code ${code}`});
|
M.toast({html: `Program failed with code ${code}`});
|
||||||
|
downloadAfterUploadButton.classList.add('disabled');
|
||||||
|
retryUploadButton.classList.remove('disabled');
|
||||||
}
|
}
|
||||||
modalElem.querySelector(".stop-logs").innerHTML = "Close";
|
modalElem.querySelector(".stop-logs").innerHTML = "Close";
|
||||||
},
|
},
|
||||||
|
@ -425,6 +436,14 @@ const uploadModal = new LogModalElem({
|
||||||
dismissible: false,
|
dismissible: false,
|
||||||
});
|
});
|
||||||
uploadModal.setup();
|
uploadModal.setup();
|
||||||
|
downloadAfterUploadButton.addEventListener('click', () => {
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.download = name;
|
||||||
|
link.href = `./download.bin?configuration=${encodeURIComponent(uploadModal.activeConfig)}`;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
link.remove();
|
||||||
|
});
|
||||||
|
|
||||||
const validateModal = new LogModalElem({
|
const validateModal = new LogModalElem({
|
||||||
name: 'validate',
|
name: 'validate',
|
||||||
|
@ -587,6 +606,12 @@ const startAceWebsocket = () => {
|
||||||
|
|
||||||
editor.session.setAnnotations(arr);
|
editor.session.setAnnotations(arr);
|
||||||
|
|
||||||
|
if(arr.length) {
|
||||||
|
saveUploadButton.classList.add('disabled');
|
||||||
|
} else {
|
||||||
|
saveUploadButton.classList.remove('disabled');
|
||||||
|
}
|
||||||
|
|
||||||
aceValidationRunning = false;
|
aceValidationRunning = false;
|
||||||
} else if (msg.type === "read_file") {
|
} else if (msg.type === "read_file") {
|
||||||
sendAceStdin({
|
sendAceStdin({
|
||||||
|
@ -621,7 +646,7 @@ editor.session.setOption('tabSize', 2);
|
||||||
editor.session.setOption('useWorker', false);
|
editor.session.setOption('useWorker', false);
|
||||||
|
|
||||||
const saveButton = editModalElem.querySelector(".save-button");
|
const saveButton = editModalElem.querySelector(".save-button");
|
||||||
const saveValidateButton = editModalElem.querySelector(".save-validate-button");
|
const saveUploadButton = editModalElem.querySelector(".save-upload-button");
|
||||||
const saveEditor = () => {
|
const saveEditor = () => {
|
||||||
fetch(`./edit?configuration=${activeEditorConfig}`, {
|
fetch(`./edit?configuration=${activeEditorConfig}`, {
|
||||||
credentials: "same-origin",
|
credentials: "same-origin",
|
||||||
|
@ -673,14 +698,14 @@ setInterval(() => {
|
||||||
}, 100);
|
}, 100);
|
||||||
|
|
||||||
saveButton.addEventListener('click', saveEditor);
|
saveButton.addEventListener('click', saveEditor);
|
||||||
saveValidateButton.addEventListener('click', saveEditor);
|
saveUploadButton.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);
|
editModalElem.querySelector(".save-upload-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"})
|
||||||
|
|
|
@ -124,8 +124,14 @@
|
||||||
class="tooltipped" data-position="left" data-tooltip="Flash using esphomeflasher" rel="noreferrer">
|
class="tooltipped" data-position="left" data-tooltip="Flash using esphomeflasher" rel="noreferrer">
|
||||||
<i class="material-icons flash-using-esphomeflasher">help_outline</i>
|
<i class="material-icons flash-using-esphomeflasher">help_outline</i>
|
||||||
</a>
|
</a>
|
||||||
|
<a class="modal-close waves-effect waves-green btn-flat action-edit edit-after-upload">Edit</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 class="btn-flat"><i class="material-icons dropdown-trigger" data-target="dropdown-upload-actions">more_vert</i></div>
|
||||||
</div>
|
</div>
|
||||||
|
<ul id="dropdown-upload-actions" class="select-action dropdown-content card-dropdown-action">
|
||||||
|
<li><a class="modal-close waves-effect waves-green btn-flat disabled download-after-upload">Download Binary</a></li>
|
||||||
|
<li><a class="waves-effect waves-green btn-flat disabled action-upload retry-upload">Retry</a></li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="modal-compile" class="modal modal-fixed-footer">
|
<div id="modal-compile" class="modal modal-fixed-footer">
|
||||||
|
@ -434,7 +440,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 & Validate</a>
|
<a class="modal-close waves-effect waves-green btn-flat action-upload save-upload-button">Save & Upload</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>
|
||||||
|
|
Loading…
Reference in a new issue