Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

vue3: filterの移行 (#6590)

Browse source 
* bytes

* notePage

* number

* acct, userName, userPage

* Move methods property

* fix

* Delete unnecessary file
This commit is contained in:
fuyu 2020-07-25 23:20:14 +09:00 • committed by GitHub
parent 66cc7a28ba
commit 098d960f10
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 183 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/client/pages/instance/federation.instance.vue
View file

@ -24,31 +24,31 @@
<div class="row">
<div class="cell">
<div class="label"><fa :icon="faCloudDownloadAlt" fixed-width class="icon"/>{{ $t('following') }}</div>
<div class="data clickable" @click="showFollowing()">{{ instance.followingCount | number }}</div>
<div class="data clickable" @click="showFollowing()">{{ number(instance.followingCount) }}</div>
</div>
<div class="cell">
<div class="label"><fa :icon="faCloudUploadAlt" fixed-width class="icon"/>{{ $t('followers') }}</div>
<div class="data clickable" @click="showFollowers()">{{ instance.followersCount | number }}</div>
<div class="data clickable" @click="showFollowers()">{{ number(instance.followersCount) }}</div>
</div>
</div>
<div class="row">
<div class="cell">
<div class="label"><fa :icon="faUsers" fixed-width class="icon"/>{{ $t('users') }}</div>
<div class="data clickable" @click="showUsers()">{{ instance.usersCount | number }}</div>
<div class="data clickable" @click="showUsers()">{{ number(instance.usersCount) }}</div>
</div>
<div class="cell">
<div class="label"><fa :icon="faPencilAlt" fixed-width class="icon"/>{{ $t('notes') }}</div>
<div class="data">{{ instance.notesCount | number }}</div>
<div class="data">{{ number(instance.notesCount) }}</div>
</div>
</div>
<div class="row">
<div class="cell">
<div class="label"><fa :icon="faFileImage" fixed-width class="icon"/>{{ $t('files') }}</div>
<div class="data">{{ instance.driveFiles | number }}</div>
<div class="data">{{ number(instance.driveFiles) }}</div>
</div>
<div class="cell">
<div class="label"><fa :icon="faDatabase" fixed-width class="icon"/>{{ $t('storageUsage') }}</div>
<div class="data">{{ instance.driveUsage | bytes }}</div>
<div class="data">{{ bytes(instance.driveUsage) }}</div>
</div>
</div>
<div class="row">
@ -127,6 +127,8 @@ import MkSelect from '../../components/ui/select.vue';
import MkButton from '../../components/ui/button.vue';
import MkSwitch from '../../components/ui/switch.vue';
import MkInfo from '../../components/ui/info.vue';
import bytes from '../../filters/bytes';
import number from '../../filters/number';
const chartLimit = 90;
const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
@ -220,7 +222,7 @@ export default defineComponent({
}
},
async created() {
async created() {
this.now = new Date();
const [perHour, perDay] = await Promise.all([
@ -474,7 +476,11 @@ export default defineComponent({
}
}
});
}
},
bytes,
number
}
});
</script>

19
src/client/pages/instance/index.vue
View file

