pocketbase login

src/pages/Login.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { usePocketBase } from '@/pocketbase';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const pb = usePocketBase();
+const router = useRouter();
+
+const username = ref("");
+const password = ref("");
+
+const login = async () => {
+    await pb.collection('users').authWithPassword(username.value, password.value);
+    await router.push('/');
+}
+</script>
+
+<template>
+    <div class="p-4 mx-auto mt-10 grid justify-center gap-2 w-64">
+        <div class="grid">
+            Login:
+            <input type="text" autocomplete="username" v-model="username" />
+        </div>
+        <div class="grid">
+            Password:
+            <input type="password" autocomplete="password" v-model="password" />
+        </div>
+        <button class="justify-self-end" @click="login" >Login</button>
+    </div>
+</template>

src/pages/market/Scan.vue

@@ -1,13 +1,21 @@
 <script setup lang="ts">
 import { MarketType, MarketTypePrice, getHistory, getMarketType, getMarketTypes, getPrice, getPrices, jitaId } from "@/market";
 import { BuyModal, ScanResult, ScanResultTable } from '@/market/scan';
-import { useStorage } from '@vueuse/core';
+import { usePocketBase } from "@/pocketbase";
 import { onMounted, ref, watch } from 'vue';
 
+const pb = usePocketBase();
+
+type MarketScan = {
+    id?: string;
+    owner: string;
+    types: number[];
+}
+
 const buyModal = ref<typeof BuyModal>();
 
 const item = ref("");
-const itemsStorage = useStorage<number[]>('market-scan-items', []);
+
 const items = ref<ScanResult[]>([]);
 const addOrRelaod = async (type: MarketType) => {
     const typeID = type.id;
@@ -35,15 +43,28 @@ const addItem = async () => {
     addOrRelaod(type);
 }
 
-watch(items, itms => itemsStorage.value = itms.map(i => i.type.id));
+const getMarketScan = () => pb.collection('marketScans').getFirstListItem<MarketScan>("").catch(() => null);
+
+watch(items, async itms => {
+    const types = itms.map(i => i.type.id);
+    const marketScan = await getMarketScan();
+
+    if (marketScan?.id) {
+        pb.collection('marketScans').update(marketScan.id, { owner: pb.authStore.model!.id, types });
+    } else {
+        pb.collection('marketScans').create({ owner: pb.authStore.model!.id, types });
+    }
+});
 onMounted(async () => {
-    if (itemsStorage.value.length === 0) {
+    const marketScan = await getMarketScan();
+
+    if (!marketScan || marketScan.types.length === 0) {
         return;
     }
 
-    const prices = await getPrices(await getMarketTypes(itemsStorage.value));
+    const prices = await getPrices(await getMarketTypes(marketScan.types));
 
-    items.value = await Promise.all(itemsStorage.value.map(async i => {
+    items.value = await Promise.all(marketScan.types.map(async i => {
         const price = prices.find(p => p.type.id === i) as MarketTypePrice;
         const history = await getHistory(jitaId, i);