Brendon/gameyfin
1
0
Fork 0
mirror of https://github.com/BrenBroZAYT/gameyfin.git synced 2026-06-16 16:20:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement plugin enabling & disabling

Browse Source
This commit is contained in:
grimsi
2024-12-19 16:34:01 +01:00
parent 798328a292
commit c365574a92
7 changed files with 85 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gameyfin/src/main/frontend/components/general/PluginManagementCard.tsx
+48 -6
View File
@@ -1,12 +1,15 @@
import {Card, Chip, Skeleton, useDisclosure} from "@nextui-org/react";
import {PuzzlePiece} from "@phosphor-icons/react";
import {Button, Card, Chip, Skeleton, Tooltip, useDisclosure} from "@nextui-org/react";
import {Plug, Power, SlidersHorizontal} from "@phosphor-icons/react";
import {PluginManagementEndpoint} from "Frontend/generated/endpoints";
import PluginDto from "Frontend/generated/de/grimsi/gameyfin/core/plugins/management/PluginDto";
import PluginState from "Frontend/generated/org/pf4j/PluginState";
import React, {useEffect, useState} from "react";
import PluginDetailsModal from "Frontend/components/general/PluginDetailsModal";
export function PluginManagementCard({plugin}: { plugin: PluginDto }) {
export function PluginManagementCard({plugin, updatePlugin}: {
plugin: PluginDto,
updatePlugin: (plugin: PluginDto) => void
}) {
const pluginDetailsModal = useDisclosure();
const [configValid, setConfigValid] = useState<boolean | undefined>(undefined);
@@ -17,7 +20,12 @@ export function PluginManagementCard({plugin}: { plugin: PluginDto }) {
});
}, []);
function iconColor(state: PluginState | undefined): "white" | "default" {
return "default";
}
function borderColor(state: PluginState | undefined): "success" | "warning" | "danger" | "default" {
if (isDisabled(state)) return "warning";
if (configValid === undefined) return "default";
if (!configValid) return "danger";
return stateToColor(state);
@@ -36,12 +44,46 @@ export function PluginManagementCard({plugin}: { plugin: PluginDto }) {
}
}
function isDisabled(state: PluginState | undefined): boolean {
return state === PluginState.DISABLED;
}
function togglePluginEnabled() {
if (isDisabled(plugin.state)) {
PluginManagementEndpoint.enablePlugin(plugin.id).then(() => {
PluginManagementEndpoint.getPlugin(plugin.id).then((response) => {
if (response === undefined) return;
updatePlugin(response);
});
});
} else {
PluginManagementEndpoint.disablePlugin(plugin.id).then(() => {
PluginManagementEndpoint.getPlugin(plugin.id).then((response) => {
if (response === undefined) return;
updatePlugin(response);
});
});
}
}
return (
<>
<Card className={`flex flex-row justify-between p-2 border-2 border-${borderColor(plugin.state)}`}
isPressable={true} onPress={pluginDetailsModal.onOpen}>
<Card className={`flex flex-row justify-between p-2 border-2 border-${borderColor(plugin.state)}`}>
<div className="absolute right-0 top-0 flex flex-row">
<Tooltip content={`${isDisabled(plugin.state) ? "Enable" : "Disable"} plugin`} placement="bottom"
color="foreground">
<Button isIconOnly variant="ghost" onPress={() => togglePluginEnabled()}>
<Power/>
</Button>
</Tooltip>
<Tooltip content="Configuration" placement="bottom" color="foreground">
<Button isIconOnly variant="ghost" onPress={pluginDetailsModal.onOpen}>
<SlidersHorizontal/>
</Button>
</Tooltip>
</div>
<div className="flex flex-1 flex-col items-center gap-1">
<PuzzlePiece size={64} weight="fill"/>
<Plug size={64} weight="fill"/>
<p className="font-semibold">{plugin.name}</p>
<div className="flex flex-row gap-2">
<Chip size="sm" radius="sm" className="text-xs">{plugin.version}</Chip>