From 99dcd7bb27da3b12d51b685f9562a89b15cd138f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 29 Jun 2022 23:28:52 +0900
Subject: feat(client): add instance-cloud widget

---
 packages/client/src/widgets/index.ts           |  2 +
 packages/client/src/widgets/instance-cloud.vue | 80 ++++++++++++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 packages/client/src/widgets/instance-cloud.vue

(limited to 'packages/client/src/widgets')

diff --git a/packages/client/src/widgets/index.ts b/packages/client/src/widgets/index.ts
index 51a82af080..feda16c91d 100644
--- a/packages/client/src/widgets/index.ts
+++ b/packages/client/src/widgets/index.ts
@@ -17,6 +17,7 @@ export default function(app: App) {
 	app.component('MkwServerMetric', defineAsyncComponent(() => import('./server-metric/index.vue')));
 	app.component('MkwOnlineUsers', defineAsyncComponent(() => import('./online-users.vue')));
 	app.component('MkwJobQueue', defineAsyncComponent(() => import('./job-queue.vue')));
+	app.component('MkwInstanceCloud', defineAsyncComponent(() => import('./instance-cloud.vue')));
 	app.component('MkwButton', defineAsyncComponent(() => import('./button.vue')));
 	app.component('MkwAiscript', defineAsyncComponent(() => import('./aiscript.vue')));
 	app.component('MkwAichan', defineAsyncComponent(() => import('./aichan.vue')));
@@ -34,6 +35,7 @@ export const widgets = [
 	'photos',
 	'digitalClock',
 	'federation',
+	'instance-cloud',
 	'postForm',
 	'slideshow',
 	'serverMetric',
diff --git a/packages/client/src/widgets/instance-cloud.vue b/packages/client/src/widgets/instance-cloud.vue
new file mode 100644
index 0000000000..aa76c37a00
--- /dev/null
+++ b/packages/client/src/widgets/instance-cloud.vue
@@ -0,0 +1,80 @@
+<template>
+<MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-instance-cloud">
+	<div class="">
+		<MkTagCloud v-if="activeInstances">
+			<li v-for="instance in activeInstances">
+				<a @click.prevent="onInstanceClick(instance)">
+					<img style="width: 32px;" :src="instance.iconUrl">
+				</a>
+			</li>
+		</MkTagCloud>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import MkContainer from '@/components/ui/container.vue';
+import MkTagCloud from '@/components/tag-cloud.vue';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+
+const name = 'instanceCloud';
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+};
+
+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,
+);
+
+let cloud = $ref<InstanceType<typeof MkTagCloud> | null>();
+let activeInstances = $shallowRef(null);
+
+function onInstanceClick(i) {
+	os.pageWindow(`/instance-info/${i.host}`);
+}
+
+useInterval(() => {
+	os.api('federation/instances', {
+		sort: '+lastCommunicatedAt',
+		limit: 25,
+	}).then(res => {
+		activeInstances = res;
+		if (cloud) cloud.update();
+	});
+}, 1000 * 60 * 3, {
+	immediate: true,
+	afterMounted: true,
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
-- 
cgit v1.2.3-freya