{options.cpu &&
}
{options.memory &&
}
@@ -23,6 +20,6 @@ export default function Resources({ options }) {
{options.label && (
{options.label}
)}
-
- ;
+
+ );
}
diff --git a/src/components/widgets/resources/uptime.jsx b/src/components/widgets/resources/uptime.jsx
index 3984975f1..3bf785b1e 100644
--- a/src/components/widgets/resources/uptime.jsx
+++ b/src/components/widgets/resources/uptime.jsx
@@ -1,9 +1,9 @@
import useSWR from "swr";
import { FaRegClock } from "react-icons/fa";
+import { BiError } from "react-icons/bi";
import { useTranslation } from "next-i18next";
-import Resource from "../widget/resource";
-import Error from "../widget/error";
+import UsageBar from "./usage-bar";
export default function Uptime() {
const { t } = useTranslation();
@@ -13,24 +13,54 @@ export default function Uptime() {
});
if (error || data?.error) {
- return
+ return (
+
+
+
+ {t("widget.api_error")}
+
+
+ );
}
if (!data) {
- return
;
+ return (
+
+
+
+
+ -
+ {t("resources.temp")}
+
+
+
+ );
}
const mo = Math.floor(data.uptime / (3600 * 24 * 31));
const d = Math.floor(data.uptime % (3600 * 24 * 31) / (3600 * 24));
const h = Math.floor(data.uptime % (3600 * 24) / 3600);
const m = Math.floor(data.uptime % 3600 / 60);
-
+
let uptime;
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 uptime = `${h}${t("resources.hours")} ${m}${t("resources.minutes")}`;
- const percent = Math.round((new Date().getSeconds() / 60) * 100).toString();
+ const percent = Math.round((new Date().getSeconds() / 60) * 100);
- return
;
+ return (
+
+
+
+
+
+ {uptime}
+
+ {t("resources.uptime")}
+
+
+
+
+ );
}
diff --git a/src/components/widgets/search/search.jsx b/src/components/widgets/search/search.jsx
index 1bac4a619..4689567f3 100644
--- a/src/components/widgets/search/search.jsx
+++ b/src/components/widgets/search/search.jsx
@@ -1,13 +1,10 @@
-import { useState, useEffect, useCallback, Fragment } from "react";
+import { useState, useEffect, Fragment } from "react";
import { useTranslation } from "next-i18next";
import { FiSearch } from "react-icons/fi";
import { SiDuckduckgo, SiMicrosoftbing, SiGoogle, SiBaidu, SiBrave } from "react-icons/si";
import { Listbox, Transition } from "@headlessui/react";
import classNames from "classnames";
-import ContainerForm from "../widget/container_form";
-import Raw from "../widget/raw";
-
export const searchProviders = {
google: {
name: "Google",
@@ -79,9 +76,14 @@ export default function Search({ options }) {
setSelectedProvider(storedProvider);
}
}, [availableProviderIds]);
+
+ if (!availableProviderIds) {
+ return null;
+ }
- const submitCallback = useCallback(event => {
+ function handleSubmit(event) {
const q = encodeURIComponent(query);
+
const { url } = selectedProvider;
if (url) {
window.open(`${url}${q}`, options.target || "_blank");
@@ -92,10 +94,6 @@ export default function Search({ options }) {
event.preventDefault();
event.target.reset();
setQuery("");
- }, [options.target, options.url, query, selectedProvider]);
-
- if (!availableProviderIds) {
- return null;
}
const onChangeProvider = (provider) => {
@@ -103,79 +101,77 @@ export default function Search({ options }) {
localStorage.setItem(localStorageKey, provider.name);
}
- return
-
-
-
-
setQuery(s.currentTarget.value)}
- required
- autoCapitalize="off"
- autoCorrect="off"
- autoComplete="off"
- // eslint-disable-next-line jsx-a11y/no-autofocus
- autoFocus={options.focus}
- />
-
-
-
-
- {t("search.search")}
-
-
-
+
+ setQuery(s.currentTarget.value)}
+ required
+ autoCapitalize="off"
+ autoCorrect="off"
+ autoComplete="off"
+ // eslint-disable-next-line jsx-a11y/no-autofocus
+ autoFocus={options.focus}
+ />
+
+
+
+
+ {t("search.search")}
+
+
+
+
-
-
- {availableProviderIds.map((providerId) => {
- const p = searchProviders[providerId];
- return (
-
- {({ active }) => (
-
-
-
- )}
-
- );
- })}
-
;
+
+ {availableProviderIds.map((providerId) => {
+ const p = searchProviders[providerId];
+ return (
+
+ {({ active }) => (
+
+
+
+ )}
+
+ );
+ })}
+
+
+
+
+
+ );
}
diff --git a/src/components/widgets/unifi_console/unifi_console.jsx b/src/components/widgets/unifi_console/unifi_console.jsx
index dad92cc78..13c90bd42 100644
--- a/src/components/widgets/unifi_console/unifi_console.jsx
+++ b/src/components/widgets/unifi_console/unifi_console.jsx
@@ -3,12 +3,6 @@ import { MdSettingsEthernet } from "react-icons/md";
import { useTranslation } from "next-i18next";
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";
export default function Widget({ options }) {
@@ -19,16 +13,35 @@ export default function Widget({ options }) {
const { data: statsData, error: statsError } = useWidgetAPI(options, "stat/sites", { index: options.index });
if (statsError) {
- return
+ return (
+
+
+
+
+
+ {t("widget.api_error")}
+
+
+
+
+ );
}
const defaultSite = options.site ? statsData?.data.find(s => s.desc === options.site) : statsData?.data?.find(s => s.name === "default");
if (!defaultSite) {
- return
- {t("unifi.wait")}
-
- ;
+ return (
+
+
+
+
+
+
+ {t("unifi.wait")}
+
+
+
+ );
}
const wan = defaultSite.health.find(h => h.subsystem === "wan");
@@ -43,9 +56,8 @@ export default function Widget({ options }) {
const dataEmpty = !(wan.show || lan.show || wlan.show || uptime);
- return
-
-
+ return (
+
@@ -129,7 +141,6 @@ export default function Widget({ options }) {
}
-
+
+ );
}
diff --git a/src/components/widgets/weather/weather.jsx b/src/components/widgets/weather/weather.jsx
index 702ea6693..20bf3dec2 100644
--- a/src/components/widgets/weather/weather.jsx
+++ b/src/components/widgets/weather/weather.jsx
@@ -1,16 +1,10 @@
import useSWR from "swr";
import { useState } from "react";
+import { BiError } from "react-icons/bi";
import { WiCloudDown } from "react-icons/wi";
import { MdLocationDisabled, MdLocationSearching } from "react-icons/md";
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";
function Widget({ options }) {
@@ -21,35 +15,59 @@ function Widget({ options }) {
);
if (error || data?.error) {
- return