Added libs

This commit is contained in:
Lucas
2026-01-25 13:55:46 +10:00
parent 575c682afc
commit f70af3c4ea
229 changed files with 26983 additions and 0 deletions

43
rendezvous/vue/api/api.js Normal file
View File

@@ -0,0 +1,43 @@
const apiUrl = "/api/rendezvous";
export const rendezvousApi = {
async runServer(user){
const data = {"user": user};
const requestOptions = {
method: 'POST',
headers: {'Content-Type': 'application/json',},
body: JSON.stringify(data),
};
try {
const response = await fetch(apiUrl+"/server", requestOptions);
if (!response.ok) {
const errorText = await response.text();
throw new Error(`Error starting server: ${response.status} - ${errorText}`);
}
const result = await response.json();
return result;
} catch (error) {
console.error("Error starting server:", error);
throw error;
}
},
async getServerStatus(){
try {
const response = await fetch(apiUrl+"/server")
if (!response.ok) {
const errorText = await response.text();
throw new Error(`Error fetching users: ${response.status} - ${errorText}`);
}
const result = await response.json()
return result;
} catch (error) {
console.error("Error fetching configs:", error);
throw error;
}
},
}

View File

@@ -0,0 +1,11 @@
<script setup>
import { TabPanel } from '@headlessui/vue';
</script>
<template>
<TabPanel>
</TabPanel>
</template>

View File

@@ -0,0 +1,161 @@
<script setup>
import { ref, onMounted, computed } from "vue";
import { rendezvousApi } from "../api/api";
import { noSysApi } from "@/modules/noSys/api/noSysApi";
import InputComboBox from "@/components/inputs/InputComboBox.vue";
import Button from "@/components/buttons/Button.vue";
import Label from "@/components/labels/Label.vue";
import { Tab, TabGroup, TabList, TabPanel} from "@headlessui/vue";
import ServerTab from "../components/ServerTab.vue";
import ClientTab from "../components/ClientTab.vue";
import Card from "@/components/cards/Card.vue";
import { GlobeAltIcon, ServerIcon, StopCircleIcon } from "@heroicons/vue/24/solid";
import InputText from "@/components/inputs/InputText.vue";
import CardContent from "@/components/cards/CardContent.vue";
const user = ref()
const users = ref([])
const status = ref(null)
async function getStatus(){
status.value = await rendezvousApi.getServerStatus()
}
async function getUsers(){
users.value = await noSysApi.getUsers()
}
async function runServer(){
const result = rendezvousApi.runServer(user.value.id)
getStatus()
}
getUsers()
getStatus()
</script>
<template>
<TabPanel>
<div class="container mx-auto px-6 py-1 space-y-8">
<Card class=" border-yellow-400/20 p-8">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center space-x-3">
<ServerIcon class="text-yellow-400 h-6 w-6" />
<h2 class="text-2xl font-bold text-yellow-400">Server</h2>
</div>
</div>
<div v-if="!status || !status.server.running" class="text-center py-12">
<StopCircleIcon class="text-gray-600 mx-auto mb-4 h-7 w-7" />
<p class="text-gray-400 text-lg">No server running</p>
<p class="text-gray-500 text-sm">Run a server to help a decentralized network</p>
<div class="mx-auto px-6 mt-2 space-y-2">
<div class="flex flex-row gap-3 items-center">
<Label>User</Label>
<InputComboBox v-model="user" :items="users" labelKey="id" keyField="id" class=" w-96"></InputComboBox>
</div>
<Button @click="runServer()">Run Server</Button>
</div>
</div>
<div v-else>
<div class="bg-black border border-yellow-400/20 rounded-lg p-6">
<div class="grid lg:grid-cols-5 gap-4 items-center">
<div>
<Label class="text-gray-400 text-s">Host</Label>
<p class="text-white font-mono text-s">{{ status.server.host }}</p>
</div>
<div>
<Label class="text-gray-400 text-s">Port</Label>
<p class="text-white font-mono text-s">{{ status.server.port }}</p>
</div>
<div>
<Label class="text-gray-400 text-s">Status</Label>
<p v-if="status.server.running" class="text-green-400 font-mono text-s">Running</p>
<p v-else class="text-red-400 font-mono text-s">Error</p>
</div>
<div>
<Label class="text-gray-400 text-s">Connections</Label>
<p class="text-white font-mono text-s">{{ status.connections.length }}</p>
</div>
<div>
<Label class="text-gray-400 text-s">User</Label>
<p class="text-white font-mono text-s">{{ status.server.user }}</p>
</div>
</div>
</div>
</div>
</Card>
<Card v-if="status.server.running" class=" border-yellow-400/20 p-8">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center space-x-3">
<GlobeAltIcon class="text-yellow-400 h-6 w-6" />
<h2 class="text-2xl font-bold text-yellow-400">Active Connections</h2>
</div>
</div>
<div class="space-y-4">
<div v-for="connection in status.connections" :key="connection" class="bg-black border border-yellow-400/20 rounded-lg p-6">
<div class="grid lg:grid-cols-7 gap-4 items-center">
<div>
<Label class="text-gray-400 text-xs">Connection ID</Label>
<p class="text-white font-mono text-sm">{ connection.id }</p>
</div>
<div>
<Label class="text-gray-400 text-xs">Status</Label>
<!-- <div class="flex items-center space-x-2"
:class="{
'text-green-400': peer.status === 'CONNECTED',
'text-blue-400': peer.status === 'CONNECTING',
'text-yellow-400': peer.status === 'HANDSHAKING',
'text-red-400': peer.status === 'DISCONNECTED',
'text-gray-300': !['CONNECTED', 'CONNECTING', 'HANDSHAKING', 'DISCONNECTED'].includes(peer.status)
}">
{peer.status}
</div> -->
<p class="text-white text-sm">
{connection.status}
</p>
</div>
<div>
<Label class="text-gray-400 text-xs">Networks</Label>
<!-- TODO Last Activity -->
<p class="text-white text-sm">{ 30 }</p>
</div>
<div>
<Label class="text-gray-400 text-xs">Helped</Label>
<!-- TODO Last Activity -->
<p class="text-white text-sm">{ 10 }</p>
</div>
<div>
<Label class="text-gray-400 text-xs">Last Activity</Label>
<!-- TODO Last Activity -->
<p class="text-white text-sm">{ new Date().toLocaleTimeString() }</p>
</div>
</div>
<div class="mt-4 pt-4 border-t border-yellow-400/10">
<div class="flex justify-between text-xs text-gray-400">
<!-- Connected At -->
<span>Connected: {new Date(peer.connectedAt).toLocaleString()}</span>
<span>
Duration: {Math.floor((Date.now() - new Date(peer.connectedAt).getTime()) / 60000)}{" "}
minutes
</span>
</div>
</div>
</div>
</div>
</Card>
</div>
</TabPanel>
</template>

