open-source-mirrors
/
homepage
mirror of https://github.com/benphelps/homepage
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1603 from denispapec/header-boxed-widget

Browse Source 
Added boxed widgets header styling and error component to information widgets
pull/1612/head
shamoon 2 years ago committed by GitHub
parent 2807575283 1622069063
commit 9f265c4381
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 661 additions and 855 deletions
Show Stats Download Patch File Download Diff File

21
src/components/widgets/datetime/datetime.jsx
Unescape View File

@ -1,6 +1,9 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import Container from "../widget/container";
import Raw from "../widget/raw";
const textSizes = { const textSizes = {
"4xl": "text-4xl", "4xl": "text-4xl",
"3xl": "text-3xl", "3xl": "text-3xl",
@ -17,7 +20,7 @@ export default function DateTime({ options }) {
const { i18n } = useTranslation(); const { i18n } = useTranslation();
const [date, setDate] = useState(""); const [date, setDate] = useState("");
const dateLocale = locale ?? i18n.language; const dateLocale = locale ?? i18n.language;
useEffect(() => { useEffect(() => {
const dateFormat = new Intl.DateTimeFormat(dateLocale, { ...format }); const dateFormat = new Intl.DateTimeFormat(dateLocale, { ...format });
const interval = setInterval(() => { const interval = setInterval(() => {
@ -27,12 +30,14 @@ export default function DateTime({ options }) {
}, [date, setDate, dateLocale, format]); }, [date, setDate, dateLocale, format]);
return ( return (
<div className="flex flex-col justify-center first:ml-0 ml-4"> <Container options={options}>
<div className="flex flex-row items-center grow justify-end"> <Raw>
<span className={`text-theme-800 dark:text-theme-200 tabular-nums ${textSizes[textSize || "lg"]}`}> <div className="flex flex-row items-center grow justify-end">
{date} <span className={`text-theme-800 dark:text-theme-200 tabular-nums ${textSizes[textSize || "lg"]}`}>
</span> {date}
</div> </span>
</div> </div>
</Raw>
</Container>
); );
} }

264
src/components/widgets/glances/glances.jsx
Unescape View File

@ -1,11 +1,13 @@
import useSWR from "swr"; import useSWR from "swr";
import { useContext } from "react"; import { useContext } from "react";
import { BiError } from "react-icons/bi";
import { FaMemory, FaRegClock, FaThermometerHalf } from "react-icons/fa"; import { FaMemory, FaRegClock, FaThermometerHalf } from "react-icons/fa";
import { FiCpu, FiHardDrive } from "react-icons/fi"; import { FiCpu, FiHardDrive } from "react-icons/fi";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import UsageBar from "../resources/usage-bar"; import Error from "../widget/error";
import Resource from "../widget/resource";
import Resources from "../widget/resources";
import WidgetLabel from "../widget/widget_label";
import { SettingsContext } from "utils/contexts/settings"; import { SettingsContext } from "utils/contexts/settings";
@ -26,52 +28,19 @@ export default function Widget({ options }) {
); );
if (error || data?.error) { if (error || data?.error) {
return ( return <Error options={options} />
<div className="flex flex-col justify-center first:ml-0 ml-4">
<div className="flex flex-row items-center justify-end">
<div className="flex flex-row items-center">
<BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
</div>
</div>
</div>
</div>
);
} }
if (!data) { if (!data) {
return ( return <Resources options={options}>
<div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap ml-4"> <Resource icon={FiCpu} label={t("glances.wait")} percentage="0" />
<div className="flex flex-row self-center flex-wrap justify-between"> <Resource icon={FaMemory} label={t("glances.wait")} percentage="0" />
<div className="flex-none flex flex-row items-center mr-3 py-1.5"> { options.cputemp && <Resource icon={FaThermometerHalf} label={t("glances.wait")} percentage="0" /> }
<FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" /> { options.disk && !Array.isArray(options.disk) && <Resource key={options.disk} icon={FiHardDrive} label={t("glances.wait")} percentage="0" /> }
<div className="flex flex-col ml-3 text-left min-w-[85px]"> { options.disk && Array.isArray(options.disk) && options.disk.map((disk) => <Resource key={disk.mnt_point} icon={FiHardDrive} label={t("glances.wait")} percentage="0" /> )}
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> { options.uptime && <Resource icon={FaRegClock} label={t("glances.wait")} percentage="0" /> }
<div className="pl-0.5 text-xs"> { options.label && <WidgetLabel label={options.label} /> }
{t("glances.wait")} </Resources>;
</div>
</div>
<UsageBar percent="0" />
</div>
</div>
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left min-w-[85px]">
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5 text-xs">
{t("glances.wait")}
</div>
</div>
<UsageBar percent="0" />
</div>
</div>
</div>
{options.label && (
<div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>
)}
</div>
);
} }
const unit = options.units === "imperial" ? "fahrenheit" : "celsius"; const unit = options.units === "imperial" ? "fahrenheit" : "celsius";
@ -101,131 +70,84 @@ export default function Widget({ options }) {
} }
return ( return (
<a href={options.url} target={settings.target ?? "_blank"} className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap"> <Resources options={options} target={settings.target ?? "_blank"}>
<div className="flex flex-row self-center flex-wrap justify-between"> <Resource
<div className="flex-none flex flex-row items-center mr-3 py-1.5"> icon={FiCpu}
<FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" /> value={t("common.number", {
<div className="flex flex-col ml-3 text-left min-w-[85px]"> value: data.cpu.total,
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> style: "unit",
<div className="pl-0.5"> unit: "percent",
{t("common.number", { maximumFractionDigits: 0,
value: data.cpu.total, })}
style: "unit", label={t("glances.cpu")}
unit: "percent", expandedValue={t("common.number", {
maximumFractionDigits: 0, value: data.load.min15,
})} style: "unit",
</div> unit: "percent",
<div className="pr-1">{t("glances.cpu")}</div> maximumFractionDigits: 0
</div> })}
{options.expanded && ( expandedLabel={t("glances.load")}
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> percentage={data.cpu.total}
<div className="pl-0.5 pr-1"> expanded={options.expanded}
{t("common.number", { />
value: data.load.min15, <Resource
style: "unit", icon={FaMemory}
unit: "percent", value={t("common.bytes", {
maximumFractionDigits: 0, value: data.mem.free,
})} maximumFractionDigits: 1,
</div> binary: true,
<div className="pr-1">{t("glances.load")}</div> })}
</span> label={t("glances.free")}
)} expandedValue={t("common.bytes", {
<UsageBar percent={data.cpu.total} /> value: data.mem.total,
</div> maximumFractionDigits: 1,
</div> binary: true,
<div className="flex-none flex flex-row items-center mr-3 py-1.5"> })}
<FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" /> expandedLabel={t("glances.total")}
<div className="flex flex-col ml-3 text-left min-w-[85px]"> percentage={data.mem.percent}
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> expanded={options.expanded}
<div className="pl-0.5"> />
{t("common.bytes", { {disks.map((disk) => (
value: data.mem.free, <Resource key={disk.mnt_point}
maximumFractionDigits: 1, icon={FiHardDrive}
binary: true, value={t("common.bytes", { value: disk.free })}
})} label={t("glances.free")}
</div> expandedValue={t("common.bytes", { value: disk.size })}
<div className="pr-1">{t("glances.free")}</div> expandedLabel={t("glances.total")}
</div> percentage={disk.percent}
{options.expanded && ( expanded={options.expanded}
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> />
<div className="pl-0.5 pr-1"> ))}
{t("common.bytes", { {options.cputemp && mainTemp > 0 &&
value: data.mem.total, <Resource
maximumFractionDigits: 1, icon={FaThermometerHalf}
binary: true, value={t("common.number", {
})} value: mainTemp,
</div> maximumFractionDigits: 1,
<div className="pr-1">{t("glances.total")}</div> style: "unit",
</span> unit
)} })}
<UsageBar percent={data.mem.percent} /> label={t("glances.temp")}
</div> expandedValue={t("common.number", {
</div> value: maxTemp,
{disks.map((disk) => ( maximumFractionDigits: 1,
<div key={disk.mnt_point} className="flex-none flex flex-row items-center mr-3 py-1.5"> style: "unit",
<FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" /> unit
<div className="flex flex-col ml-3 text-left min-w-[85px]"> })}
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> expandedLabel={t("glances.warn")}
<div className="pl-0.5">{t("common.bytes", { value: disk.free })}</div> percentage={tempPercent}
<div className="pr-1">{t("glances.free")}</div> expanded={options.expanded}
</span> />
{options.expanded && ( }
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> {options.uptime && data.uptime &&
<div className="pl-0.5 pr-1">{t("common.bytes", { value: disk.size })}</div> <Resource
<div className="pr-1">{t("glances.total")}</div> icon={FaRegClock}
</span> value={data.uptime.replace(" days,", t("glances.days")).replace(/:\d\d:\d\d$/g, t("glances.hours"))}
)} label={t("glances.uptime")}
<UsageBar percent={disk.percent} /> percentage={Math.round((new Date().getSeconds() / 60) * 100).toString()}
</div> />
</div>))} }
{options.cputemp && mainTemp > 0 && {options.label && <WidgetLabel label={options.label} />}
(<div className="flex-none flex flex-row items-center mr-3 py-1.5"> </Resources>
<FaThermometerHalf className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left min-w-[85px]">
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">
{t("common.number", {
value: mainTemp,
maximumFractionDigits: 1,
style: "unit",
unit
})}
</div>
<div className="pr-1">{t("glances.temp")}</div>
</span>
{options.expanded && (
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5 pr-1">
{t("common.number", {
value: maxTemp,
maximumFractionDigits: 1,
style: "unit",
unit
})}
</div>
<div className="pr-1">{t("glances.warn")}</div>
</span>
)}
<UsageBar percent={tempPercent} />
</div>
</div>)}
{options.uptime && data.uptime &&
(<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<FaRegClock className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left min-w-[85px]">
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">
{data.uptime.replace(" days,", t("glances.days")).replace(/:\d\d:\d\d$/g, t("glances.hours"))}
</div>
<div className="pr-1">{t("glances.uptime")}</div>
</span>
<UsageBar percent={Math.round((new Date().getSeconds() / 60) * 100)} />
</div>
</div>)}
</div>
{options.label && (
<div className="pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>
)}
</a>
); );
} }

