インスタンス一覧でソートできるように

This commit is contained in:
syuilo 2020-03-29 10:14:33 +09:00
parent 9151a95452
commit 921078c51e
2 changed files with 34 additions and 8 deletions

View file

@ -472,6 +472,10 @@ installedApps: "インストールされたアプリ"
nothing: "ありません" nothing: "ありません"
installedDate: "インストール日時" installedDate: "インストール日時"
lastUsedDate: "最終使用日時" lastUsedDate: "最終使用日時"
state: "状態"
sort: "ソート"
ascendingOrder: "昇順"
descendingOrder: "降順"
_theme: _theme:
explore: "テーマを探す" explore: "テーマを探す"
@ -691,15 +695,15 @@ _charts:
_instanceCharts: _instanceCharts:
requests: "リクエスト" requests: "リクエスト"
users: "ユーザーの増減" users: "ユーザーの増減"
usersTotal: "ユーザーの" usersTotal: "ユーザーの積"
notes: "ノートの増減" notes: "ノートの増減"
notesTotal: "ノートの" notesTotal: "ノートの積"
ff: "フォロー/フォロワーの増減" ff: "フォロー/フォロワーの増減"
ffTotal: "フォロー/フォロワーの" ffTotal: "フォロー/フォロワーの積"
cacheSize: "キャッシュサイズの増減" cacheSize: "キャッシュサイズの増減"
cacheSizeTotal: "キャッシュサイズの" cacheSizeTotal: "キャッシュサイズの積"
files: "ファイル数の増減" files: "ファイル数の増減"
filesTotal: "ファイル数の" filesTotal: "ファイル数の積"
_timelines: _timelines:
home: "ホーム" home: "ホーム"

View file

@ -3,9 +3,10 @@
<section class="_card instances"> <section class="_card instances">
<div class="_title"><fa :icon="faGlobe"/> {{ $t('instances') }}</div> <div class="_title"><fa :icon="faGlobe"/> {{ $t('instances') }}</div>
<div class="_content"> <div class="_content">
<mk-input v-model="host" :debounce="true"><span>{{ $t('host') }}</span></mk-input>
<div class="inputs" style="display: flex;"> <div class="inputs" style="display: flex;">
<mk-input v-model="host" :debounce="true" style="margin: 0; flex: 1;"><span>{{ $t('host') }}</span></mk-input> <mk-select v-model="state" style="margin: 0; flex: 1;">
<mk-select v-model="state" style="margin: 0;"> <template #label>{{ $t('state') }}</template>
<option value="all">{{ $t('all') }}</option> <option value="all">{{ $t('all') }}</option>
<option value="federating">{{ $t('federating') }}</option> <option value="federating">{{ $t('federating') }}</option>
<option value="subscribing">{{ $t('subscribing') }}</option> <option value="subscribing">{{ $t('subscribing') }}</option>
@ -14,11 +15,32 @@
<option value="blocked">{{ $t('blocked') }}</option> <option value="blocked">{{ $t('blocked') }}</option>
<option value="notResponding">{{ $t('notResponding') }}</option> <option value="notResponding">{{ $t('notResponding') }}</option>
</mk-select> </mk-select>
<mk-select v-model="sort" style="margin: 0; flex: 1;">
<template #label>{{ $t('sort') }}</template>
<option value="+pubSub">{{ $t('pubSub') }} ({{ $t('descendingOrder') }})</option>
<option value="-pubSub">{{ $t('pubSub') }} ({{ $t('ascendingOrder') }})</option>
<option value="+notes">{{ $t('notes') }} ({{ $t('descendingOrder') }})</option>
<option value="-notes">{{ $t('notes') }} ({{ $t('ascendingOrder') }})</option>
<option value="+users">{{ $t('users') }} ({{ $t('descendingOrder') }})</option>
<option value="-users">{{ $t('users') }} ({{ $t('ascendingOrder') }})</option>
<option value="+following">{{ $t('following') }} ({{ $t('descendingOrder') }})</option>
<option value="-following">{{ $t('following') }} ({{ $t('ascendingOrder') }})</option>
<option value="+followers">{{ $t('followers') }} ({{ $t('descendingOrder') }})</option>
<option value="-followers">{{ $t('followers') }} ({{ $t('ascendingOrder') }})</option>
<option value="+caughtAt">{{ $t('caughtAt') }} ({{ $t('descendingOrder') }})</option>
<option value="-caughtAt">{{ $t('caughtAt') }} ({{ $t('ascendingOrder') }})</option>
<option value="+lastCommunicatedAt">{{ $t('lastCommunicatedAt') }} ({{ $t('descendingOrder') }})</option>
<option value="-lastCommunicatedAt">{{ $t('lastCommunicatedAt') }} ({{ $t('ascendingOrder') }})</option>
<option value="+driveUsage">{{ $t('driveUsage') }} ({{ $t('descendingOrder') }})</option>
<option value="-driveUsage">{{ $t('driveUsage') }} ({{ $t('ascendingOrder') }})</option>
<option value="+driveFiles">{{ $t('driveFiles') }} ({{ $t('descendingOrder') }})</option>
<option value="-driveFiles">{{ $t('driveFiles') }} ({{ $t('ascendingOrder') }})</option>
</mk-select>
</div> </div>
</div> </div>
<div class="_content"> <div class="_content">
<mk-pagination :pagination="pagination" #default="{items}" class="instances" ref="instances" :key="host + state"> <mk-pagination :pagination="pagination" #default="{items}" class="instances" ref="instances" :key="host + state">
<div class="instance" v-for="(instance, i) in items" :key="instance.id" @click="info(instance)"> <div class="instance" v-for="instance in items" :key="instance.id" @click="info(instance)">
<div class="host"><fa :icon="faCircle" class="indicator" :class="getStatus(instance)"/><b>{{ instance.host }}</b></div> <div class="host"><fa :icon="faCircle" class="indicator" :class="getStatus(instance)"/><b>{{ instance.host }}</b></div>
<div class="status"> <div class="status">
<span class="sub" v-if="instance.followersCount > 0"><fa :icon="faCaretDown" class="icon"/>Sub</span> <span class="sub" v-if="instance.followersCount > 0"><fa :icon="faCaretDown" class="icon"/>Sub</span>