lfg2025/archy
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(ui): expand real NIP-99 router listings view

Browse Source
This commit is contained in:
yaya
2026-10-09 13:37:00 +01:00
parent 70cd80c3e8
commit d4d6a655e7
2 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
neode-ui/src/components/RouterMarketplace.vue
+12 -3
View File
@@ -1,6 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, onBeforeUnmount, ref, watch } from 'vue' import { computed, onBeforeUnmount, ref, watch } from 'vue'
const props = withDefaults(defineProps<{ expanded?: boolean }>(), { expanded: false })
const emit = defineEmits<{ open: []; close: [] }>()
interface RouterListing { interface RouterListing {
id: string id: string
pubkey: string pubkey: string
@@ -101,8 +104,13 @@ async function search() {
loading.value = false loading.value = false
if (!listings.value.length) error.value = 'No active OpenWrt router listings answered from the configured public relays.' if (!listings.value.length) error.value = 'No active OpenWrt router listings answered from the configured public relays.'
} }
function openShop() { open.value = true; if (!listings.value.length) void search() } function openShop() {
function closeShop() { open.value = false; closeSockets() } open.value = true
query.value = 'openwrt'
emit('open')
if (!listings.value.length) void search()
}
function closeShop() { open.value = false; closeSockets(); emit('close') }
function formatPrice(item: RouterListing) { function formatPrice(item: RouterListing) {
if (!item.price) return 'Price on request' if (!item.price) return 'Price on request'
return `${item.price.amount} ${item.price.currency.toUpperCase()}${item.price.frequency ? ` / ${item.price.frequency}` : ''}` return `${item.price.amount} ${item.price.currency.toUpperCase()}${item.price.frequency ? ` / ${item.price.frequency}` : ''}`
@@ -112,7 +120,7 @@ onBeforeUnmount(closeSockets)
</script> </script>
<template> <template>
<section class="router-marketplace lg:mt-0" aria-labelledby="router-marketplace-title"> <section class="router-marketplace lg:mt-0" :class="{ 'router-marketplace--expanded': props.expanded }" aria-labelledby="router-marketplace-title">
<div class="glass-card p-5 md:p-6"> <div class="glass-card p-5 md:p-6">
<template v-if="!open"> <template v-if="!open">
<p class="text-xs uppercase tracking-[.18em] text-white/40">OpenWrt gateway</p> <p class="text-xs uppercase tracking-[.18em] text-white/40">OpenWrt gateway</p>
@@ -162,6 +170,7 @@ onBeforeUnmount(closeSockets)
<style scoped> <style scoped>
.router-marketplace { margin-top: 16px; } .router-marketplace { margin-top: 16px; }
.router-marketplace--expanded { grid-column: 1 / -1; margin-top: 0; }
.router-marketplace__cta { display: inline-flex; align-items: center; gap: 10px; } .router-marketplace__cta { display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 1023px) { @media (max-width: 1023px) {
.router-marketplace__cta { width: 100%; justify-content: center; } .router-marketplace__cta { width: 100%; justify-content: center; }
neode-ui/src/views/server/OpenWrtGateway.vue
+3 -2
View File
@@ -115,6 +115,7 @@ const host = ref('')
const sshUser = ref('root') const sshUser = ref('root')
const sshPassword = ref('') const sshPassword = ref('')
const showConnectForm = ref(false) const showConnectForm = ref(false)
const routerShopOpen = ref(false)
const connecting = ref(false) const connecting = ref(false)
const connectedParams = ref<Record<string, string> | null>(null) const connectedParams = ref<Record<string, string> | null>(null)
@@ -535,8 +536,8 @@ onMounted(() => {
<div class="glass-card p-6 mb-6 overflow-hidden router-model-card"> <div class="glass-card p-6 mb-6 overflow-hidden router-model-card">
<div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(280px,360px)] gap-6 items-start"> <div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(280px,360px)] gap-6 items-start">
<DeviceModel model="beryl-ax" label="Beryl AX (GL-MT3000) OpenWrt router" fill-viewport :controls="false" /> <DeviceModel v-if="!routerShopOpen" model="beryl-ax" label="Beryl AX (GL-MT3000) OpenWrt router" fill-viewport :controls="false" />
<RouterMarketplace /> <RouterMarketplace :expanded="routerShopOpen" @open="routerShopOpen = true" @close="routerShopOpen = false" />
</div> </div>
</div> </div>