11
src/components/widgets/greeting/greeting.jsx
Unescape View File

@ -1,3 +1,6 @@
import Container from "../widget/container";
import Raw from "../widget/raw";
const textSizes = { const textSizes = {
"4xl": "text-4xl", "4xl": "text-4xl",
"3xl": "text-3xl", "3xl": "text-3xl",
@ -11,12 +14,12 @@ const textSizes = {
export default function Greeting({ options }) { export default function Greeting({ options }) {
if (options.text) { if (options.text) {
return ( return <Container options={options}>
<div className="flex flex-row items-center justify-start"> <Raw>
<span className={`text-theme-800 dark:text-theme-200 mr-3 ${textSizes[options.text_size || "xl"]}`}> <span className={`text-theme-800 dark:text-theme-200 mr-3 ${textSizes[options.text_size || "xl"]}`}>
{options.text} {options.text}
</span> </span>
</div> </Raw>
); </Container>;
} }
} }

38
src/components/widgets/kubernetes/kubernetes.jsx
Unescape View File

@ -1,12 +1,15 @@
import useSWR from "swr"; import useSWR from "swr";
import { BiError } from "react-icons/bi";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import Error from "../widget/error";
import Container from "../widget/container";
import Raw from "../widget/raw";
import Node from "./node"; import Node from "./node";
export default function Widget({ options }) { export default function Widget({ options }) {
const { cluster, nodes } = options; const { cluster, nodes } = options;
const { t, i18n } = useTranslation(); const { i18n } = useTranslation();
const defaultData = { const defaultData = {
cpu: { cpu: {
@ -18,7 +21,7 @@ export default function Widget({ options }) {
used: 0, used: 0,
total: 0, total: 0,
free: 0, free: 0,
precent: 0 percent: 0
} }
}; };
@ -29,23 +32,12 @@ export default function Widget({ options }) {
); );
if (error || data?.error) { if (error || data?.error) {
return ( return <Error options={options} />
<div className="flex flex-col justify-center first:ml-0 ml-4">
<div className="flex flex-row items-center justify-end">
<div className="flex flex-row items-center">
<BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
</div>
</div>
</div>
</div>
);
} }
if (!data) { if (!data) {
return ( return <Container options={options}>
<div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap"> <Raw>
<div className="flex flex-row self-center flex-wrap justify-between"> <div className="flex flex-row self-center flex-wrap justify-between">
{cluster.show && {cluster.show &&
<Node type="cluster" key="cluster" options={options.cluster} data={defaultData} /> <Node type="cluster" key="cluster" options={options.cluster} data={defaultData} />
@ -54,12 +46,12 @@ export default function Widget({ options }) {
<Node type="node" key="nodes" options={options.nodes} data={defaultData} /> <Node type="node" key="nodes" options={options.nodes} data={defaultData} />
} }
</div> </div>
</div> </Raw>
); </Container>;
} }
return ( return <Container options={options}>
<div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap"> <Raw>
<div className="flex flex-row self-center flex-wrap justify-between"> <div className="flex flex-row self-center flex-wrap justify-between">
{cluster.show && {cluster.show &&
<Node key="cluster" type="cluster" options={options.cluster} data={data.cluster} /> <Node key="cluster" type="cluster" options={options.cluster} data={data.cluster} />
@ -69,6 +61,6 @@ export default function Widget({ options }) {
<Node key={node.name} type="node" options={options.nodes} data={node} />) <Node key={node.name} type="node" options={options.nodes} data={node} />)
} }
</div> </div>
</div> </Raw>
); </Container>;
} }

11
src/components/widgets/kubernetes/node.jsx
Unescape View File

@ -3,8 +3,7 @@ import { FiAlertTriangle, FiCpu, FiServer } from "react-icons/fi";
import { SiKubernetes } from "react-icons/si"; import { SiKubernetes } from "react-icons/si";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import UsageBar from "./usage-bar"; import UsageBar from "../resources/usage-bar";
export default function Node({ type, options, data }) { export default function Node({ type, options, data }) {
const { t } = useTranslation(); const { t } = useTranslation();
@ -29,7 +28,7 @@ export default function Node({ type, options, data }) {
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5"> <div className="pl-0.5">
{t("common.number", { {t("common.number", {
value: data.cpu.percent, value: data?.cpu?.percent ?? 0,
style: "unit", style: "unit",
unit: "percent", unit: "percent",
maximumFractionDigits: 0 maximumFractionDigits: 0
@ -37,18 +36,18 @@ export default function Node({ type, options, data }) {
</div> </div>
<FiCpu className="text-theme-800 dark:text-theme-200 w-3 h-3" /> <FiCpu className="text-theme-800 dark:text-theme-200 w-3 h-3" />
</div> </div>
<UsageBar percent={data.cpu.percent} /> <UsageBar percent={data?.cpu?.percent ?? 0} />
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5"> <div className="pl-0.5">
{t("common.bytes", { {t("common.bytes", {
value: data.memory.free, value: data?.memory?.free ?? 0,
maximumFractionDigits: 0, maximumFractionDigits: 0,
binary: true binary: true
})} })}
</div> </div>
<FaMemory className="text-theme-800 dark:text-theme-200 w-3 h-3" /> <FaMemory className="text-theme-800 dark:text-theme-200 w-3 h-3" />
</div> </div>
<UsageBar percent={data.memory.percent} /> <UsageBar percent={data?.memory?.percent} />
{options.showLabel && ( {options.showLabel && (
<div className="pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{type === "cluster" ? options.label : data.name}</div> <div className="pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{type === "cluster" ? options.label : data.name}</div>
)} )}

12
src/components/widgets/kubernetes/usage-bar.jsx
Unescape View File

@ -1,12 +0,0 @@
export default function UsageBar({ percent }) {
return (
<div className="mt-0.5 w-full bg-theme-800/30 rounded-full h-1 dark:bg-theme-200/20">
<div
className="bg-theme-800/70 h-1 rounded-full dark:bg-theme-200/50 transition-all duration-1000"
style={{
width: `${percent}%`,
}}
/>
</div>
);
}

11
src/components/widgets/logo/logo.jsx
Unescape View File

@ -1,9 +1,13 @@
import Container from "../widget/container";
import Raw from "../widget/raw";
import ResolvedIcon from "components/resolvedicon" import ResolvedIcon from "components/resolvedicon"
export default function Logo({ options }) { export default function Logo({ options }) {
return ( return (
<div className="w-12 h-12 flex flex-row items-center align-middle mr-3 self-center"> <Container options={options}>
{options.icon ? <Raw>
{options.icon ?
<ResolvedIcon icon={options.icon} width={48} height={48} /> : <ResolvedIcon icon={options.icon} width={48} height={48} /> :
// fallback to homepage logo // fallback to homepage logo
<svg <svg
@ -57,6 +61,7 @@ export default function Logo({ options }) {
</g> </g>
</svg> </svg>
} }
</div> </Raw>
</Container>
) )
} }

32
src/components/widgets/longhorn/longhorn.jsx
Unescape View File

@ -1,37 +1,31 @@
import useSWR from "swr"; import useSWR from "swr";
import { BiError } from "react-icons/bi";
import { useTranslation } from "next-i18next"; import Error from "../widget/error";
import Container from "../widget/container";
import Raw from "../widget/raw";
import Node from "./node"; import Node from "./node";
export default function Longhorn({ options }) { export default function Longhorn({ options }) {
const { expanded, total, labels, include, nodes } = options; const { expanded, total, labels, include, nodes } = options;
const { t } = useTranslation();
const { data, error } = useSWR(`/api/widgets/longhorn`, { const { data, error } = useSWR(`/api/widgets/longhorn`, {
refreshInterval: 1500 refreshInterval: 1500
}); });
if (error || data?.error) { if (error || data?.error) {
return ( return <Error options={options} />
<div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap">
<BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
</div>
</div>
);
} }
if (!data) { if (!data) {
return ( return <Container options={options}>
<div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap"> <Raw>
<div className="flex flex-row self-center flex-wrap justify-between" /> <div className="flex flex-row self-center flex-wrap justify-between" />
</div> </Raw>
); </Container>;
} }
return ( return <Container options={options}>
<div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap"> <Raw>
<div className="flex flex-row self-center flex-wrap justify-between"> <div className="flex flex-row self-center flex-wrap justify-between">
{data.nodes {data.nodes
.filter((node) => { .filter((node) => {
@ -52,6 +46,6 @@ export default function Longhorn({ options }) {
</div> </div>
)} )}
</div> </div>
</div> </Raw>
); </Container>;
} }

38
src/components/widgets/longhorn/node.jsx
Unescape View File

@ -1,32 +1,20 @@
import { FiHardDrive } from "react-icons/fi";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import { FaThermometerHalf } from "react-icons/fa";
import UsageBar from "../resources/usage-bar"; import Resource from "../widget/resource";
import WidgetLabel from "../widget/widget_label";
export default function Node({ data, expanded, labels }) { export default function Node({ data, expanded, labels }) {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return <Resource
<> icon={FaThermometerHalf}
<div className="flex-none flex flex-row items-center mr-3 py-1.5"> value={t("common.bytes", { value: data.node.available })}
<FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" /> label={t("resources.free")}
<div className="flex flex-col ml-3 text-left min-w-[85px]"> expandedValue={t("common.bytes", { value: data.node.maximum })}
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> expandedLabel={t("resources.total")}
<div className="pl-0.5">{t("common.bytes", { value: data.node.available })}</div> percentage={Math.round(((data.node.maximum - data.node.available) / data.node.maximum) * 100)}
<div className="pr-1">{t("resources.free")}</div> expanded={expanded}
</span> >{ labels && <WidgetLabel label={data.node.id} /> }
{expanded && ( </Resource>
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">{t("common.bytes", { value: data.node.maximum })}</div>
<div className="pr-1">{t("resources.total")}</div>
</span>
)}
<UsageBar percent={Math.round(((data.node.maximum - data.node.available) / data.node.maximum) * 100)} />
</div>
</div>
{labels && (
<div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{data.node.id}</div>
)}
</>
);
} }

103
src/components/widgets/openmeteo/openmeteo.jsx
Unescape View File

@ -1,10 +1,16 @@
import useSWR from "swr"; import useSWR from "swr";
import { useState } from "react"; import { useState } from "react";
import { BiError } from "react-icons/bi";
import { WiCloudDown } from "react-icons/wi"; import { WiCloudDown } from "react-icons/wi";
import { MdLocationDisabled, MdLocationSearching } from "react-icons/md"; import { MdLocationDisabled, MdLocationSearching } from "react-icons/md";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import Error from "../widget/error";
import Container from "../widget/container";
import ContainerButton from "../widget/container_button";
import WidgetIcon from "../widget/widget_icon";
import PrimaryText from "../widget/primary_text";
import SecondaryText from "../widget/secondary_text";
import Icon from "./icon"; import Icon from "./icon";
function Widget({ options }) { function Widget({ options }) {
@ -15,60 +21,35 @@ function Widget({ options }) {
); );
if (error || data?.error) { if (error || data?.error) {
return ( return <Error options={options} />
<div className="flex flex-col justify-center first:ml-0 ml-4 mr-2">
<div className="flex flex-row items-center justify-end">
<div className="flex flex-col items-center">
<BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
</div>
</div>
</div>
</div>
);
} }
if (!data) { if (!data) {
return ( return <Container options={options}>
<div className="flex flex-col justify-center first:ml-0 ml-4 mr-2"> <PrimaryText>{t("weather.updating")}</PrimaryText>
<div className="flex flex-row items-center justify-end"> <SecondaryText>{t("weather.wait")}</SecondaryText>
<div className="flex flex-col items-center"> <WidgetIcon icon={WiCloudDown} size="l" />
<WiCloudDown className="w-8 h-8 text-theme-800 dark:text-theme-200" /> </Container>;
</div>
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.updating")}</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.wait")}</span>
</div>
</div>
</div>
);
} }
const unit = options.units === "metric" ? "celsius" : "fahrenheit"; const unit = options.units === "metric" ? "celsius" : "fahrenheit";
const timeOfDay = data.current_weather.time > data.daily.sunrise[0] && data.current_weather.time < data.daily.sunset[0] ? "day" : "night"; const weatherInfo = {
condition: data.current_weather.weathercode,
timeOfDay: data.current_weather.time > data.daily.sunrise[0] && data.current_weather.time < data.daily.sunset[0] ? "day" : "night"
};
return ( return <Container options={options}>
<div className="flex flex-col justify-center first:ml-0 ml-4 mr-2"> <PrimaryText>
<div className="flex flex-row items-center justify-end"> {options.label && `${options.label}, `}
<div className="flex flex-col items-center"> {t("common.number", {
<Icon condition={data.current_weather.weathercode} timeOfDay={timeOfDay} /> value: data.current_weather.temperature,
</div> style: "unit",
<div className="flex flex-col ml-3 text-left"> unit,
<span className="text-theme-800 dark:text-theme-200 text-sm"> })}
{options.label && `${options.label}, `} </PrimaryText>
{t("common.number", { <SecondaryText>{t(`wmo.${data.current_weather.weathercode}-${weatherInfo.timeOfDay}`)}</SecondaryText>
value: data.current_weather.temperature, <WidgetIcon icon={Icon} size="xl" weatherInfo={weatherInfo} />
style: "unit", </Container>;
unit,
})}
</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">{t(`wmo.${data.current_weather.weathercode}-${timeOfDay}`)}</span>
</div>
</div>
</div>
);
} }
export default function OpenMeteo({ options }) { export default function OpenMeteo({ options }) {
@ -103,27 +84,11 @@ export default function OpenMeteo({ options }) {
// if (!requesting && !location) requestLocation(); // if (!requesting && !location) requestLocation();
if (!location) { if (!location) {
return ( return <ContainerButton options={options} callback={requestLocation} >
<button <PrimaryText>{t("weather.current")}</PrimaryText>
type="button" <SecondaryText>{t("weather.allow")}</SecondaryText>
onClick={() => requestLocation()} <WidgetIcon icon={ requesting ? MdLocationSearching : MdLocationDisabled} size="m" pulse />
className="flex flex-col justify-center first:ml-0 ml-4 mr-2" </ContainerButton>;
>
<div className="flex flex-row items-center justify-end">
<div className="flex flex-col items-center">
{requesting ? (
<MdLocationSearching className="w-6 h-6 text-theme-800 dark:text-theme-200 animate-pulse" />
) : (
<MdLocationDisabled className="w-6 h-6 text-theme-800 dark:text-theme-200" />
)}
</div>
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.current")}</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.allow")}</span>
</div>
</div>
</button>
);
} }
return <Widget options={{ ...location, ...options }} />; return <Widget options={{ ...location, ...options }} />;

98
src/components/widgets/openweathermap/weather.jsx
Unescape View File

@ -1,12 +1,19 @@
import useSWR from "swr"; import useSWR from "swr";
import { useState } from "react"; import { useState } from "react";
import { BiError } from "react-icons/bi";
import { WiCloudDown } from "react-icons/wi"; import { WiCloudDown } from "react-icons/wi";
import { MdLocationDisabled, MdLocationSearching } from "react-icons/md"; import { MdLocationDisabled, MdLocationSearching } from "react-icons/md";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import Error from "../widget/error";
import Container from "../widget/container";
import ContainerButton from "../widget/container_button";
import PrimaryText from "../widget/primary_text";
import SecondaryText from "../widget/secondary_text";
import WidgetIcon from "../widget/widget_icon";
import Icon from "./icon"; import Icon from "./icon";
function Widget({ options }) { function Widget({ options }) {
const { t, i18n } = useTranslation(); const { t, i18n } = useTranslation();
@ -15,58 +22,29 @@ function Widget({ options }) {
); );
if (error || data?.cod === 401 || data?.error) { if (error || data?.cod === 401 || data?.error) {
return ( return <Error options={options} />
<div className="flex flex-col justify-center first:ml-auto ml-4 mr-2">
<div className="flex flex-row items-center justify-end">
<div className="hidden sm:flex flex-col items-center">
<BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
</div>
</div>
</div>
</div>
);
} }
if (!data) { if (!data) {
return ( return <Container options={options}>
<div className="flex flex-col justify-center first:ml-auto ml-4 mr-2"> <PrimaryText>{t("weather.updating")}</PrimaryText>
<div className="flex flex-row items-center justify-end"> <SecondaryText>{t("weather.wait")}</SecondaryText>
<div className="hidden sm:flex flex-col items-center"> <WidgetIcon icon={WiCloudDown} size="l" />
<WiCloudDown className="w-8 h-8 text-theme-800 dark:text-theme-200" /> </Container>;
</div>
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.updating")}</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.wait")}</span>
</div>
</div>
</div>
);
} }
const unit = options.units === "metric" ? "celsius" : "fahrenheit"; const unit = options.units === "metric" ? "celsius" : "fahrenheit";
return ( const weatherInfo = {
<div className="flex flex-col justify-center first:ml-auto ml-2 mr-2"> condition: data.weather[0].id,
<div className="flex flex-row items-center justify-end"> timeOfDay: data.dt > data.sys.sunrise && data.dt < data.sys.sunset ? "day" : "night"
<div className="hidden sm:flex flex-col items-center"> };
<Icon
condition={data.weather[0].id} return <Container options={options}>
timeOfDay={data.dt > data.sys.sunrise && data.dt < data.sys.sunset ? "day" : "night"} <PrimaryText>{options.label && `${options.label}, ` }{t("common.number", { value: data.main.temp, style: "unit", unit })}</PrimaryText>
/> <SecondaryText>{data.weather[0].description}</SecondaryText>
</div> <WidgetIcon icon={Icon} size="xl" weatherInfo={weatherInfo} />
<div className="flex flex-col ml-3 text-left"> </Container>;
<span className="text-theme-800 dark:text-theme-200 text-sm">
{options.label && `${options.label}, `}
{t("common.number", { value: data.main.temp, style: "unit", unit })}
</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">{data.weather[0].description}</span>
</div>
</div>
</div>
);
} }
export default function OpenWeatherMap({ options }) { export default function OpenWeatherMap({ options }) {
@ -98,30 +76,12 @@ export default function OpenWeatherMap({ options }) {
} }
}; };
// if (!requesting && !location) requestLocation();
if (!location) { if (!location) {
return ( return <ContainerButton options={options} callback={requestLocation} >
<button <PrimaryText>{t("weather.current")}</PrimaryText>
type="button" <SecondaryText>{t("weather.allow")}</SecondaryText>
onClick={() => requestLocation()} <WidgetIcon icon={requesting ? MdLocationSearching : MdLocationDisabled} size="m" pulse />
className="flex flex-col justify-center first:ml-auto ml-4 mr-2" </ContainerButton>;
>
<div className="flex flex-row items-center justify-end">
<div className="hidden sm:flex flex-col items-center">
{requesting ? (
<MdLocationSearching className="w-6 h-6 text-theme-800 dark:text-theme-200 animate-pulse" />
) : (
<MdLocationDisabled className="w-6 h-6 text-theme-800 dark:text-theme-200" />
)}
</div>
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.current")}</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.allow")}</span>
</div>
</div>
</button>
);
} }
return <Widget options={{ ...location, ...options }} />; return <Widget options={{ ...location, ...options }} />;

82
src/components/widgets/resources/cpu.jsx
Unescape View File

@ -1,9 +1,9 @@
import useSWR from "swr"; import useSWR from "swr";
import { FiCpu } from "react-icons/fi"; import { FiCpu } from "react-icons/fi";
import { BiError } from "react-icons/bi";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import UsageBar from "./usage-bar"; import Resource from "../widget/resource";
import Error from "../widget/error";
export default function Cpu({ expanded }) { export default function Cpu({ expanded }) {
const { t } = useTranslation(); const { t } = useTranslation();
@ -13,67 +13,29 @@ export default function Cpu({ expanded }) {
}); });
if (error || data?.error) { if (error || data?.error) {
return ( return <Error />
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
</div>
</div>
);
} }
if (!data) { if (!data) {
return ( return <Resource icon={FiCpu} value="-" label={t("resources.cpu")} expandedValue="-"
<div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse"> expandedLabel={t("resources.load")} percentage="0" expanded={expanded} />
<FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left min-w-[85px]">
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5 pr-1">-</div>
<div className="pr-1">{t("resources.cpu")}</div>
</div>
{expanded && (
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5 pr-1">-</div>
<div className="pr-1">{t("resources.load")}</div>
</div>
)}
<UsageBar percent={0} />
</div>
</div>
);
} }
const percent = data.cpu.usage; return <Resource
icon={FiCpu}
return ( value={t("common.number", {
<div className="flex-none flex flex-row items-center mr-3 py-1.5"> value: data.cpu.usage,
<FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" /> style: "unit",
<div className="flex flex-col ml-3 text-left min-w-[85px]"> unit: "percent",
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> maximumFractionDigits: 0,
<div className="pl-0.5 pr-1"> })}
{t("common.number", { label={t("resources.cpu")}
value: data.cpu.usage, expandedValue={t("common.number", {
style: "unit", value: data.cpu.load,
unit: "percent", maximumFractionDigits: 2,
maximumFractionDigits: 0, })}
})} expandedLabel={t("resources.load")}
</div> percentage={data.cpu.usage}
<div className="pr-1">{t("resources.cpu")}</div> expanded={expanded}
</div> />
{expanded && (
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5 pr-1">
{t("common.number", {
value: data.cpu.load,
maximumFractionDigits: 2,
})}
</div>
<div className="pr-1">{t("resources.load")}</div>
</div>
)}
<UsageBar percent={percent} />
</div>
</div>
);
} }

90
src/components/widgets/resources/cputemp.jsx
Unescape View File

@ -1,9 +1,9 @@
import useSWR from "swr"; import useSWR from "swr";
import { FaThermometerHalf } from "react-icons/fa"; import { FaThermometerHalf } from "react-icons/fa";
import { BiError } from "react-icons/bi";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import UsageBar from "./usage-bar"; import Resource from "../widget/resource";
import Error from "../widget/error";
function convertToFahrenheit(t) { function convertToFahrenheit(t) {
return t * 9/5 + 32 return t * 9/5 + 32
@ -17,34 +17,18 @@ export default function CpuTemp({ expanded, units }) {
}); });
if (error || data?.error) { if (error || data?.error) {
return ( return <Error />
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
</div>
</div>
);
} }
if (!data || !data.cputemp) { if (!data || !data.cputemp) {
return ( return <Resource
<div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse"> icon={FaThermometerHalf}
<FaThermometerHalf className="text-theme-800 dark:text-theme-200 w-5 h-5" /> value="-"
<div className="flex flex-col ml-3 text-left min-w-[85px]"> label={t("resources.temp")}
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> expandedValue="-"
<div className="pl-0.5">-</div> expandedLabel={t("resources.max")}
<div className="pr-1">{t("resources.temp")}</div> expanded={expanded}
</span> />;
{expanded && (
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">-</div>
<div className="pr-1">{t("resources.max")}</div>
</span>
)}
</div>
</div>
);
} }
let mainTemp = data.cputemp.main; let mainTemp = data.cputemp.main;
@ -54,38 +38,24 @@ export default function CpuTemp({ expanded, units }) {
const unit = units === "imperial" ? "fahrenheit" : "celsius"; const unit = units === "imperial" ? "fahrenheit" : "celsius";
mainTemp = (unit === "celsius") ? mainTemp : convertToFahrenheit(mainTemp); mainTemp = (unit === "celsius") ? mainTemp : convertToFahrenheit(mainTemp);
const maxTemp = (unit === "celsius") ? data.cputemp.max : convertToFahrenheit(data.cputemp.max); const maxTemp = (unit === "celsius") ? data.cputemp.max : convertToFahrenheit(data.cputemp.max);
const percent = Math.round((mainTemp / maxTemp) * 100);
return ( return <Resource
<div className="flex-none flex flex-row items-center mr-3 py-1.5"> icon={FaThermometerHalf}
<FaThermometerHalf className="text-theme-800 dark:text-theme-200 w-5 h-5" /> value={t("common.number", {
<div className="flex flex-col ml-3 text-left min-w-[85px]"> value: mainTemp,
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> maximumFractionDigits: 1,
<div className="pl-0.5"> style: "unit",
{t("common.number", { unit
value: mainTemp, })}
maximumFractionDigits: 1, label={t("resources.temp")}
style: "unit", expandedValue={t("common.number", {
unit value: maxTemp,
})} maximumFractionDigits: 1,
</div> style: "unit",
<div className="pr-1">{t("resources.temp")}</div> unit
</span> })}
{expanded && ( expandedLabel={t("resources.max")}
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> percentage={Math.round((mainTemp / maxTemp) * 100)}
<div className="pl-0.5"> expanded={expanded}
{t("common.number", { />;
value: maxTemp,
maximumFractionDigits: 1,
style: "unit",
unit
})}
</div>
<div className="pr-1">{t("resources.max")}</div>
</span>
)}
<UsageBar percent={percent} />
</div>
</div>
);
} }

67
src/components/widgets/resources/disk.jsx
Unescape View File

@ -1,9 +1,9 @@
import useSWR from "swr"; import useSWR from "swr";
import { FiHardDrive } from "react-icons/fi"; import { FiHardDrive } from "react-icons/fi";
import { BiError } from "react-icons/bi";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import UsageBar from "./usage-bar"; import Resource from "../widget/resource";
import Error from "../widget/error";
export default function Disk({ options, expanded }) { export default function Disk({ options, expanded }) {
const { t } = useTranslation(); const { t } = useTranslation();
@ -13,56 +13,31 @@ export default function Disk({ options, expanded }) {
}); });
if (error || data?.error) { if (error || data?.error) {
return ( return <Error options={options} />
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
</div>
</div>
);
} }
if (!data) { if (!data) {
return ( return <Resource
<div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse"> icon={FiHardDrive}
<FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" /> value="-"
<div className="flex flex-col ml-3 text-left min-w-[85px]"> label={t("resources.free")}
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> expandedValue="-"
<div className="pl-0.5 pr-1">-</div> expandedLabel={t("resources.total")}
<div className="pr-1">{t("resources.free")}</div> expanded={expanded}
</span> percentage="0"
{expanded && ( />;
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5 pr-1">-</div>
<div className="pr-1">{t("resources.total")}</div>
</span>
)}
<UsageBar percent={0} />
</div>
</div>
);
} }
// data.drive.used not accurate? // data.drive.used not accurate?
const percent = Math.round(((data.drive.size - data.drive.available) / data.drive.size) * 100); const percent = Math.round(((data.drive.size - data.drive.available) / data.drive.size) * 100);
return ( return <Resource
<div className="flex-none flex flex-row items-center mr-3 py-1.5"> icon={FiHardDrive}
<FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" /> value={t("common.bytes", { value: data.drive.available })}
<div className="flex flex-col ml-3 text-left min-w-[85px]"> label={t("resources.free")}
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> expandedValue={t("common.bytes", { value: data.drive.size })}
<div className="pl-0.5 pr-1">{t("common.bytes", { value: data.drive.available })}</div> expandedLabel={t("resources.total")}
<div className="pr-1">{t("resources.free")}</div> percentage={percent}
</span> expanded={expanded}
{expanded && ( />;
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5 pr-1">{t("common.bytes", { value: data.drive.size })}</div>
<div className="pr-1">{t("resources.total")}</div>
</span>
)}
<UsageBar percent={percent} />
</div>
</div>
);
} }

