Added channel filter.

2020-07-20 04:20:33 +02:00
parent 5291a87587
commit 0e4c0d8fff
143 changed files with 537 additions and 302 deletions
--- a/assets/components/filters/channel-filter.vue
+++ b/assets/components/filters/channel-filter.vue
@@ -0,0 +1,144 @@
+<template>
+	<v-popover class="filter-container">
+		<div class="filter">
+			<Icon icon="antenna" />
+
+			<div
+				v-if="selectedChannels.length > 0"
+				class="filter-applied"
+			>{{ selectedChannels.length }} {{ selectedChannels.length > 1 ? 'channels' : 'channel' }}</div>
+
+			<div
+				v-else
+				class="filter-applied empty"
+			>Channels</div>
+		</div>
+
+		<div slot="popover">
+			<router-link
+				class="filter-clear"
+				:to="{ query: { ...$route.query, channels: undefined } }"
+				:class="{ active: selectedChannels.length > 0 }"
+			>clear all<Icon icon="cross2" /></router-link>
+
+			<ul class="filter-items nolist">
+				<li
+					v-for="channel in channelsPerNetwork"
+					:key="`channel-${channel.id}`"
+					class="filter-item"
+					:class="{ [channel.type]: true, independent: channel.independent }"
+				>
+					<router-link
+						:to="{ query: { ...$route.query, channels: channel.slug, mode }, params: { pageNumber: 1 } }"
+						class="filter-name"
+					>
+						<img
+							v-if="channel.independent || !channel.parent"
+							:src="`/img/logos/${channel.slug}/favicon.png`"
+							class="favicon"
+						>
+
+						{{ channel.name }}
+					</router-link>
+
+					<router-link
+						:to="{ query: { ...$route.query, ...getNewRange(channel.slug), mode }, params: { pageNumber: 1 } }"
+						class="filter-include"
+						:class="{ selected: selectedChannels.includes(channel.slug) }"
+					>
+						<Icon
+							icon="checkmark"
+							class="filter-add"
+						/>
+
+						<Icon
+							icon="cross2"
+							class="filter-remove"
+						/>
+					</router-link>
+				</li>
+			</ul>
+		</div>
+	</v-popover>
+</template>
+
+<script>
+function getNewRange(channel) {
+	if (this.selectedChannels.includes(channel)) {
+		return { channels: this.selectedChannels.filter(selectedTag => selectedTag !== channel).join(',') || undefined };
+	}
+
+	return { channels: this.selectedChannels.concat(channel).join(',') };
+}
+
+function selectedChannels() {
+	return this.$route.query.channels ? this.$route.query.channels.split(',') : [];
+}
+
+function channelsPerNetwork() {
+	const networks = this.availableChannels.reduce((acc, channel) => {
+		if (channel.independent || !channel.parent) {
+			acc[channel.slug] = { ...channel, children: [] };
+			return acc;
+		}
+
+		if (!acc[channel.parent.slug]) {
+			acc[channel.parent.slug] = { ...channel.parent, children: [] };
+		}
+
+		acc[channel.parent.slug].children.push(channel);
+
+		return acc;
+	}, {});
+
+	return Object.values(networks).reduce((acc, network) => [...acc, network, ...(network.children || [])], []);
+}
+
+export default {
+	props: {
+		filter: {
+			type: Array,
+			default: () => [],
+		},
+		compact: {
+			type: Boolean,
+			default: false,
+		},
+		availableChannels: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			mode: this.$route.query.mode || 'all',
+		};
+	},
+	computed: {
+		channelsPerNetwork,
+		selectedChannels,
+	},
+	methods: {
+		getNewRange,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.favicon {
+	width: 1rem;
+	height: 1rem;
+	padding: 0 .75rem 0 0;
+	filter: drop-shadow(0 0 1px var(--darken));
+}
+
+.network .filter-name,
+.independent .filter-name {
+	font-weight: bold;
+	padding: .5rem;
+}
+
+.channel:not(.independent) .filter-name {
+	padding: .5rem .5rem .5rem 2.25rem;
+}
+</style>