boiii
/
traxxx
forked from DebaucheryLibrarian/traxxx
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

List alerts in profile

This commit is contained in:
DebaucheryLibrarian 2021-04-05 00:48:03 +02:00
parent d36e52d5d1
commit 7f25846d55
17 changed files with 439 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/components/alerts/add-alert.vue → assets/components/alerts/add.vue
View File

@ -215,6 +215,8 @@ async function addAlert() {
email: this.email,
stashes: this.stashes.map(stash => stash.id),
});
this.$emit('close', true);
}
function addActor(actor) {

41
assets/components/alerts/remove.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<Dialog
title="Remove alert"
@close="$emit('close', false)"
>
<form
class="dialog-body"
@submit.prevent="removeAlert"
>
Are you sure you want to remove alert?
<div class="dialog-actions right">
<button
type="submit"
class="button button-primary"
>Remove</button>
</div>
</form>
</Dialog>
</template>
<script>
async function removeAlert() {
await this.$store.dispatch('removeAlert', this.alert.id);
this.$emit('close', true);
}
export default {
props: {
alert: {
type: Object,
default: null,
},
},
emits: ['close'],
methods: {
removeAlert,
},
};
</script>

2
assets/components/header/header.vue
View File

@ -150,7 +150,7 @@
<script>
import Menu from './menu.vue';
import Search from './search.vue';
import AddAlert from '../alerts/add-alert.vue';
import AddAlert from '../alerts/add.vue';
import logo from '../../img/logo.svg';

5
assets/components/stashes/add-stash.vue → assets/components/stashes/add.vue
View File

@ -3,7 +3,10 @@
title="Add stash"
@close="$emit('close', false)"
>
<form @submit.prevent="addStash">
<form
class="dialog-body"
@submit.prevent="addStash"
>
<input
ref="name"
v-model="name"

5
assets/components/stashes/remove-stash.vue → assets/components/stashes/remove.vue
View File

@ -3,7 +3,10 @@
title="Remove stash"
@close="$emit('close', false)"
>
<form @submit.prevent="removeStash">
<form
class="dialog-body"
@submit.prevent="removeStash"
>
Are you sure you want to remove stash "{{ stash.name }}"?
<div class="dialog-actions right">

2
assets/components/stashes/stash.vue
View File

@ -78,7 +78,7 @@
<script>
import Actor from '../actors/tile.vue';
import Releases from '../releases/releases.vue';
import RemoveStash from './remove-stash.vue';
import RemoveStash from './remove.vue';
import Toggle from '../form/toggle.vue';
async function fetchStash() {

249
assets/components/users/alert.vue Normal file
View File

@ -0,0 +1,249 @@
<template>
<div class="alert">
<div class="alert-section alert-header">
<div class="alert-targets">
<Icon
v-if="alert.notify"
icon="bell2"
class="alert-action"
/>
<Icon
v-if="alert.email"
icon="envelop"
class="alert-action"
/>
<Icon
v-if="alert.stashes?.length > 0"
v-tooltip="alert.stashes.map(stash => stash.name).join()"
icon="heart7"
class="alert-action"
/>
</div>
<span class="header-actions noselect">
<Icon
v-if="isMe"
icon="bin"
class="alert-remove"
@click.native="showRemoveAlert = true"
/>
<RemoveAlert
v-if="showRemoveAlert"
:alert="alert"
@close="removeAlert"
/>
</span>
</div>
<div class="alert-triggers">
<div
v-if="alert.actors?.length > 0"
class="alert-section alert-trigger"
>
<h4
v-if="alert.actors.length > 1"
class="alert-heading"
>Actors</h4>
<h4
v-else
class="alert-heading"
>Actor</h4>
<ul class="alert-actors nolist">
<li
v-for="actor in alert.actors"
:key="`actor-${actor.id}`"
class="alert-actor"
>
<ActorPreview
:actor="actor"
:alert="alert"
/>
</li>
</ul>
</div>
<div
v-if="alert.tags?.length > 0"
class="alert-section alert-trigger"
>
<h4
v-if="alert.tags.length > 1"
class="alert-heading"
>Tags</h4>
<h4
v-else
class="alert-heading"
>Tag</h4>
<ul class="alert-tags nolist">
<li
v-for="tag in alert.tags"
:key="`tag-${tag.id}`"
><router-link
:to="`/tag/${tag.slug}`"
class="tag nolink"
>{{ tag.name }}</router-link></li>
</ul>
</div>
<div class="alert-section alert-trigger">
<h4 class="alert-heading">Channel</h4>
<Entity
v-if="alert.entity"
:entity="alert.entity"
class="entity"
/>
</div>
</div>
</div>
</template>
<script>
import ActorPreview from '../actors/preview.vue';
import RemoveAlert from '../alerts/remove.vue';
import Entity from '../entities/tile.vue';
async function removeAlert(removed) {
this.showRemoveAlert = false;
if (removed) {
this.$emit('remove');
}
}
export default {
components: {
ActorPreview,
Entity,
RemoveAlert,
},
props: {
alert: {
type: Object,
default: null,
},
isMe: {
type: Boolean,
default: false,
},
},
emits: ['remove'],
data() {
return {
showRemoveAlert: false,
};
},
methods: {
removeAlert,
},
};
</script>
<style lang="scss" scoped>
.alert {
min-width: 0;
height: 100%;
background: var(--background);
box-shadow: 0 0 3px var(--darken-weak);
}
.alert-header {
border-bottom: solid 1px var(--shadow-hint);
}
.alert-section {
display: inline-block;
padding: .5rem;
}
.alert-header {
display: flex;
justify-content: space-between;
align-items: stretch;
padding: 0;
.alert-action {
padding: .5rem;
fill: var(--shadow);
}
}
.alert-triggers {
display: flex;
}
.alert-heading {
display: block;
padding: 0 .5rem .5rem 0;
margin: 0;
color: var(--shadow-strong);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: .9rem;
}
.alert-more {
flex-shrink: 0;
margin: 0 0 0 .5rem;
color: var(--shadow);
font-size: .9rem;
}
.header-actions {
display: flex;
align-items: stretch;
}
.alert-remove {
height: auto;
padding: 0 .5rem 0 .75rem;
fill: var(--shadow);
&:hover {
cursor: pointer;
fill: var(--shadow-strong);
}
}
.alert-triggers {
dislay: flex;
flex-wrap: wrap;
}
.alert-trigger {
flex-shrink: 0;
flex-grow: 1;
}
.alert-actors,
.alert-tags {
display: flex;
grid-gap: .5rem;
}
.tag {
color: var(--shadow-strong);
padding: .5rem;
border: solid 1px var(--shadow-hint);
font-size: .9rem;
font-weight: bold;
&:hover {
cursor: pointer;
border: solid 1px var(--primary);
}
}
.entity {
width: 10rem;
height: 2.5rem;
}
</style>

2
assets/components/users/stash.vue
View File

@ -84,7 +84,7 @@
<script>
import ActorPreview from '../actors/preview.vue';
import ScenePreview from '../releases/scene-preview.vue';
import RemoveStash from '../stashes/remove-stash.vue';
import RemoveStash from '../stashes/remove.vue';
import Toggle from '../form/toggle.vue';
async function publishStash(isPublic) {

74
assets/components/users/user.vue
View File

@ -43,18 +43,61 @@
<Icon icon="plus2" />
</li>
</ul>
<AddStash
v-if="showAddStash"
@close="closeAddStash"
/>
</section>
<AddStash
v-if="showAddStash"
@close="closeAddStash"
/>
<section
v-if="user.alerts?.length > 0"
class="section"
>
<div class="section-header">
<h3 class="section-heading">Alerts</h3>
<Icon
icon="plus3"
class="header-add"
@click="showAddAlert = true"
/>
</div>
<ul class="section-body alerts nolist">
<li
v-for="alert in user.alerts"
:key="`alert-${alert.id}`"
class="alert"
>
<Alert
:alert="alert"
:is-me="isMe"
@remove="() => fetchUser()"
/>
</li>
<li
class="alerts-add"
@click="showAddAlert = true"
>
<Icon icon="plus2" />
</li>
</ul>
<AddAlert
v-if="showAddAlert"
@close="closeAddAlert"
>Alert</AddAlert>
</section>
</div>
</template>
<script>
import Stash from './stash.vue';
import AddStash from '../stashes/add-stash.vue';
import Alert from './alert.vue';
import AddStash from '../stashes/add.vue';
import AddAlert from '../alerts/add.vue';
async function fetchUser() {
this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
@ -71,13 +114,23 @@ async function closeAddStash(addedStash) {
}
}
async function closeAddAlert(addedAlert) {
this.showAddAlert = false;
if (addedAlert) {
await this.fetchUser();
}
}
async function mounted() {
await this.fetchUser();
}
export default {
components: {
AddAlert,
AddStash,
Alert,
Stash,
},
data() {
@ -88,10 +141,12 @@ export default {
isMe: false,
pageTitle: null,
showAddStash: false,
showAddAlert: false,
};
},
mounted,
methods: {
closeAddAlert,
closeAddStash,
fetchUser,
},
@ -122,7 +177,8 @@ export default {
margin: 0 0 1rem 0;
}
.stashes {
.stashes,
.alerts {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 15fr;
@ -162,7 +218,8 @@ export default {
min-width: 0;
}
.stashes-add {
.stashes-add,
.alerts-add {
height: 100%;
display: flex;
align-items: center;
@ -186,7 +243,8 @@ export default {
}
@media(max-width: $breakpoint-kilo) {
.stashes {
.stashes,
.alerts {
grid-template-columns: 1fr;
}
}

5
assets/img/icons/envelop.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>envelop</title>
<path d="M15 2h-14c-0.55 0-1 0.45-1 1v10c0 0.55 0.45 1 1 1h14c0.55 0 1-0.45 1-1v-10c0-0.55-0.45-1-1-1zM5.831 9.773l-3 2.182c-0.1 0.073-0.216 0.108-0.33 0.108-0.174 0-0.345-0.080-0.455-0.232-0.183-0.251-0.127-0.603 0.124-0.786l3-2.182c0.251-0.183 0.603-0.127 0.786 0.124s0.127 0.603-0.124 0.786zM13.955 11.831c-0.11 0.151-0.282 0.232-0.455 0.232-0.115 0-0.23-0.035-0.33-0.108l-3-2.182c-0.251-0.183-0.307-0.534-0.124-0.786s0.535-0.307 0.786-0.124l3 2.182c0.251 0.183 0.307 0.535 0.124 0.786zM13.831 4.955l-5.5 4c-0.099 0.072-0.215 0.108-0.331 0.108s-0.232-0.036-0.331-0.108l-5.5-4c-0.251-0.183-0.307-0.534-0.124-0.786s0.535-0.307 0.786-0.124l5.169 3.759 5.169-3.759c0.251-0.183 0.603-0.127 0.786 0.124s0.127 0.603-0.124 0.786z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 895 B

8
assets/img/icons/envelop2.svg Normal file
View File

@ -0,0 +1,8 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>envelop2</title>
<path d="M14.998 3c0.001 0.001 0.001 0.001 0.002 0.002v9.996c-0.001 0.001-0.001 0.001-0.002 0.002h-13.996c-0.001-0.001-0.001-0.001-0.002-0.002v-9.996c0.001-0.001 0.001-0.001 0.002-0.002h13.996zM15 2h-14c-0.55 0-1 0.45-1 1v10c0 0.55 0.45 1 1 1h14c0.55 0 1-0.45 1-1v-10c0-0.55-0.45-1-1-1v0z"></path>
<path d="M5.831 9.773l-3 2.182c-0.1 0.073-0.216 0.108-0.33 0.108-0.174 0-0.345-0.080-0.455-0.232-0.183-0.251-0.127-0.603 0.124-0.786l3-2.182c0.251-0.183 0.603-0.127 0.786 0.124s0.127 0.603-0.124 0.786z"></path>
<path d="M13.955 11.831c-0.11 0.151-0.282 0.232-0.455 0.232-0.115 0-0.23-0.035-0.33-0.108l-3-2.182c-0.251-0.183-0.307-0.534-0.124-0.786s0.534-0.307 0.786-0.124l3 2.182c0.251 0.183 0.307 0.535 0.124 0.786z"></path>
<path d="M13.831 4.955l-5.5 4c-0.099 0.072-0.215 0.108-0.331 0.108s-0.232-0.036-0.331-0.108l-5.5-4c-0.251-0.183-0.307-0.534-0.124-0.786s0.535-0.307 0.786-0.124l5.169 3.759 5.169-3.759c0.251-0.183 0.603-0.127 0.786 0.124s0.127 0.603-0.124 0.786v0z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

5
assets/img/icons/envelop3.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>envelop3</title>
<path d="M15 2h-14c-0.55 0-1 0.45-1 1v10c0 0.55 0.45 1 1 1h14c0.55 0 1-0.45 1-1v-10c0-0.55-0.45-1-1-1zM14 4v0.719l-6 3.536-6-3.536v-0.719h12zM2 12v-5.54l6 3.536 6-3.536v5.54h-12z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 350 B

5
assets/img/icons/envelop4.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>envelop4</title>
<path d="M14.5 2h-13c-0.825 0-1.5 0.675-1.5 1.5v10c0 0.825 0.675 1.5 1.5 1.5h13c0.825 0 1.5-0.675 1.5-1.5v-10c0-0.825-0.675-1.5-1.5-1.5zM6.23 8.6l-4.23 3.295v-7.838l4.23 4.543zM2.756 4h10.488l-5.244 3.938-5.244-3.938zM6.395 8.777l1.605 1.723 1.605-1.723 3.29 4.223h-9.79l3.29-4.223zM9.77 8.6l4.23-4.543v7.838l-4.23-3.295z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 493 B

5
assets/img/icons/envelop5.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>envelop5</title>
<path d="M14.5 2h-13c-0.825 0-1.5 0.675-1.5 1.5v9c0 0.825 0.675 1.5 1.5 1.5h13c0.825 0 1.5-0.675 1.5-1.5v-9c0-0.825-0.675-1.5-1.5-1.5zM14 5l-6 4.5-6-4.5v-1l6 3 6-3v1z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 338 B

30
assets/js/curate.js
View File

@ -152,6 +152,32 @@ function curateStash(stash) {
return curatedStash;
}
function curateAlert(alert) {
if (!alert) {
return null;
}
const curatedAlert = alert;
if (alert.actors) {
curatedAlert.actors = alert.actors.map(actor => curateActor(actor.actor || actor));
}
if (alert.tags) {
curatedAlert.tags = alert.tags.map(tag => curateTag(tag.tag || tag));
}
if (alert.entity) {
curatedAlert.entity = curateEntity(alert.entity.entity || alert.entity);
}
if (alert.stashes) {
curatedAlert.stashes = alert.stashes.map(stash => curateStash(stash.stash || stash));
}
return curatedAlert;
}
function curateUser(user) {
if (!user) {
return null;
@ -163,6 +189,10 @@ function curateUser(user) {
curatedUser.stashes = user.stashes.map(stash => curateStash(stash.stash || stash));
}
if (user.alerts) {
curatedUser.alerts = user.alerts.map(alert => curateAlert(alert.alert || alert));
}
return curatedUser;
}

11
assets/js/users/actions.js
View File

@ -59,6 +59,13 @@ function initUsersActions(store, _router) {
id
notify
email
stashes: alertsStashes {
stash {
id
name
slug
}
}
tags: alertsTags {
tag {
id
@ -76,12 +83,16 @@ function initUsersActions(store, _router) {
id
name
slug
type
independent
hasLogo
parent {
id
name
slug
type
independent
hasLogo
}
}
}

2
src/web/server.js
View File

@ -104,7 +104,7 @@ async function initServer() {
router.delete('/api/stashes/:stashId/movies/:movieId', unstashMovie);
router.post('/api/alerts', addAlert);
router.delete('/api/alerts', removeAlert);
router.delete('/api/alerts/:alertId', removeAlert);
router.get('/api/scenes', fetchScenes);
router.get('/api/scenes/:releaseId', fetchScene);