Resolve #2066
This commit is contained in:
		| @@ -50,15 +50,15 @@ | ||||
| 	</div> | ||||
|  | ||||
| 	<div class="player" v-if="game.isEnded"> | ||||
| 		<el-button-group> | ||||
| 			<el-button type="primary" @click="logPos = 0" :disabled="logPos == 0">%fa:angle-double-left%</el-button> | ||||
| 			<el-button type="primary" @click="logPos--" :disabled="logPos == 0">%fa:angle-left%</el-button> | ||||
| 		</el-button-group> | ||||
| 		<div> | ||||
| 			<button @click="logPos = 0" :disabled="logPos == 0">%fa:angle-double-left%</button> | ||||
| 			<button @click="logPos--" :disabled="logPos == 0">%fa:angle-left%</button> | ||||
| 		</div> | ||||
| 		<span>{{ logPos }} / {{ logs.length }}</span> | ||||
| 		<el-button-group> | ||||
| 			<el-button type="primary" @click="logPos++" :disabled="logPos == logs.length">%fa:angle-right%</el-button> | ||||
| 			<el-button type="primary" @click="logPos = logs.length" :disabled="logPos == logs.length">%fa:angle-double-right%</el-button> | ||||
| 		</el-button-group> | ||||
| 		<div> | ||||
| 			<button @click="logPos++" :disabled="logPos == logs.length">%fa:angle-right%</button> | ||||
| 			<button @click="logPos = logs.length" :disabled="logPos == logs.length">%fa:angle-double-right%</button> | ||||
| 		</div> | ||||
| 	</div> | ||||
|  | ||||
| 	<div class="info"> | ||||
|   | ||||
| @@ -3,7 +3,6 @@ | ||||
| 	<h1>%i18n:@title%</h1> | ||||
| 	<p>%i18n:@sub-title%</p> | ||||
| 	<div class="play"> | ||||
| 		<!--<el-button round>フリーマッチ(準備中)</el-button>--> | ||||
| 		<form-button primary round @click="match">%i18n:@invite%</form-button> | ||||
| 		<details> | ||||
| 			<summary>%i18n:@rule%</summary> | ||||
|   | ||||
| @@ -59,11 +59,6 @@ | ||||
| 			</header> | ||||
|  | ||||
| 			<div> | ||||
| 				<el-alert v-for="message in messages" | ||||
| 						:title="message.text" | ||||
| 						:type="message.type" | ||||
| 						:key="message.id"/> | ||||
|  | ||||
| 				<template v-for="item in form"> | ||||
| 					<mk-switch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm(item)">{{ item.desc || '' }}</mk-switch> | ||||
|  | ||||
| @@ -93,7 +88,7 @@ | ||||
| 						</header> | ||||
|  | ||||
| 						<div> | ||||
| 							<el-input v-model="item.value" @change="onChangeForm(item)"/> | ||||
| 							<input v-model="item.value" @change="onChangeForm(item)"/> | ||||
| 						</div> | ||||
| 					</div> | ||||
| 				</template> | ||||
|   | ||||
| @@ -6,7 +6,6 @@ import VueRouter from 'vue-router'; | ||||
|  | ||||
| // Style | ||||
| import './style.styl'; | ||||
| import '../../element.scss'; | ||||
|  | ||||
| import init from '../init'; | ||||
| import fuckAdBlock from '../common/scripts/fuck-ad-block'; | ||||
|   | ||||
| @@ -1,7 +1,6 @@ | ||||
| <template> | ||||
| <div class="root"> | ||||
| 	<template v-if="!fetching"> | ||||
| 		<el-progress :text-inside="true" :stroke-width="18" :percentage="Math.floor((usage / capacity) * 100)"/> | ||||
| 		<p><b>{{ capacity | bytes }}</b>%i18n:max%<b>{{ usage | bytes }}</b>%i18n:in-use%</p> | ||||
| 	</template> | ||||
| </div> | ||||
|   | ||||
| @@ -19,7 +19,7 @@ | ||||
| 	</label> | ||||
| 	<label class="ui from group"> | ||||
| 		<p>%i18n:@birthday%</p> | ||||
| 		<el-date-picker v-model="birthday" type="date" value-format="yyyy-MM-dd"/> | ||||
| 		<input type="date" v-model="birthday"/> | ||||
| 	</label> | ||||
| 	<button class="ui primary" @click="save">%i18n:@save%</button> | ||||
| 	<section> | ||||
|   | ||||
| @@ -87,13 +87,11 @@ | ||||
| 				<span>%i18n:@enable-sounds-desc%</span> | ||||
| 			</mk-switch> | ||||
| 			<label>%i18n:@volume%</label> | ||||
| 			<el-slider | ||||
| 			<input type="range" | ||||
| 				v-model="soundVolume" | ||||
| 				:show-input="true" | ||||
| 				:format-tooltip="v => `${v * 100}%`" | ||||
| 				:disabled="!enableSounds" | ||||
| 				:max="1" | ||||
| 				:step="0.1" | ||||
| 				max="1" | ||||
| 				step="0.1" | ||||
| 			/> | ||||
| 			<button class="ui button" @click="soundTest">%fa:volume-up% %i18n:@test%</button> | ||||
| 		</section> | ||||
| @@ -105,14 +103,15 @@ | ||||
|  | ||||
| 		<section class="web" v-show="page == 'web'"> | ||||
| 			<h1>%i18n:@language%</h1> | ||||
| 			<el-select v-model="lang" placeholder="%i18n:@pick-language%"> | ||||
| 				<el-option-group label="%i18n:@recommended%"> | ||||
| 					<el-option label="%i18n:@auto%" :value="null"/> | ||||
| 				</el-option-group> | ||||
| 				<el-option-group label="%i18n:@specify-language%"> | ||||
| 					<el-option v-for="x in langs" :label="x[1]" :value="x[0]" :key="x[0]"/> | ||||
| 				</el-option-group> | ||||
| 			</el-select> | ||||
| 			<select v-model="lang" placeholder="%i18n:@pick-language%"> | ||||
| 				<optgroup label="%i18n:@recommended%"> | ||||
| 					<option value="">%i18n:@auto%</option> | ||||
| 				</optgroup> | ||||
|  | ||||
| 				<optgroup label="%i18n:@specify-language%"> | ||||
| 					<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option> | ||||
| 				</optgroup> | ||||
| 			</select> | ||||
| 			<div class="none ui info"> | ||||
| 				<p>%fa:info-circle%%i18n:@language-desc%</p> | ||||
| 			</div> | ||||
| @@ -207,10 +206,6 @@ | ||||
| 			<mk-switch v-model="enableExperimentalFeatures" text="%i18n:@experimental%"> | ||||
| 				<span>%i18n:@experimental-desc%</span> | ||||
| 			</mk-switch> | ||||
| 			<details v-if="debug"> | ||||
| 				<summary>%i18n:@tools%</summary> | ||||
| 				<button class="ui button block" @click="taskmngr">%i18n:@task-manager%</button> | ||||
| 			</details> | ||||
| 		</section> | ||||
| 	</div> | ||||
| </div> | ||||
| @@ -228,7 +223,6 @@ import XSignins from './settings.signins.vue'; | ||||
| import XDrive from './settings.drive.vue'; | ||||
| import { url, langs, version } from '../../../config'; | ||||
| import checkForUpdate from '../../../common/scripts/check-for-update'; | ||||
| import MkTaskManager from './taskmanager.vue'; | ||||
|  | ||||
| export default Vue.extend({ | ||||
| 	components: { | ||||
| @@ -408,9 +402,6 @@ export default Vue.extend({ | ||||
| 		}); | ||||
| 	}, | ||||
| 	methods: { | ||||
| 		taskmngr() { | ||||
| 			(this as any).os.new(MkTaskManager); | ||||
| 		}, | ||||
| 		customizeHome() { | ||||
| 			this.$router.push('/i/customize-home'); | ||||
| 			this.$emit('done'); | ||||
|   | ||||
| @@ -1,219 +0,0 @@ | ||||
| <template> | ||||
| <mk-window ref="window" width="750px" height="500px" @closed="$destroy" name="TaskManager"> | ||||
| 	<span slot="header" :class="$style.header">%fa:stethoscope%%i18n:@title%</span> | ||||
| 	<el-tabs :class="$style.content"> | ||||
| 		<el-tab-pane label="Requests"> | ||||
| 			<el-table | ||||
| 				:data="os.requests" | ||||
| 				style="width: 100%" | ||||
| 				:default-sort="{prop: 'date', order: 'descending'}" | ||||
| 			> | ||||
| 				<el-table-column type="expand"> | ||||
| 					<template slot-scope="props"> | ||||
| 						<pre>{{ props.row.data }}</pre> | ||||
| 						<pre>{{ props.row.res }}</pre> | ||||
| 					</template> | ||||
| 				</el-table-column> | ||||
|  | ||||
| 				<el-table-column | ||||
| 					label="Requested at" | ||||
| 					prop="date" | ||||
| 					sortable | ||||
| 				> | ||||
| 					<template slot-scope="scope"> | ||||
| 						<b style="margin-right: 8px">{{ scope.row.date.getTime() }}</b> | ||||
| 						<span>(<mk-time :time="scope.row.date"/>)</span> | ||||
| 					</template> | ||||
| 				</el-table-column> | ||||
|  | ||||
| 				<el-table-column | ||||
| 					label="Name" | ||||
| 				> | ||||
| 					<template slot-scope="scope"> | ||||
| 						<b>{{ scope.row.name }}</b> | ||||
| 					</template> | ||||
| 				</el-table-column> | ||||
|  | ||||
| 				<el-table-column | ||||
| 					label="Status" | ||||
| 				> | ||||
| 					<template slot-scope="scope"> | ||||
| 						<span>{{ scope.row.status || '(pending)' }}</span> | ||||
| 					</template> | ||||
| 				</el-table-column> | ||||
| 			</el-table> | ||||
| 		</el-tab-pane> | ||||
|  | ||||
| 		<el-tab-pane label="Streams"> | ||||
| 			<el-table | ||||
| 				:data="os.connections" | ||||
| 				style="width: 100%" | ||||
| 			> | ||||
| 				<el-table-column | ||||
| 					label="Uptime" | ||||
| 				> | ||||
| 					<template slot-scope="scope"> | ||||
| 						<mk-timer v-if="scope.row.connectedAt" :time="scope.row.connectedAt"/> | ||||
| 						<span v-else>-</span> | ||||
| 					</template> | ||||
| 				</el-table-column> | ||||
|  | ||||
| 				<el-table-column | ||||
| 					label="Name" | ||||
| 				> | ||||
| 					<template slot-scope="scope"> | ||||
| 						<b>{{ scope.row.name == '' ? '[Home]' : scope.row.name }}</b> | ||||
| 					</template> | ||||
| 				</el-table-column> | ||||
|  | ||||
| 				<el-table-column | ||||
| 					label="User" | ||||
| 				> | ||||
| 					<template slot-scope="scope"> | ||||
| 						<span>{{ scope.row.user || '(anonymous)' }}</span> | ||||
| 					</template> | ||||
| 				</el-table-column> | ||||
|  | ||||
| 				<el-table-column | ||||
| 					prop="state" | ||||
| 					label="State" | ||||
| 				/> | ||||
|  | ||||
| 				<el-table-column | ||||
| 					prop="in" | ||||
| 					label="In" | ||||
| 				/> | ||||
|  | ||||
| 				<el-table-column | ||||
| 					prop="out" | ||||
| 					label="Out" | ||||
| 				/> | ||||
| 			</el-table> | ||||
| 		</el-tab-pane> | ||||
|  | ||||
| 		<el-tab-pane label="Streams (Inspect)"> | ||||
| 			<el-tabs type="card" style="height:50%"> | ||||
| 				<el-tab-pane v-for="c in os.connections" :label="c.name == '' ? '[Home]' : c.name" :key="c.id" :name="c.id" ref="connectionsTab"> | ||||
| 					<div style="padding: 12px 0 0 12px"> | ||||
| 					<el-button size="mini" @click="send(c)">Send</el-button> | ||||
| 					<el-button size="mini" type="warning" @click="c.isSuspended = true" v-if="!c.isSuspended">Suspend</el-button> | ||||
| 					<el-button size="mini" type="success" @click="c.isSuspended = false" v-else>Resume</el-button> | ||||
| 					<el-button size="mini" type="danger" @click="c.close">Disconnect</el-button> | ||||
| 				</div> | ||||
|  | ||||
| 					<el-table | ||||
| 						:data="c.inout" | ||||
| 						style="width: 100%" | ||||
| 						:default-sort="{prop: 'at', order: 'descending'}" | ||||
| 					> | ||||
| 						<el-table-column type="expand"> | ||||
| 							<template slot-scope="props"> | ||||
| 								<pre>{{ props.row.data }}</pre> | ||||
| 							</template> | ||||
| 						</el-table-column> | ||||
|  | ||||
| 						<el-table-column | ||||
| 							label="Date" | ||||
| 							prop="at" | ||||
| 							sortable | ||||
| 						> | ||||
| 							<template slot-scope="scope"> | ||||
| 								<b style="margin-right: 8px">{{ scope.row.at.getTime() }}</b> | ||||
| 								<span>(<mk-time :time="scope.row.at"/>)</span> | ||||
| 							</template> | ||||
| 						</el-table-column> | ||||
|  | ||||
| 						<el-table-column | ||||
| 							label="Type" | ||||
| 						> | ||||
| 							<template slot-scope="scope"> | ||||
| 								<span>{{ getMessageType(scope.row.data) }}</span> | ||||
| 							</template> | ||||
| 						</el-table-column> | ||||
|  | ||||
| 						<el-table-column | ||||
| 							label="Incoming / Outgoing" | ||||
| 							prop="type" | ||||
| 						/> | ||||
| 					</el-table> | ||||
| 				</el-tab-pane> | ||||
| 			</el-tabs> | ||||
| 		</el-tab-pane> | ||||
|  | ||||
| 		<el-tab-pane label="Windows"> | ||||
| 			<el-table | ||||
| 				:data="Array.from(os.windows.windows)" | ||||
| 				style="width: 100%" | ||||
| 			> | ||||
| 				<el-table-column | ||||
| 					label="Name" | ||||
| 				> | ||||
| 					<template slot-scope="scope"> | ||||
| 						<b>{{ scope.row.name || '(unknown)' }}</b> | ||||
| 					</template> | ||||
| 				</el-table-column> | ||||
|  | ||||
| 				<el-table-column | ||||
| 					label="Operations" | ||||
| 				> | ||||
| 					<template slot-scope="scope"> | ||||
| 						<el-button size="mini" type="danger" @click="scope.row.close">Close</el-button> | ||||
| 					</template> | ||||
| 				</el-table-column> | ||||
| 			</el-table> | ||||
| 		</el-tab-pane> | ||||
| 	</el-tabs> | ||||
| </mk-window> | ||||
| </template> | ||||
|  | ||||
| <script lang="ts"> | ||||
| import Vue from 'vue'; | ||||
|  | ||||
| export default Vue.extend({ | ||||
| 	mounted() { | ||||
| 		(this as any).os.windows.on('added', this.onWindowsChanged); | ||||
| 		(this as any).os.windows.on('removed', this.onWindowsChanged); | ||||
| 	}, | ||||
| 	beforeDestroy() { | ||||
| 		(this as any).os.windows.off('added', this.onWindowsChanged); | ||||
| 		(this as any).os.windows.off('removed', this.onWindowsChanged); | ||||
| 	}, | ||||
| 	methods: { | ||||
| 		getMessageType(data): string { | ||||
| 			return data.type ? data.type : '-'; | ||||
| 		}, | ||||
| 		onWindowsChanged() { | ||||
| 			this.$forceUpdate(); | ||||
| 		}, | ||||
| 		send(c) { | ||||
| 			(this as any).apis.input({ | ||||
| 				title: 'Send a JSON message', | ||||
| 				allowEmpty: false | ||||
| 			}).then(json => { | ||||
| 				c.send(JSON.parse(json)); | ||||
| 			}); | ||||
| 		} | ||||
| 	} | ||||
| }); | ||||
| </script> | ||||
|  | ||||
| <style lang="stylus" module> | ||||
| .header | ||||
| 	> [data-fa] | ||||
| 		margin-right 4px | ||||
|  | ||||
| .content | ||||
| 	height 100% | ||||
| 	overflow auto | ||||
|  | ||||
| </style> | ||||
|  | ||||
| <style> | ||||
| .el-tabs__header { | ||||
| 	margin-bottom: 0 !important; | ||||
| } | ||||
|  | ||||
| .el-tabs__item { | ||||
| 	padding: 0 20px !important; | ||||
| } | ||||
| </style> | ||||
| @@ -7,9 +7,6 @@ import Vuex from 'vuex'; | ||||
| import VueRouter from 'vue-router'; | ||||
| import * as TreeView from 'vue-json-tree-view'; | ||||
| import VAnimateCss from 'v-animate-css'; | ||||
| import Element from 'element-ui'; | ||||
| import ElementLocaleEn from 'element-ui/lib/locale/lang/en'; | ||||
| import ElementLocaleJa from 'element-ui/lib/locale/lang/ja'; | ||||
| import VModal from 'vue-js-modal'; | ||||
|  | ||||
| import App from './app.vue'; | ||||
| @@ -17,18 +14,10 @@ import checkForUpdate from './common/scripts/check-for-update'; | ||||
| import MiOS, { API } from './mios'; | ||||
| import { version, codename, lang } from './config'; | ||||
|  | ||||
| let elementLocale; | ||||
| switch (lang) { | ||||
| 	case 'ja-JP': elementLocale = ElementLocaleJa; break; | ||||
| 	case 'en-US': elementLocale = ElementLocaleEn; break; | ||||
| 	default: elementLocale = ElementLocaleEn; break; | ||||
| } | ||||
|  | ||||
| Vue.use(Vuex); | ||||
| Vue.use(VueRouter); | ||||
| Vue.use(TreeView); | ||||
| Vue.use(VAnimateCss); | ||||
| Vue.use(Element, { locale: elementLocale }); | ||||
| Vue.use(VModal); | ||||
|  | ||||
| // Register global directives | ||||
|   | ||||
| @@ -6,7 +6,6 @@ import VueRouter from 'vue-router'; | ||||
|  | ||||
| // Style | ||||
| import './style.styl'; | ||||
| import '../../element.scss'; | ||||
|  | ||||
| import init from '../init'; | ||||
|  | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 syuilo
					syuilo