add cors config

web/src/router/index.ts

@@ -1,20 +1,20 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
-import HomeView from "../views/HomeView.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
-    path: "/",
-    name: "home",
-    component: HomeView,
+    path: "/discover",
+    name: "discover 🧭",
+    component: () => import("../views/DiscoverView.vue"),
   },
   {
-    path: "/about",
-    name: "about",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
+    path: "/visit",
+    name: "visiting 👽",
+    component: () => import("../views/StarView.vue"),
+  },
+  {
+    path: "/",
+    name: "starchart 🗺️",
+    component: () => import("../views/ChartView.vue"),
   },
 ];
 

web/src/state/stars.ts

@@ -1,5 +1,5 @@
 import { conf } from "@/api";
-import { Protostar, StarsApi } from "@/swagger";
+import { Protostar, Star, StarsApi } from "@/swagger";
 import { defineStore } from "pinia";
 
 type ChartInfoState = {
@@ -30,21 +30,38 @@ export const useChartStore = defineStore({
   },
 });
 
+type VisitState = {
+  loading: boolean;
+  visited: Star | undefined;
+};
+
 export const useVisitStore = defineStore({
-  id: "chart",
+  id: "visit",
   state: () =>
     ({
       loading: true,
-      protostars: [],
-    } as ChartInfoState),
+      visited: undefined,
+    } as VisitState),
   actions: {
-    async fetchChart() {
+    async visit(planet: number) {
       this.loading = true;
-      this.protostars = await new StarsApi(conf())
-        .chart()
+      this.visited = await new StarsApi(conf())
+        .visit({ planetId: planet })
         .catch((e) => {
           console.error(e);
-          return this.protostars;
+          return this.visited;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    async discover(color: string) {
+      this.loading = true;
+      this.visited = await new StarsApi(conf())
+        .discover({ discoveryLog: { color: color } })
+        .catch((e) => {
+          console.error(e);
+          return this.visited;
         })
         .finally(() => {
           this.loading = false;

web/src/views/ChartView.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="about">
+    <h1>This is an chart page</h1>
+    <h2 v-if="store.loading">loading...</h2>
+    <div v-for="star in store.protostars" :key="star.id">
+      <p :style="{ color: star.color }">*star here*</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useChartStore } from "@/state/stars";
+const store = useChartStore();
+store.fetchChart();
+</script>

web/src/views/DiscoverView.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="about">
+    <h1>This is an discover page</h1>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

web/src/views/HomeView.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
-
-export default {
-  name: "HomeView",
-  components: {
-    HelloWorld,
-  },
-};
-</script>

web/src/views/StarView.vue

@@ -1,5 +1,5 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <h1>This is an star page</h1>
   </div>
 </template>

web/vue.config.js

@@ -1,4 +1,9 @@
 const { defineConfig } = require("@vue/cli-service");
 module.exports = defineConfig({
   transpileDependencies: true,
-});
+  configureWebpack: {
+    devServer: {
+      headers: { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Credentials": "true", }
+    }
+  }
+});