From 19d531922df3d1dda6d3e887a72e6d39798408a7 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 2 Oct 2021 16:36:25 +0900
Subject: enhance: ページロードエラーページにリロードボタンを追加 (#7835)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* wip

* modify page load error page

* add changelog

* サーバーが死んでるエラーを追加

* add MkLoading
---
 src/client/pages/_error_.vue | 38 +++++++++++++++++++++++++++++++++++---
 1 file changed, 35 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/pages/_error_.vue b/src/client/pages/_error_.vue
index 1d67d9b14d..d1cefad8dd 100644
--- a/src/client/pages/_error_.vue
+++ b/src/client/pages/_error_.vue
@@ -1,9 +1,16 @@
 <template>
+<MkLoading v-if="!loaded" />
 <transition :name="$store.state.animation ? 'zoom' : ''" appear>
-	<div class="mjndxjch">
+	<div class="mjndxjch" v-show="loaded">
 		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
 		<p><b><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</b></p>
-		<p>{{ $ts.pageLoadErrorDescription }}</p>
+		<p v-if="version === meta.version">{{ $ts.pageLoadErrorDescription }}</p>
+		<p v-else-if="serverIsDead">{{ $ts.serverIsDead }}</p>
+		<template v-else>
+			<p>{{ $ts.newVersionOfClientAvailable }}</p>
+			<p>{{ $ts.youShouldUpgradeClient }}</p>
+			<MkButton @click="reload" class="button primary">{{ $ts.reload }}</MkButton>
+		</template>
 		<p><MkA to="/docs/general/troubleshooting" class="_link">{{ $ts.troubleshooting }}</MkA></p>
 		<p v-if="error" class="error">ERROR: {{ error }}</p>
 	</div>
@@ -14,6 +21,9 @@
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
 import * as symbols from '@client/symbols';
+import { version } from '@client/config';
+import * as os from '@client/os';
+import { unisonReload } from '@client/scripts/unison-reload';
 
 export default defineComponent({
 	components: {
@@ -30,8 +40,30 @@ export default defineComponent({
 				title: this.$ts.error,
 				icon: 'fas fa-exclamation-triangle'
 			},
+			loaded: false,
+			serverIsDead: false,
+			meta: {} as any,
+			version,
 		};
 	},
+	created() {
+		os.api('meta', {
+			detail: false
+		}).then(meta => {
+			this.loaded = true;
+			this.serverIsDead = false;
+			this.meta = meta;
+			localStorage.setItem('v', meta.version);
+		}, () => {
+			this.loaded = true;
+			this.serverIsDead = true;
+		});
+	},
+	methods: {
+		reload() {
+			unisonReload();
+		},
+	},
 });
 </script>
 
@@ -45,7 +77,7 @@ export default defineComponent({
 	}
 
 	> .button {
-		margin: 0 auto;
+		margin: 8px auto;
 	}
 
 	> img {
-- 
cgit v1.2.3-freya