Sharkey/packages/frontend/src/pages/about.federation.vue

108 lines
4.1 KiB
Vue
Raw Normal View History

<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps">
2023-05-19 10:20:53 +03:00
<div>
<MkInput v-model="host" :debounce="true" class="">
2023-09-30 22:53:52 +03:00
<template #prefix><i class="ph-magnifying-glass ph-bold ph-lg"></i></template>
2022-07-20 16:24:26 +03:00
<template #label>{{ i18n.ts.host }}</template>
</MkInput>
<FormSplit style="margin-top: var(--margin);">
<MkSelect v-model="state">
2022-07-20 16:24:26 +03:00
<template #label>{{ i18n.ts.state }}</template>
<option value="all">{{ i18n.ts.all }}</option>
<option value="federating">{{ i18n.ts.federating }}</option>
<option value="subscribing">{{ i18n.ts.subscribing }}</option>
<option value="publishing">{{ i18n.ts.publishing }}</option>
<option value="nsfw">NSFW</option>
2022-07-20 16:24:26 +03:00
<option value="suspended">{{ i18n.ts.suspended }}</option>
<option value="silenced">{{ i18n.ts.silence }}</option>
2022-07-20 16:24:26 +03:00
<option value="blocked">{{ i18n.ts.blocked }}</option>
<option value="notResponding">{{ i18n.ts.notResponding }}</option>
</MkSelect>
<MkSelect v-model="sort">
2022-07-20 16:24:26 +03:00
<template #label>{{ i18n.ts.sort }}</template>
<option value="+pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.ascendingOrder }})</option>
<option value="+notes">{{ i18n.ts.notes }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-notes">{{ i18n.ts.notes }} ({{ i18n.ts.ascendingOrder }})</option>
<option value="+users">{{ i18n.ts.users }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-users">{{ i18n.ts.users }} ({{ i18n.ts.ascendingOrder }})</option>
<option value="+following">{{ i18n.ts.following }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-following">{{ i18n.ts.following }} ({{ i18n.ts.ascendingOrder }})</option>
<option value="+followers">{{ i18n.ts.followers }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-followers">{{ i18n.ts.followers }} ({{ i18n.ts.ascendingOrder }})</option>
<option value="+firstRetrievedAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.descendingOrder }})</option>
<option value="-firstRetrievedAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.ascendingOrder }})</option>
</MkSelect>
</FormSplit>
</div>
<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
2023-05-19 10:20:53 +03:00
<div :class="$style.items">
<MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Status: ${getStatus(instance)}`" :class="$style.item" :to="`/instance-info/${instance.host}`">
2023-01-09 02:43:28 +02:00
<MkInstanceCardMini :instance="instance"/>
</MkA>
</div>
</MkPagination>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
2023-01-07 08:09:46 +02:00
import MkInput from '@/components/MkInput.vue';
import MkSelect from '@/components/MkSelect.vue';
2023-08-06 15:16:49 +03:00
import MkPagination, { Paging } from '@/components/MkPagination.vue';
import MkInstanceCardMini from '@/components/MkInstanceCardMini.vue';
import FormSplit from '@/components/form/split.vue';
2023-09-19 10:37:43 +03:00
import { i18n } from '@/i18n.js';
let host = $ref('');
let state = $ref('federating');
let sort = $ref('+pubSub');
const pagination = {
endpoint: 'federation/instances' as const,
limit: 10,
2023-08-06 15:16:49 +03:00
displayLimit: 50,
offsetMode: true,
params: computed(() => ({
sort: sort,
host: host !== '' ? host : null,
...(
state === 'federating' ? { federating: true } :
state === 'subscribing' ? { subscribing: true } :
state === 'publishing' ? { publishing: true } :
state === 'suspended' ? { suspended: true } :
state === 'blocked' ? { blocked: true } :
state === 'silenced' ? { silenced: true } :
state === 'notResponding' ? { notResponding: true } :
state === 'nsfw' ? { nsfw: true } :
{}),
})),
2023-08-06 15:16:49 +03:00
} as Paging;
function getStatus(instance) {
if (instance.isSuspended) return 'Suspended';
if (instance.isBlocked) return 'Blocked';
if (instance.isSilenced) return 'Silenced';
if (instance.isNotResponding) return 'Error';
if (instance.isNSFW) return 'NSFW';
return 'Alive';
}
</script>
2023-05-19 10:20:53 +03:00
<style lang="scss" module>
.items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
grid-gap: 12px;
2023-05-19 10:20:53 +03:00
}
2023-05-19 10:20:53 +03:00
.item:hover {
text-decoration: none;
}
</style>