76 lines
		
	
	
		
			1.6 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			76 lines
		
	
	
		
			1.6 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <div>
 | |
|     <n-card title="Sites">
 | |
|       <template #header-extra>
 | |
|         <sites-table-add @reload="readSites()" />
 | |
|       </template>
 | |
| 
 | |
|       <n-data-table
 | |
|         :columns="columns"
 | |
|         :data="data"
 | |
|         :row-key="(row: any) => row.id"
 | |
|       />
 | |
|     </n-card>
 | |
|   </div>
 | |
| </template>
 | |
| 
 | |
| <script setup lang="ts">
 | |
| import { NCard, NDataTable, NTag } from "naive-ui"
 | |
| import { h, ref } from "vue"
 | |
| import SitesTableExpand from "@/components/data/sites-table-expand.vue"
 | |
| import SitesTableAction from "@/components/data/sites-table-action.vue"
 | |
| import SitesTableAdd from "@/components/data/sites-table-add.vue"
 | |
| 
 | |
| const columns: any[] = [
 | |
|   {
 | |
|     type: "expand",
 | |
|     renderExpand(row: any) {
 | |
|       return h(SitesTableExpand, { ...row, class: "pl-[38px]" })
 | |
|     }
 | |
|   },
 | |
|   {
 | |
|     title: "ID",
 | |
|     key: "id",
 | |
|     render(row: any) {
 | |
|       return h(NTag, { type: "info", bordered: false, size: "small" }, row?.id)
 | |
|     }
 | |
|   },
 | |
|   {
 | |
|     title: "Rules",
 | |
|     key: "rules",
 | |
|     render(row: any) {
 | |
|       return row?.rules?.length ?? 0
 | |
|     }
 | |
|   },
 | |
|   {
 | |
|     title: "Upstreams",
 | |
|     key: "upstreams",
 | |
|     render(row: any) {
 | |
|       return row?.upstreams?.length ?? 0
 | |
|     }
 | |
|   },
 | |
|   {
 | |
|     title: "Processes",
 | |
|     key: "processes",
 | |
|     render(row: any) {
 | |
|       return row?.processes?.length ?? 0
 | |
|     }
 | |
|   },
 | |
|   {
 | |
|     title: "Actions",
 | |
|     key: "actions",
 | |
|     render(row: any) {
 | |
|       return h(SitesTableAction, { ...row, onReload: () => readSites() })
 | |
|     }
 | |
|   }
 | |
| ]
 | |
| 
 | |
| const data = ref<any[]>([])
 | |
| 
 | |
| async function readSites() {
 | |
|   const resp = await fetch("/cgi/sites")
 | |
|   data.value = await resp.json()
 | |
| }
 | |
| 
 | |
| readSites()
 | |
| </script> |