Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-14 17:26:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add the ability to display multiple medias on the same day by looping over the filtered medias for each service type

Browse Source 
Fixes #5
This commit is contained in:
Aj - Thomas
2022-05-06 17:50:03 +02:00
parent 49be02ffcd
commit ad831e3ef4
2 changed files with 21 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/calendar/CalendarComponent.tsx
View File

@@ -1,3 +1,4 @@
/* eslint-disable react/no-children-prop */
import { Indicator, Popover, Box, Center, ScrollArea, Divider } from '@mantine/core';
import { useEffect, useState } from 'react';
import { Calendar } from '@mantine/dates';
@@ -29,7 +30,7 @@ export default function CalendarComponent(props: any) {
}
if (radarrService) {
fetch(
`${radarrService?.url}api/calendar?apikey=${radarrService?.apiKey}&end=${nextMonth}`
`${radarrService?.url}api/v3/calendar?apikey=${radarrService?.apiKey}&end=${nextMonth}`
).then((response) => {
response.json().then((data) => setRadarrMedias(data));
});
@@ -39,7 +40,6 @@ export default function CalendarComponent(props: any) {
if (sonarrMedias === undefined && radarrMedias === undefined) {
return <Calendar />;
}
return (
<Calendar
onChange={(day: any) => {}}
@@ -70,7 +70,7 @@ function DayComponent(props: any) {
return date.getDate() === day && date.getMonth() === renderdate.getMonth();
});
const radarrFiltered = radarrmedias.filter((media: any) => {
const date = new Date(media.airDate);
const date = new Date(media.inCinemas);
// Return true if the date is renerdate without counting hours and minutes
return date.getDate() === day && date.getMonth() === renderdate.getMonth();
});
@@ -89,7 +89,13 @@ function DayComponent(props: any) {
>
<Center>
{/* TODO: #6 Make the color of the indicator dependant on the type of medias avilable */}
<Indicator size={10} color="red">
<>
{radarrFiltered.length > 0 && (
<Indicator size={8} offset={10} position="bottom-center" color="yellow" children={null} />
)}
{sonarrFiltered.length > 0 && (
<Indicator size={8} offset={-12} position="top-end" color="blue" children={null} />
)}
<Popover
position="left"
width={700}
@@ -99,11 +105,11 @@ function DayComponent(props: any) {
>
<ScrollArea style={{ height: 400 }}>
{sonarrFiltered.length > 0 && <SonarrMediaDisplay media={sonarrFiltered[0]} />}
<Divider variant="dashed" my="xl" />
{(radarrFiltered.length > 0 && sonarrFiltered.length > 0) && <Divider variant="dashed" my="xl" />}
{radarrFiltered.length > 0 && <RadarrMediaDisplay media={radarrFiltered[0]} />}
</ScrollArea>
</Popover>
</Indicator>
</>
</Center>
</Box>
);