selcarpa
29843bb5e5
- Remove direct database operations and use groupRepository instead. - Use notifyStore to unify notification messages.
104 lines
2.4 KiB
Vue
104 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import {ref} from 'vue'
|
|
import {useRouter} from "vue-router";
|
|
import {groupRepository} from "@/entities/group.ts";
|
|
import {nodeRepository} from "@/entities/node.ts";
|
|
|
|
const router = useRouter()
|
|
|
|
interface GroupItem {
|
|
name: string
|
|
url: string
|
|
traffic: string
|
|
}
|
|
|
|
interface Group {
|
|
title: string
|
|
items: GroupItem[]
|
|
id: number
|
|
}
|
|
|
|
const panels = ref([])
|
|
const groups = ref<Group[]>([])
|
|
|
|
const loadData = async () => {
|
|
|
|
const groupsInDb = await groupRepository.findAll()
|
|
const nodesInDb = await nodeRepository.findAll()
|
|
|
|
for (let i = 0; i < groupsInDb.length; i++) {
|
|
const group: any = groupsInDb[i]
|
|
const nodes = nodesInDb.filter((node: any) => node.group_id === group.id)
|
|
groups.value.push({
|
|
title: group.name,
|
|
items: nodes.map((node: any) => ({
|
|
name: node.name,
|
|
url: node.url,
|
|
traffic: "0MB"
|
|
})),
|
|
id: group.id
|
|
})
|
|
}
|
|
}
|
|
|
|
function addItem(group: Group) {
|
|
console.log(group.id)
|
|
router.push(`/addNode/${group.id}`)
|
|
}
|
|
|
|
loadData()
|
|
</script>
|
|
|
|
<template>
|
|
<v-container>
|
|
<v-expansion-panels v-model="panels" multiple>
|
|
<v-expansion-panel
|
|
v-for="(group, i) in groups"
|
|
:key="i"
|
|
elevation="2"
|
|
class="my-3"
|
|
>
|
|
<v-expansion-panel-title>
|
|
<div class="d-flex align-center justify-space-between w-100">
|
|
<span class="text-h6">{{ group.title }}</span>
|
|
|
|
<v-btn
|
|
size="small"
|
|
color="primary"
|
|
variant="tonal"
|
|
prepend-icon="mdi-plus"
|
|
@click.stop="addItem(group)"
|
|
>
|
|
add
|
|
</v-btn>
|
|
</div>
|
|
</v-expansion-panel-title>
|
|
|
|
<v-expansion-panel-text>
|
|
<v-row dense>
|
|
<v-col
|
|
v-for="(item, j) in group.items"
|
|
:key="j"
|
|
cols="12"
|
|
sm="6"
|
|
md="4"
|
|
lg="3"
|
|
>
|
|
<v-card elevation="3" class="ma-2">
|
|
<v-card-title class="text-subtitle-1">
|
|
{{ item.name }}
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<div>{{ item.url }}</div>
|
|
<div>usage: {{ item.traffic }}</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-expansion-panel-text>
|
|
</v-expansion-panel>
|
|
</v-expansion-panels>
|
|
</v-container>
|
|
</template>
|
|
|