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

183
noSys/vue/components/NetworksTabs.vue Normal file
View 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>