egirlskey/packages/frontend/src/widgets/WidgetOnlineUsers.vue

78 lines
1.7 KiB
Vue
Raw Normal View History

<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
2020-12-30 04:07:16 +00:00
<template>
2023-05-24 05:34:46 +00:00
<div data-cy-mkw-onlineUsers :class="[$style.root, { _panel: !widgetProps.transparent, [$style.pad]: !widgetProps.transparent }]">
<span :class="$style.text">
<I18n v-if="onlineUsersCount" :src="i18n.ts.onlineUsersCount" textTag="span">
<template #n><b style="color: #41b781;">{{ number(onlineUsersCount) }}</b></template>
</I18n>
</span>
2020-12-30 04:07:16 +00:00
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
2023-09-29 02:22:59 +00:00
import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
2023-09-19 07:37:43 +00:00
import { GetFormResultType } from '@/scripts/form.js';
import * as os from '@/os.js';
import { useInterval } from '@/scripts/use-interval.js';
import { i18n } from '@/i18n.js';
import number from '@/filters/number.js';
2020-12-30 04:07:16 +00:00
const name = 'onlineUsers';
2020-12-30 04:07:16 +00:00
const widgetPropsDef = {
transparent: {
type: 'boolean' as const,
default: true,
2020-12-30 04:07:16 +00:00
},
};
type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
2023-05-19 07:20:53 +00:00
const props = defineProps<WidgetComponentProps<WidgetProps>>();
const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef,
props,
emit,
);
const onlineUsersCount = ref(0);
const tick = () => {
os.apiGet('get-online-users-count').then(res => {
onlineUsersCount.value = res.count;
});
};
useInterval(tick, 1000 * 15, {
immediate: true,
afterMounted: true,
});
defineExpose<WidgetComponentExpose>({
name,
configure,
id: props.widget ? props.widget.id : null,
2020-12-30 04:07:16 +00:00
});
</script>
2023-05-24 05:34:46 +00:00
<style lang="scss" module>
.root {
2020-12-30 04:07:16 +00:00
text-align: center;
&.pad {
padding: 16px 0;
}
2023-05-24 05:34:46 +00:00
}
2020-12-30 04:07:16 +00:00
2023-05-24 05:34:46 +00:00
.text {
color: var(--fgTransparentWeak);
2020-12-30 04:07:16 +00:00
}
</style>