61 lines
2.1 KiB
Vue
61 lines
2.1 KiB
Vue
<template>
|
|
<div :id="props.target" class="border-t-gray-800 border-opacity-90 bg-light-600 dark:bg-gray-600 w-full p-4 mt-4 md:mt-2 rounded-l">
|
|
<div class="flex flex justify-between text-2xl bg-light-800 dark:bg-gray-400 p-3 rounded-xl" @click="on_group_item(props.target,$event)">
|
|
<div class="dark:text-white"> {{ props.title }} </div>
|
|
<svg v-show="props.hide" class="fill-current" viewBox="0 0 24 24" width="24" height="24">
|
|
<path
|
|
class="heroicon-ui"
|
|
d="M12 22a10 10 0 110-20 10 10 0 010 20zm0-2a8 8 0 100-16 8 8 0 000 16zm1-9h2a1 1 0 010 2h-2v2a1 1 0 01-2 0v-2H9a1 1 0 010-2h2V9a1 1 0 012 0v2z"
|
|
/>
|
|
</svg>
|
|
<svg v-show="!props.hide" class="fill-current" viewBox="0 0 24 24" width="24" height="24">
|
|
<path
|
|
class="heroicon-ui"
|
|
d="M12 22a10 10 0 110-20 10 10 0 010 20zm0-2a8 8 0 100-16 8 8 0 000 16zm4-8a1 1 0 01-1 1H9a1 1 0 010-2h6a1 1 0 011 1z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div v-for="[grp_key, grp_value] in props.groups" :key="grp_key" class="mt-3" :class="{ 'hidden' : props.hide }">
|
|
<div
|
|
v-for="[subgrp_key,subgrp_value] in grp_value"
|
|
:key="subgrp_key"
|
|
>
|
|
<div
|
|
v-for="(srvr,srvrindex) in subgrp_value"
|
|
:key="srvrindex"
|
|
class="flex flex-wrap -mx-2 pb-8"
|
|
>
|
|
<CloudServices
|
|
:source="props.target === 'tsksrvcs' ? srvr.tsksrvcs : srvr.appsrvcs"
|
|
:target="props.target"
|
|
:filter="props.search"
|
|
:hostname="srvr.hostname"
|
|
@on-cloud-server-item="onCloudServiceItem"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { CloudGroupServcType,SrvcInfoType } from '~/typs/clouds'
|
|
const props = defineProps<{
|
|
groups: Map<string, Map<string, CloudGroupServcType>>
|
|
search: string
|
|
target: string
|
|
title: string
|
|
hide: boolean
|
|
}>()
|
|
const emit = defineEmits(['onCloudGroup'])
|
|
const on_group_item = (target: string, event: Event) => {
|
|
event.preventDefault()
|
|
event.stopImmediatePropagation()
|
|
event.stopPropagation()
|
|
emit('onCloudGroup', target)
|
|
}
|
|
const onCloudServiceItem = (item: SrvcInfoType) => {
|
|
if (item) {
|
|
// console.log(item)
|
|
}
|
|
}
|
|
</script> |