[Client] Improve admin panel
This commit is contained in:
		| @@ -138,6 +138,10 @@ export default Vue.extend({ | |||||||
| 	}, | 	}, | ||||||
|  |  | ||||||
| 	methods: { | 	methods: { | ||||||
|  | 		setSrc(src) { | ||||||
|  | 			this.src = src; | ||||||
|  | 		}, | ||||||
|  |  | ||||||
| 		render() { | 		render() { | ||||||
| 			if (this.chartInstance) { | 			if (this.chartInstance) { | ||||||
| 				this.chartInstance.destroy(); | 				this.chartInstance.destroy(); | ||||||
|   | |||||||
| @@ -19,6 +19,7 @@ | |||||||
| 			</div> | 			</div> | ||||||
| 			<div> | 			<div> | ||||||
| 				<span>%fa:home% %i18n:@this-instance%</span> | 				<span>%fa:home% %i18n:@this-instance%</span> | ||||||
|  | 				<span @click="setChartSrc('users')">%fa:chart-bar R%</span> | ||||||
| 			</div> | 			</div> | ||||||
| 		</div> | 		</div> | ||||||
| 		<div> | 		<div> | ||||||
| @@ -31,6 +32,7 @@ | |||||||
| 			</div> | 			</div> | ||||||
| 			<div> | 			<div> | ||||||
| 				<span>%fa:home% %i18n:@this-instance%</span> | 				<span>%fa:home% %i18n:@this-instance%</span> | ||||||
|  | 				<span @click="setChartSrc('notes')">%fa:chart-bar R%</span> | ||||||
| 			</div> | 			</div> | ||||||
| 		</div> | 		</div> | ||||||
| 		<div> | 		<div> | ||||||
| @@ -43,6 +45,7 @@ | |||||||
| 			</div> | 			</div> | ||||||
| 			<div> | 			<div> | ||||||
| 				<span>%fa:home% %i18n:@this-instance%</span> | 				<span>%fa:home% %i18n:@this-instance%</span> | ||||||
|  | 				<span @click="setChartSrc('drive')">%fa:chart-bar R%</span> | ||||||
| 			</div> | 			</div> | ||||||
| 		</div> | 		</div> | ||||||
| 		<div> | 		<div> | ||||||
| @@ -55,12 +58,13 @@ | |||||||
| 			</div> | 			</div> | ||||||
| 			<div> | 			<div> | ||||||
| 				<span>%fa:globe% %i18n:@federated%</span> | 				<span>%fa:globe% %i18n:@federated%</span> | ||||||
|  | 				<span @click="setChartSrc('federation-instances-total')">%fa:chart-bar R%</span> | ||||||
| 			</div> | 			</div> | ||||||
| 		</div> | 		</div> | ||||||
| 	</div> | 	</div> | ||||||
|  |  | ||||||
| 	<div class="charts"> | 	<div class="charts"> | ||||||
| 		<x-charts/> | 		<x-charts ref="charts"/> | ||||||
| 	</div> | 	</div> | ||||||
|  |  | ||||||
| 	<div class="cpu-memory"> | 	<div class="cpu-memory"> | ||||||
| @@ -85,6 +89,7 @@ export default Vue.extend({ | |||||||
| 		XCharts, | 		XCharts, | ||||||
| 		XApLog | 		XApLog | ||||||
| 	}, | 	}, | ||||||
|  |  | ||||||
| 	data() { | 	data() { | ||||||
| 		return { | 		return { | ||||||
| 			stats: null, | 			stats: null, | ||||||
| @@ -92,6 +97,7 @@ export default Vue.extend({ | |||||||
| 			meta: null | 			meta: null | ||||||
| 		}; | 		}; | ||||||
| 	}, | 	}, | ||||||
|  |  | ||||||
| 	created() { | 	created() { | ||||||
| 		this.connection = (this as any).os.stream.useSharedConnection('serverStats'); | 		this.connection = (this as any).os.stream.useSharedConnection('serverStats'); | ||||||
|  |  | ||||||
| @@ -103,8 +109,15 @@ export default Vue.extend({ | |||||||
| 			this.stats = stats; | 			this.stats = stats; | ||||||
| 		}); | 		}); | ||||||
| 	}, | 	}, | ||||||
|  |  | ||||||
| 	beforeDestroy() { | 	beforeDestroy() { | ||||||
| 		this.connection.dispose(); | 		this.connection.dispose(); | ||||||
|  | 	}, | ||||||
|  |  | ||||||
|  | 	methods: { | ||||||
|  | 		setChartSrc(src) { | ||||||
|  | 			this.$refs.charts.setSrc(src); | ||||||
|  | 		} | ||||||
| 	} | 	} | ||||||
| }); | }); | ||||||
| </script> | </script> | ||||||
| @@ -177,6 +190,7 @@ export default Vue.extend({ | |||||||
| 							color var(--primary) | 							color var(--primary) | ||||||
|  |  | ||||||
| 			> div:last-child | 			> div:last-child | ||||||
|  | 				display flex | ||||||
| 				padding 6px 16px | 				padding 6px 16px | ||||||
| 				border-top solid 1px #eee | 				border-top solid 1px #eee | ||||||
|  |  | ||||||
| @@ -184,6 +198,10 @@ export default Vue.extend({ | |||||||
| 					font-size 70% | 					font-size 70% | ||||||
| 					opacity 0.7 | 					opacity 0.7 | ||||||
|  |  | ||||||
|  | 					&:last-child | ||||||
|  | 						margin-left auto | ||||||
|  | 						cursor pointer | ||||||
|  |  | ||||||
| 	> .charts | 	> .charts | ||||||
| 		margin-bottom 16px | 		margin-bottom 16px | ||||||
|  |  | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user
	 syuilo
					syuilo