diff --git a/frontend/README.md b/frontend/README.md new file mode 100644 index 0000000..8d6c5ef --- /dev/null +++ b/frontend/README.md @@ -0,0 +1,29 @@ +# frontend + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +npm install +``` + +### Compile and Hot-Reload for Development + +```sh +npm run dev +``` + +### Compile and Minify for Production + +```sh +npm run build +``` diff --git a/frontend/src/App.vue b/frontend/src/App.vue index a7280b7..54ad06d 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -3,13 +3,23 @@ diff --git a/frontend/src/dns.js b/frontend/src/dns.js index 9446ccb..d3f2a8f 100644 --- a/frontend/src/dns.js +++ b/frontend/src/dns.js @@ -35,6 +35,7 @@ class FallBackResolver { const key = domain + ':' + type; if (key in this._cache && this._cache[key].time > Date.now() - 1000 * 60 * 60) { const age_seconds = Math.ceil(Date.now() / 1000 - this._cache[key].time / 1000); + console.log('cache hit', key, this._cache[key].ttl - age_seconds); return [this._cache[key].data]; } const result = await query( @@ -47,6 +48,7 @@ class FallBackResolver { const first = result.answers[0]; this._cache[key] = {time: Date.now(), ...first}; // TODO hadle multiple answers localStorage.setItem('dns-cache', JSON.stringify(this._cache)); + console.log('cache miss', key, first.ttl); return [first.data]; } } diff --git a/frontend/src/store.js b/frontend/src/store.js index 0cadaff..dff2ce7 100644 --- a/frontend/src/store.js +++ b/frontend/src/store.js @@ -98,7 +98,9 @@ export default createStore({ this.commit('setToken', token); if (keypair) { this.commit('setKey', keypair) + } else { } + router.push('/'); } state.cache_loaded = true; } @@ -118,9 +120,16 @@ export default createStore({ } else { return false; } + }, async lookupServer({state}, {username}) { const domain = username.split('@')[1] + if (domain === 'example.eleon') + return ['10.23.42.186:8000']; + if (domain === 'localhost') + return ['127.0.0.1:8000']; + if (domain === 'example.com') + return ['10.23.42.128:8000']; const request = '_toolshed-server._tcp.' + domain + '.' return await state.resolver.query(request, 'SRV').then( (result) => result.map( diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue index 6c19b16..1f23884 100644 --- a/frontend/src/views/Dashboard.vue +++ b/frontend/src/views/Dashboard.vue @@ -5,7 +5,16 @@

Dashboard

- +
+
+
Empty card
+
+
+ +
+
diff --git a/frontend/src/views/Inventory.vue b/frontend/src/views/Inventory.vue index 8687fa6..350ed44 100644 --- a/frontend/src/views/Inventory.vue +++ b/frontend/src/views/Inventory.vue @@ -2,6 +2,7 @@
+

Inventory Own & Friends"

@@ -28,6 +29,7 @@ {{ item.name }} + {{ item.owner }} {{ item.availability_policy }} @@ -75,7 +77,7 @@
- + Add
@@ -102,14 +104,29 @@ export default { ...BIcons }, computed: { - ...mapGetters(["inventory_items", "loaded_items"]), - ...mapState(["user"]), + ...mapGetters(["inventory_items"]), + username() { + return this.$route.params.username + } }, methods: { - ...mapActions(["fetchInventoryItems", "deleteInventoryItem"]), + ...mapActions(["apiFederatedGet", "getFriends", "getFriendServer"]), + ...mapMutations(["setInventoryItems"]), + async getInventoryItems() { + try { + const servers = await this.getFriends().then(friends => friends.map(friend => this.getFriendServer({username: friend}))) + const urls = servers.map(server => server.then(s => `http://${s}/api/inventory_items/`)) + urls.map(url => url.then(u => this.apiFederatedGet(u).then(items => { + this.setInventoryItems({url: u, items}) + }).catch(e => { + }))) // TODO: handle error + } catch (e) { + console.error(e) + } + }, }, async mounted() { - await this.fetchInventoryItems() + await this.getInventoryItems() } } diff --git a/frontend/src/views/Profile.vue b/frontend/src/views/Profile.vue new file mode 100644 index 0000000..50ecade --- /dev/null +++ b/frontend/src/views/Profile.vue @@ -0,0 +1,257 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue new file mode 100644 index 0000000..d143c7e --- /dev/null +++ b/frontend/src/views/Settings.vue @@ -0,0 +1,209 @@ + + + + + \ No newline at end of file diff --git a/frontend/vite.config.js b/frontend/vite.config.js index c199937..ed6b2f1 100644 --- a/frontend/vite.config.js +++ b/frontend/vite.config.js @@ -3,6 +3,7 @@ import {fileURLToPath, URL} from 'node:url' import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' +// https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: {