75
src/components/widgets/resources/memory.jsx
Unescape View File

@ -1,9 +1,9 @@
import useSWR from "swr"; import useSWR from "swr";
import { FaMemory } from "react-icons/fa"; import { FaMemory } from "react-icons/fa";
import { BiError } from "react-icons/bi";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import UsageBar from "./usage-bar"; import Resource from "../widget/resource";
import Error from "../widget/error";
export default function Memory({ expanded }) { export default function Memory({ expanded }) {
const { t } = useTranslation(); const { t } = useTranslation();
@ -13,63 +13,30 @@ export default function Memory({ expanded }) {
}); });
if (error || data?.error) { if (error || data?.error) {
return ( return <Error />
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
</div>
</div>
);
} }
if (!data) { if (!data) {
return ( return <Resource
<div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse"> icon={FaMemory}
<FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" /> value="-"
<div className="flex flex-col ml-3 text-left min-w-[85px]"> label={t("resources.free")}
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> expandedValue="-"
<div className="pl-0.5 pr-1">-</div> expandedLabel={t("resources.total")}
<div className="pr-1">{t("resources.free")}</div> expanded={expanded}
</span> percentage="0"
{expanded && ( />;
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5 pr-1">-</div>
<div className="pr-1">{t("resources.total")}</div>
</span>
)}
<UsageBar percent={0} />
</div>
</div>
);
} }
const percent = Math.round((data.memory.active / data.memory.total) * 100); const percent = Math.round((data.memory.active / data.memory.total) * 100);
return ( return <Resource
<div className="flex-none flex flex-row items-center mr-3 py-1.5"> icon={FaMemory}
<FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" /> value={t("common.bytes", { value: data.memory.available, maximumFractionDigits: 1, binary: true })}
<div className="flex flex-col ml-3 text-left min-w-[85px]"> label={t("resources.free")}
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"> expandedValue={t("common.bytes", { value: data.memory.total, maximumFractionDigits: 1, binary: true })}
<div className="pl-0.5 pr-1"> expandedLabel={t("resources.total")}
{t("common.bytes", { value: data.memory.available, maximumFractionDigits: 1, binary: true })} percentage={percent}
</div> expanded={expanded}
<div className="pr-1">{t("resources.free")}</div> />;
</span>
{expanded && (
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5 pr-1">
{t("common.bytes", {
value: data.memory.total,
maximumFractionDigits: 1,
binary: true,
})}
</div>
<div className="pr-1">{t("resources.total")}</div>
</span>
)}
<UsageBar percent={percent} />
</div>
</div>
);
} }

