mirror of
https://github.com/DI0IK/homepage-plus.git
synced 2025-07-10 15:28:47 +00:00
Feature: Add list view for custom api (#2891)
--------- Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
This commit is contained in:
parent
ea0310548a
commit
4dca4cc892
3 changed files with 146 additions and 21 deletions
|
@ -90,6 +90,12 @@ function formatValue(t, mapping, rawValue) {
|
|||
// nothing
|
||||
}
|
||||
|
||||
// Apply fixed prefix.
|
||||
const prefix = mapping?.prefix;
|
||||
if (prefix) {
|
||||
value = `${prefix} ${value}`;
|
||||
}
|
||||
|
||||
// Apply fixed suffix.
|
||||
const suffix = mapping?.suffix;
|
||||
if (suffix) {
|
||||
|
@ -99,12 +105,35 @@ function formatValue(t, mapping, rawValue) {
|
|||
return value;
|
||||
}
|
||||
|
||||
function getColor(mapping, customData) {
|
||||
const value = getValue(mapping.additionalField.field, customData);
|
||||
const { color } = mapping.additionalField;
|
||||
|
||||
switch (color) {
|
||||
case "adaptive":
|
||||
try {
|
||||
const number = parseFloat(value);
|
||||
return number > 0 ? "text-emerald-300" : "text-rose-300";
|
||||
} catch (e) {
|
||||
return "";
|
||||
}
|
||||
case "black":
|
||||
return `text-black`;
|
||||
case "white":
|
||||
return `text-white`;
|
||||
case "theme":
|
||||
return `text-theme-500`;
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
export default function Component({ service }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { widget } = service;
|
||||
|
||||
const { mappings = [], refreshInterval = 10000 } = widget;
|
||||
const { mappings = [], refreshInterval = 10000, display = "block" } = widget;
|
||||
const { data: customData, error: customError } = useWidgetAPI(widget, null, {
|
||||
refreshInterval: Math.max(1000, refreshInterval),
|
||||
});
|
||||
|
@ -114,24 +143,73 @@ export default function Component({ service }) {
|
|||
}
|
||||
|
||||
if (!customData) {
|
||||
return (
|
||||
<Container service={service}>
|
||||
{mappings.slice(0, 4).map((item) => (
|
||||
<Block label={item.label} key={item.label} />
|
||||
))}
|
||||
</Container>
|
||||
);
|
||||
switch (display) {
|
||||
case "list":
|
||||
return (
|
||||
<Container service={service}>
|
||||
<div className="flex flex-col w-full">
|
||||
{mappings.map((mapping) => (
|
||||
<div
|
||||
key={mapping.label}
|
||||
className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-row items-center justify-between p-1 text-xs animate-pulse"
|
||||
>
|
||||
<div className="font-thin pl-2">{mapping.label}</div>
|
||||
<div className="flex flex-row text-right">
|
||||
<div className="font-bold mr-2">-</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
|
||||
default:
|
||||
return (
|
||||
<Container service={service}>
|
||||
{mappings.slice(0, 4).map((item) => (
|
||||
<Block label={item.label} key={item.label} />
|
||||
))}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Container service={service}>
|
||||
{mappings.slice(0, 4).map((mapping) => (
|
||||
<Block
|
||||
label={mapping.label}
|
||||
key={mapping.label}
|
||||
value={formatValue(t, mapping, getValue(mapping.field, customData))}
|
||||
/>
|
||||
))}
|
||||
</Container>
|
||||
);
|
||||
switch (display) {
|
||||
case "list":
|
||||
return (
|
||||
<Container service={service}>
|
||||
<div className="flex flex-col w-full">
|
||||
{mappings.map((mapping) => (
|
||||
<div
|
||||
key={mapping.label}
|
||||
className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-row items-center justify-between p-1 text-xs"
|
||||
>
|
||||
<div className="font-thin pl-2">{mapping.label}</div>
|
||||
<div className="flex flex-row text-right">
|
||||
<div className="font-bold mr-2">{formatValue(t, mapping, getValue(mapping.field, customData))}</div>
|
||||
{mapping.additionalField && (
|
||||
<div className={`font-bold mr-2 ${getColor(mapping, customData)}`}>
|
||||
{formatValue(t, mapping.additionalField, getValue(mapping.additionalField.field, customData))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
|
||||
default:
|
||||
return (
|
||||
<Container service={service}>
|
||||
{mappings.slice(0, 4).map((mapping) => (
|
||||
<Block
|
||||
label={mapping.label}
|
||||
key={mapping.label}
|
||||
value={formatValue(t, mapping, getValue(mapping.field, customData))}
|
||||
/>
|
||||
))}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue