arriej/homepage-Mirror
1
0
Fork 0
mirror of https://github.com/gethomepage/homepage.git synced 2025-12-06 21:57:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Feature: Add list view for custom api (#2891)

Browse Source 
---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
This commit is contained in:
sgrtye
2024-02-15 07:18:37 +00:00
committed by GitHub
parent ea0310548a
commit 4dca4cc892
3 changed files with 146 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/utils/config/service-helpers.js
View File

@@ -378,6 +378,7 @@ export function cleanServiceGroups(groups) {
// customapi
mappings,
display,
// diskstation
volume,
@@ -539,6 +540,7 @@ export function cleanServiceGroups(groups) {
}
if (type === "customapi") {
if (mappings) cleanedService.widget.mappings = mappings;
if (display) cleanedService.widget.display = display;
if (refreshInterval) cleanedService.widget.refreshInterval = refreshInterval;
}
if (type === "calendar") {

116
src/widgets/customapi/component.jsx
View File

@@ -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>
);
}
}