Add Clusterio Plugins

exp_groups/web/components/groupTree.tsx

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import { Tree } from 'antd';
+import type { TreeDataNode, TreeProps } from 'antd';
+
+const defaultData: TreeDataNode[] = [
+	{
+		title: "Group 1",
+		key: "G-1",
+		icon: false,
+		children: [
+			{
+				title: "Role 1",
+				key: "R-1"
+			},
+			{
+				title: "Role 2",
+				key: "R-2"
+			},
+			{
+				title: "Role 3",
+				key: "R-3"
+			}
+		]
+	},
+	{
+		title: "Group 2",
+		key: "G-2",
+		icon: false,
+		children: [
+			{
+				title: "Role 4",
+				key: "R-4"
+			},
+			{
+				title: "Role 5",
+				key: "R-5"
+			}
+		]
+	},
+	{
+		title: "Default",
+		key: "G-3",
+		icon: false,
+		children: [
+			{
+				title: "Role 6",
+				key: "R-6"
+			}
+		]
+	}
+];
+
+export function GroupTree() {
+	const [gData, setGData] = useState(defaultData);
+
+	const onDrop: TreeProps['onDrop'] = (info) => {
+		const dropKey = info.node.key;
+		const dragKey = info.dragNode.key;
+		const dropPos = info.node.pos.split('-');
+		const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]); // the drop position relative to the drop node, inside 0, top -1, bottom 1
+		
+		const findKey = (
+			data: TreeDataNode[],
+			key: React.Key,
+			callback: (node: TreeDataNode, i: number, data: TreeDataNode[]) => void,
+		) => {
+			for (let i = 0; i < data.length; i++) {
+				if (data[i].key === key) {
+					return callback(data[i], i, data);
+				}
+				if (data[i].children) {
+					findKey(data[i].children!, key, callback);
+				}
+			}
+		};
+		
+		const data = [...gData]
+
+		// Find dragObject
+		let dragObj: TreeDataNode;
+		findKey(data, dragKey, (item, index, arr) => {
+			arr.splice(index, 1);
+			dragObj = item;
+		});
+
+		if (!info.dropToGap) {
+			// Drop on the content
+			findKey(data, dropKey, (item) => {
+				item.children = item.children || [];
+				// where to insert. New item was inserted to the start of the array in this example, but can be anywhere
+				item.children.unshift(dragObj);
+			});
+		} else {
+			let ar: TreeDataNode[] = [];
+			let i: number;
+			findKey(data, dropKey, (_item, index, arr) => {
+				ar = arr;
+				i = index;
+			});
+			if (dropPosition === -1) {
+				// Drop on the top of the drop node
+				ar.splice(i!, 0, dragObj!);
+			} else {
+				// Drop on the bottom of the drop node
+				ar.splice(i! + 1, 0, dragObj!);
+			}
+		}
+
+		setGData(data)
+	};
+
+	const allowDrop: TreeProps['allowDrop'] = ({dragNode, dropNode, dropPosition}) => {
+		const dragType = (dragNode.key as string).charAt(0);
+		const dropType = (dropNode.key as string).charAt(0);
+		return dropType === dragType && dropPosition != 0 || dragType === "R" && dropType === "G" && dropPosition == 0
+	}
+
+	return (
+		<Tree
+			className="draggable-tree"
+			defaultExpandAll={true}
+			draggable
+			blockNode
+			onDrop={onDrop}
+			allowDrop={allowDrop}
+			treeData={gData}
+		/>
+	);
+};

exp_groups/web/index.tsx

@@ -0,0 +1,82 @@
+import React, {
+	useContext, useEffect, useState,
+	useCallback, useSyncExternalStore,
+} from "react";
+
+// import {
+//
+// } from "antd";
+
+import {
+	BaseWebPlugin, PageLayout, PageHeader, Control, ControlContext, notifyErrorHandler,
+	useInstances,
+} from "@clusterio/web_ui";
+
+import { PermissionGroupUpdate, PermissionInstanceId, PermissionStringsUpdate } from "../messages";
+
+import * as lib from "@clusterio/lib";
+
+import { GroupTree } from "./components/groupTree";
+
+function MyTemplatePage() {
+	const control = useContext(ControlContext);
+	const plugin = control.plugins.get("exp_groups") as WebPlugin;
+	const [permissionStrings, permissionStringsSynced] = plugin.usePermissionStrings();
+	const [permissionGroups, permissionGroupsSynced] = plugin.usePermissionGroups();
+	const [instances, instancesSync] = useInstances();
+	
+	let [roles, setRoles] = useState<lib.Role[]>([]);
+
+	useEffect(() => {
+		control.send(new lib.RoleListRequest()).then(newRoles => {
+			setRoles(newRoles);
+		}).catch(notifyErrorHandler("Error fetching role list"));
+	}, []);
+
+	return <PageLayout nav={[{ name: "exp_groups" }]}>
+		<PageHeader title="exp_groups" />
+		Permission Strings: {String(permissionStringsSynced)} {JSON.stringify([...permissionStrings.values()])} <br/>
+		Permission Groups: {String(permissionGroupsSynced)} {JSON.stringify([...permissionGroups.values()])} <br/>
+		Instances: {String(instancesSync)} {JSON.stringify([...instances.values()].map(instance => [instance.id, instance.name]))} <br/>
+		Roles: {JSON.stringify([...roles.values()].map(role => [role.id, role.name]))} <br/>
+		<GroupTree/>
+	</PageLayout>;
+}
+
+export class WebPlugin extends BaseWebPlugin {
+	permissionStrings = new lib.EventSubscriber(PermissionStringsUpdate, this.control);
+	permissionGroups = new lib.EventSubscriber(PermissionGroupUpdate, this.control);
+
+	async init() {
+		this.pages = [
+			{
+				path: "/exp_groups",
+				sidebarName: "exp_groups",
+				permission: "exp_groups.list",
+				content: <MyTemplatePage/>,
+			},
+		];
+	}
+
+	useInstancePermissionStrings(instanceId?: PermissionInstanceId) {
+		const [permissionStrings, synced] = this.usePermissionStrings();
+		return [instanceId !== undefined ? permissionStrings.get(instanceId) : undefined, synced] as const;
+	}
+	
+	usePermissionStrings() {
+		const control = useContext(ControlContext);
+		const subscribe = useCallback((callback: () => void) => this.permissionStrings.subscribe(callback), [control]);
+		return useSyncExternalStore(subscribe, () => this.permissionStrings.getSnapshot());
+	}
+
+	useInstancePermissionGroups(instanceId?: PermissionInstanceId) {
+		const [permissionGroups, synced] = this.usePermissionGroups();
+		return [instanceId !== undefined ? [...permissionGroups.values()].filter(group => group.instanceId === instanceId) : undefined, synced] as const;
+	}
+	
+	usePermissionGroups() {
+		const control = useContext(ControlContext);
+		const subscribe = useCallback((callback: () => void) => this.permissionGroups.subscribe(callback), [control]);
+		return useSyncExternalStore(subscribe, () => this.permissionGroups.getSnapshot());
+	}
+}