Advent22 typescript plugin

ui/src/components/CalendarDoor.vue

@@ -22,7 +22,7 @@ export default class CalendarDoor extends Vue {
   modal_visible = false;
 
   private get image_url(): string {
-    return "http://localhost:8000/api/days/picture/" + this.day;
+    return this.$advent22.api_url("days/picture/" + this.day);
   }
 }
 </script>

ui/src/d.ts/shims-advent22.d.ts

@@ -0,0 +1,10 @@
+import { Advent22 } from "@/plugins/advent22";
+
+declare module "@vue/runtime-core" {
+  // bind to `this` keyword
+  interface ComponentCustomProperties {
+    $advent22: Advent22;
+  }
+}
+
+export { };

ui/src/main.ts

@@ -1,6 +1,10 @@
+import { Advent22Plugin } from "@/plugins/advent22"
 import { createApp } from 'vue'
 import App from './App.vue'
 
 import "bulma/css/bulma.css"
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(Advent22Plugin)
+
+app.mount('#app')

ui/src/plugins/advent22.ts

@@ -0,0 +1,30 @@
+import { App, Plugin } from 'vue';
+
+export class Advent22 {
+  private get api_baseurl(): string {
+    // in production mode, return "//host/api"
+    if (process.env.NODE_ENV === "production") {
+      return `//${window.location.host}/api`;
+
+    } else if (process.env.NODE_ENV !== "development") {
+      // not in prouction or development mode
+      console.warn("Unexpected NODE_ENV value");
+    }
+
+    // in development mode, return "//hostname:8000/api"
+    return `//${window.location.hostname}:8000/api`;
+  }
+
+  public api_url(endpoint?: string): string {
+    if (endpoint === undefined)
+      return `${this.api_baseurl}`;
+
+    return `${this.api_baseurl}/${endpoint}`;
+  }
+}
+
+export const Advent22Plugin: Plugin = {
+  install(app: App) {
+    app.config.globalProperties.$advent22 = new Advent22();
+  }
+}