11
src/components/widgets/resources/resources.jsx
Unescape View File

@ -1,3 +1,6 @@
import Container from "../widget/container";
import Raw from "../widget/raw";
import Disk from "./disk"; import Disk from "./disk";
import Cpu from "./cpu"; import Cpu from "./cpu";
import Memory from "./memory"; import Memory from "./memory";
@ -6,8 +9,8 @@ import Uptime from "./uptime";
export default function Resources({ options }) { export default function Resources({ options }) {
const { expanded, units } = options; const { expanded, units } = options;
return ( return <Container options={options}>
<div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap"> <Raw>
<div className="flex flex-row self-center flex-wrap justify-between"> <div className="flex flex-row self-center flex-wrap justify-between">
{options.cpu && <Cpu expanded={expanded} />} {options.cpu && <Cpu expanded={expanded} />}
{options.memory && <Memory expanded={expanded} />} {options.memory && <Memory expanded={expanded} />}
@ -20,6 +23,6 @@ export default function Resources({ options }) {
{options.label && ( {options.label && (
<div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div> <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>
)} )}
</div> </Raw>
); </Container>;
} }

44
src/components/widgets/resources/uptime.jsx
Unescape View File

@ -1,9 +1,9 @@
import useSWR from "swr"; import useSWR from "swr";
import { FaRegClock } from "react-icons/fa"; import { FaRegClock } from "react-icons/fa";
import { BiError } from "react-icons/bi";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import UsageBar from "./usage-bar"; import Resource from "../widget/resource";
import Error from "../widget/error";
export default function Uptime() { export default function Uptime() {
const { t } = useTranslation(); const { t } = useTranslation();
@ -13,54 +13,24 @@ export default function Uptime() {
}); });
if (error || data?.error) { if (error || data?.error) {
return ( return <Error />
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
</div>
</div>
);
} }
if (!data) { if (!data) {
return ( return <Resource icon={FaRegClock} value="-" label={t("resources.uptime")} percentage="0" />;
<div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
<FaRegClock className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left min-w-[85px]">
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">-</div>
<div className="pr-1">{t("resources.temp")}</div>
</span>
</div>
</div>
);
} }
const mo = Math.floor(data.uptime / (3600 * 24 * 31)); const mo = Math.floor(data.uptime / (3600 * 24 * 31));
const d = Math.floor(data.uptime % (3600 * 24 * 31) / (3600 * 24)); const d = Math.floor(data.uptime % (3600 * 24 * 31) / (3600 * 24));
const h = Math.floor(data.uptime % (3600 * 24) / 3600); const h = Math.floor(data.uptime % (3600 * 24) / 3600);
const m = Math.floor(data.uptime % 3600 / 60); const m = Math.floor(data.uptime % 3600 / 60);
let uptime; let uptime;
if (mo > 0) uptime = `${mo}${t("resources.months")} ${d}${t("resources.days")}`; if (mo > 0) uptime = `${mo}${t("resources.months")} ${d}${t("resources.days")}`;
else if (d > 0) uptime = `${d}${t("resources.days")} ${h}${t("resources.hours")}`; else if (d > 0) uptime = `${d}${t("resources.days")} ${h}${t("resources.hours")}`;
else uptime = `${h}${t("resources.hours")} ${m}${t("resources.minutes")}`; else uptime = `${h}${t("resources.hours")} ${m}${t("resources.minutes")}`;
const percent = Math.round((new Date().getSeconds() / 60) * 100); const percent = Math.round((new Date().getSeconds() / 60) * 100).toString();
return ( return <Resource icon={FaRegClock} value={uptime} label={t("resources.uptime")} percentage={percent} />;
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<FaRegClock className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left min-w-[85px]">
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">
{uptime}
</div>
<div className="pr-1">{t("resources.uptime")}</div>
</span>
<UsageBar percent={percent} />
</div>
</div>
);
} }

