nosys_libs/rendezvous/vue/components/ServerTab.vue

<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>