7
rendezvous/vue/router.js Normal file
View File

@@ -0,0 +1,7 @@
import HomeView from "./views/HomeView.vue";
const routes = [
{path: '/', name:'rendezvous', component: HomeView},
]
export {routes};

View File

@@ -0,0 +1,46 @@
<script setup>
import { Tab, TabGroup, TabList, TabPanels } from "@headlessui/vue";
import ServerTab from "../components/ServerTab.vue";
import ClientTab from "../components/ClientTab.vue";
import { LinkIcon, ServerIcon } from "@heroicons/vue/24/solid";
const tabItems = [
{label:"Client", icon:LinkIcon, tabComponent:ClientTab},
{label:"Server", icon:ServerIcon, tabComponent:ServerTab},
]
</script>
<template>
<div class="min-h-screen bg-black text-yellow-400">
<header class="border-b border-yellow-400/20 py-6">
<div class="container mx-auto px-6">
<div class="flex items-center space-x-4">
<div class="text-3xl font-black">
<span class="text-yellow-400">RENDEZ</span>
<span class="text-white">VOUS</span>
</div>
<div class="w-1 h-8 bg-yellow-400"></div>
<span class="text-gray-400">Helps Peer-to-Peer Connections</span>
</div>
</div>
</header>
<div className="container mx-auto px-6">
<TabGroup>
<TabList class="flex flex-wrap gap-2 border-b border-yellow-400/20">
<Tab v-for="tab in tabItems" as="template" :key="tab" v-slot="{ selected }">
<button class="flex items-center space-x-2 px-6 py-3 font-semibold transition-all duration-300 border-b-2"
:class="{ 'text-yellow-400 border-yellow-400': selected, 'text-gray-400 border-transparent hover:text-yellow-400 hover:border-yellow-400/50': !selected }">
<component :is="tab.icon" class="h-4 w-4"></component>
<span>{{ tab.label }}</span>
</button>
</Tab>
</TabList>
<TabPanels class="mt-6 space-y-6" v-for="tab in tabItems" :key="tab.label">
<component :is="tab.tabComponent"></component>
</TabPanels>
</TabGroup>
</div>
</div>
</template>