Resolve #2066
This commit is contained in:
syuilo
@@ -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>
|
||||
Reference in New Issue
Block a user