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

79 lines
1.8 KiB
Vue
Raw Normal View History

2020-12-30 04:07:16 +00:00
<template>
<div class="mkw-onlineUsers" :class="{ _panel: !widgetProps.transparent, pad: !widgetProps.transparent }">
2022-07-20 13:24:26 +00:00
<I18n v-if="onlineUsersCount" :src="i18n.ts.onlineUsersCount" text-tag="span" class="text">
2020-12-30 04:07:16 +00:00
<template #n><b>{{ onlineUsersCount }}</b></template>
</I18n>
</div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form';
2021-11-11 17:02:25 +00:00
import * as os from '@/os';
import { useInterval } from '@/scripts/use-interval';
2022-07-20 13:24:26 +00:00
import { i18n } from '@/i18n';
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>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
//const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef,
props,
emit,
);
const onlineUsersCount = ref(0);
const tick = () => {
os.api('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>
<style lang="scss" scoped>
2020-12-30 04:07:16 +00:00
.mkw-onlineUsers {
text-align: center;
&.pad {
padding: 16px 0;
}
> .text {
::v-deep(b) {
color: #41b781;
}
::v-deep(span) {
opacity: 0.7;
}
}
}
</style>