X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=sidebyside;f=resources%2Fjs%2Fcomponents%2Fpages%2FSchedule.js;h=dfac328b57dc484d5605570aee6024fb1e21f514;hb=52dbc97730d1884d3c452fea52be5f5f0e6659e4;hp=3d0a14082b8d5262c8350d207b6186c6a04e6116;hpb=5a575dc29f3af10f1d8e142ff9e1c6ccdfa3b075;p=alttp.git

diff --git a/resources/js/components/pages/Schedule.js b/resources/js/components/pages/Schedule.js
index 3d0a140..dfac328 100644
--- a/resources/js/components/pages/Schedule.js
+++ b/resources/js/components/pages/Schedule.js
@@ -2,13 +2,14 @@ import axios from 'axios';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Alert, Container } from 'react-bootstrap';
+import { Alert, Button, Container } from 'react-bootstrap';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import toastr from 'toastr';
 
 import CanonicalLinks from '../common/CanonicalLinks';
 import ErrorBoundary from '../common/ErrorBoundary';
+import Icon from '../common/Icon';
 import ApplyDialog from '../episodes/ApplyDialog';
 import Filter from '../episodes/Filter';
 import List from '../episodes/List';
@@ -25,6 +26,7 @@ const Schedule = ({ user }) => {
 	const [restreamEpisode, setRestreamEpisode] = React.useState(null);
 	const [showApplyDialog, setShowApplyDialog] = React.useState(false);
 	const [showRestreamDialog, setShowRestreamDialog] = React.useState(false);
+	const [showFilter, setShowFilter] = React.useState(false);
 
 	const { t } = useTranslation();
 
@@ -46,8 +48,8 @@ const Schedule = ({ user }) => {
 		axios.get(`/api/episodes`, {
 			signal: controller.signal,
 			params: {
-				after: moment().startOf('day').subtract(behind, 'days').toISOString(),
-				before: moment().startOf('day').add(ahead + 1, 'days').toISOString(),
+				after: moment().subtract(8, 'hours').subtract(behind, 'days').toISOString(),
+				before: moment().add(16, 'hours').add(ahead, 'days').toISOString(),
 				...filter,
 			},
 		}).then(response => {
@@ -211,18 +213,37 @@ const Schedule = ({ user }) => {
 		};
 	}, [ahead, behind, fetchEpisodes, filter]);
 
+	const toggleFilter = React.useCallback(() => {
+		setShowFilter(show => !show);
+	}, []);
+
+	const filterButtonVariant = React.useMemo(() => {
+		const outline = showFilter ? '' : 'outline-';
+		const filterActive = filter && filter.event && filter.event.length;
+		return `${outline}${filterActive ? 'info' : 'secondary'}`;
+	}, [filter, showFilter]);
+
 	return <Container>
 		<Helmet>
 			<title>{t('schedule.heading')}</title>
 			<meta name="description" content={t('schedule.description')} />
 		</Helmet>
 		<CanonicalLinks base="/schedule" />
-		<div className="d-flex align-items-start justify-content-between">
-			<h1>{t('schedule.heading')}</h1>
-			<div className="ms-3 mt-5">
+		<div className="d-flex align-items-end justify-content-between">
+			<h1 className="mb-0">{t('schedule.heading')}</h1>
+			<Button
+				onClick={toggleFilter}
+				title={t('button.filter')}
+				variant={filterButtonVariant}
+			>
+				<Icon.FILTER title="" />
+			</Button>
+		</div>
+		{showFilter ?
+			<div className="my-2">
 				<Filter filter={filter} setFilter={updateFilter} />
 			</div>
-		</div>
+		: null}
 		<ErrorBoundary>
 			{episodes.length ?
 				<List