List firewalls

src/server/services/PaFirewallService.ts

@@ -138,6 +138,15 @@ export class PaFirewallService {
     })
   }
 
+  static async listFirewalls() {
+    const firewalls = await db.paHost.findMany()
+
+    return firewalls.map(firewall => ({
+      ip: firewall.ip,
+      name: firewall.name
+    }))
+  }
+
   async getIpStatus(ip: string) {
     const params = new URLSearchParams({
       key: this.key,

src/server/trpc.ts

@@ -81,6 +81,10 @@ export const appRouter = t.router({
       await PaFirewallService.addFirewall({ ip, username, password })
 
       return true
+    }),
+
+  listFirewalls: t.procedure.query(async () => {
+    return await PaFirewallService.listFirewalls()
   })
 })
 

src/web/views/AddFirewall.vue

@@ -64,11 +64,23 @@
         </v-form>
       </v-col>
     </v-row>
+    <v-card class="mt-10" title="Hosts cadastrados">
+      <v-card-text>
+        <v-chip
+          v-for="fw in firewalls"
+          :key="fw.ip"
+          class="mr-2"
+          color="primary"
+        >
+          {{ fw.ip }}
+        </v-chip>
+      </v-card-text>
+    </v-card>
   </v-container>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { VForm } from 'vuetify/lib/components/index.mjs'
 import { z } from 'zod'
@@ -114,4 +126,20 @@ async function submit() {
     loading.value = false
   }
 }
+
+const firewalls = ref<{ ip: string; name: string | null }[]>()
+
+async function getFirewalls() {
+  try {
+    const data = await trpc.listFirewalls.query()
+
+    firewalls.value = data
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+onMounted(() => {
+  getFirewalls()
+})
 </script>