lucas/nosys_libs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Added libs

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

161
rendezvous/vue/components/ServerTab.vue Normal file
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>