mirror of
https://github.com/DI0IK/homepage-plus.git
synced 2025-07-10 15:28:47 +00:00
Add queue list
This commit is contained in:
parent
caa1b94fd6
commit
28e39e46ae
7 changed files with 232 additions and 34 deletions
31
src/components/services/widget/block-list.jsx
Normal file
31
src/components/services/widget/block-list.jsx
Normal file
|
@ -0,0 +1,31 @@
|
|||
import { useTranslation } from "next-i18next";
|
||||
import { useCallback, useState } from 'react';
|
||||
import classNames from "classnames";
|
||||
|
||||
import ResolvedIcon from '../../resolvedicon';
|
||||
|
||||
|
||||
export default function BlockList({ label, children, childHeight }) {
|
||||
const { t } = useTranslation();
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
|
||||
const changeState = useCallback(() => setOpen(!isOpen), [isOpen, setOpen]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
"bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 w-full p-1",
|
||||
children === undefined ? "animate-pulse" : ""
|
||||
)}>
|
||||
<button type="button" onClick={changeState} className="w-full flex-1 flex flex-col items-center justify-center text-center">
|
||||
<div className="font-bold text-xs uppercase">{t(label)}</div>
|
||||
<ResolvedIcon icon={isOpen ? "mdi-chevron-down" : "mdi-chevron-up"} />
|
||||
</button>
|
||||
<div
|
||||
className="w-full flex-1 flex flex-col items-center justify-center text-center overflow-hidden transition-height duration-500"
|
||||
style={{height: isOpen ? childHeight * (children?.length ?? 1) : 0}}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
|
@ -15,7 +15,9 @@ export default function Container({ error = false, children, service }) {
|
|||
return <Error service={service} error={error} />
|
||||
}
|
||||
|
||||
let visibleChildren = children;
|
||||
const childrenArray = Array.isArray(children) ? children : [children];
|
||||
|
||||
let visibleChildren = childrenArray;
|
||||
const fields = service?.widget?.fields;
|
||||
const type = service?.widget?.type;
|
||||
if (fields && type) {
|
||||
|
@ -24,7 +26,7 @@ export default function Container({ error = false, children, service }) {
|
|||
// fields: [ "resources.cpu", "resources.mem", "field"]
|
||||
// or even
|
||||
// fields: [ "resources.cpu", "widget_type.field" ]
|
||||
visibleChildren = children?.filter(child => fields.some(field => {
|
||||
visibleChildren = childrenArray?.filter(child => fields.some(field => {
|
||||
let fullField = field;
|
||||
if (!field.includes(".")) {
|
||||
fullField = `${type}.${field}`;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue