Added frontend project with some basic api fetching implemented.

Backend/Handler/ThreadHandler.cs

@@ -30,27 +30,27 @@ public class ThreadHandler
     
     public void Start()
     {
-        Thread scanner = new(StartScanner);
+        //Thread scanner = new(StartScanner);
         Thread indexer = new(StartContentFilter);
         Thread database = new(StartDbHandler);
         Thread discarded = new(StartDiscardedDbHandler);
-        Thread filtered = new(StartFilteredDbHandler);
+        //Thread filtered = new(StartFilteredDbHandler);
         Thread resume = new(StartResumeDbHandler);
         Thread communication = new(StartCommunicationHandler);
         
-        scanner.Start();
+        //scanner.Start();
         indexer.Start();
         database.Start();
         discarded.Start();
-        filtered.Start();
+        //filtered.Start();
         resume.Start();
         communication.Start();
         
-        scanner.Join();
+        //scanner.Join();
         indexer.Join();
         database.Join();
         discarded.Join();
-        filtered.Join();
+        //filtered.Join();
         resume.Join();
         communication.Join();
     }

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

frontend/README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

frontend/app.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <NuxtRouteAnnouncer />
+    
+  </div>
+  <NuxtPage />
+</template>

frontend/assets/css/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/nuxt.config.ts

@@ -0,0 +1,15 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-11-01',
+  devtools: { enabled: true },
+  css: ['~/assets/css/main.css'],
+
+  postcss: {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  },
+
+  modules: ['@nuxtjs/tailwindcss'],
+})

frontend/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "nuxt": "^3.14.1592",
+    "vue": "latest",
+    "vue-router": "latest"
+  },
+  "devDependencies": {
+    "@nuxtjs/tailwindcss": "^6.12.2",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.16"
+  }
+}

frontend/pages/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const route = useRoute()
+</script>
+
+<template>
+  <div>
+    <h1>Nuxt Routing set up successfully!</h1>
+    <p>Current route: {{ route.path }}</p>
+    <a href="https://nuxt.com/docs/getting-started/routing" target="_blank">Learn more about Nuxt Routing</a>
+  </div>
+</template>

frontend/pages/progress.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import getProgress from "~/plugins/getProgress";
+
+const progress = getProgress();
+</script>
+
+<template>
+  <div class="m-auto">
+    <div v-if="progress">
+      <table class="table-auto text-left">
+        <thead>
+        <tr>
+          <th>Metric</th>
+          <th>Value</th>
+        </tr>
+        </thead>
+
+        <tbody>
+        <tr>
+          <td>Percentage of Ipv4 scanned</td>
+          <td>{{progress.percentageOfIpv4Scanned}}</td>
+        </tr>
+        <tr>
+          <td>Total filtered</td>
+          <td>{{progress.totalFiltered}}</td>
+        </tr>
+        <tr>
+          <td>Total Discarded</td>
+          <td>{{progress.totalDiscarded}}</td>
+        </tr>
+        <tr>
+          <td>Amount of Ipv4 left</td>
+          <td>{{progress.amountOfIpv4Left}}</td>
+        </tr>
+        <tr>
+          <td>Discarded db size</td>
+          <td>{{progress.discardedDbSize}}</td>
+        </tr>
+        <tr>
+          <td>Filtered db size</td>
+          <td>{{progress.filteredDbSize}}</td>
+        </tr>
+        <tr>
+          <td>Unfiltered db size</td>
+          <td>{{progress.myDbSize}}</td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

frontend/plugins/getProgress.ts

@@ -0,0 +1,17 @@
+export default function getProgress(){
+
+    const progress = ref(null as Progress | null);
+
+    fetch('http://localhost:5224/progress')
+        .then(response => response.json())
+        .then((data: Progress) => {
+            if (data && data.percentageOfIpv4Scanned) {
+                progress.value = data;
+            } else {
+                console.error("Invalid data received from API");
+                console.error(data);
+            }
+        });
+
+    return progress;
+}

frontend/public/robots.txt

@@ -0,0 +1 @@
+

frontend/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

frontend/tailwind.config.js

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./components/**/*.{js,vue,ts}",
+    "./layouts/**/*.vue",
+    "./pages/**/*.vue",
+    "./plugins/**/*.{js,ts}",
+    "./app.vue",
+    "./error.vue",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

frontend/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

frontend/types/global.d.ts

@@ -0,0 +1,9 @@
+interface Progress {
+    percentageOfIpv4Scanned: number; // assuming this is a number
+    totalFiltered: bigint;
+    amountOfIpv4Left: bigint;
+    totalDiscarded: bigint;
+    discardedDbSize: bigint;
+    filteredDbSize: bigint;
+    myDbSize: bigint;
+}