Added libs
This commit is contained in:
Lucas
282
noSys/vue/components/ConnectionsTab.vue
Normal file
282
noSys/vue/components/ConnectionsTab.vue
Normal file
@@ -0,0 +1,282 @@
|
||||
<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("30331")
|
||||
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.user, 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="user" keyField="user" 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>
|
||||
183
noSys/vue/components/NetworksTabs.vue
Normal file
183
noSys/vue/components/NetworksTabs.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<script setup>
|
||||
import Button from '@/components/buttons/Button.vue';
|
||||
import Card from '@/components/cards/Card.vue';
|
||||
import InputComboBox from '@/components/inputs/InputComboBox.vue';
|
||||
import InputText from '@/components/inputs/InputText.vue';
|
||||
import Label from '@/components/labels/Label.vue';
|
||||
import { TabPanel} from '@headlessui/vue'
|
||||
import { CogIcon, MagnifyingGlassIcon, PlusIcon, TrashIcon } from '@heroicons/vue/24/solid';
|
||||
import { noSysApi } from '../api/noSysApi';
|
||||
import { useNoSysStore } from '../stores/noSysStore';
|
||||
import { onActivated, onDeactivated } from 'vue';
|
||||
|
||||
const noSysStore = useNoSysStore()
|
||||
|
||||
async function listNetworks(){
|
||||
noSysStore.networks.value = await noSysApi.listNetworks()
|
||||
}
|
||||
|
||||
onActivated(()=>{
|
||||
listNetworks()
|
||||
})
|
||||
|
||||
onDeactivated(()=>{
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TabPanel>
|
||||
<Card class="border-yellow-400/20 p-8 mb-8">
|
||||
<div class="flex items-center space-x-3 mb-6">
|
||||
<PlusIcon class="text-yellow-400 w-6 h-6"/>
|
||||
<h2 class="text-2xl font-bold text-yellow-400">Add Network</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<Label class="text-gray-300 mb-2 block">Network ID</Label>
|
||||
<InputText
|
||||
class="bg-black border-yellow-400/30 text-white"
|
||||
placeholder="ID"
|
||||
/>
|
||||
</div>
|
||||
<Button class="mt-6 bg-yellow-400 text-black hover:bg-yellow-300 font-bold w-full">
|
||||
<MagnifyingGlassIcon class="w-4 h-4 mr-2 text-black" />
|
||||
<p class="text-black">Search Network</p>
|
||||
</Button>
|
||||
|
||||
<div>
|
||||
<Label class="text-gray-300 mb-2 block">Network Name</Label>
|
||||
<InputText
|
||||
class="bg-black border-yellow-400/30 text-white"
|
||||
placeholder="Name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label class="text-gray-300 mb-2 block">Network Description</Label>
|
||||
<InputText
|
||||
class="bg-black border-yellow-400/30 text-white"
|
||||
placeholder="Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<Label class="text-gray-300 mb-2 block">Modules</Label>
|
||||
<InputComboBox
|
||||
class="bg-black border-yellow-400/30 text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<Label class="text-gray-300 mb-2 block">Network Type</Label>
|
||||
<InputComboBox
|
||||
class="bg-black border-yellow-400/30 text-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row gap-x-3">
|
||||
<Button class="mt-6 bg-yellow-400 text-black hover:bg-yellow-300 font-bold w-full">
|
||||
<PlusIcon class="w-4 h-4 mr-2 text-black" />
|
||||
<p class="text-black">Add Network</p>
|
||||
</Button>
|
||||
|
||||
</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">
|
||||
<!-- <Network class="text-yellow-400" size={24} /> -->
|
||||
<h2 class="text-2xl font-bold text-yellow-400">Networks</h2>
|
||||
</div>
|
||||
<div class="text-sm text-gray-400">{networks.length} networks</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="!noSysStore.networks.value" class="text-center py-12">
|
||||
<Network size={48} class="text-gray-600 mx-auto mb-4" />
|
||||
<p class="text-gray-400 text-lg">No networks created</p>
|
||||
<p class="text-gray-500 text-sm">Create a network to start connecting with peers</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-4">
|
||||
<div v-for="network in noSysStore.networks.value" key={network.id} class="bg-black border border-yellow-400/20 rounded-lg p-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center space-x-3 mb-3">
|
||||
<h3 class="text-xl font-bold text-white">{{network.data.name}}</h3>
|
||||
<span class="bg-yellow-400/20 text-yellow-400 px-2 py-1 rounded text-sm">
|
||||
{{network.data.id}}
|
||||
</span>
|
||||
<span
|
||||
class="px-2 py-1 rounded text-sm"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-4 gap-4 mb-4">
|
||||
<div>
|
||||
<Label class="text-gray-400 text-xs">Total Connections</Label>
|
||||
<p class="text-2xl font-bold text-green-400">{{network.state.peers.length}}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label class="text-gray-400 text-xs">Status</Label>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
{{network.state.status}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label class="text-gray-400 text-xs">Auto Fill</Label>
|
||||
<p class="">
|
||||
{{network.state.managed}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label class="text-gray-400 text-xs">Users</Label>
|
||||
<p class="">
|
||||
{{network.state.users.length}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<Label class="text-gray-400 text-xs">Modules</Label>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div v-for="module in network.data.modules" class="flex flex-wrap mt-1">
|
||||
<span class="bg-blue-500/20 text-blue-400 px-2 py-1 rounded text-sm">
|
||||
{{module}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-2">
|
||||
<Button
|
||||
class="border-yellow-400 text-yellow-400 hover:bg-yellow-400 hover:text-black bg-transparent"
|
||||
>
|
||||
<CogIcon class="h-4 w-4 mr-1" />
|
||||
Configure
|
||||
</Button>
|
||||
<Button
|
||||
class="bg-red-500 hover:bg-red-600 text-white"
|
||||
>
|
||||
<TrashIcon class="h-4 w-4mr-1" />
|
||||
Quit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</TabPanel>
|
||||
</template>
|
||||
Reference in New Issue
Block a user