162
src/components/widgets/search/search.jsx
Unescape View File

@ -1,10 +1,13 @@
import { useState, useEffect, Fragment } from "react"; import { useState, useEffect, useCallback, Fragment } from "react";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import { FiSearch } from "react-icons/fi"; import { FiSearch } from "react-icons/fi";
import { SiDuckduckgo, SiMicrosoftbing, SiGoogle, SiBaidu, SiBrave } from "react-icons/si"; import { SiDuckduckgo, SiMicrosoftbing, SiGoogle, SiBaidu, SiBrave } from "react-icons/si";
import { Listbox, Transition } from "@headlessui/react"; import { Listbox, Transition } from "@headlessui/react";
import classNames from "classnames"; import classNames from "classnames";
import ContainerForm from "../widget/container_form";
import Raw from "../widget/raw";
export const searchProviders = { export const searchProviders = {
google: { google: {
name: "Google", name: "Google",
@ -76,14 +79,9 @@ export default function Search({ options }) {
setSelectedProvider(storedProvider); setSelectedProvider(storedProvider);
} }
}, [availableProviderIds]); }, [availableProviderIds]);
if (!availableProviderIds) {
return null;
}
function handleSubmit(event) { const submitCallback = useCallback(event => {
const q = encodeURIComponent(query); const q = encodeURIComponent(query);
const { url } = selectedProvider; const { url } = selectedProvider;
if (url) { if (url) {
window.open(`${url}${q}`, options.target || "_blank"); window.open(`${url}${q}`, options.target || "_blank");
@ -94,6 +92,10 @@ export default function Search({ options }) {
event.preventDefault(); event.preventDefault();
event.target.reset(); event.target.reset();
setQuery(""); setQuery("");
}, [options.target, options.url, query, selectedProvider]);
if (!availableProviderIds) {
return null;
} }
const onChangeProvider = (provider) => { const onChangeProvider = (provider) => {
@ -101,77 +103,79 @@ export default function Search({ options }) {
localStorage.setItem(localStorageKey, provider.name); localStorage.setItem(localStorageKey, provider.name);
} }
return ( return <ContainerForm options={options} callback={submitCallback} additionalClassNames="grow" >
<form className="flex-col relative h-8 my-4 min-w-fit grow first:ml-0 ml-4" onSubmit={handleSubmit}> <Raw>
<div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" /> <div className="flex-col relative h-8 my-4 min-w-fit">
<input <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
type="text" <input
className=" type="text"
overflow-hidden w-full h-full rounded-md className="
text-xs text-theme-900 dark:text-white overflow-hidden w-full h-full rounded-md
placeholder-theme-900 dark:placeholder-white/80 text-xs text-theme-900 dark:text-white
bg-white/50 dark:bg-white/10 placeholder-theme-900 dark:placeholder-white/80
focus:ring-theme-500 dark:focus:ring-white/50 bg-white/50 dark:bg-white/10
focus:border-theme-500 dark:focus:border-white/50 focus:ring-theme-500 dark:focus:ring-white/50
border border-theme-300 dark:border-theme-200/50" focus:border-theme-500 dark:focus:border-white/50
placeholder={t("search.placeholder")} border border-theme-300 dark:border-theme-200/50"
onChange={(s) => setQuery(s.currentTarget.value)} placeholder={t("search.placeholder")}
required onChange={(s) => setQuery(s.currentTarget.value)}
autoCapitalize="off" required
autoCorrect="off" autoCapitalize="off"
autoComplete="off" autoCorrect="off"
// eslint-disable-next-line jsx-a11y/no-autofocus autoComplete="off"
autoFocus={options.focus} // eslint-disable-next-line jsx-a11y/no-autofocus
/> autoFocus={options.focus}
<Listbox as="div" value={selectedProvider} onChange={onChangeProvider} className="relative text-left" disabled={availableProviderIds?.length === 1}> />
<div> <Listbox as="div" value={selectedProvider} onChange={onChangeProvider} className="relative text-left" disabled={availableProviderIds?.length === 1}>
<Listbox.Button <div>
className=" <Listbox.Button
absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1 className="
text-white font-medium text-sm absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
bg-theme-600/40 dark:bg-white/10 text-white font-medium text-sm
focus:ring-theme-500 dark:focus:ring-white/50" bg-theme-600/40 dark:bg-white/10
> focus:ring-theme-500 dark:focus:ring-white/50"
<selectedProvider.icon className="text-white w-3 h-3" /> >
<span className="sr-only">{t("search.search")}</span> <selectedProvider.icon className="text-white w-3 h-3" />
</Listbox.Button> <span className="sr-only">{t("search.search")}</span>
</div> </Listbox.Button>
<Transition </div>
as={Fragment} <Transition
enter="transition ease-out duration-100" as={Fragment}
enterFrom="transform opacity-0 scale-95" enter="transition ease-out duration-100"
enterTo="transform opacity-100 scale-100" enterFrom="transform opacity-0 scale-95"
leave="transition ease-in duration-75" enterTo="transform opacity-100 scale-100"
leaveFrom="transform opacity-100 scale-100" leave="transition ease-in duration-75"
leaveTo="transform opacity-0 scale-95" leaveFrom="transform opacity-100 scale-100"
> leaveTo="transform opacity-0 scale-95"
<Listbox.Options
className="absolute right-0 z-10 mt-1 origin-top-right rounded-md
bg-theme-100 dark:bg-theme-600 shadow-lg
ring-1 ring-black ring-opacity-5 focus:outline-none"
> >
<div className="flex flex-col"> <Listbox.Options
{availableProviderIds.map((providerId) => { className="absolute right-0 z-10 mt-1 origin-top-right rounded-md
const p = searchProviders[providerId]; bg-theme-100 dark:bg-theme-600 shadow-lg
return ( ring-1 ring-black ring-opacity-5 focus:outline-none"
<Listbox.Option key={providerId} value={p} as={Fragment}> >
{({ active }) => ( <div className="flex flex-col">
<li {availableProviderIds.map((providerId) => {
className={classNames( const p = searchProviders[providerId];
"rounded-md cursor-pointer", return (
active ? "bg-theme-600/10 dark:bg-white/10 dark:text-gray-900" : "dark:text-gray-100" <Listbox.Option key={providerId} value={p} as={Fragment}>
)} {({ active }) => (
> <li
<p.icon className="h-4 w-4 mx-4 my-2" /> className={classNames(
</li> "rounded-md cursor-pointer",
)} active ? "bg-theme-600/10 dark:bg-white/10 dark:text-gray-900" : "dark:text-gray-100"
</Listbox.Option> )}
); >
})} <p.icon className="h-4 w-4 mx-4 my-2" />
</div> </li>
</Listbox.Options> )}
</Transition> </Listbox.Option>
</Listbox> );
</form> })}
); </div>
</Listbox.Options>
</Transition>
</Listbox>
</div>
</Raw>
</ContainerForm>;
} }

45
src/components/widgets/unifi_console/unifi_console.jsx
Unescape View File

@ -3,6 +3,12 @@ import { MdSettingsEthernet } from "react-icons/md";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import { SiUbiquiti } from "react-icons/si"; import { SiUbiquiti } from "react-icons/si";
import Error from "../widget/error";
import Container from "../widget/container";
import Raw from "../widget/raw";
import WidgetIcon from "../widget/widget_icon";
import PrimaryText from "../widget/primary_text";
import useWidgetAPI from "utils/proxy/use-widget-api"; import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Widget({ options }) { export default function Widget({ options }) {
@ -13,35 +19,16 @@ export default function Widget({ options }) {
const { data: statsData, error: statsError } = useWidgetAPI(options, "stat/sites", { index: options.index }); const { data: statsData, error: statsError } = useWidgetAPI(options, "stat/sites", { index: options.index });
if (statsError) { if (statsError) {
return ( return <Error options={options} />
<div className="flex flex-col justify-center first:ml-0 ml-4">
<div className="flex flex-row items-center justify-end">
<div className="flex flex-col items-center">
<BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
</div>
</div>
</div>
</div>
);
} }
const defaultSite = options.site ? statsData?.data.find(s => s.desc === options.site) : statsData?.data?.find(s => s.name === "default"); const defaultSite = options.site ? statsData?.data.find(s => s.desc === options.site) : statsData?.data?.find(s => s.name === "default");
if (!defaultSite) { if (!defaultSite) {
return ( return <Container options={options}>
<div className="flex flex-col justify-center first:ml-0 ml-4"> <PrimaryText>{t("unifi.wait")}</PrimaryText>
<div className="flex flex-row items-center justify-end"> <WidgetIcon icon={SiUbiquiti} />
<div className="flex flex-col items-center"> </Container>;
<SiUbiquiti className="w-5 h-5 text-theme-800 dark:text-theme-200" />
</div>
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-xs">{t("unifi.wait")}</span>
</div>
</div>
</div>
);
} }
const wan = defaultSite.health.find(h => h.subsystem === "wan"); const wan = defaultSite.health.find(h => h.subsystem === "wan");
@ -56,8 +43,9 @@ export default function Widget({ options }) {
const dataEmpty = !(wan.show || lan.show || wlan.show || uptime); const dataEmpty = !(wan.show || lan.show || wlan.show || uptime);
return ( return <Container options={options}>
<div className="flex-none flex flex-row items-center mr-3 py-1.5"> <Raw>
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row ml-3 mb-0.5"> <div className="flex flex-row ml-3 mb-0.5">
<SiUbiquiti className="text-theme-800 dark:text-theme-200 w-3 h-3 mr-1" /> <SiUbiquiti className="text-theme-800 dark:text-theme-200 w-3 h-3 mr-1" />
@ -141,6 +129,7 @@ export default function Widget({ options }) {
</div> </div>
</div>} </div>}
</div> </div>
</div> </div>
); </Raw>
</Container>
} }

104
src/components/widgets/weather/weather.jsx
Unescape View File

@ -1,10 +1,16 @@
import useSWR from "swr"; import useSWR from "swr";
import { useState } from "react"; import { useState } from "react";
import { BiError } from "react-icons/bi";
import { WiCloudDown } from "react-icons/wi"; import { WiCloudDown } from "react-icons/wi";
import { MdLocationDisabled, MdLocationSearching } from "react-icons/md"; import { MdLocationDisabled, MdLocationSearching } from "react-icons/md";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import Error from "../widget/error";
import Container from "../widget/container";
import PrimaryText from "../widget/primary_text";
import SecondaryText from "../widget/secondary_text";
import WidgetIcon from "../widget/widget_icon";
import ContainerButton from "../widget/container_button";
import Icon from "./icon"; import Icon from "./icon";
function Widget({ options }) { function Widget({ options }) {
@ -15,59 +21,35 @@ function Widget({ options }) {
); );
if (error || data?.error) { if (error || data?.error) {
return ( return <Error options={options} />
<div className="flex flex-col justify-center first:ml-0 ml-4 mr-2">
<div className="flex flex-row items-center justify-end">
<div className="flex flex-col items-center">
<BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
</div>
</div>
</div>
</div>
);
} }
if (!data) { if (!data) {
return ( return <Container options={options}>
<div className="flex flex-col justify-center first:ml-0 ml-4 mr-2"> <PrimaryText>{t("weather.updating")}</PrimaryText>
<div className="flex flex-row items-center justify-end"> <SecondaryText>{t("weather.wait")}</SecondaryText>
<div className="flex flex-col items-center"> <WidgetIcon icon={WiCloudDown} size="l" />
<WiCloudDown className="w-8 h-8 text-theme-800 dark:text-theme-200" /> </Container>;
</div>
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.updating")}</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.wait")}</span>
</div>
</div>
</div>
);
} }
const unit = options.units === "metric" ? "celsius" : "fahrenheit"; const unit = options.units === "metric" ? "celsius" : "fahrenheit";
const weatherInfo = {
condition: data.current.condition.code,
timeOfDay: data.current.is_day ? "day" : "night",
};
return ( return <Container options={options}>
<div className="flex flex-col justify-center first:ml-0 ml-4 mr-2"> <PrimaryText>
<div className="flex flex-row items-center justify-end"> {options.label && `${options.label}, `}
<div className="flex flex-col items-center"> {t("common.number", {
<Icon condition={data.current.condition.code} timeOfDay={data.current.is_day ? "day" : "night"} /> value: options.units === "metric" ? data.current.temp_c : data.current.temp_f,
</div> style: "unit",
<div className="flex flex-col ml-3 text-left"> unit,
<span className="text-theme-800 dark:text-theme-200 text-sm"> })}
{options.label && `${options.label}, `} </PrimaryText>
{t("common.number", { <SecondaryText>{data.current.condition.text}</SecondaryText>
value: options.units === "metric" ? data.current.temp_c : data.current.temp_f, <WidgetIcon icon={Icon} size="xl" weatherInfo={weatherInfo} />
style: "unit", </Container>;
unit,
})}
</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">{data.current.condition.text}</span>
</div>
</div>
</div>
);
} }
export default function WeatherApi({ options }) { export default function WeatherApi({ options }) {
@ -99,30 +81,12 @@ export default function WeatherApi({ options }) {
} }
}; };
// if (!requesting && !location) requestLocation();
if (!location) { if (!location) {
return ( return <ContainerButton options={options} callback={requestLocation} >
<button <PrimaryText>{t("weather.current")}</PrimaryText>
type="button" <SecondaryText>{t("weather.allow")}</SecondaryText>
onClick={() => requestLocation()} <WidgetIcon icon={requesting ? MdLocationSearching : MdLocationDisabled} size="m" pulse />
className="flex flex-col justify-center first:ml-0 ml-4 mr-2" </ContainerButton>;
>
<div className="flex flex-row items-center justify-end">
<div className="flex flex-col items-center">
{requesting ? (
<MdLocationSearching className="w-6 h-6 text-theme-800 dark:text-theme-200 animate-pulse" />
) : (
<MdLocationDisabled className="w-6 h-6 text-theme-800 dark:text-theme-200" />
)}
</div>
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.current")}</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.allow")}</span>
</div>
</div>
</button>
);
} }
return <Widget options={{ ...location, ...options }} />; return <Widget options={{ ...location, ...options }} />;

