sort

.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/reprocess/ReprocessResultTable.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { formatIsk, percentFormater } from '@/formaters';
+import { SortableHeader, useSort } from '@/table';
 import { useStorage } from '@vueuse/core';
 import { computed } from 'vue';
 import BuySellSlider from './BuySellSlider.vue';
@@ -16,12 +17,15 @@ const props = withDefaults(defineProps<Props>(), {
 const threshold = useStorage('reprocess-threshold', 0);
 const useSellOrder = useStorage('reprocess-use-sell-order', false);
 
-const computedResult = computed(() => {
+const { sortedArray, headerProps } = useSort(computed(() => {
     return props.result.map(r =>({
         ...r,
         buy_ratio: r.buy === 0 ? 1 : (r.buy_reprocess / r.buy) - 1,
         sell_ratio: r.sell === 0 ? 1 : (r.sell_reprocess / r.sell) - 1
-    })).sort((a, b) => a.name.localeCompare(b.name))
+    }))
+}), {
+    defaultSortKey: 'name',
+    defaultSortDirection: 'asc'
 })
 
 const copyToClipboard = (s: string) => navigator.clipboard.writeText(s);
@@ -40,14 +44,14 @@ const copyToClipboard = (s: string) => navigator.clipboard.writeText(s);
     <table>
         <thead>
             <tr>
-                <th>Item</th>
+                <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
-                <th>Market</th>
+                <SortableHeader v-bind="headerProps" :sortKey="useSellOrder ? 'sell' : 'buy'">Market</SortableHeader>
-                <th>Reprocess</th>
+                <SortableHeader v-bind="headerProps" :sortKey="useSellOrder ? 'sell_reprocess' : 'buy_reprocess'">Reprocess</SortableHeader>
-                <th>Percent</th>
+                <SortableHeader v-bind="headerProps" :sortKey="useSellOrder ? 'sell_ratio' : 'buy_ratio'">Percent</SortableHeader>
             </tr>
         </thead>
         <tbody>
-            <tr v-for="r in computedResult" :key="r.typeID" class="cursor-pointer" :class="{'bg-emerald-500': (useSellOrder ? r.sell_ratio : r.buy_ratio) >= threshold / 100 }" @click="copyToClipboard(r.name)">
+            <tr v-for="r in sortedArray" :key="r.typeID" class="cursor-pointer" :class="{'bg-emerald-500': (useSellOrder ? r.sell_ratio : r.buy_ratio) >= threshold / 100 }" @click="copyToClipboard(r.name)">
                 <td>{{ r.name }}</td>
                 <td class="text-right">{{ formatIsk(useSellOrder ? r.sell : r.buy) }}</td>
                 <td class="text-right">{{ formatIsk(useSellOrder ? r.sell_reprocess : r.buy_reprocess) }}</td>

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';

src/table/SortableHeader.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { SortDirection } from './sort';
+
+interface Props {
+    currentSortKey: string | null;
+    sortDirection?: SortDirection | null;
+    sortKey: string;
+}
+interface Emit {
+    (e: 'sort', key: string, direction: SortDirection): void;
+}
+
+defineProps<Props>();
+const emit = defineEmits<Emit>();
+
+</script>
+
+<template>
+    <th>
+        <span class="asc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'asc')}" @click="emit('sort', sortKey, 'asc')">▲</span>
+        <slot />
+        <span class="desc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'desc')}" @click="emit('sort', sortKey, 'desc')">▼</span>
+    </th>
+</template>
+
+<style scoped>
+th {
+    @apply relative h-8;
+}
+span.asc, span.desc {
+    @apply absolute end-2 cursor-pointer text-xs;
+}
+span.asc {
+    @apply top-0.5;
+}
+span.desc {
+    @apply bottom-0.5;
+}
+</style>

src/table/index.ts

@@ -0,0 +1,3 @@
+export { default as SortableHeader } from './SortableHeader.vue';
+export * from './sort';
+

src/table/sort.ts

@@ -0,0 +1,42 @@
+import { MaybeRefOrGetter, computed, ref, toValue } from "vue";
+
+export type SortDirection = "asc" | "desc";
+export type UseSortOptions = {
+    defaultSortKey?: string;
+    defaultSortDirection?: SortDirection;
+};
+
+export const useSort = <T>(array: MaybeRefOrGetter<T[]>, options?: UseSortOptions) => {
+    const sortKey = ref<string | null>(options?.defaultSortKey ?? null);
+    const sortDirection = ref<SortDirection | null>(options?.defaultSortDirection ?? null);
+    const sortBy = (key: string, direction: SortDirection) => {
+        sortKey.value = key;
+        sortDirection.value = direction;
+    };
+    const headerProps = computed(() => ({
+        onSort: sortBy,
+        currentSortKey: sortKey.value,
+        sortDirection: sortDirection.value,
+    }));
+
+    const sortedArray = computed(() => toValue(array).sort((a, b) => {
+        if (sortKey.value === null || sortDirection.value === null) {
+            return 0;
+        }
+
+        const aValue = (a as any)[sortKey.value];
+        const bValue = (b as any)[sortKey.value];
+
+        if (aValue === bValue) {
+            return 0;
+        }
+
+        if (sortDirection.value === "asc") {
+            return aValue > bValue ? 1 : -1;
+        } else {
+            return aValue > bValue ? -1 : 1;
+        }
+    }));
+
+    return { sortedArray, headerProps };
+}

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/, ''),
                 }
             }
         }