282 lines
11 KiB
Vue
282 lines
11 KiB
Vue
<script setup>
|
|
import Button from '@/components/buttons/Button.vue';
|
|
import InputText from '@/components/inputs/InputText.vue';
|
|
import Label from '@/components/labels/Label.vue';
|
|
import { ref, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue';
|
|
import { noSysApi } from '../api/noSysApi';
|
|
import InputComboBox from '@/components/inputs/InputComboBox.vue';
|
|
import { useNoSysStore } from '../stores/noSysStore'
|
|
import { getSocket } from '@/plugins/socketioManager'
|
|
import Card from '@/components/cards/Card.vue';
|
|
import { ArrowPathIcon, EllipsisHorizontalIcon, GlobeAltIcon, LinkIcon, MapIcon, WifiIcon, XMarkIcon } from '@heroicons/vue/24/solid';
|
|
import { TabPanel} from '@headlessui/vue'
|
|
|
|
var socket = null
|
|
const noSysStore = useNoSysStore()
|
|
|
|
const ip = ref("n0sys.duckdns.org")
|
|
const port = ref("40441")
|
|
const user = ref()
|
|
const peers = ref([])
|
|
|
|
async function listUsers(){
|
|
noSysStore.users.value = await noSysApi.getUsers()
|
|
}
|
|
|
|
async function connect(){
|
|
const response = await noSysApi.connectAddress(user.value.id, ip.value, port.value)
|
|
}
|
|
|
|
async function reconnect(connectionId){
|
|
// const response = await noSysApi.connectAddress(user.value.user, ip.value, port.value)
|
|
}
|
|
|
|
async function disconnect(connectionId){
|
|
const response = await noSysApi.disconnectPeer(connectionId)
|
|
}
|
|
|
|
async function listPeers(){
|
|
peers.value = await noSysApi.listPeers()
|
|
}
|
|
|
|
onActivated(async () => {
|
|
socket = await getSocket("noSys_noSys")
|
|
socket.on('tempEvent', onTemporaryEvent)
|
|
|
|
listUsers()
|
|
listPeers()
|
|
});
|
|
|
|
onDeactivated(() => {
|
|
socket.off('tempEvent')
|
|
});
|
|
|
|
function onTemporaryEvent(data) {
|
|
console.log('Received temporary event in HomeView:', data)
|
|
}
|
|
|
|
// function sendMessage(){
|
|
// messageElement = document.getElementById("message")
|
|
// message = messageElement.value;
|
|
// if (connectionClicked && message){
|
|
// const data = {"message":{"action":"test", "data":message},"toModule": {"package": "noSys","module": "noSys"},"encrypted": true};
|
|
// const requestOptions = {
|
|
// method: 'POST',
|
|
// headers: {
|
|
// 'Content-Type': 'application/json',
|
|
// },
|
|
// body: JSON.stringify(data),
|
|
// };
|
|
|
|
// fetch(noSysApiUrl+"/peers/"+connectionClicked, requestOptions)
|
|
// .then(response => {
|
|
// if (!response.ok) {
|
|
// throw new Error('Network response was not ok');
|
|
// }
|
|
// return response.json();
|
|
// })
|
|
// .then(data => {
|
|
// console.log(data);
|
|
// addMessage(connectionClicked, message, false)
|
|
// messageElement.value = ""
|
|
// })
|
|
// .catch(error => {
|
|
// console.error
|
|
|
|
// ('Error:', error);
|
|
// });
|
|
// }
|
|
// }
|
|
</script>
|
|
|
|
<template>
|
|
<TabPanel>
|
|
<div class="container mx-auto px-6 py-1 space-y-8">
|
|
<div class="grid md:grid-cols-4 gap-6">
|
|
<Card class="border-yellow-400/20 p-6">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center">
|
|
<WifiIcon class="text-green-400 w-6 h-6"/>
|
|
</div>
|
|
<div>
|
|
<p class="text-2xl font-bold text-white">
|
|
{{peers.filter((p) => p.status === "CONNECTED").length}}
|
|
</p>
|
|
<p class="text-gray-400 text-sm">Connected</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card class=" border-yellow-400/20 p-6">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-12 h-12 bg-yellow-500/20 rounded-lg flex items-center justify-center">
|
|
<EllipsisHorizontalIcon class="text-yellow-400 h-6 w-6" size={24} />
|
|
</div>
|
|
<div>
|
|
<p class="text-2xl font-bold text-white">
|
|
{{peers.filter((p) => p.status === "CONNECTING").length}}
|
|
</p>
|
|
<p class="text-gray-400 text-sm">Connecting</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card class=" border-yellow-400/20 p-6">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-12 h-12 bg-red-500/20 rounded-lg flex items-center justify-center">
|
|
<XMarkIcon class="text-red-400 h-6 w-6"/>
|
|
</div>
|
|
<div>
|
|
<p class="text-2xl font-bold text-white">
|
|
{{peers.filter((p) => p.status === "ERROR").length}}
|
|
</p>
|
|
<p class="text-gray-400 text-sm">Failed</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card class=" border-yellow-400/20 p-6">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center">
|
|
<LinkIcon class="text-blue-400 h-6 w-6"/>
|
|
</div>
|
|
<div>
|
|
<p class="text-2xl font-bold text-white">{{peers.length}}</p>
|
|
<p class="text-gray-400 text-sm">Total</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card class="bg-black border-yellow-400/20 p-8">
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<LinkIcon class="text-yellow-400 h-6 w-6" />
|
|
<h2 class="text-2xl font-bold text-yellow-400">Connect to Peer</h2>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-4 gap-6">
|
|
<div>
|
|
<Label class="text-gray-300 mb-2 block">IP Address</Label>
|
|
<InputText id="ip" type="text" v-model="ip" placeholder="" class="border-yellow-400/30 w-full"/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label class="text-gray-300 mb-2 block">Port</Label>
|
|
<InputText id="port" type="text" v-model="port" placeholder="" class="border-yellow-400/30 w-full"/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label class="text-gray-300 mb-2 block">User</Label>
|
|
<InputComboBox v-model="user" :items="noSysStore.users.value" labelKey="id" keyField="id" class="border-yellow-400/30"></InputComboBox>
|
|
</div>
|
|
<div class="flex items-end">
|
|
<Button @click="connect()" class="w-full bg-yellow-400 text-black hover:bg-yellow-300 font-bold">Connect</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<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">
|
|
<GlobeAltIcon class="text-yellow-400 h-6 w-6" />
|
|
<h2 class="text-2xl font-bold text-yellow-400">Active Connections</h2>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div v-if="peers.length === 0" class="text-center py-12">
|
|
<WifiIcon class="text-gray-600 mx-auto mb-4 h-7 w-7" />
|
|
<p class="text-gray-400 text-lg">No connections established</p>
|
|
<p class="text-gray-500 text-sm">Connect to peers to start building the decentralized network</p>
|
|
</div>
|
|
|
|
<div v-else class="space-y-4">
|
|
<div v-for="peer in peers" :key="peer.id" 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">{{ peer.id }}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<Label class="text-gray-400 text-xs">Address</Label>
|
|
<p class="text-white text-sm">
|
|
{{peer.address}}
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<Label class="text-gray-400 text-xs">Bind Address</Label>
|
|
<p class="text-white text-sm">
|
|
{{peer.bindAddress}}
|
|
</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>
|
|
</div>
|
|
|
|
<div>
|
|
<Label class="text-gray-400 text-xs">Users</Label>
|
|
<p class="text-sm">
|
|
<span class="text-yellow-400">{{peer.user}}</span>
|
|
<!-- TODO MyUser, PeerUser/ProofOfWork -->
|
|
<span class="text-gray-400"> ↔ </span>
|
|
<span class="text-blue-400">{{peer.user}}</span>
|
|
</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 class="flex gap-2">
|
|
<Button v-if="peer.status === 'CONNECTED'"
|
|
@click="disconnect(peer.id)"
|
|
class="bg-red-500 hover:bg-red-600 text-white"
|
|
>
|
|
<XMarkIcon class="mr-1 h-4 w-4" />
|
|
Close
|
|
</Button>
|
|
|
|
<Button v-if="peer.status === 'DISCONNECTED'"
|
|
@click="reconnect(peer.id)"
|
|
class="bg-green-500 hover:bg-green-600 text-white"
|
|
>
|
|
<ArrowPathIcon class="mr-1 h-4 w-4" />
|
|
Reconnect
|
|
</Button>
|
|
|
|
|
|
</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> |