From 7e3083c763a08c3601ed3d20cfeaa5ac4575aa74 Mon Sep 17 00:00:00 2001
From: yupix <yupi0982@outlook.jp>
Date: Tue, 16 Aug 2022 13:11:28 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20server.disk.vue=E3=82=92script=20setup?=
 =?UTF-8?q?=E3=81=AB=E5=A4=89=E6=9B=B4=20#122?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/common/views/widgets/server.disk.vue  | 74 +++++++++----------
 1 file changed, 35 insertions(+), 39 deletions(-)

diff --git a/src/client/app/common/views/widgets/server.disk.vue b/src/client/app/common/views/widgets/server.disk.vue
index 039c4f5c29..99062c189b 100644
--- a/src/client/app/common/views/widgets/server.disk.vue
+++ b/src/client/app/common/views/widgets/server.disk.vue
@@ -1,47 +1,44 @@
 <template>
-<div class="disk">
-	<x-pie class="pie" :value="usage"/>
-	<div>
-		<p><fa :icon="['far', 'hdd']"/>Storage</p>
-		<p>Total: {{ total | bytes(1) }}</p>
-		<p>Free: {{ available | bytes(1) }}</p>
-		<p>Used: {{ used | bytes(1) }}</p>
+	<div class="disk">
+		<x-pie class="pie" :value="usage" />
+		<div>
+			<p><fa :icon="['far', 'hdd']" />Storage</p>
+			<p>Total: {{ total | bytes(1) }}</p>
+			<p>Free: {{ available | bytes(1) }}</p>
+			<p>Used: {{ used | bytes(1) }}</p>
+		</div>
 	</div>
-</div>
 </template>
 
-<script lang="ts">
-import Vue from 'vue';
-import XPie from './server.pie.vue';
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from "vue";
+import Stream from "../../scripts/stream";
+import XPie from "./server.pie.vue";
 
-export default Vue.extend({
-	components: {
-		XPie
+const props = defineProps({
+	connection: {
+		type: Stream,
 	},
-	props: ['connection'],
-	data() {
-		return {
-			usage: 0,
-			total: 0,
-			used: 0,
-			available: 0
-		};
-	},
-	mounted() {
-		this.connection.on('stats', this.onStats);
-	},
-	beforeDestroy() {
-		this.connection.off('stats', this.onStats);
-	},
-	methods: {
-		onStats(stats) {
-			stats.disk.used = stats.disk.total - stats.disk.free;
-			this.usage = stats.disk.used / stats.disk.total;
-			this.total = stats.disk.total;
-			this.used = stats.disk.used;
-			this.available = stats.disk.available;
-		}
-	}
+});
+
+let usage = ref(0);
+let total = ref(0);
+let used = ref(0);
+let available = ref(0);
+
+const onStats = (stats) => {
+	stats.disk.used = stats.disk.total - stats.disk.free;
+	usage.value = stats.disk.used / stats.disk.total;
+	total.value = stats.disk.total;
+	used.value = stats.disk.used;
+	available.value = stats.disk.available;
+};
+
+onMounted(() => {
+	props.connection.on("stats", onStats);
+});
+onUnmounted(() => {
+	props.connection.off("stats", onStats);
 });
 </script>
 
@@ -72,5 +69,4 @@ export default Vue.extend({
 		content ""
 		display block
 		clear both
-
 </style>