Add clean build files command and auto-clean on version change (#181)

* Add clean build files command and auto-clean on version change

* Update __main__.py

esphomeyaml/dashboard/templates/index.html

@@ -220,6 +220,7 @@
           </div>
           <ul id="dropdown-{{ i }}" class="dropdown-content">
             <li><a href="#" class="action-clean-mqtt" data-node="{{ file }}">Clean MQTT</a></li>
+            <li><a href="#" class="action-clean" data-node="{{ file }}">Clean Build</a></li>
           </ul>
         </div>
       </div>
@@ -484,6 +485,18 @@
   </div>
 </div>
 
+<div id="modal-clean" class="modal modal-fixed-footer">
+  <div class="modal-content">
+    <h4>Clean Build Files <code class="inlinecode filename"></code></h4>
+    <div class="log-container">
+      <pre class="log"></pre>
+    </div>
+  </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>
@@ -849,6 +862,54 @@
     });
   });
 
+  const cleanModalElem = document.getElementById("modal-clean");
+
+  document.querySelectorAll(".action-clean").forEach((btn) => {
+    btn.addEventListener('click', (e) => {
+      configuration = e.target.getAttribute('data-node');
+      const modalInstance = M.Modal.getInstance(cleanModalElem);
+      const log = cleanModalElem.querySelector(".log");
+      log.innerHTML = "";
+      const stopLogsButton = cleanModalElem.querySelector(".stop-logs");
+      let stopped = false;
+      stopLogsButton.innerHTML = "Stop";
+      modalInstance.open();
+
+      const filenameField = cleanModalElem.querySelector('.filename');
+      filenameField.innerHTML = configuration;
+
+      const logSocket = new WebSocket(wsUrl + "/clean");
+      logSocket.addEventListener('message', (event) => {
+        const data = JSON.parse(event.data);
+        if (data.event === "line") {
+          const msg = data.data;
+          log.innerHTML += colorReplace(msg);
+        } else if (data.event === "exit") {
+          if (data.code === 0) {
+            M.toast({html: "Program exited successfully."});
+            downloadButton.classList.remove('disabled');
+          } else {
+            M.toast({html: `Program failed with code ${data.code}`});
+          }
+          stopLogsButton.innerHTML = "Close";
+          stopped = true;
+        }
+      });
+      logSocket.addEventListener('open', () => {
+        const msg = JSON.stringify({configuration: configuration});
+        logSocket.send(msg);
+      });
+      logSocket.addEventListener('close', () => {
+        if (!stopped) {
+          M.toast({html: 'Terminated process.'});
+        }
+      });
+      modalInstance.options.onCloseStart = () => {
+        logSocket.close();
+      };
+    });
+  });
+
   const modalSetupElem = document.getElementById("modal-wizard");
   const setupWizardStart = document.getElementById('setup-wizard-start');
   const startWizard = () => {