From 0c39f243b75f1b5956a4813e64c4b21c18f741c1 Mon Sep 17 00:00:00 2001
From: yupix <yupi0982@outlook.jp>
Date: Tue, 16 Aug 2022 13:20:43 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20server.memory.vue=E3=82=92script=20setu?=
 =?UTF-8?q?p=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

---
 .../common/views/widgets/server.memory.vue    | 71 ++++++++-----------
 1 file changed, 31 insertions(+), 40 deletions(-)

diff --git a/src/client/app/common/views/widgets/server.memory.vue b/src/client/app/common/views/widgets/server.memory.vue
index c3b2f3a101..c6046428e9 100644
--- a/src/client/app/common/views/widgets/server.memory.vue
+++ b/src/client/app/common/views/widgets/server.memory.vue
@@ -1,47 +1,39 @@
 <template>
-<div class="memory">
-	<x-pie class="pie" :value="usage"/>
-	<div>
-		<p><fa icon="memory"/>Memory</p>
-		<p>Total: {{ total | bytes(1) }}</p>
-		<p>Used: {{ used | bytes(1) }}</p>
-		<p>Free: {{ free | bytes(1) }}</p>
+	<div class="memory">
+		<x-pie class="pie" :value="usage" />
+		<div>
+			<p><fa icon="memory" />Memory</p>
+			<p>Total: {{ total | bytes(1) }}</p>
+			<p>Used: {{ used | bytes(1) }}</p>
+			<p>Free: {{ free | 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
-	},
-	props: ['connection'],
-	data() {
-		return {
-			usage: 0,
-			total: 0,
-			used: 0,
-			free: 0
-		};
-	},
-	mounted() {
-		this.connection.on('stats', this.onStats);
-	},
-	beforeDestroy() {
-		this.connection.off('stats', this.onStats);
-	},
-	methods: {
-		onStats(stats) {
-			stats.mem.free = stats.mem.total - stats.mem.used;
-			this.usage = stats.mem.used / stats.mem.total;
-			this.total = stats.mem.total;
-			this.used = stats.mem.used;
-			this.free = stats.mem.free;
-		}
-	}
+const { connection } = defineProps({ connection: { type: Stream } });
+let usage = ref(0);
+let total = ref(0);
+let used = ref(0);
+let free = ref(0);
+
+const onStats = (stats) => {
+	stats.mem.free = stats.mem.total - stats.mem.used;
+	usage.value = stats.mem.used / stats.mem.total;
+	total.value = stats.mem.total;
+	used.value = stats.mem.used;
+	free.value = stats.mem.free;
+};
+
+onMounted(() => {
+	connection.on("stats", onStats);
+});
+onUnmounted(() => {
+	connection.off("stats", onStats);
 });
 </script>
 
@@ -72,5 +64,4 @@ export default Vue.extend({
 		content ""
 		display block
 		clear both
-
 </style>