Copy

<script setup lang="ts">
import { useTimeoutPoll, useTitle } from "@vueuse/core";
import { computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import TopBar from "./components/TopBar.vue";
import { fetchHoneypotTypes, useBlocklistStore } from "./store";

const blocklistStore = useBlocklistStore();
const route = useRoute();

useTimeoutPoll(blocklistStore.fetchBlocklist, 60 * 1000, {
  immediateCallback: true,
});

useTitle(
  computed(() => {
    const title = "HONEYPIE";
    if (route.name === "ip" || route.name === "subnet") {
      if (route.params.mask) {
        return `${route.params.ip}/${route.params.mask} - ${title}`;
      }
      return `${route.params.ip} - ${title}`;
    }
    if (route.name === "port") {
      return `Port ${route.params.port} - ${title}`;
    }

    if (
      ["city", "country", "asn", "domain", "fqdn"].includes(
        route.name as string,
      )
    ) {
      return `${route.params.value} - ${title}`;
    }

    if (["events", "charts", "stats"].includes(route.name as string)) {
      const name =
        String(route.name).charAt(0).toUpperCase() +
        String(route.name).slice(1);
      return `${name} - ${title}`;
    }

    return title;
  }),
);

onMounted(() => {
  fetchHoneypotTypes();
});
</script>

<template>
  <div class="flex min-h-screen flex-col">
    <TopBar />
    <RouterView />
  </div>
</template>