@ -48,9 +48,9 @@
<div class="cell"><div class="label">CPU</div>{{ serverInfo.cpu.model }}</div>
</div>
<div class="row">
<div class="cell"><div class="label">MEM total</div>{{ serverInfo.mem.total | bytes }}</div>
<div class="cell"><div class="label">MEM used</div>{{ memUsage | bytes }} ({{ (memUsage / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
<div class="cell"><div class="label">MEM free</div>{{ serverInfo.mem.total - memUsage | bytes }} ({{ ((serverInfo.mem.total - memUsage) / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
<div class="cell"><div class="label">MEM total</div>{{ bytes(serverInfo.mem.total) }}</div>
<div class="cell"><div class="label">MEM used</div>{{ bytes(memUsage) }} ({{ (memUsage / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
<div class="cell"><div class="label">MEM free</div>{{ bytes(serverInfo.mem.total - memUsage) }} ({{ ((serverInfo.mem.total - memUsage) / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
</div>
</div>
</div>
@ -63,9 +63,9 @@
<div class="_content" v-if="serverInfo">
<div class="table">
<div class="row">
<div class="cell"><div class="label">Disk total</div>{{ serverInfo.fs.total | bytes }}</div>
<div class="cell"><div class="label">Disk used</div>{{ serverInfo.fs.used | bytes }} ({{ (serverInfo.fs.used / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
<div class="cell"><div class="label">Disk free</div>{{ serverInfo.fs.total - serverInfo.fs.used | bytes }} ({{ ((serverInfo.fs.total - serverInfo.fs.used) / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
<div class="cell"><div class="label">Disk total</div>{{ bytes(serverInfo.fs.total) }}</div>
<div class="cell"><div class="label">Disk used</div>{{ bytes(serverInfo.fs.used) }} ({{ (serverInfo.fs.used / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
<div class="cell"><div class="label">Disk free</div>{{ bytes(serverInfo.fs.total - serverInfo.fs.used) }} ({{ ((serverInfo.fs.total - serverInfo.fs.used) / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
</div>
</div>
</div>
@ -107,6 +107,7 @@ import MkButton from '../../components/ui/button.vue';
import MkSelect from '../../components/ui/select.vue';
import MkInput from '../../components/ui/input.vue';
import { version, url } from '../../config';
import bytes from '../../filters/bytes';
const alpha = (hex, a) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
@ -167,7 +168,7 @@ export default defineComponent({
mounted() {
this.fetchLogs();
Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
this.chartCpuMem = new Chart(this.$refs.cpumem, {
@ -439,7 +440,9 @@ export default defineComponent({
for (const stats of statsLog.reverse()) {
this.onStats(stats);
}
}
},
bytes
}
});
</script>

13
src/client/pages/instance/queue.queue.vue
View file

@ -2,10 +2,10 @@
<section class="_card mk-queue-queue">
<div class="_title"><slot name="title"></slot></div>
<div class="_content status">
<div class="cell"><div class="label">Process</div>{{ activeSincePrevTick | number }}</div>
<div class="cell"><div class="label">Active</div>{{ active | number }}</div>
<div class="cell"><div class="label">Waiting</div>{{ waiting | number }}</div>
<div class="cell"><div class="label">Delayed</div>{{ delayed | number }}</div>
<div class="cell"><div class="label">Process</div>{{ number(activeSincePrevTick) }}</div>
<div class="cell"><div class="label">Active</div>{{ number(active) }}</div>
<div class="cell"><div class="label">Waiting</div>{{ number(waiting) }}</div>
<div class="cell"><div class="label">Delayed</div>{{ number(delayed) }}</div>
</div>
<div class="_content" style="margin-bottom: -8px;">
<canvas ref="chart"></canvas>
@ -14,7 +14,7 @@
<div v-if="jobs.length > 0">
<div v-for="job in jobs" :key="job[0]">
<span>{{ job[0] }}</span>
<span style="margin-left: 8px; opacity: 0.7;">({{ job[1] | number }} jobs)</span>
<span style="margin-left: 8px; opacity: 0.7;">({{ number(job[1]) }} jobs)</span>
</div>
</div>
<span v-else style="opacity: 0.5;">{{ $t('noJobs') }}</span>
@ -25,6 +25,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import Chart from 'chart.js';
import number from '../../filters/number';
const alpha = (hex, a) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
@ -179,6 +180,8 @@ export default defineComponent({
this.jobs = jobs;
});
},
number
}
});
</script>

7
src/client/pages/instance/users.user.vue
View file

@ -7,7 +7,7 @@
<div class="_title">
<mk-avatar class="avatar" :user="user"/>
<mk-user-name class="name" :user="user"/>
<span class="acct">@{{ user | acct }}</span>
<span class="acct">@{{ acct(user) }}</span>
<span class="staff" v-if="user.isAdmin"><fa :icon="faBookmark"/></span>
<span class="staff" v-if="user.isModerator"><fa :icon="farBookmark"/></span>
<span class="punished" v-if="user.isSilenced"><fa :icon="faMicrophoneSlash"/></span>
@ -40,6 +40,7 @@ import { faSnowflake, faTrashAlt, faBookmark as farBookmark } from '@fortawesom
import MkButton from '../../components/ui/button.vue';
import MkSwitch from '../../components/ui/switch.vue';
import Progress from '../../scripts/loading';
import { acct, userPage } from '../../filters/user';
export default defineComponent({
components: {
@ -84,7 +85,7 @@ export default defineComponent({
},
openProfile() {
window.open(Vue.filter('userPage')(this.user, null, true), '_blank');
window.open(userPage(this.user, null, true), '_blank');
},
async updateRemoteUser() {
@ -175,6 +176,8 @@ export default defineComponent({
});
await this.refreshUser();
},
acct
}
});
</script>

9
src/client/pages/instance/users.vue
View file

@ -59,7 +59,7 @@
<div class="body">
<header>
<mk-user-name class="name" :user="user"/>
<span class="acct">@{{ user | acct }}</span>
<span class="acct">@{{ acct(user) }}</span>
<span class="staff" v-if="user.isAdmin"><fa :icon="faBookmark"/></span>
<span class="staff" v-if="user.isModerator"><fa :icon="farBookmark"/></span>
<span class="punished" v-if="user.isSilenced"><fa :icon="faMicrophoneSlash"/></span>
@ -92,6 +92,7 @@ import MkInput from '../../components/ui/input.vue';
import MkSelect from '../../components/ui/select.vue';
import MkPagination from '../../components/ui/pagination.vue';
import MkUserSelect from '../../components/user-select.vue';
import { acct } from '../../filters/user';
export default defineComponent({
metaInfo() {
@ -223,7 +224,9 @@ export default defineComponent({
async show(user) {
this.$router.push('./users/' + user.id);
}
},
acct
}
});
</script>
@ -234,7 +237,7 @@ export default defineComponent({
> ._content {
max-height: 300px;
overflow: auto;
> .users {
> .user {
display: flex;