Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-05-01 21:13:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update CoinMarketCap widget to have time selector

Browse Source
This commit is contained in:
Chris McGravey 2022-09-13 15:35:53 -05:00
parent 16ddb2461b
commit 767aa9b3e1
16 changed files with 145 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/locales/de/common.json
View File

@ -109,8 +109,12 @@
"downloaded": "Downloaded"
},
"coinmarketcap": {
"configure": "Configure one or more crypto currencies to track"
},
"configure": "Configure one or more crypto currencies to track",
"1hour": "1 Hour",
"1day": "1 Day",
"7days": "7 Days",
"30days": "30 Days"
},
"gotify": {
"apps": "Applications",
"clients": "Clients",

6
public/locales/en/common.json
View File

@ -126,7 +126,11 @@
"total": "Total"
},
"coinmarketcap": {
"configure": "Configure one or more crypto currencies to track"
"configure": "Configure one or more crypto currencies to track",
"1hour": "1 Hour",
"1day": "1 Day",
"7days": "7 Days",
"30days": "30 Days"
},
"gotify": {
"apps": "Applications",

8
public/locales/es/common.json
View File

@ -109,8 +109,12 @@
"downloaded": "Descargado"
},
"coinmarketcap": {
"configure": "Configurar una o varias criptomonedas para su seguimiento"
},
"configure": "Configure one or more crypto currencies to track",
"1hour": "1 Hour",
"1day": "1 Day",
"7days": "7 Days",
"30days": "30 Days"
},
"gotify": {
"apps": "Aplicaciones",
"clients": "Clientes",

8
public/locales/fr/common.json
View File

@ -120,8 +120,12 @@
"rate": "Évaluer"
},
"coinmarketcap": {
"configure": "Configurer une ou plusieurs crypto-monnaies à suivre"
},
"configure": "Configure one or more crypto currencies to track",
"1hour": "1 Hour",
"1day": "1 Day",
"7days": "7 Days",
"30days": "30 Days"
},
"gotify": {
"apps": "Applications",
"clients": "Clients",

8
public/locales/it/common.json
View File

@ -109,8 +109,12 @@
"downloaded": "Downloaded"
},
"coinmarketcap": {
"configure": "Configure one or more crypto currencies to track"
},
"configure": "Configure one or more crypto currencies to track",
"1hour": "1 Hour",
"1day": "1 Day",
"7days": "7 Days",
"30days": "30 Days"
},
"gotify": {
"apps": "Applications",
"clients": "Clients",

8
public/locales/nb-NO/common.json
View File

@ -109,8 +109,12 @@
"remaining": "Gjenstående"
},
"coinmarketcap": {
"configure": "Sett opp én eller flere kryptovalutaer å holde øye med"
},
"configure": "Configure one or more crypto currencies to track",
"1hour": "1 Hour",
"1day": "1 Day",
"7days": "7 Days",
"30days": "30 Days"
},
"gotify": {
"apps": "Programmer",
"clients": "Klienter",

8
public/locales/nl/common.json
View File

@ -109,8 +109,12 @@
"downloaded": "Downloaded"
},
"coinmarketcap": {
"configure": "Configure one or more crypto currencies to track"
},
"configure": "Configure one or more crypto currencies to track",
"1hour": "1 Hour",
"1day": "1 Day",
"7days": "7 Days",
"30days": "30 Days"
},
"gotify": {
"apps": "Applications",
"clients": "Clients",

8
public/locales/pt/common.json
View File

@ -120,8 +120,12 @@
"downloaded": "Downloaded"
},
"coinmarketcap": {
"configure": "Configure one or more crypto currencies to track"
},
"configure": "Configure one or more crypto currencies to track",
"1hour": "1 Hour",
"1day": "1 Day",
"7days": "7 Days",
"30days": "30 Days"
},
"gotify": {
"apps": "Aplicações",
"clients": "Clientes",

8
public/locales/ru/common.json
View File

@ -109,8 +109,12 @@
"downloaded": "Downloaded"
},
"coinmarketcap": {
"configure": "Configure one or more crypto currencies to track"
},
"configure": "Configure one or more crypto currencies to track",
"1hour": "1 Hour",
"1day": "1 Day",
"7days": "7 Days",
"30days": "30 Days"
},
"gotify": {
"apps": "Applications",
"clients": "Clients",

8
public/locales/vi/common.json
View File

@ -109,8 +109,12 @@
"downloaded": "Downloaded"
},
"coinmarketcap": {
"configure": "Configure one or more crypto currencies to track"
},
"configure": "Configure one or more crypto currencies to track",
"1hour": "1 Hour",
"1day": "1 Day",
"7days": "7 Days",
"30days": "30 Days"
},
"gotify": {
"apps": "Applications",
"clients": "Clients",

8
public/locales/zh-CN/common.json
View File

@ -109,8 +109,12 @@
"downloaded": "下载"
},
"coinmarketcap": {
"configure": "配置一个或多个需要追踪的加密"
},
"configure": "Configure one or more crypto currencies to track",
"1hour": "1 Hour",
"1day": "1 Day",
"7days": "7 Days",
"30days": "30 Days"
},
"gotify": {
"apps": "应用",
"clients": "客户端",

8
public/locales/zh-Hant/common.json
View File

@ -114,8 +114,12 @@
"total": "Total"
},
"coinmarketcap": {
"configure": "Configure one or more crypto currencies to track"
},
"configure": "Configure one or more crypto currencies to track",
"1hour": "1 Hour",
"1day": "1 Day",
"7days": "7 Days",
"30days": "30 Days"
},
"prowlarr": {
"enableIndexers": "Indexers",
"numberOfGrabs": "Grabs",

44
src/components/services/dropdown.jsx Normal file
View File

@ -0,0 +1,44 @@
import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import { BiCog } from "react-icons/bi";
export default function Dropdown({ options, state }) {
return (
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-theme-600/40 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-theme-600/40 focus:outline-none">
{state.value.label}
<BiCog className="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-theme-600/40 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="py-1">
{options.map((i) => (
<Menu.Item key={i.value}>
<button
onClick={() => {
state.set(i);
}}
type="button"
className="text-white block px-4 py-2 text-sm"
>
{i.label}
</button>
</Menu.Item>
))}
</div>
</Menu.Items>
</Transition>
</Menu>
);
}

18
src/components/services/item.jsx
View File

@ -1,9 +1,11 @@
import Image from "next/future/image";
import { Disclosure } from "@headlessui/react";
import { useState } from "react";
import Status from "./status";
import Widget from "./widget";
import Docker from "./widgets/service/docker";
import Dropdown from "./dropdown";
function resolveIcon(icon) {
if (icon.startsWith("http")) {
@ -28,6 +30,19 @@ export default function Item({ service }) {
}
};
const cmcValues = [
{ label: "1 Hour", value: "1h" },
{ label: "1 Day", value: "24h" },
{ label: "7 Days", value: "7d" },
{ label: "30 Days", value: "30d" },
];
const [cmcV, cmcSet] = useState(cmcValues[0]);
const states = {
coinmarketcap: { value: cmcV, set: cmcSet },
};
const hasLink = service.href && service.href !== "#";
return (
@ -82,6 +97,7 @@ export default function Item({ service }) {
<Status service={service} />
</Disclosure.Button>
)}
{service?.widget?.type === "coinmarketcap" && <Dropdown state={states.coinmarketcap} options={cmcValues} />}
</div>
<Disclosure.Panel>
@ -90,7 +106,7 @@ export default function Item({ service }) {
</div>
</Disclosure.Panel>
{service.widget && <Widget service={service} />}
{service.widget && <Widget state={states[service?.widget?.type]} service={service} />}
</div>
</Disclosure>
</li>

6
src/components/services/widget.jsx
View File

@ -45,16 +45,16 @@ const widgetMappings = {
npm: Npm,
tautulli: Tautulli,
gotify: Gotify,
prowlarr: Prowlarr
prowlarr: Prowlarr,
};
export default function Widget({ service }) {
export default function Widget({ service, state }) {
const { t } = useTranslation("common");
const ServiceWidget = widgetMappings[service.widget.type];
if (ServiceWidget) {
return <ServiceWidget service={service} />;
return <ServiceWidget state={state} service={service} />;
}
return (

17
src/components/services/widgets/service/coinmarketcap.jsx
View File

@ -1,13 +1,12 @@
import useSWR from "swr";
import { useTranslation } from "react-i18next";
import getSymbolFromCurrency from "currency-symbol-map";
import Widget from "../widget";
import Block from "../block";
import { formatApiUrl } from "utils/api-helpers";
export default function CoinMarketCap({ service }) {
export default function CoinMarketCap({ service, state }) {
const { t } = useTranslation();
const config = service.widget;
@ -39,7 +38,6 @@ export default function CoinMarketCap({ service }) {
}
const { data } = statsData;
const currencySymbol = getSymbolFromCurrency(currencyCode);
return (
<Widget>
@ -52,15 +50,20 @@ export default function CoinMarketCap({ service }) {
<div className="font-thin pl-2">{data[key].name}</div>
<div className="flex flex-row text-right">
<div className="font-bold mr-2">
{currencySymbol}
{data[key].quote[currencyCode].price.toFixed(2)}
{t("common.number", {
value: data[key].quote[currencyCode].price,
style: "currency",
currency: currencyCode,
})}
</div>
<div
className={`font-bold w-10 mr-2 ${
data[key].quote[currencyCode].percent_change_1h > 0 ? "text-emerald-300" : "text-rose-300"
data[key].quote[currencyCode][`percent_change_${state.value.value}`] > 0
? "text-emerald-300"
: "text-rose-300"
}`}
>
{data[key].quote[currencyCode].percent_change_1h.toFixed(2)}%
{data[key].quote[currencyCode][`percent_change_${state.value.value}`].toFixed(2)}%
</div>
</div>
</div>