Home-IoT/esphome
1
0
Fork 0
mirror of https://github.com/esphome/esphome.git synced 2024-12-26 23:41:45 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

added download, edit and retry buttons to upload modal (#557)

Browse source 
* 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:
gitolicious 2019-05-28 20:49:11 +02:00 committed by Otto Winter
parent 2decb8115c
commit 928df2dcd1
2 changed files with 35 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -406,16 +406,27 @@ const logsModal = new LogModalElem({
});
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({
name: 'upload',
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";
},
onProcessExit: (modalElem, code) => {
if (code === 0) {
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 {
M.toast({html: `Program failed with code ${code}`});
downloadAfterUploadButton.classList.add('disabled');
retryUploadButton.classList.remove('disabled');
}
modalElem.querySelector(".stop-logs").innerHTML = "Close";
},
@ -425,6 +436,14 @@ const uploadModal = new LogModalElem({
dismissible: false,
});
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({
name: 'validate',
@ -587,6 +606,12 @@ const startAceWebsocket = () => {
editor.session.setAnnotations(arr);
if(arr.length) {
saveUploadButton.classList.add('disabled');
} else {
saveUploadButton.classList.remove('disabled');
}
aceValidationRunning = false;
} else if (msg.type === "read_file") {
sendAceStdin({
@ -621,7 +646,7 @@ editor.session.setOption('tabSize', 2);
editor.session.setOption('useWorker', false);
const saveButton = editModalElem.querySelector(".save-button");
const saveValidateButton = editModalElem.querySelector(".save-validate-button");
const saveUploadButton = editModalElem.querySelector(".save-upload-button");
const saveEditor = () => {
fetch(`./edit?configuration=${activeEditorConfig}`, {
credentials: "same-origin",
@ -673,14 +698,14 @@ setInterval(() => {
}, 100);
saveButton.addEventListener('click', saveEditor);
saveValidateButton.addEventListener('click', saveEditor);
saveUploadButton.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);
editModalElem.querySelector(".save-upload-button").setAttribute('data-node', activeEditorConfig);
filenameField.innerHTML = activeEditorConfig;
fetch(`./edit?configuration=${activeEditorConfig}`, {credentials: "same-origin"})

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

@ -124,8 +124,14 @@
class="tooltipped" data-position="left" data-tooltip="Flash using esphomeflasher" rel="noreferrer">
<i class="material-icons flash-using-esphomeflasher">help_outline</i>
</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>
<div class="btn-flat"><i class="material-icons dropdown-trigger" data-target="dropdown-upload-actions">more_vert</i></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 id="modal-compile" class="modal modal-fixed-footer">
@ -434,7 +440,7 @@
</div>
<div class="modal-footer">
<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 action-upload save-upload-button">Save &amp; Upload</a>
<a class="modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>