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

esphome/dashboard/static/esphome.js

@@ -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"})

esphome/dashboard/templates/index.html

@@ -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>