nosys_libs/noSys/vue/components/NetworksTabs.vue

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