From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Tue, 25 Jul 2023 12:47:18 +0000 (+0200)
Subject: option to invert event filter
X-Git-Url: https://git.localhorst.tv/?a=commitdiff_plain;h=779be2075b16953689efb4a56cc61663a33d5db5;p=alttp.git

option to invert event filter
---

diff --git a/resources/js/components/common/Icon.js b/resources/js/components/common/Icon.js
index facd3f2..ddd35fe 100644
--- a/resources/js/components/common/Icon.js
+++ b/resources/js/components/common/Icon.js
@@ -72,6 +72,7 @@ Icon.FINISHED = makePreset('FinishedIcon', 'square-check');
 Icon.FIRST_PLACE = makePreset('FirstPlaceIcon', 'trophy');
 Icon.FORBIDDEN = makePreset('ForbiddenIcon', 'square-xmark');
 Icon.FORFEIT = makePreset('ForfeitIcon', 'square-xmark');
+Icon.INVERT = makePreset('InveretIcon', 'circle-half-stroke');
 Icon.LANGUAGE = makePreset('LanguageIcon', 'language');
 Icon.LOCKED = makePreset('LockedIcon', 'lock');
 Icon.LOGOUT = makePreset('LogoutIcon', 'sign-out-alt');
diff --git a/resources/js/components/episodes/Filter.js b/resources/js/components/episodes/Filter.js
index 06dcf13..98d965d 100644
--- a/resources/js/components/episodes/Filter.js
+++ b/resources/js/components/episodes/Filter.js
@@ -1,61 +1,20 @@
-import axios from 'axios';
-import moment from 'moment';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Button } from 'react-bootstrap';
 
