dominik/homepage-plus
1
0
Fork 0
mirror of https://github.com/DI0IK/homepage-plus.git synced 2025-07-19 19:19:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Run pre-commit hooks over existing codebase

Browse source 
Co-Authored-By: Ben Phelps <ben@phelps.io>
This commit is contained in:
shamoon 2023-10-17 23:26:55 -07:00
parent fa50bbad9c
commit 19c25713c4
387 changed files with 4785 additions and 4109 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/widgets/calendar/component.jsx
View file

@ -18,30 +18,42 @@ export default function Component({ service }) {
}
return {
start: showDate.minus({months: 3}).toFormat("yyyy-MM-dd"),
end: showDate.plus({months: 3}).toFormat("yyyy-MM-dd"),
unmonitored: 'false',
start: showDate.minus({ months: 3 }).toFormat("yyyy-MM-dd"),
end: showDate.plus({ months: 3 }).toFormat("yyyy-MM-dd"),
unmonitored: "false",
};
}, [showDate]);
// Load active integrations
const integrations = useMemo(() => widget.integrations?.map(integration => ({
service: dynamic(() => import(`./integrations/${integration?.type}`)),
widget: integration,
})) ?? [], [widget.integrations]);
const integrations = useMemo(
() =>
widget.integrations?.map((integration) => ({
service: dynamic(() => import(`./integrations/${integration?.type}`)),
widget: integration,
})) ?? [],
[widget.integrations],
);
return <Container service={service}>
<div className="flex flex-col w-full">
<div className="sticky top-0">
{integrations.map(integration => {
const Integration = integration.service;
const key = integration.widget.type + integration.widget.service_name + integration.widget.service_group;
return (
<Container service={service}>
<div className="flex flex-col w-full">
<div className="sticky top-0">
{integrations.map((integration) => {
const Integration = integration.service;
const key = integration.widget.type + integration.widget.service_name + integration.widget.service_group;
return <Integration key={key} config={integration.widget} params={params}
className="fixed bottom-0 left-0 bg-red-500 w-screen h-12" />
})}
return (
<Integration
key={key}
config={integration.widget}
params={params}
className="fixed bottom-0 left-0 bg-red-500 w-screen h-12"
/>
);
})}
</div>
<MonthlyView service={service} className="flex" />
</div>
<MonthlyView service={service} className="flex"/>
</div>
</Container>;
</Container>
);
}

16
src/widgets/calendar/integrations/lidarr.jsx
View file

@ -7,9 +7,11 @@ import Error from "../../../components/services/widget/error";
export default function Integration({ config, params }) {
const { setEvents } = useContext(EventContext);
const { data: lidarrData, error: lidarrError } = useWidgetAPI(config, "calendar",
{ ...params, includeArtist: 'false', ...config?.params ?? {} }
);
const { data: lidarrData, error: lidarrError } = useWidgetAPI(config, "calendar", {
...params,
includeArtist: "false",
...(config?.params ?? {}),
});
useEffect(() => {
if (!lidarrData || lidarrError) {
@ -18,19 +20,19 @@ export default function Integration({ config, params }) {
const eventsToAdd = {};
lidarrData?.forEach(event => {
lidarrData?.forEach((event) => {
const title = `${event.artist.artistName} - ${event.title}`;
eventsToAdd[title] = {
title,
date: DateTime.fromISO(event.releaseDate),
color: config?.color ?? 'green'
color: config?.color ?? "green",
};
})
});
setEvents((prevEvents) => ({ ...prevEvents, ...eventsToAdd }));
}, [lidarrData, lidarrError, config, setEvents]);
const error = lidarrError ?? lidarrData?.error;
return error && <Error error={{ message: `${config.type}: ${error.message ?? error}`}} />
return error && <Error error={{ message: `${config.type}: ${error.message ?? error}` }} />;
}

19
src/widgets/calendar/integrations/radarr.jsx
View file

@ -9,9 +9,10 @@ import Error from "../../../components/services/widget/error";
export default function Integration({ config, params }) {
const { t } = useTranslation();
const { setEvents } = useContext(EventContext);
const { data: radarrData, error: radarrError } = useWidgetAPI(config, "calendar",
{ ...params, ...config?.params ?? {} }
);
const { data: radarrData, error: radarrError } = useWidgetAPI(config, "calendar", {
...params,
...(config?.params ?? {}),
});
useEffect(() => {
if (!radarrData || radarrError) {
return;
@ -19,7 +20,7 @@ export default function Integration({ config, params }) {
const eventsToAdd = {};
radarrData?.forEach(event => {
radarrData?.forEach((event) => {
const cinemaTitle = `${event.title} - ${t("calendar.inCinemas")}`;
const physicalTitle = `${event.title} - ${t("calendar.physicalRelease")}`;
const digitalTitle = `${event.title} - ${t("calendar.digitalRelease")}`;
@ -27,23 +28,23 @@ export default function Integration({ config, params }) {
eventsToAdd[cinemaTitle] = {
title: cinemaTitle,
date: DateTime.fromISO(event.inCinemas),
color: config?.color ?? 'amber'
color: config?.color ?? "amber",
};
eventsToAdd[physicalTitle] = {
title: physicalTitle,
date: DateTime.fromISO(event.physicalRelease),
color: config?.color ?? 'cyan'
color: config?.color ?? "cyan",
};
eventsToAdd[digitalTitle] = {
title: digitalTitle,
date: DateTime.fromISO(event.digitalRelease),
color: config?.color ?? 'emerald'
color: config?.color ?? "emerald",
};
})
});
setEvents((prevEvents) => ({ ...prevEvents, ...eventsToAdd }));
}, [radarrData, radarrError, config, setEvents, t]);
const error = radarrError ?? radarrData?.error;
return error && <Error error={{ message: `${config.type}: ${error.message ?? error}`}} />
return error && <Error error={{ message: `${config.type}: ${error.message ?? error}` }} />;
}

20
src/widgets/calendar/integrations/readarr.jsx
View file

@ -7,9 +7,11 @@ import Error from "../../../components/services/widget/error";
export default function Integration({ config, params }) {
const { setEvents } = useContext(EventContext);
const { data: readarrData, error: readarrError } = useWidgetAPI(config, "calendar",
{ ...params, includeAuthor: 'true', ...config?.params ?? {} },
);
const { data: readarrData, error: readarrError } = useWidgetAPI(config, "calendar", {
...params,
includeAuthor: "true",
...(config?.params ?? {}),
});
useEffect(() => {
if (!readarrData || readarrError) {
@ -18,20 +20,20 @@ export default function Integration({ config, params }) {
const eventsToAdd = {};
readarrData?.forEach(event => {
const authorName = event.author?.authorName ?? event.authorTitle.replace(event.title, '');
const title = `${authorName} - ${event.title} ${event?.seriesTitle ? `(${event.seriesTitle})` : ''} `;
readarrData?.forEach((event) => {
const authorName = event.author?.authorName ?? event.authorTitle.replace(event.title, "");
const title = `${authorName} - ${event.title} ${event?.seriesTitle ? `(${event.seriesTitle})` : ""} `;
eventsToAdd[title] = {
title,
date: DateTime.fromISO(event.releaseDate),
color: config?.color ?? 'rose'
color: config?.color ?? "rose",
};
})
});
setEvents((prevEvents) => ({ ...prevEvents, ...eventsToAdd }));
}, [readarrData, readarrError, config, setEvents]);
const error = readarrError ?? readarrData?.error;
return error && <Error error={{ message: `${config.type}: ${error.message ?? error}`}} />
return error && <Error error={{ message: `${config.type}: ${error.message ?? error}` }} />;
}

18
src/widgets/calendar/integrations/sonarr.jsx
View file

@ -7,9 +7,13 @@ import Error from "../../../components/services/widget/error";
export default function Integration({ config, params }) {
const { setEvents } = useContext(EventContext);
const { data: sonarrData, error: sonarrError } = useWidgetAPI(config, "calendar",
{ ...params, includeSeries: 'true', includeEpisodeFile: 'false', includeEpisodeImages: 'false', ...config?.params ?? {} }
);
const { data: sonarrData, error: sonarrError } = useWidgetAPI(config, "calendar", {
...params,
includeSeries: "true",
includeEpisodeFile: "false",
includeEpisodeImages: "false",
...(config?.params ?? {}),
});
useEffect(() => {
if (!sonarrData || sonarrError) {
@ -18,19 +22,19 @@ export default function Integration({ config, params }) {
const eventsToAdd = {};
sonarrData?.forEach(event => {
sonarrData?.forEach((event) => {
const title = `${event.series.title ?? event.title} - S${event.seasonNumber}E${event.episodeNumber}`;
eventsToAdd[title] = {
title,
date: DateTime.fromISO(event.airDateUtc),
color: config?.color ?? 'teal'
color: config?.color ?? "teal",
};
})
});
setEvents((prevEvents) => ({ ...prevEvents, ...eventsToAdd }));
}, [sonarrData, sonarrError, config, setEvents]);
const error = sonarrError ?? sonarrData?.error;
return error && <Error error={{ message: `${config.type}: ${error.message ?? error}`}} />
return error && <Error error={{ message: `${config.type}: ${error.message ?? error}` }} />;
}

209
src/widgets/calendar/monthly-view.jsx
View file

@ -7,30 +7,47 @@ import { EventContext, ShowDateContext } from "../../utils/contexts/calendar";
const colorVariants = {
// https://tailwindcss.com/docs/content-configuration#dynamic-class-names
amber: "bg-amber-500", blue: "bg-blue-500", cyan: "bg-cyan-500",
emerald: "bg-emerald-500", fuchsia: "bg-fuchsia-500", gray: "bg-gray-500",
green: "bg-green-500", indigo: "bg-indigo-500", lime: "bg-lime-500",
neutral: "bg-neutral-500", orange: "bg-orange-500", pink: "bg-pink-500",
purple: "bg-purple-500", red: "bg-red-500", rose: "bg-rose-500",
sky: "bg-sky-500", slate: "bg-slate-500", stone: "bg-stone-500",
teal: "bg-teal-500", violet: "bg-violet-500", white: "bg-white-500",
yellow: "bg-yellow-500", zinc: "bg-zinc-500",
}
amber: "bg-amber-500",
blue: "bg-blue-500",
cyan: "bg-cyan-500",
emerald: "bg-emerald-500",
fuchsia: "bg-fuchsia-500",
gray: "bg-gray-500",
green: "bg-green-500",
indigo: "bg-indigo-500",
lime: "bg-lime-500",
neutral: "bg-neutral-500",
orange: "bg-orange-500",
pink: "bg-pink-500",
purple: "bg-purple-500",
red: "bg-red-500",
rose: "bg-rose-500",
sky: "bg-sky-500",
slate: "bg-slate-500",
stone: "bg-stone-500",
teal: "bg-teal-500",
violet: "bg-violet-500",
white: "bg-white-500",
yellow: "bg-yellow-500",
zinc: "bg-zinc-500",
};
const cellStyle = "relative w-10 flex items-center justify-center flex-col";
const monthButton = "pl-6 pr-6 ml-2 mr-2 hover:bg-theme-100/20 dark:hover:bg-white/5 rounded-md cursor-pointer"
const monthButton = "pl-6 pr-6 ml-2 mr-2 hover:bg-theme-100/20 dark:hover:bg-white/5 rounded-md cursor-pointer";
export function Day({ weekNumber, weekday, events }) {
const currentDate = DateTime.now();
const { showDate, setShowDate } = useContext(ShowDateContext);
const cellDate = showDate.set({ weekday, weekNumber }).startOf("day");
const filteredEvents = events?.filter(event => event.date?.startOf("day").toUnixInteger() === cellDate.toUnixInteger());
const filteredEvents = events?.filter(
(event) => event.date?.startOf("day").toUnixInteger() === cellDate.toUnixInteger(),
);
const dayStyles = (displayDate) => {
let style = "h-9 ";
if ([6,7].includes(displayDate.weekday)) {
if ([6, 7].includes(displayDate.weekday)) {
// weekend style
style += "text-red-500 ";
// different month style
@ -41,7 +58,10 @@ export function Day({ weekNumber, weekday, events }) {
}
// selected same day style
style += displayDate.toFormat("MM-dd-yyyy") === showDate.toFormat("MM-dd-yyyy") ? "text-black-500 bg-theme-100/20 dark:bg-white/10 rounded-md " : "";
style +=
displayDate.toFormat("MM-dd-yyyy") === showDate.toFormat("MM-dd-yyyy")
? "text-black-500 bg-theme-100/20 dark:bg-white/10 rounded-md "
: "";
if (displayDate.toFormat("MM-dd-yyyy") === currentDate.toFormat("MM-dd-yyyy")) {
// today style
@ -51,38 +71,55 @@ export function Day({ weekNumber, weekday, events }) {
}
return style;
}
};
return <button
key={`day${weekday}${weekNumber}}`} type="button" className={classNames(dayStyles(cellDate), cellStyle)}
style={{ width: "14%" }} onClick={() => setShowDate(cellDate)}
>
{cellDate.day}
<span className="flex justify-center items-center absolute w-full -mb-6">
{filteredEvents && filteredEvents.slice(0, 4).map(event => <span
key={event.date.toLocaleString() + event.color + event.title}
className={classNames(
"inline-flex h-1 w-1 m-0.5 rounded",
colorVariants[event.color] ?? "gray"
)}
/>)}
</span>
</button>
return (
<button
key={`day${weekday}${weekNumber}}`}
type="button"
className={classNames(dayStyles(cellDate), cellStyle)}
style={{ width: "14%" }}
onClick={() => setShowDate(cellDate)}
>
{cellDate.day}
<span className="flex justify-center items-center absolute w-full -mb-6">
{filteredEvents &&
filteredEvents
.slice(0, 4)
.map((event) => (
<span
key={event.date.toLocaleString() + event.color + event.title}
className={classNames("inline-flex h-1 w-1 m-0.5 rounded", colorVariants[event.color] ?? "gray")}
/>
))}
</span>
</button>
);
}
export function Event({ event }) {
return <div
key={event.title}
className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1"
><span className="absolute left-2 text-left text-xs mt-[2px] truncate text-ellipsis" style={{width: '96%'}}>{event.title}</span>
</div>
return (
<div
key={event.title}
className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1"
>
<span className="absolute left-2 text-left text-xs mt-[2px] truncate text-ellipsis" style={{ width: "96%" }}>
{event.title}
</span>
</div>
);
}
const dayInWeekId = {
monday: 1, tuesday: 2, wednesday: 3, thursday: 4, friday: 5, saturday: 6, sunday: 7
monday: 1,
tuesday: 2,
wednesday: 3,
thursday: 4,
friday: 5,
saturday: 6,
sunday: 7,
};
export default function MonthlyView({ service }) {
const { widget } = service;
const { i18n } = useTranslation();
@ -94,17 +131,19 @@ export default function MonthlyView({ service }) {
if (!showDate) {
setShowDate(currentDate);
}
})
});
const dayNames = Info.weekdays("short", { locale: i18n.language });
const firstDayInWeekCalendar = widget?.firstDayInWeek ? widget?.firstDayInWeek?.toLowerCase() : "monday";
for (let i = 1; i < dayInWeekId[firstDayInWeekCalendar]; i+=1) {
for (let i = 1; i < dayInWeekId[firstDayInWeekCalendar]; i += 1) {
dayNames.push(dayNames.shift());
}
const daysInWeek = useMemo(() => [ ...Array(7).keys() ].map( i => i + dayInWeekId[firstDayInWeekCalendar]
), [firstDayInWeekCalendar]);
const daysInWeek = useMemo(
() => [...Array(7).keys()].map((i) => i + dayInWeekId[firstDayInWeekCalendar]),
[firstDayInWeekCalendar],
);
if (!showDate) {
return <div className="w-full text-center" />;
@ -113,42 +152,78 @@ export default function MonthlyView({ service }) {
const firstWeek = DateTime.local(showDate.year, showDate.month, 1).setLocale(i18n.language);
const weekIncrementChange = dayInWeekId[firstDayInWeekCalendar] > firstWeek.weekday ? -1 : 0;
let weekNumbers = [ ...Array(Math.ceil(5) + 1).keys() ]
.map(i => firstWeek.weekNumber + weekIncrementChange + i);
let weekNumbers = [...Array(Math.ceil(5) + 1).keys()].map((i) => firstWeek.weekNumber + weekIncrementChange + i);
if (weekNumbers.includes(55)) {
// if we went too far with the weeks, it's the beginning of the year
weekNumbers = weekNumbers.map(weekNum => weekNum-52 );
weekNumbers = weekNumbers.map((weekNum) => weekNum - 52);
}
const eventsArray = Object.keys(events).map(eventKey => events[eventKey]);
const eventsArray = Object.keys(events).map((eventKey) => events[eventKey]);
return <div className="w-full text-center">
<div className="flex-col">
<span><button type="button" onClick={ () => setShowDate(showDate.minus({ months: 1 }).startOf("day")) } className={classNames(monthButton)}>&lt;</button></span>
<span><button type="button" onClick={ () => setShowDate(currentDate.startOf("day")) }>{ showDate.setLocale(i18n.language).toFormat("MMMM y") }</button></span>
<span><button type="button" onClick={ () => setShowDate(showDate.plus({ months: 1 }).startOf("day")) } className={classNames(monthButton)}>&gt;</button></span>
</div>
<div className="p-2 w-full">
<div className="flex justify-between flex-wrap">
{ dayNames.map(name => <span key={name} className={classNames(cellStyle)} style={{ width: "14%" }}>{name}</span>) }
return (
<div className="w-full text-center">
<div className="flex-col">
<span>
<button
type="button"
onClick={() => setShowDate(showDate.minus({ months: 1 }).startOf("day"))}
className={classNames(monthButton)}
>
&lt;
</button>
</span>
<span>
<button type="button" onClick={() => setShowDate(currentDate.startOf("day"))}>
{showDate.setLocale(i18n.language).toFormat("MMMM y")}
</button>
</span>
<span>
<button
type="button"
onClick={() => setShowDate(showDate.plus({ months: 1 }).startOf("day"))}
className={classNames(monthButton)}
>
&gt;
</button>
</span>
</div>
<div className={classNames(
"flex justify-between flex-wrap",
!eventsArray.length && widget?.integrations?.length && "animate-pulse"
)}>{weekNumbers.map(weekNumber =>
daysInWeek.map(dayInWeek =>
<Day key={`week${weekNumber}day${dayInWeek}}`} weekNumber={weekNumber} weekday={dayInWeek} events={eventsArray} />
)
)}
</div>
<div className="p-2 w-full">
<div className="flex justify-between flex-wrap">
{dayNames.map((name) => (
<span key={name} className={classNames(cellStyle)} style={{ width: "14%" }}>
{name}
</span>
))}
</div>
<div className="flex flex-col pt-1 pb-1">
{eventsArray?.filter(event => showDate.startOf("day").toUnixInteger() === event.date?.startOf("day").toUnixInteger())
.map(event => <Event key={`event${event.title}`} event={event} />)}
<div
className={classNames(
"flex justify-between flex-wrap",
!eventsArray.length && widget?.integrations?.length && "animate-pulse",
)}
>
{weekNumbers.map((weekNumber) =>
daysInWeek.map((dayInWeek) => (
<Day
key={`week${weekNumber}day${dayInWeek}}`}
weekNumber={weekNumber}
weekday={dayInWeek}
events={eventsArray}
/>
)),
)}
</div>
<div className="flex flex-col pt-1 pb-1">
{eventsArray
?.filter((event) => showDate.startOf("day").toUnixInteger() === event.date?.startOf("day").toUnixInteger())
.map((event) => (
<Event key={`event${event.title}`} event={event} />
))}
</div>
</div>
</div>
</div>
);
}