Search/Filter Feature (esphome#500)

* start of filter * tidy: update footer to remove vWEB * some style fixes from dark theme change * implement search/filter * prettier for CI * dark mode fix * fix up login screen * put back creds message * make search quicker * fix undefined error * add sourcemap * prettier * toggle search menu button * remove console logs * prettier
mkaatman · Jun 27, 2023 · 303057e · 303057e
1 parent 840db2f
commit 303057e
Show file tree

Hide file tree

Showing 19 changed files with 393 additions and 170 deletions.
diff --git a/raw_package/base_with_header_footer.template.html b/raw_package/base_with_header_footer.template.html
@@ -41,13 +41,9 @@
     <footer class="page-footer">
       <div>
         ESPHome by Nabu Casa |
-        <a href="https://esphome.io/guides/supporters.html" target="_blank"
-          >Fund development</a
-        >
+        <a href="https://esphome.io/guides/supporters.html" target="_blank">Fund development</a>
         |
-        <a href="{{ docs_link }}" target="_blank" rel="noreferrer"
-          >v{{ version }} Documentation</a
-        >
+        <a href="{{ docs_link }}" target="_blank" rel="noreferrer">{{ version }} Documentation</a>
       </div>
     </footer>
 

diff --git a/raw_package/login.template.html b/raw_package/login.template.html
@@ -4,36 +4,45 @@
 
 {% block main %}
 <style>
-  .container {
-    display: flex;
-    justify-content: center;
+  :root {
+    --placeholder-color: #bababa;
+    --button-bg-color: #0075aa;
+    --button-text-color: #efefef;
   }
-  .card {
-    max-width: 500px;
+
+  /* dark theme */
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --placeholder-color: #8a8a8a;
+    }
   }
 
-  /* Login Page */
-  .row.no-bottom-margin {
-    margin-bottom: 0 !important;
+  .container {
+    margin-top: 40px;
+    display: grid;
+    justify-content: center;
+    align-items: flex-start;
   }
 
-  .input-field input:focus + label {
-    color: #000;
+  .card {
+    width: 250px;
+    padding: 30px;
+    color: var(--primary-text-color);
+    background-color: var(--card-background-color);
+    box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 3px 1px -2px, rgba(0, 0, 0, 0.2) 0px 1px 5px 0px
   }
 
-  .input-field input:focus {
-    border-bottom: 1px solid #000;
-    box-shadow: 0 1px 0 0 #000;
+  #login-head {
+    margin-top: 0;
   }
 
-  .input-field .prefix.active {
-    color: #000;
+  .center {
+    text-align: center;
   }
 
   /* Alerts & Errors */
   .alert {
-    width: 100%;
-    margin: 10px auto;
+    margin-top: 20px;
     padding: 10px;
     border-radius: 2px;
     border-left-width: 4px;
@@ -55,61 +64,76 @@
     background-color: var(--alert-error-color-bg);
   }
 
-  .card.card-error {
-    border-top: 4px solid var(--alert-error-color);
+  #login-form {
+    align-self: flex-start;
+    display: grid;
+    justify-items: left;
+    align-items: center;
+  }
+
+  #login-form .row {
+    display: flex;
+    width: 100%;
+  }
+
+  #login-form .material-icons {
+    margin-top: -5px;
+  }
+
+  .login-form-field::placeholder {
+    color: var(--placeholder-color);
+  }
+
+  .login-form-field {
+    width: 100%;
+    border: none;
+    border-bottom: 1px solid var(--primary-text-color);
+    margin-bottom: 15px;
+    outline: none;
+    padding: 0px 0px 5px 5px;
+    color: var(--primary-text-color);
+    background-color: var(--card-background-color);
+  }
+
+  #login-form-submit {
+    width: 50%;
+    padding: 7px;
+    border: none;
+    border-radius: 5px;
+    color: var(--button-text-color);
+    font-weight: bold;
+    background-color: var(--button-bg-color);
+    cursor: pointer;
+    outline: none;
+    margin-left: 25px;
   }
 </style>
+
 <div class="container">
-  <div class="card" id="login-card">
-    <div class="card-content">
-      <span class="card-title black-text center">Dashboard Login</span>
-      <p class="center">
-        {% if ha_addon %} Login by entering your Home Assistant login
-        credentials. {% else %} Login by entering your ESPHome login
-        credentials. {% end %}
-      </p>
-
-      {% if error is not None %}
-      <div class="alert alert-error">
-        <span class="title">Error!</span>
-        {{ escape(error) }}
+  <div class="card">
+    <h3 id="login-head" class="center">Login</h3>
+    <p class="center">Enter your {% if ha_addon %}Home Assistant{% else %}ESPHome{% end %} credentials.</p>
+    <form action="./login" method="post" id="login-form">
+      {% if has_username or ha_addon %}
+      <div class="row">
+        <i class="material-icons prefix">person</i>
+        <input type="text" name="username" id="username-field" class="login-form-field" placeholder="Username">
       </div>
-
-      <script>
-        document.getElementById("login-card").classList.add("card-error");
-      </script>
       {% end %}
-
-      <form action="./login" method="post" id="login-form">
-        {% if has_username or ha_addon %}
-        <div class="row no-bottom-margin">
-          <div class="input-field col s12">
-            <i class="material-icons prefix">person</i>
-            <input name="username" id="username" type="text" />
-            <label for="username">Username</label>
-          </div>
-        </div>
-        {% end %}
-
-        <div class="row no-bottom-margin">
-          <div class="input-field col s12">
-            <i class="material-icons prefix">lock</i>
-            <input name="password" id="password" type="password" />
-            <label for="password">Password</label>
-          </div>
-        </div>
-      </form>
-    </div>
-
-    <div class="card-action center">
-      <input
-        type="submit"
-        class="btn blue-grey darken-2"
-        name="action"
-        form="login-form"
-        value="Login"
-      />
+      <div class="row">
+        <i class="material-icons prefix">lock</i>
+        <input type="password" name="password" id="password-field" class="login-form-field" placeholder="Password">
+      </div>
+      <div class="row">
+        <input type="submit" value="Login" id="login-form-submit">
+      </div>
+    </form>
+    {% if error is not None %}
+    <div class="alert alert-error">
+      <span class="title">Error!</span>
+      {{ escape(error) }}
     </div>
+    {% end %}
   </div>
 </div>
 {% end %}
diff --git a/raw_package/static/css/esphome-2.css b/raw_package/static/css/esphome-2.css
@@ -4,6 +4,7 @@
   /* Colors */
   --primary-bg-color: #fafafa;
   --primary-footer-bg-color: #212121;
+  --card-background-color: #fafafa;
   --alert-standard-color: #666666;
   --alert-standard-color-bg: #e6e6e6;
   --alert-info-color: #00539f;
@@ -38,7 +39,6 @@
     --esphome-background-header: #282828;
     --card-background-color: #282828;
     --card-text-color: #e1e1e1;
-    /* --mdc-theme-primary: #e1e1e1; */
     --primary-text-color: #e1e1e1;
     --mdc-theme-surface: #282828;
     --mdc-theme-on-surface: #e1e1e1;

diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -24,6 +24,7 @@ const config = {
     entryFileNames: isProdBuild ? "[name]-[hash].js" : "[name].js",
     chunkFileNames: isProdBuild ? "c.[hash].js" : "[name].js",
     assetFileNames: isProdBuild ? "a.[hash].js" : "[name].js",
+    sourcemap: true
   },
   preserveEntrySignatures: false,
   plugins: [

diff --git a/src/api/devices.ts b/src/api/devices.ts
@@ -4,21 +4,21 @@ import { createPollingCollection } from "../util/polling-collection";
 
 export interface ConfiguredDevice {
   name: string;
-  friendly_name: string;
+  friendly_name?: string;
   configuration: string;
-  loaded_integrations: string[];
-  deployed_version: string;
-  current_version: string;
+  loaded_integrations?: string[];
+  deployed_version?: string;
+  current_version?: string;
   path: string;
-  comment: string;
-  address: string;
-  web_port: number;
+  comment?: string;
+  address?: string;
+  web_port?: number;
   target_platform: SupportedPlatforms;
 }
 
 export interface ImportableDevice {
   name: string;
-  friendly_name: string | null;
+  friendly_name?: string;
   package_import_url: string;
   project_name: string;
   project_version: string;

diff --git a/src/clean/clean-dialog.ts b/src/clean/clean-dialog.ts
@@ -5,6 +5,7 @@ import "../components/remote-process";
 import { openInstallChooseDialog } from "../install-choose";
 import "../components/process-dialog";
 import { openEditDialog } from "../editor";
+import { esphomeDialogStyles } from "../styles";
 
 @customElement("esphome-clean-dialog")
 class ESPHomeCleanDialog extends LitElement {
@@ -45,6 +46,8 @@ class ESPHomeCleanDialog extends LitElement {
   private _handleClose() {
     this.parentNode!.removeChild(this);
   }
+
+  static styles = [esphomeDialogStyles];
 }
 
 declare global {

diff --git a/src/compile/compile-dialog.ts b/src/compile/compile-dialog.ts
@@ -5,6 +5,7 @@ import "../components/remote-process";
 import "../components/process-dialog";
 import { openCompileDialog } from ".";
 import { getDownloadUrl } from "../api/configuration";
+import { esphomeDialogStyles } from "../styles";
 
 @customElement("esphome-compile-dialog")
 class ESPHomeCompileDialog extends LitElement {
@@ -75,11 +76,14 @@ class ESPHomeCompileDialog extends LitElement {
     this.parentNode!.removeChild(this);
   }
 
-  static styles = css`
-    a {
-      text-decoration: none;
-    }
-  `;
+  static styles = [
+    esphomeDialogStyles,
+    css`
+      a {
+        text-decoration: none;
+      }
+    `,
+  ];
 }
 
 declare global {

diff --git a/src/components/esphome-header-menu.ts b/src/components/esphome-header-menu.ts
@@ -1,12 +1,12 @@
 import { css, html, LitElement, TemplateResult } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import "./esphome-button-menu";
 import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-icon-button";
 import "@material/mwc-button";
 import "@material/mwc-icon";
 import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
-import { openEditDialog } from "../editor";
+import { openEditDialog, toggleSearch } from "../editor";
 import { SECRETS_FILE } from "../api/secrets";
 import { openUpdateAllDialog } from "../update-all";
 import { showConfirmationDialog } from "../dialogs";
@@ -39,6 +39,9 @@ export class ESPHomeHeaderMenu extends LitElement {
               ></a>
             `
           : ""}
+        <mwc-button class="search" @click=${this._handleSearch}>
+          <mwc-icon>search</mwc-icon>
+        </mwc-button>
       `;
     }
 
@@ -48,6 +51,9 @@ export class ESPHomeHeaderMenu extends LitElement {
         @action=${this._handleOverflowAction}
       >
         <mwc-icon-button slot="trigger" icon="more_vert"></mwc-icon-button>
+        <mwc-list-item graphic="icon"
+          ><mwc-icon slot="graphic">search</mwc-icon>Search</mwc-list-item
+        >
         <mwc-list-item graphic="icon"
           ><mwc-icon slot="graphic">system_update</mwc-icon>Update
           All</mwc-list-item
@@ -81,6 +87,10 @@ export class ESPHomeHeaderMenu extends LitElement {
     this._isWide = isWideListener.matches;
   };
 
+  private _handleSearch() {
+    toggleSearch();
+  }
+
   private async _handleUpdateAll() {
     if (
       !(await showConfirmationDialog({
@@ -102,9 +112,12 @@ export class ESPHomeHeaderMenu extends LitElement {
   private async _handleOverflowAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
-        this._handleUpdateAll();
+        this._handleSearch();
         break;
       case 1:
+        this._handleUpdateAll();
+        break;
+      case 2:
         this._handleEditSecrets();
         break;
     }
@@ -119,6 +132,11 @@ export class ESPHomeHeaderMenu extends LitElement {
       margin-left: 16px;
       line-height: 1em;
     }
+    mwc-button.search {
+      margin: 0;
+      padding: 0;
+      width: 30px;
+    }
     mwc-icon {
       --mdc-theme-text-icon-on-background: var(--primary-text-color);
     }