-const Filter = ({ filter, setFilter }) => {
-	const [events, setEvents] = React.useState([]);
-
-	React.useEffect(() => {
-		const controller = new AbortController();
-		axios.get(`/api/events`, {
-			signal: controller.signal,
-			params: {
-				after: moment().startOf('day').subtract(7, 'days').toISOString(),
-				before: moment().startOf('day').add(8, 'days').toISOString(),
-			},
-		}).then(response => {
-			const newEvents = (response.data || []).sort(
-				(a, b) => (a.short || a.title).localeCompare(b.short || b.title)
-			);
-			setEvents(newEvents);
-		}).catch(e => {
-			if (!axios.isCancel(e)) {
-				console.error(e);
-			}
-		});
-		return () => {
-			controller.abort();
-		};
-	}, []);
+import { isEventSelected, toggleEventFilter } from '../../helpers/Episode';
 
+const Filter = ({ events, filter, setFilter }) => {
 	const toggleEvent = React.useCallback(event => {
-		const eventFilter = filter.event || [];
-		if (eventFilter.includes(event.id)) {
-			setFilter({
-				...filter,
-				event: eventFilter.filter(id => id !== event.id && events.find(e => e.id === id)),
-			});
-		} else {
-			setFilter({
-				...filter,
-				event: [...eventFilter, event.id],
-			});
-		}
+		setFilter(toggleEventFilter(events, filter, event));
 	}, [events, filter, setFilter]);
 
-	const isEventSelected = React.useCallback(event => {
-		const eventFilter = filter.event || [];
-		return eventFilter.includes(event.id);
-	}, [filter]);
-
 	if (!events || !events.length) return null;
 
 	return <div className="episode-filter button-bar text-end">
 		{events.map(event =>
 			<Button
-				active={isEventSelected(event)}
+				active={isEventSelected(filter, event)}
 				key={event.id}
 				onClick={() => toggleEvent(event)}
 				title={event.short ? event.title : null}
@@ -68,6 +27,8 @@ const Filter = ({ filter, setFilter }) => {
 };
 
 Filter.propTypes = {
+	events: PropTypes.arrayOf(PropTypes.shape({
+	})),
 	filter: PropTypes.shape(),
 	setFilter: PropTypes.func,
 };
diff --git a/resources/js/components/pages/Schedule.js b/resources/js/components/pages/Schedule.js
index dfac328..cac23e7 100644
--- a/resources/js/components/pages/Schedule.js
+++ b/resources/js/components/pages/Schedule.js
@@ -14,6 +14,7 @@ import ApplyDialog from '../episodes/ApplyDialog';
 import Filter from '../episodes/Filter';
 import List from '../episodes/List';
 import RestreamDialog from '../episodes/RestreamDialog';
+import { toggleEventFilter } from '../../helpers/Episode';
 import { withUser } from '../../helpers/UserContext';
 
 const Schedule = ({ user }) => {
@@ -21,6 +22,7 @@ const Schedule = ({ user }) => {
 	const [applyAs, setApplyAs] = React.useState('commentary');
 	const [behind] = React.useState(0);
 	const [episodes, setEpisodes] = React.useState([]);
+	const [events, setEvents] = React.useState([]);
 	const [filter, setFilter] = React.useState({});
 	const [restreamChannel, setRestreamChannel] = React.useState(null);
 	const [restreamEpisode, setRestreamEpisode] = React.useState(null);
@@ -39,11 +41,40 @@ const Schedule = ({ user }) => {
 		}
 	}, []);
 
+	React.useEffect(() => {
+		const controller = new AbortController();
+		axios.get(`/api/events`, {
+			signal: controller.signal,
+			params: {
+				after: moment().startOf('day').subtract(7, 'days').toISOString(),
+				before: moment().startOf('day').add(8, 'days').toISOString(),
+			},
+		}).then(response => {
+			const newEvents = (response.data || []).sort(
+				(a, b) => (a.short || a.title).localeCompare(b.short || b.title)
+			);
+			setEvents(newEvents);
+		}).catch(e => {
+			if (!axios.isCancel(e)) {
+				console.error(e);
+			}
+		});
+		return () => {
+			controller.abort();
+		};
+	}, []);
+
 	const updateFilter = React.useCallback(newFilter => {
 		localStorage.setItem('episodes.filter.schedule', JSON.stringify(newFilter));
 		setFilter(newFilter);
 	}, []);
 
+	const invertFilter = React.useCallback(() => {
+		updateFilter(events.reduce((newFilter, event) => {
+			return toggleEventFilter(events, newFilter, event);
+		}, filter));
+	}, [events, filter]);
+
 	const fetchEpisodes = React.useCallback((controller, ahead, behind, filter) => {
 		axios.get(`/api/episodes`, {
 			signal: controller.signal,
@@ -231,17 +262,28 @@ const Schedule = ({ user }) => {
 		<CanonicalLinks base="/schedule" />
 		<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 className="button-bar">
+				{showFilter ?
+					<Button
+						onClick={invertFilter}
+						title={t('button.invert')}
+						variant="outline-secondary"
+					>
+						<Icon.INVERT title="" />
+					</Button>
+				: null}
+				<Button
+					onClick={toggleFilter}
+					title={t('button.filter')}
+					variant={filterButtonVariant}
+				>
+					<Icon.FILTER title="" />
+				</Button>
+			</div>
 		</div>
 		{showFilter ?
 			<div className="my-2">
-				<Filter filter={filter} setFilter={updateFilter} />
+				<Filter events={events} filter={filter} setFilter={updateFilter} />
 			</div>
 		: null}
 		<ErrorBoundary>
diff --git a/resources/js/helpers/Episode.js b/resources/js/helpers/Episode.js
index 675fb36..60c1a7b 100644
--- a/resources/js/helpers/Episode.js
+++ b/resources/js/helpers/Episode.js
@@ -13,3 +13,21 @@ export const acceptsCrew = episode => {
 	return !!episode.channels.find(c =>
 		c.pivot && (c.pivot.accept_comms || c.pivot.accept_tracker));
 };
+
+export const isEventSelected = (filter, event) => {
+	return (filter.event || []).includes(event.id);
+};
+
+export const toggleEventFilter = (events, filter, event) => {
+	const eventFilter = filter.event || [];
+	if (eventFilter.includes(event.id)) {
+		return {
+			...filter,
+			event: eventFilter.filter(id => id !== event.id && events.find(e => e.id === id)),
+		};
+	}
+	return {
+		...filter,
+		event: [...eventFilter, event.id],
+	};
+};
diff --git a/resources/js/i18n/de.js b/resources/js/i18n/de.js
index 77023f0..58732c5 100644
--- a/resources/js/i18n/de.js
+++ b/resources/js/i18n/de.js
@@ -255,6 +255,7 @@ export default {
 			filter: 'Filter',
 			generate: 'Generieren',
 			help: 'Hilfe',
+			invert: 'Umkehren',
 			login: 'Login',
 			logout: 'Logout',
 			new: 'Neu',
diff --git a/resources/js/i18n/en.js b/resources/js/i18n/en.js
index edd8e0a..8976017 100644
--- a/resources/js/i18n/en.js
+++ b/resources/js/i18n/en.js
@@ -255,6 +255,7 @@ export default {
 			filter: 'Filter',
 			generate: 'Generate',
 			help: 'Help',
+			invert: 'Invert',
 			login: 'Login',
 			logout: 'Logout',
 			new: 'New',