Target details

package.json

@@ -16,7 +16,9 @@
     "@mdi/font": "^5.9.55",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "htmx.org": "^1.9.12",
     "inversify-props": "^2.2.6",
+    "jsdom": "^24.1.0",
     "moment": "^2.29.1",
     "neverthrow": "^4.2.1",
     "papaparse": "5.3.1",
@@ -30,6 +32,7 @@
   },
   "devDependencies": {
     "@types/jest": "^24.9.1",
+    "@types/jsdom": "^21.1.7",
     "@types/papaparse": "5.2.6",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",

src/ui/components/watchlist/CreateWatchlist.vue

@@ -122,6 +122,14 @@ export default Vue.extend({
             error: this.handleError,
             complete: this.handleComplete,
           });
+        } else {
+          const emptyCsv = "name,ra,dec,radius,filter\n";
+          parse(emptyCsv, {
+            header: true,
+            skipEmptyLines: true,
+            error: this.handleError,
+            complete: this.handleComplete,
+          });
         }
       }
     },

src/ui/components/watchlist/Filters.vue

@@ -1,16 +1,21 @@
 <template>
   <v-row>
     <v-col xs="12">
-      <target-list />
+      <target-list @updated="handleUpdatedTab" />
     </v-col>
   </v-row>
 </template>
 
-<script>
+<script lang="ts">
 import Vue from "vue";
 import TargetList from "./TargetList.vue";
 export default Vue.extend({
   components: { TargetList },
+  methods: {
+    handleUpdatedTab(val: number) {
+      this.$emit("updated-tab", val);
+    },
+  },
 });
 </script>
 

src/ui/components/watchlist/HowTo.vue

@@ -133,7 +133,7 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
 import Vue from "vue";
 export default Vue.extend({
   data: () => ({

src/ui/components/watchlist/LightCurveCard.vue

@@ -0,0 +1,77 @@
+<template>
+  <v-card>
+    <v-card v-if="loading">
+      <v-card-text class="d-flex justify-center align-center">
+        <v-progress-circular
+          indeterminate
+          color="primary"
+        ></v-progress-circular>
+      </v-card-text>
+    </v-card>
+    <v-card id="lightcurve-app" width="100%" :height="height"></v-card>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import htmx from "htmx.org";
+
+export default Vue.extend({
+  props: {
+    ObjectId: {
+      type: String,
+      default: "",
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      objectName: "",
+      themeDark: false,
+      height: "0vh",
+    };
+  },
+  mounted() {
+    this.$el.addEventListener("htmx:afterRequest", (event) => {
+      const CustomEvent = event as CustomEvent;
+      if (CustomEvent.detail.successful) {
+        this.height = "100%";
+        this.onIsDarkChange(this.isDark());
+      }
+    });
+  },
+  methods: {
+    async callLightCurve(oid: string) {
+      const url = `https://api.alerce.online/v2/lightcurve/htmx/lightcurve?oid=${oid}`;
+      const myDiv = document.getElementById("lightcurve-app");
+      if (myDiv) {
+        myDiv.innerHTML = `<div hx-get=${url} hx-trigger="updateLightcurve from:body" hx-swap="outerHTML"></div>`;
+        htmx.process(myDiv);
+        document.body.dispatchEvent(new Event("updateLightcurve"));
+        this.$emit("loadComplete", false);
+      }
+    },
+    isDark() {
+      return this.$vuetify.theme.dark;
+    },
+    onIsDarkChange(newIsDark: boolean) {
+      const container = document.getElementById("lightcurve-app");
+      if (container) {
+        if (newIsDark) {
+          container.classList.add("tw-dark");
+        }
+      }
+    },
+  },
+  watch: {
+    ObjectId() {
+      this.callLightCurve(this.ObjectId);
+    },
+  },
+});
+</script>
+
+<style></style>