4
src/components/widgets/widget.jsx
Unescape View File

@ -17,13 +17,13 @@ const widgetMappings = {
kubernetes: dynamic(() => import("components/widgets/kubernetes/kubernetes")), kubernetes: dynamic(() => import("components/widgets/kubernetes/kubernetes")),
}; };
export default function Widget({ widget }) { export default function Widget({ widget, style }) {
const InfoWidget = widgetMappings[widget.type]; const InfoWidget = widgetMappings[widget.type];
if (InfoWidget) { if (InfoWidget) {
return ( return (
<ErrorBoundary> <ErrorBoundary>
<InfoWidget options={widget.options} /> <InfoWidget options={{ ...widget.options, style }} />
</ErrorBoundary> </ErrorBoundary>
); );
} }

54
src/components/widgets/widget/container.jsx
Unescape View File

@ -0,0 +1,54 @@
import classNames from "classnames";
import WidgetIcon from "./widget_icon";
import PrimaryText from "./primary_text";
import SecondaryText from "./secondary_text";
import Raw from "./raw";
export function getAllClasses(options, additionalClassNames = '') {
if (options?.style?.header === "boxedWidgets") {
return classNames(
"flex flex-col justify-center first:ml-0 ml-2 mr-2",
"mt-2 m:mb-0 rounded-md shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 dark:bg-white/5 p-2 pl-3 pr-3",
additionalClassNames
);
}
let widgetAlignedClasses = "flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap";
if (options?.style?.isRightAligned) {
widgetAlignedClasses = "flex flex-col justify-center first:ml-auto ml-2 mr-2 ";
}
return classNames(
widgetAlignedClasses,
additionalClassNames
);
}
export function getInnerBlock(children) {
// children won't be an array if it's Raw component
return Array.isArray(children) && <div className="flex flex-row items-center justify-end">
<div className="flex flex-col items-center">{children.find(child => child.type === WidgetIcon)}</div>
<div className="flex flex-col ml-3 text-left">
{children.find(child => child.type === PrimaryText)}
{children.find(child => child.type === SecondaryText)}
</div>
</div>;
}
export function getBottomBlock(children) {
if (children.type !== Raw) {
return children.find(child => child.type === Raw) || [];
}
return [children];
}
export default function Container({ children = [], options, additionalClassNames = '' }) {
return (
<div className={getAllClasses(options, additionalClassNames)}>
{getInnerBlock(children)}
{getBottomBlock(children)}
</div>
);
}

10
src/components/widgets/widget/container_button.jsx
Unescape View File

@ -0,0 +1,10 @@
import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
export default function ContainerButton ({ children = [], options, additionalClassNames = '', callback }) {
return (
<button type="button" onClick={callback} className={getAllClasses(options, additionalClassNames)}>
{getInnerBlock(children)}
{getBottomBlock(children)}
</button>
);
}

10
src/components/widgets/widget/container_form.jsx
Unescape View File

@ -0,0 +1,10 @@
import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
export default function ContainerForm ({ children = [], options, additionalClassNames = '', callback }) {
return (
<form type="button" onSubmit={callback} className={getAllClasses(options, additionalClassNames)}>
{getInnerBlock(children)}
{getBottomBlock(children)}
</form>
);
}

10
src/components/widgets/widget/container_link.jsx
Unescape View File

@ -0,0 +1,10 @@
import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
export default function ContainerLink ({ children = [], options, additionalClassNames = '', target }) {
return (
<a href={options.url} target={target} className={getAllClasses(options, additionalClassNames)}>
{getInnerBlock(children)}
{getBottomBlock(children)}
</a>
);
}

15
src/components/widgets/widget/error.jsx
Unescape View File

@ -0,0 +1,15 @@
import { useTranslation } from "react-i18next";
import { BiError } from "react-icons/bi";
import Container from "./container";
import PrimaryText from "./primary_text";
import WidgetIcon from "./widget_icon";
export default function Error({ options }) {
const { t } = useTranslation();
return <Container options={options}>
<PrimaryText>{t("widget.api_error")}</PrimaryText>
<WidgetIcon icon={BiError} size="l" />
</Container>;
}

5
src/components/widgets/widget/primary_text.jsx
Unescape View File

@ -0,0 +1,5 @@
export default function PrimaryText({ children }) {
return (
<span className="text-theme-800 dark:text-theme-200 text-sm">{children}</span>
);
}

7
src/components/widgets/widget/raw.jsx
Unescape View File

@ -0,0 +1,7 @@
export default function Raw({ children }) {
if (children.type === Raw) {
return [children];
}
return children;
}

22
src/components/widgets/widget/resource.jsx
Unescape View File

@ -0,0 +1,22 @@
import UsageBar from "../resources/usage-bar";
export default function Resource({ children, icon, value, label, expandedValue = "", expandedLabel = "", percentage, expanded = false }) {
const Icon = icon;
return <div className="flex-none flex flex-row items-center mr-3 py-1.5">
<Icon className="text-theme-800 dark:text-theme-200 w-5 h-5"/>
<div className="flex flex-col ml-3 text-left min-w-[85px]">
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">{value}</div>
<div className="pr-1">{label}</div>
</div>
{ expanded && <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">{expandedValue}</div>
<div className="pr-1">{expandedLabel}</div>
</div>
}
{ percentage && <UsageBar percent={percentage} /> }
{ children }
</div>
</div>;
}

17
src/components/widgets/widget/resources.jsx
Unescape View File

@ -0,0 +1,17 @@
import ContainerLink from "./container_link";
import Resource from "./resource";
import Raw from "./raw";
import WidgetLabel from "./widget_label";
export default function Resources({ options, children, target }) {
const widgetParts = [].concat(...children);
return <ContainerLink options={options} target={target}>
<Raw>
<div className="flex flex-row self-center flex-wrap justify-between">
{ widgetParts.filter(child => child && child.type === Resource) }
</div>
{ widgetParts.filter(child => child && child.type === WidgetLabel) }
</Raw>
</ContainerLink>;
}

5
src/components/widgets/widget/secondary_text.jsx
Unescape View File

@ -0,0 +1,5 @@
export default function SecondaryText({ children }) {
return (
<span className="text-theme-800 dark:text-theme-200 text-xs">{children}</span>
);
}

18
src/components/widgets/widget/widget_icon.jsx
Unescape View File

@ -0,0 +1,18 @@
export default function WidgetIcon({ icon, size = "s", pulse = false, weatherInfo = {} }) {
const Icon = icon;
const { condition, timeOfDay } = weatherInfo;
let additionalClasses = "text-theme-800 dark:text-theme-200 ";
switch (size) {
case "m": additionalClasses += "w-6 h-6 "; break;
case "l": additionalClasses += "w-8 h-8 "; break;
case "xl": additionalClasses += "w-10 h-10 "; break;
default: additionalClasses += "w-5 h-5 ";
}
if (pulse) {
additionalClasses += "animate-pulse ";
}
return <Icon className={additionalClasses} condition={condition} timeOfDay={timeOfDay} />;
}

3
src/components/widgets/widget/widget_label.jsx
Unescape View File

@ -0,0 +1,3 @@
export default function WidgetLabel({ label = "" }) {
return <div className="pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{label}</div>
}

2
src/pages/api/widgets/longhorn.js
Unescape View File

@ -46,7 +46,7 @@ function parseLonghornData(data) {
export default async function handler(req, res) { export default async function handler(req, res) {
const settings = getSettings(); const settings = getSettings();
const longhornSettings = settings?.providers?.longhorn; const longhornSettings = settings?.providers?.longhorn || {};
const {url, username, password} = longhornSettings; const {url, username, password} = longhornSettings;
if (!url) { if (!url) {

15
src/pages/index.jsx
Unescape View File

@ -160,6 +160,7 @@ const headerStyles = {
"m-4 mb-0 sm:m-8 sm:mb-0 rounded-md shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 dark:bg-white/5 p-3", "m-4 mb-0 sm:m-8 sm:mb-0 rounded-md shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 dark:bg-white/5 p-3",
underlined: "m-4 mb-0 sm:m-8 sm:mb-1 border-b-2 pb-4 border-theme-800 dark:border-theme-200/50", underlined: "m-4 mb-0 sm:m-8 sm:mb-1 border-b-2 pb-4 border-theme-800 dark:border-theme-200/50",
clean: "m-4 mb-0 sm:m-8 sm:mb-0", clean: "m-4 mb-0 sm:m-8 sm:mb-0",
boxedWidgets: "m-4 mb-0 sm:m-8 sm:mb-0 sm:mt-1",
}; };
function Home({ initialSettings }) { function Home({ initialSettings }) {
@ -208,6 +209,7 @@ function Home({ initialSettings }) {
searchProvider = searchProviders[searchWidget.options?.provider]; searchProvider = searchProviders[searchWidget.options?.provider];
} }
} }
const headerStyle = initialSettings?.headerStyle || "underlined";
useEffect(() => { useEffect(() => {
function handleKeyDown(e) { function handleKeyDown(e) {
@ -256,7 +258,7 @@ function Home({ initialSettings }) {
<div <div
className={classNames( className={classNames(
"flex flex-row flex-wrap justify-between", "flex flex-row flex-wrap justify-between",
headerStyles[initialSettings.headerStyle || "underlined"] headerStyles[headerStyle]
)} )}
> >
<QuickLaunch <QuickLaunch
@ -272,14 +274,17 @@ function Home({ initialSettings }) {
{widgets {widgets
.filter((widget) => !rightAlignedWidgets.includes(widget.type)) .filter((widget) => !rightAlignedWidgets.includes(widget.type))
.map((widget, i) => ( .map((widget, i) => (
<Widget key={i} widget={widget} /> <Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: false}} />
))} ))}
<div className="m-auto sm:ml-2 flex flex-wrap grow sm:basis-auto justify-between md:justify-end"> <div className={classNames(
"m-auto flex flex-wrap grow sm:basis-auto justify-between md:justify-end",
headerStyle === "boxedWidgets" ? "sm:ml-4" : "sm:ml-2"
)}>
{widgets {widgets
.filter((widget) => rightAlignedWidgets.includes(widget.type)) .filter((widget) => rightAlignedWidgets.includes(widget.type))
.map((widget, i) => ( .map((widget, i) => (
<Widget key={i} widget={widget} /> <Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: true}} />
))} ))}
</div> </div>
</> </>
@ -359,7 +364,7 @@ export default function Wrapper({ initialSettings, fallback }) {
style={wrappedStyle} style={wrappedStyle}
> >
<div <div
id="inner_wrapper" id="inner_wrapper"
className={classNames( className={classNames(
'fixed overflow-auto w-full h-full', 'fixed overflow-auto w-full h-full',
backgroundBlur && `backdrop-blur${initialSettings.background.blur.length ? '-' : ""}${initialSettings.background.blur}`, backgroundBlur && `backdrop-blur${initialSettings.background.blur.length ? '-' : ""}${initialSettings.background.blur}`,

Write Preview
Loading…
Cancel
Save