mirror of
https://github.com/karl0ss/homepage.git
synced 2025-05-01 21:13:39 +01:00
commit
229c5dac59
@ -11,6 +11,7 @@ import Jellyfin from "./widgets/service/jellyfin";
|
||||
import Speedtest from "./widgets/service/speedtest";
|
||||
import Traefik from "./widgets/service/traefik";
|
||||
import Jellyseerr from "./widgets/service/jellyseerr";
|
||||
import Npm from "./widgets/service/npm";
|
||||
|
||||
const widgetMappings = {
|
||||
docker: Docker,
|
||||
@ -25,7 +26,8 @@ const widgetMappings = {
|
||||
rutorrent: Rutorrent,
|
||||
speedtest: Speedtest,
|
||||
traefik: Traefik,
|
||||
jellyseerr: Jellyseerr
|
||||
jellyseerr: Jellyseerr,
|
||||
npm: Npm,
|
||||
};
|
||||
|
||||
export default function Widget({ service }) {
|
||||
|
65
src/components/services/widgets/service/npm.jsx
Normal file
65
src/components/services/widgets/service/npm.jsx
Normal file
@ -0,0 +1,65 @@
|
||||
import useSWR from "swr";
|
||||
|
||||
import Widget from "../widget";
|
||||
import Block from "../block";
|
||||
|
||||
export default function Npm({ service }) {
|
||||
const config = service.widget;
|
||||
const { url } = config;
|
||||
|
||||
const fetcher = async (reqUrl) => {
|
||||
const { url, username, password } = config;
|
||||
const loginUrl = `${url}/api/tokens`;
|
||||
const body = { identity: username, secret: password };
|
||||
|
||||
const res = await fetch(loginUrl, {
|
||||
method: "POST",
|
||||
body: JSON.stringify(body),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then(
|
||||
async (data) =>
|
||||
await fetch(reqUrl, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: "Bearer " + data.token,
|
||||
},
|
||||
})
|
||||
);
|
||||
return res.json();
|
||||
};
|
||||
|
||||
const { data: infoData, error: infoError } = useSWR(`${url}/api/nginx/proxy-hosts`, fetcher);
|
||||
|
||||
console.log(infoData);
|
||||
|
||||
if (infoError) {
|
||||
return <Widget error="NGINX Proxy Manager API Error" />;
|
||||
}
|
||||
|
||||
if (!infoData) {
|
||||
return (
|
||||
<Widget>
|
||||
<Block label="Running" />
|
||||
<Block label="Stopped" />
|
||||
<Block label="Total" />
|
||||
</Widget>
|
||||
);
|
||||
}
|
||||
|
||||
const enabled = infoData.filter((c) => c.enabled === 1).length;
|
||||
const disabled = infoData.filter((c) => c.enabled === 0).length;
|
||||
const total = infoData.length;
|
||||
|
||||
return (
|
||||
<Widget>
|
||||
<Block label="Enabled" value={enabled} />
|
||||
<Block label="Disabled" value={disabled} />
|
||||
<Block label="Total" value={total} />
|
||||
</Widget>
|
||||
);
|
||||
}
|
@ -1,12 +1,14 @@
|
||||
import WeatherApi from "components/widgets/weather/weather";
|
||||
import OpenWeatherMap from "components/widgets/openweathermap/weather";
|
||||
import Resources from "components/widgets/resources/resources";
|
||||
import Search from "components/widgets/search/search";
|
||||
|
||||
const widgetMappings = {
|
||||
weather: WeatherApi, // This key will be deprecated in the future
|
||||
weatherapi: WeatherApi,
|
||||
openweathermap: OpenWeatherMap,
|
||||
resources: Resources,
|
||||
search: Search,
|
||||
};
|
||||
|
||||
export default function Widget({ widget }) {
|
||||
|
@ -5,7 +5,7 @@ import Memory from "./memory";
|
||||
export default function Resources({ options }) {
|
||||
return (
|
||||
<>
|
||||
<div className="pr-2 flex flex-col">
|
||||
<div className="pr-2 flex flex-col max-w:full overflow-y-scroll">
|
||||
<div className="flex flex-row space-x-4">
|
||||
{options.disk && <Disk options={options} />}
|
||||
{options.cpu && <Cpu />}
|
||||
|
73
src/components/widgets/search/search.jsx
Normal file
73
src/components/widgets/search/search.jsx
Normal file
@ -0,0 +1,73 @@
|
||||
import { useState } from "react";
|
||||
import { FiSearch } from "react-icons/fi";
|
||||
import { FcGoogle } from "react-icons/fc";
|
||||
import { SiDuckduckgo } from "react-icons/si";
|
||||
import { SiMicrosoftbing } from "react-icons/si";
|
||||
|
||||
export default function Search({ options, classN }) {
|
||||
const providers = ["google", "bing", "duckduckgo", "custom"];
|
||||
const targets = ["_blank", "_parent", "_top"];
|
||||
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
function search() {
|
||||
if (!providers.includes(options.provider)) {
|
||||
return;
|
||||
} else {
|
||||
if (options.provider === "custom") {
|
||||
if (targets.includes(options.target)) {
|
||||
window.open(options.customdata.url + query, options.target);
|
||||
} else window.open(options.customdata.url + query, "_self");
|
||||
} else {
|
||||
if (targets.includes(options.target)) {
|
||||
window.open(`https://www.${options.provider}.com/search?q=` + query, `${options.target}`);
|
||||
} else window.open(`https://www.${options.provider}.com/search?q=` + query, "_self");
|
||||
}
|
||||
}
|
||||
|
||||
setQuery("");
|
||||
}
|
||||
|
||||
if (!options || (options.provider === "custom" && !options.customdata)) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return (
|
||||
<form className={`grow flex-col relative h-8 my-4 md:my-0 min-w-full md:min-w-fit ${classN}`}>
|
||||
<div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-theme-200">
|
||||
{options.provider == "google" ? (
|
||||
<FcGoogle className="text-theme-800 dark:text-theme-200 w-3 h-3" />
|
||||
) : options.provider == "duckduckgo" ? (
|
||||
<SiDuckduckgo className="text-theme-800 dark:text-theme-200 w-3 h-3" />
|
||||
) : options.provider == "bing" ? (
|
||||
<SiMicrosoftbing className="text-theme-800 dark:text-theme-200 w-3 h-3" />
|
||||
) : options.provider == "custom" ? (
|
||||
options.customdata.abbr.length > 2 ? (
|
||||
options.customdata.abbr.substring(0, 2)
|
||||
) : (
|
||||
options.customdata.abbr
|
||||
)
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
type="search"
|
||||
autoFocus
|
||||
className={`block ${
|
||||
options.customdata && options.customdata.abbr && options.customdata.abbr.length > 1 ? "pl-12" : "pl-10"
|
||||
} w-full text-sm text-gray-900 bg-gray-50 rounded-full border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 h-full`}
|
||||
placeholder="Search..."
|
||||
onChange={(s) => setQuery(s.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
onClick={search}
|
||||
className="text-white absolute right-0.5 bottom-0.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-r-full text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||
>
|
||||
<FiSearch className="text-theme-200 dark:text-theme-200 w-3 h-3" />
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
@ -33,7 +33,7 @@ export default function WeatherApi({ options }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-col justify-center md:justify-start mt-2 lg:mt-0 !-ml-1 lg:!ml-2">
|
||||
<div className="flex flex-row items-center justify-end">
|
||||
<div className="flex flex-col items-center">
|
||||
<Icon condition={data.current.condition.code} timeOfDay={data.current.is_day ? "day" : "night"} />
|
||||
|
@ -8,6 +8,7 @@ import ServicesGroup from "components/services/group";
|
||||
import BookmarksGroup from "components/bookmarks/group";
|
||||
import Widget from "components/widget";
|
||||
import { ColorProvider } from "utils/color-context";
|
||||
import Search from "components/widgets/search/search";
|
||||
|
||||
const ThemeToggle = dynamic(() => import("components/theme-toggle"), {
|
||||
ssr: false,
|
||||
@ -17,7 +18,7 @@ const ColorToggle = dynamic(() => import("components/color-toggle"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather"];
|
||||
const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search"];
|
||||
|
||||
export default function Home() {
|
||||
const { data: services, error: servicesError } = useSWR("/api/services");
|
||||
@ -31,7 +32,7 @@ export default function Home() {
|
||||
<title>Welcome</title>
|
||||
</Head>
|
||||
<div className="w-full container m-auto flex flex-col h-screen justify-between">
|
||||
<div className="flex flex-wrap space-x-4 m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200">
|
||||
<div className="flex flex-wrap space-x-4 m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200 justify-between">
|
||||
{widgets && (
|
||||
<>
|
||||
{widgets
|
||||
@ -39,12 +40,21 @@ export default function Home() {
|
||||
.map((widget, i) => (
|
||||
<Widget key={i} widget={widget} />
|
||||
))}
|
||||
<div className="grow"></div>
|
||||
{widgets
|
||||
.filter((widget) => widget.type === "search")
|
||||
.map(
|
||||
(widget, i) =>
|
||||
<Search options={widget.options} classN={"hidden sm:block"} /> ?? <div className="grow"></div>
|
||||
)}
|
||||
{widgets
|
||||
.filter((widget) => rightAlignedWidgets.includes(widget.type))
|
||||
.map((widget, i) => (
|
||||
<Widget key={i} widget={widget} />
|
||||
))}
|
||||
.map((widget, i) =>
|
||||
widget.type === "search" ? (
|
||||
<Search options={widget.options} classN={"block sm:hidden !ml-0 sm:!ml-1"} />
|
||||
) : (
|
||||
<Widget key={i} widget={widget} />
|
||||
)
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
@ -5,6 +5,11 @@
|
||||
- My First Service:
|
||||
href: http://localhost/
|
||||
description: Homepage is awesome
|
||||
# widget:
|
||||
# type: npm # npm for NGINX Proxy Manager
|
||||
# url: http://localhost # no slash at the end
|
||||
# username: email@example.com # your email
|
||||
# password: secretpassword # your password
|
||||
|
||||
- My Second Group:
|
||||
- My Second Service:
|
||||
|
@ -5,3 +5,9 @@
|
||||
cpu: true
|
||||
memory: true
|
||||
disk: /
|
||||
# - search: # Searchbar in widgets area
|
||||
# provider: custom # Can be google, duckduckgo, bing or custom.
|
||||
# target: _blank # Can be _blank, _top, _self or _parent.
|
||||
# customdata:
|
||||
# url: https://startpage.com/search?q= # Required for custom provider. Remember to add the q param as per your provider.
|
||||
# abbr: G # Can be omitted. Only the first 2 characters will be considered.
|
||||
|
Loading…
x
Reference in New Issue
Block a user