Proxy friendly API calls (#17)

fix esphome/issues#3696
esphome · Nov 9, 2022 · 7e1b00b · 7e1b00b
1 parent afad4eb
commit 7e1b00b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/v2/esp-app.ts b/v2/esp-app.ts
@@ -1,5 +1,6 @@
 import { LitElement, html, css, PropertyValues } from "lit";
 import { customElement, state, query } from "lit/decorators.js";
+import { getBasePath } from "./esp-entity-table";
 
 import "./esp-entity-table";
 import "./esp-log";
@@ -8,13 +9,7 @@ import "./esp-logo";
 import cssReset from "./css/reset";
 import cssButton from "./css/button";
 
-function getEventsUrl(){
-  url = window.location.pathname;
-  url += url.endsWith("/") ? "" : "/";
-  return url + "events";
-};
-
-window.source = new EventSource(getEventsUrl());
+window.source = new EventSource(getBasePath() + "/events");
 
 interface Config {
   ota: boolean;
@@ -84,12 +79,18 @@ export default class EspApp extends LitElement {
   }
 
   ota() {
-    if (this.config.ota)
+    if (this.config.ota) {
+      let basePath = getBasePath();
       return html`<h2>OTA Update</h2>
-        <form method="POST" action="/update" enctype="multipart/form-data">
+        <form
+          method="POST"
+          action="${basePath}/update"
+          enctype="multipart/form-data"
+        >
           <input class="btn" type="file" name="update" />
           <input class="btn" type="submit" value="Update" />
         </form>`;
+    }
   }
 
   render() {

diff --git a/v2/esp-entity-table.ts b/v2/esp-entity-table.ts
@@ -24,6 +24,13 @@ interface entityConfig {
   speed: string;
 }
 
+export function getBasePath() {
+  let str = window.location.pathname;
+  return str.endsWith("/") ? str.slice(0, -1) : str;
+}
+
+let basePath = getBasePath();
+
 @customElement("esp-entity-table")
 export class EntityTable extends LitElement {
   @state({ type: Array, reflect: true }) entities: entityConfig[] = [];
@@ -243,7 +250,7 @@ export class EntityTable extends LitElement {
   }
 
   restAction(entity: entityConfig, action: String) {
-    fetch(`/${entity.domain}/${entity.id}/${action}`, {
+    fetch(`${basePath}/${entity.domain}/${entity.id}/${action}`, {
       method: "POST",
       body: "true",
     }).then((r) => {