wip: refactor(client): migrate components to composition api
This commit is contained in:
		
							parent
							
								
									7cbeef21e1
								
							
						
					
					
						commit
						bf51450647
					
				
					 1 changed files with 41 additions and 48 deletions
				
			
		|  | @ -1,68 +1,61 @@ | |||
| <template> | ||||
| <MkLoading v-if="!loaded" /> | ||||
| <MkLoading v-if="!loaded"/> | ||||
| <transition :name="$store.state.animation ? 'zoom' : ''" appear> | ||||
| 	<div v-show="loaded" class="mjndxjch"> | ||||
| 		<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 v-if="version === meta.version">{{ $ts.pageLoadErrorDescription }}</p> | ||||
| 		<p v-else-if="serverIsDead">{{ $ts.serverIsDead }}</p> | ||||
| 		<p><b><i class="fas fa-exclamation-triangle"></i> {{ i18n.locale.pageLoadError }}</b></p> | ||||
| 		<p v-if="meta && (version === meta.version)">{{ i18n.locale.pageLoadErrorDescription }}</p> | ||||
| 		<p v-else-if="serverIsDead">{{ i18n.locale.serverIsDead }}</p> | ||||
| 		<template v-else> | ||||
| 			<p>{{ $ts.newVersionOfClientAvailable }}</p> | ||||
| 			<p>{{ $ts.youShouldUpgradeClient }}</p> | ||||
| 			<MkButton class="button primary" @click="reload">{{ $ts.reload }}</MkButton> | ||||
| 			<p>{{ i18n.locale.newVersionOfClientAvailable }}</p> | ||||
| 			<p>{{ i18n.locale.youShouldUpgradeClient }}</p> | ||||
| 			<MkButton class="button primary" @click="reload">{{ i18n.locale.reload }}</MkButton> | ||||
| 		</template> | ||||
| 		<p><MkA to="/docs/general/troubleshooting" class="_link">{{ $ts.troubleshooting }}</MkA></p> | ||||
| 		<p><MkA to="/docs/general/troubleshooting" class="_link">{{ i18n.locale.troubleshooting }}</MkA></p> | ||||
| 		<p v-if="error" class="error">ERROR: {{ error }}</p> | ||||
| 	</div> | ||||
| </transition> | ||||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineComponent } from 'vue'; | ||||
| <script lang="ts" setup> | ||||
| import { } from 'vue'; | ||||
| import * as misskey from 'misskey-js'; | ||||
| import MkButton from '@/components/ui/button.vue'; | ||||
| import * as symbols from '@/symbols'; | ||||
| import { version } from '@/config'; | ||||
| import * as os from '@/os'; | ||||
| import { unisonReload } from '@/scripts/unison-reload'; | ||||
| import { i18n } from '@/i18n'; | ||||
| 
 | ||||
| export default defineComponent({ | ||||
| 	components: { | ||||
| 		MkButton, | ||||
| 	}, | ||||
| 	props: { | ||||
| 		error: { | ||||
| 			required: false, | ||||
| 		} | ||||
| 	}, | ||||
| 	data() { | ||||
| 		return { | ||||
| 			[symbols.PAGE_INFO]: { | ||||
| 				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(); | ||||
| 		}, | ||||
| const props = withDefaults(defineProps<{ | ||||
| 	error?: Error; | ||||
| }>(), { | ||||
| }); | ||||
| 
 | ||||
| let loaded = $ref(false); | ||||
| let serverIsDead = $ref(false); | ||||
| let meta = $ref<misskey.entities.LiteInstanceMetadata | null>(null); | ||||
| 
 | ||||
| os.api('meta', { | ||||
| 	detail: false, | ||||
| }).then(res => { | ||||
| 	loaded = true; | ||||
| 	serverIsDead = false; | ||||
| 	meta = res; | ||||
| 	localStorage.setItem('v', res.version); | ||||
| }, () => { | ||||
| 	loaded = true; | ||||
| 	serverIsDead = true; | ||||
| }); | ||||
| 
 | ||||
| function reload() { | ||||
| 	unisonReload(); | ||||
| } | ||||
| 
 | ||||
| defineExpose({ | ||||
| 	[symbols.PAGE_INFO]: { | ||||
| 		title: i18n.locale.error, | ||||
| 		icon: 'fas fa-exclamation-triangle', | ||||
| 	}, | ||||
| }); | ||||
| </script> | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue