mirror of
https://github.com/DI0IK/homepage-plus.git
synced 2025-07-18 18:49:50 +00:00
Run pre-commit hooks over existing codebase
Co-Authored-By: Ben Phelps <ben@phelps.io>
This commit is contained in:
shamoon
parent
fa50bbad9c
commit
19c25713c4
387 changed files with 4785 additions and 4109 deletions
|
|
@ -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)}><</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)}>></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)}
|
||||
>
|
||||
<
|
||||
</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)}
|
||||
>
|
||||
>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue