draft market

.env.development

@@ -1,2 +1,3 @@
 EVEAL_API_URL=/api/
-EVEPRAISAL_URL=/appraisal/
+EVEPRAISAL_URL=/appraisal/
+ESI_URL=/esi/

.env.production

@@ -1,2 +1,3 @@
 EVEAL_API_URL=https://api.eveal.shendai.rip/
-EVEPRAISAL_URL=https://evepraisal.shendai.rip/
+EVEPRAISAL_URL=https://evepraisal.shendai.rip/
+ESI_URL=https://esi.evetech.net/latest/

package-lock.json

@@ -11,7 +11,8 @@
         "@vueuse/core": "^10.2.1",
         "@vueuse/integrations": "^10.2.1",
         "axios": "^1.4.0",
-        "vue": "^3.3.4"
+        "vue": "^3.3.4",
+        "vue-router": "^4.2.4"
       },
       "devDependencies": {
         "@types/node": "^20.4.5",
@@ -584,6 +585,11 @@
         "@vue/shared": "3.3.4"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
+      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
+    },
     "node_modules/@vue/language-core": {
       "version": "1.8.6",
       "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.6.tgz",
@@ -2176,6 +2182,20 @@
         "@vue/shared": "3.3.4"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.4.tgz",
+      "integrity": "sha512-9PISkmaCO02OzPVOMq2w82ilty6+xJmQrarYZDkjZBfl4RvYAlt4PKnEX21oW4KTtWfa9OuO/b3qk1Od3AEdCQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",

package.json

@@ -12,7 +12,8 @@
     "@vueuse/core": "^10.2.1",
     "@vueuse/integrations": "^10.2.1",
     "axios": "^1.4.0",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4"
   },
   "devDependencies": {
     "@types/node": "^20.4.5",

src/App.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import { Reprocess } from './reprocess';
+import { RouterView } from 'vue-router';
+import { Sidebar } from './sidebar';
 </script>
 
 <template>
-    <Reprocess />
+    <Sidebar />
+    <div class=" px-4 sm:ml-64">
+        <RouterView />
+    </div>
 </template>

src/Index.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <div></div>
+</template>

src/main.ts

@@ -1,5 +1,20 @@
-import { createApp } from 'vue'
+import { createApp } from 'vue';
-import App from './App.vue'
+import { createRouter, createWebHistory } from 'vue-router';
-import './style.css'
+import App from './App.vue';
+import './style.css';
 
-createApp(App).mount('#app')
+const routes = [
+    { path: '/', component: () => import('@/Index.vue') },
+    { path: '/reprocess', component: () => import('@/reprocess/Reprocess.vue') },
+    { path: '/market', component: () => import('@/market/Market.vue') },
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+});
+
+const app = createApp(App);
+
+app.use(router);
+app.mount('#app');

src/market/Market.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// 10000002
+</script>
+
+<template>
+    <div>
+        
+    </div>
+</template>

src/reprocess/Reprocess.vue

@@ -16,22 +16,22 @@ const send = async () => result.value = await reprocess(items.value, minerals.va
 </script>
 
 <template>
-    <div class="grid mb-2 mt-4 px-4">
+    <div class="grid mb-2 mt-4">
         <div class="justify-self-end">
             <span>Reprocess efficiency: </span>
             <input type="number" min="0" max="1" step="0.05" v-model="efficiency" />
         </div>
     </div>
-    <div class="flex items-stretch px-4">
+    <div class="flex items-stretch">
         <ReprocessInput name="Item JSON" v-model="items" />
         <ReprocessInput name="Mineral JSON" v-model="minerals" />
     </div>
-    <div class="grid my-2 px-4">
+    <div class="grid my-2">
         <button class="justify-self-end" @click="send">Send</button>
     </div>
     <template v-if="result.length > 0">
         <hr />
-        <div class="grid mt-2 px-4">
+        <div class="grid mt-2">
             <ReprocessResultTable :result="result" />
         </div>
     </template>

src/service.ts

@@ -2,6 +2,7 @@ import axios from 'axios';
 
 const evealApiUrl = process.env.EVEAL_API_URL;
 const evepraisalUrl = process.env.EVEPRAISAL_URL;
+const esiUrl = process.env.ESI_URL;
 
 export const apiAxiosInstance = axios.create({
     baseURL: evealApiUrl,
@@ -17,4 +18,12 @@ export const evepraisalAxiosInstance = axios.create({
         'accept': 'application/json',
         "Content-Type": "application/json"
     },
-})
+})
+
+export const esiAxiosInstance = axios.create({
+    baseURL: esiUrl,
+    headers: {
+        'accept': 'application/json',
+        "Content-Type": "application/json"
+    },
+})

src/sidebar/Sidebar.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+</script>
+
+<template>
+    <aside class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0">
+        <div class="h-full px-3 py-4 overflow-y-auto bg-slate-700">
+            <ul class="space-y-2 font-medium">
+                <li>
+                    <RouterLink to="/reprocess" class="flex items-center p-2 rounded-md">
+                        <span>Reprocess</span>
+                    </RouterLink>
+                </li>
+                <li>
+                    <RouterLink to="/market" class="flex items-center p-2 rounded-md">
+                        <span>Market</span>
+                    </RouterLink>
+                </li>
+            </ul>
+        </div>
+    </aside>
+</template>
+
+<style scoped>
+.router-link-active {
+    @apply bg-emerald-500;
+}
+</style>

src/sidebar/index.ts

@@ -0,0 +1 @@
+export { default as Sidebar } from './Sidebar.vue';

vite.config.ts

@@ -17,6 +17,7 @@ export default defineConfig(({ mode }) => {
         define: {
             'process.env.EVEAL_API_URL': JSON.stringify(env.EVEAL_API_URL),
             'process.env.EVEPRAISAL_URL': JSON.stringify(env.EVEPRAISAL_URL),
+            'process.env.ESI_URL': JSON.stringify(env.ESI_URL),
         },
         server: {
             port: 3000,
@@ -33,6 +34,12 @@ export default defineConfig(({ mode }) => {
                     changeOrigin: true,
                     followRedirects: true,
                     rewrite: (path) => path.replace(/^\/appraisal/, ''),
+                },
+                '/esi/': {
+                    target: 'https://esi.evetech.net/latest/',
+                    changeOrigin: true,
+                    followRedirects: true,
+                    rewrite: (path) => path.replace(/^\/esi/, ''),
                 }
             }
         }