Added AND/OR toggle to alerts.

assets/components/actors/preview.vue

@@ -1,6 +1,7 @@
 <template>
-	<router-link
+	<RouterLink
 		:to="`/actor/${actor.id}/${actor.slug}`"
+		:target="target"
 		class="actor nolink"
 	>
 		<div class="avatar">
@@ -18,7 +19,7 @@
 		</div>
 
 		<span class="name">{{ actor.name }}</span>
-	</router-link>
+	</RouterLink>
 </template>
 
 <script>
@@ -36,6 +37,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		target: {
+			type: String,
+			default: null,
+		},
 	},
 	methods: {
 		unstashActor,

assets/components/alerts/add.vue

@@ -14,7 +14,17 @@
 		>
 			<div class="dialog-section">
 				<h3 class="dialog-heading">
-					When<span class="dialog-description">All to appear in the same scene</span>
+					When
+
+					<label class="dialog-description noselect">
+						<template v-if="all">Scene must match&nbsp;<strong>all</strong>&nbsp;fields</template>
+						<template v-else>Scene must match&nbsp;<strong>any</strong>&nbsp;field</template>
+
+						<Toggle
+							:checked="all"
+							@change="(checked) => all = checked"
+						/>
+					</label>
 				</h3>
 
 				<div class="alert-section">
@@ -34,7 +44,10 @@
 							:key="`actor-${actor.id}`"
 							class="actor"
 						>
-							<ActorPreview :actor="actor" />
+							<ActorPreview
+								:actor="actor"
+								target="_blank"
+							/>
 
 							<Icon
 								icon="cross3"
@@ -109,10 +122,15 @@
 
 					<div class="entities">
 						<div
-							v-if="entity"
+							v-for="(entity, index) in entities"
+							:key="`entity-${entity.id}`"
+							:class="{ invalid: all && index > 0 }"
 							class="entity"
 						>
-							<Entity :entity="entity" />
+							<Entity
+								:entity="entity"
+								target="_blank"
+							/>
 
 							<Icon
 								icon="cross3"
@@ -121,7 +139,7 @@
 							/>
 						</div>
 
-						<Tooltip v-if="!entity">
+						<Tooltip v-if="entities.length < 1 || !all">
 							<div class="entity placeholder">
 								Any channel
 
@@ -278,6 +296,7 @@
 import ActorPreview from '../actors/preview.vue';
 import Entity from '../entities/tile.vue';
 import Checkbox from '../form/checkbox.vue';
+import Toggle from '../form/toggle.vue';
 import Search from './search.vue';
 
 async function addAlert() {
@@ -285,10 +304,11 @@ async function addAlert() {
 
 	try {
 		await this.$store.dispatch('addAlert', {
+			all: this.all,
 			actors: this.actors.map((actor) => actor.id),
 			tags: this.tags.map((tag) => tag.id),
 			matches: this.matches,
-			entity: this.entity?.id,
+			entities: this.entities.map((entity) => entity.id),
 			notify: this.notify,
 			email: this.email,
 			stashes: this.stashes.map((stash) => stash.id),
@@ -309,7 +329,7 @@ function addActor(actor) {
 }
 
 function addEntity(entity) {
-	this.entity = entity;
+	this.entities = this.entities.concat(entity);
 	this.events.emit('blur');
 }
 
@@ -325,8 +345,8 @@ function removeActor(actor) {
 	this.actors = this.actors.filter((listedActor) => listedActor.id !== actor.id);
 }
 
-function removeEntity() {
-	this.entity = null;
+function removeEntity(entity) {
+	this.entities = this.entities.filter((alertEntity) => alertEntity.id !== entity.id);
 }
 
 function removeTag(tag) {
@@ -371,6 +391,7 @@ export default {
 		Checkbox,
 		Entity,
 		Search,
+		Toggle,
 	},
 	emits: ['close'],
 	data() {
@@ -378,7 +399,8 @@ export default {
 			error: null,
 			actors: [],
 			tags: [],
-			entity: null,
+			all: true,
+			entities: [],
 			matches: [],
 			matchProperty: 'title',
 			matchExpression: null,
@@ -424,9 +446,15 @@ export default {
 }
 
 .dialog-description {
+	display: flex;
+	align-items: center;
 	color: var(--shadow);
 	font-size: .9rem;
 	font-weight: normal;
+
+	.toggle-container {
+		margin-left: .5rem;
+	}
 }
 
 .dialog-error {
@@ -488,6 +516,11 @@ export default {
 	margin: 0 .5rem .5rem 0;
 }
 
+.entity.invalid {
+	opacity: .5;
+	pointer-events: none;
+}
+
 .entity .tile {
 	width: 10rem;
 	height: 2.5rem;

assets/components/entities/tile.vue

@@ -1,7 +1,8 @@
 <template>
-	<router-link
+	<RouterLink
 		:to="`/${entity.type}/${entity.slug}`"
 		:title="entity.name"
+		:target="target"
 		class="tile"
 	>
 		<div class="tile-logo">
@@ -47,7 +48,7 @@
 			<span v-if="typeof entity.sceneTotal !== 'undefined'">{{ entity.sceneTotal }} scenes</span>
 			<span v-if="entity.type === 'network'">{{ entity.childrenTotal }} channels</span>
 		</span>
-	</router-link>
+	</RouterLink>
 </template>
 
 <script>
@@ -57,6 +58,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		target: {
+			type: String,
+			default: null,
+		},
 	},
 	emits: ['load'],
 };

assets/components/header/notifications.vue

@@ -99,7 +99,7 @@
 
 						<Icon
 							v-if="notification.alert"
-							v-tooltip="`You set an alert for <strong>${notification.alert.tags.map(tag => tag.name).join(', ') || 'all'}</strong> scenes with <strong>${notification.alert.actors.map(actor => actor.name).join(', ') || 'any actor'}</strong> from <strong>${notification.alert.entities.map((entity) => entity.name).join(', ') || 'any channel'}</strong> matching <strong>${notification.alert.matches.map((match) => `${match.property}: ${match.expression}`).join(', ') || 'anything'}</strong>`"
+							v-tooltip="`You set an alert for scenes with <strong>${notification.alert.all ? 'all of' : 'any of'}</strong> <strong>${notification.alert.actors.map(actor => actor.name).join(', ') || 'any actor'}</strong> containing <strong>${notification.alert.tags.map(tag => tag.name).join(', ') || 'any tags'}</strong> from <strong>${notification.alert.entities.map((entity) => entity.name).join(', ') || 'any channel'}</strong> matching <strong>${notification.alert.matches.map((match) => `${match.property}: ${match.expression}`).join(', ') || 'any text'}</strong>`"
 							icon="question5"
 							@click.prevent.stop
 						/>