Added libs
This commit is contained in:
43
rendezvous/vue/api/api.js
Normal file
43
rendezvous/vue/api/api.js
Normal 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;
|
||||
}
|
||||
},
|
||||
}
|
||||
11
rendezvous/vue/components/ClientTab.vue
Normal file
11
rendezvous/vue/components/ClientTab.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<script setup>
|
||||
import { TabPanel } from '@headlessui/vue';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TabPanel>
|
||||
|
||||
</TabPanel>
|
||||
</template>
|
||||
161
rendezvous/vue/components/ServerTab.vue
Normal file
161
rendezvous/vue/components/ServerTab.vue
Normal 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
7
rendezvous/vue/router.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import HomeView from "./views/HomeView.vue";
|
||||
|
||||
const routes = [
|
||||
{path: '/', name:'rendezvous', component: HomeView},
|
||||
]
|
||||
|
||||
export {routes};
|
||||
46
rendezvous/vue/views/HomeView.vue
Normal file
46
rendezvous/vue/views/HomeView.vue
Normal 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>
|
||||
Reference in New Issue
Block a user