Dashboard Update all button (#615)

* Add update all button

* Use bold

esphome/dashboard/dashboard.py

@@ -26,7 +26,7 @@ import tornado.process
 import tornado.web
 import tornado.websocket
 
-from esphome import const
+from esphome import const, util
 from esphome.__main__ import get_serial_ports
 from esphome.helpers import mkdir_p, get_bool_env, run_system_command
 from esphome.py_compat import IS_PY2, decode_text
@@ -93,17 +93,7 @@ class DashboardSettings(object):
         return os.path.join(self.config_dir, *args)
 
     def list_yaml_files(self):
-        files = []
-        for file in os.listdir(self.config_dir):
-            if not file.endswith('.yaml'):
-                continue
-            if file.startswith('.'):
-                continue
-            if file == 'secrets.yaml':
-                continue
-            files.append(file)
-        files.sort()
-        return files
+        return util.list_yaml_files(self.config_dir)
 
 
 settings = DashboardSettings()
@@ -122,6 +112,7 @@ def template_args():
         'get_static_file_url': get_static_file_url,
         'relative_url': settings.relative_url,
         'streamer_mode': get_bool_env('ESPHOME_STREAMER_MODE'),
+        'config_dir': settings.config_dir,
     }
 
 
@@ -315,6 +306,11 @@ class EsphomeAceEditorHandler(EsphomeCommandWebSocket):
         return ["esphome", "--dashboard", "-q", settings.config_dir, "vscode", "--ace"]
 
 
+class EsphomeUpdateAllHandler(EsphomeCommandWebSocket):
+    def build_command(self, json_message):
+        return ["esphome", "--dashboard", settings.config_dir, "update-all"]
+
+
 class SerialPortRequestHandler(BaseHandler):
     @authenticated
     def get(self):
@@ -690,6 +686,7 @@ def make_app(debug=False):
         (rel + "clean", EsphomeCleanHandler),
         (rel + "vscode", EsphomeVscodeHandler),
         (rel + "ace", EsphomeAceEditorHandler),
+        (rel + "update-all", EsphomeUpdateAllHandler),
         (rel + "edit", EditRequestHandler),
         (rel + "download.bin", DownloadBinaryRequestHandler),
         (rel + "serial-ports", SerialPortRequestHandler),

esphome/dashboard/static/esphome.css

@@ -131,10 +131,14 @@ ul.stepper:not(.horizontal) .step.active::before, ul.stepper:not(.horizontal) .s
 
 .select-port-container {
   margin-top: 8px;
-  margin-right: 24px;
+  margin-right: 10px;
   width: 350px;
 }
 
+#dropdown-nav-trigger {
+  margin-right: 24px;
+}
+
 .select-port-container .select-dropdown {
   color: #fff;
 }

esphome/dashboard/static/esphome.js

@@ -333,6 +333,10 @@ class LogModalElem {
     this.activeSocket.close();
   }
 
+  open(event) {
+    this._onPress(event);
+  }
+
   _onPress(event) {
     this.activeConfig = event.target.getAttribute('data-node');
     this._setupModalInstance();
@@ -745,3 +749,32 @@ jQuery.validator.addMethod("nospaces", (value, element) => {
 jQuery.validator.addMethod("lowercase", (value, element) => {
   return value === value.toLowerCase();
 }, "Name must be lowercase.");
+
+
+
+const updateAllModal = new LogModalElem({
+  name: 'update-all',
+  onPrepare: (modalElem, config) => {
+    modalElem.querySelector('.stop-logs').innerHTML = "Stop";
+    downloadButton.classList.add('disabled');
+  },
+  onProcessExit: (modalElem, code) => {
+    if (code === 0) {
+      M.toast({html: "Program exited successfully."});
+      downloadButton.classList.remove('disabled');
+    } else {
+      M.toast({html: `Program failed with code ${data.code}`});
+    }
+    modalElem.querySelector(".stop-logs").innerHTML = "Close";
+  },
+  onSocketClose: (modalElem) => {
+    M.toast({html: 'Terminated process.'});
+  },
+  dismissible: false,
+});
+updateAllModal.setup();
+
+const updateAllButton = document.getElementById('update-all-button');
+updateAllButton.addEventListener('click', (e) => {
+  updateAllModal.open(e);
+});

esphome/dashboard/templates/index.html

@@ -31,10 +31,16 @@
 <nav>
   <div class="nav-wrapper indigo">
     <a href="#" class="brand-logo left">ESPHome Dashboard</a>
+    <i class="material-icons dropdown-trigger right" id="dropdown-nav-trigger" data-target="dropdown-nav-actions">more_vert</i>
     <div class="select-port-container right" id="select-port-target">
       <select></select>
     </div>
   </div>
+
+  <ul id="dropdown-nav-actions" class="select-action dropdown-content card-dropdown-action">
+    <li><a id="update-all-button" class="modal-close waves-effect waves-green btn-flat"
+           data-node="{{ escape(config_dir) }}">Update All</a></li>
+  </ul>
 </nav>
 
 {% if begin %}
@@ -445,6 +451,16 @@
   </div>
 </div>
 
+<div id="modal-update-all" class="modal modal-fixed-footer">
+  <div class="modal-content">
+    <h4>Update All</h4>
+    <pre class="log"></pre>
+  </div>
+  <div class="modal-footer">
+    <a class="modal-close waves-effect waves-green btn-flat stop-logs">Stop</a>
+  </div>
+</div>
+
 <a class="btn-floating btn-large ribbon-fab waves-effect waves-light pink accent-2" id="setup-wizard-start">
   <i class="material-icons">add</i>
 </a>