218 lines
8.8 KiB
Vue
Executable File
218 lines
8.8 KiB
Vue
Executable File
<template>
|
|
<div>
|
|
<q-btn flat round dense icon="fas fa-bell" class="q-mx-xs" @click="open = !open">
|
|
<q-badge v-if="num_notifs_unread > 0" floating color="red">{{ num_notifs_unread }}</q-badge>
|
|
</q-btn>
|
|
<q-btn v-if="false" flat round dense icon="fas fa-bell">
|
|
<q-badge v-if="num_notifs_unread > 0" floating color="red">{{ num_notifs_unread }}</q-badge>
|
|
</q-btn>
|
|
|
|
|
|
|
|
<q-drawer v-model="open" side="right" elevated class="text-black" :width="$q.screen.lt.sm ? 370 : 450">
|
|
|
|
<q-bar class="bg-primary text-white">
|
|
{{ $t('notifs.notifs') }}
|
|
<q-space/>
|
|
<q-btn round dense icon="fas fa-pencil-alt" class="q-mx-xs">
|
|
<q-menu style="min-width: 200px">
|
|
<q-list style="">
|
|
<q-item clickable v-close-popup to="/notifs">
|
|
<q-item-section side>
|
|
<q-icon name="fas fa-cog"/>
|
|
</q-item-section>
|
|
<q-item-section>{{ $t('notifs.settings') }}</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-close-popup @click="notifStore.setAllRead(username)">
|
|
<q-item-section side>
|
|
<q-icon name="fas fa-check"/>
|
|
</q-item-section>
|
|
<q-item-section>{{ $t('notifs.setallread') }}</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-close-popup @click="notifStore.deleteAll(username)">
|
|
<q-item-section side>
|
|
<q-icon name="fas fa-trash-alt"/>
|
|
</q-item-section>
|
|
<q-item-section>{{ $t('notifs.deleteall') }}</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
<q-btn flat round color="white" icon="close" @click="open = false"></q-btn>
|
|
</q-bar>
|
|
|
|
<div class="row justify-center margin_buttons q-gutter-lg">
|
|
<q-btn-toggle
|
|
v-model="show_all"
|
|
class="my-custom-toggle"
|
|
no-caps
|
|
rounded
|
|
dense
|
|
unelevated
|
|
toggle-color="primary"
|
|
color="white"
|
|
text-color="primary"
|
|
:options="[
|
|
{label: t('notifs.all'), value: true},
|
|
{label: t('notifs.notread'), value: false}
|
|
]"
|
|
/>
|
|
</div>
|
|
|
|
<div class="clBorderSperator"></div>
|
|
|
|
<div class="q-ma-xs">
|
|
<q-list bordered class="rounded-borders">
|
|
|
|
<div v-if="num_notifs_unread === 0">
|
|
<q-item>
|
|
<q-item-label lines="1">{{ $t('notifs.nonotif') }}</q-item-label>
|
|
|
|
</q-item>
|
|
</div>
|
|
|
|
|
|
<q-item clickable v-for="(notif, index) in lasts_notifs" :key="index">
|
|
|
|
<!--<q-item-section avatar>
|
|
<q-avatar>
|
|
<q-item-label lines="1">{{ getTypeDirNotif(notif) }}</q-item-label>
|
|
</q-avatar>
|
|
</q-item-section>-->
|
|
|
|
<q-item-section avatar>
|
|
<q-avatar>
|
|
<img :src="notif.myimgsender" :alt="notif.sender">
|
|
</q-avatar>
|
|
</q-item-section>
|
|
|
|
|
|
<q-item-section v-ripple>
|
|
<q-item-label lines="5" :class="(!notif.read) ? 'unread' : 'read'" @click="clickNotif(notif)">
|
|
<div v-html="getNotifText($t, notif, false)"></div>
|
|
</q-item-label>
|
|
<q-item-label caption lines="2" v-if="notif.typedir === shared_consts.TypeNotifs.TYPEDIR_FRIENDS && notif.status === 0" v-ripple>
|
|
<div class="row no-wrap justify-evenly" v-if="userStore.IsReqFriendByUsername(notif.sender)">
|
|
<q-btn
|
|
dense
|
|
rounded
|
|
size="sm"
|
|
icon="fas fa-user-plus"
|
|
color="positive" :label="$t('friends.accept')"
|
|
@click="tools.addToMyFriends($q, userStore.my.username, notif.sender)"
|
|
/>
|
|
<q-btn
|
|
dense
|
|
rounded
|
|
size="sm"
|
|
icon="fas fa-user-minus"
|
|
color="negative" :label="$t('friends.refuse')"
|
|
@click="tools.refuseReqFriends($q, userStore.my.username, notif.sender)"
|
|
/>
|
|
</div>
|
|
</q-item-label>
|
|
<q-item-label caption lines="2" v-else-if="notif.typedir === shared_consts.TypeNotifs.TYPEDIR_GROUPS && notif.status === 0 && notif.typeid === shared_consts.TypeNotifs.ID_GROUP_REQUEST_TO_ENTER" v-ripple>
|
|
<div class="row no-wrap justify-evenly" v-if="tools.iAmAdminGroup(notif.extrafield)">
|
|
<q-btn
|
|
dense
|
|
rounded
|
|
size="sm"
|
|
icon="fas fa-user-plus"
|
|
color="positive" :label="$t('friends.accept')"
|
|
@click="tools.addToMyGroups($q, notif.sender, notif.extrafield)"
|
|
/>
|
|
<q-btn
|
|
dense
|
|
rounded
|
|
size="sm"
|
|
icon="fas fa-user-minus"
|
|
color="negative" :label="$t('friends.refuse')"
|
|
@click="tools.refuseReqGroup($q, notif.sender, notif.extrafield)"
|
|
/>
|
|
</div>
|
|
</q-item-label>
|
|
<q-item-label caption lines="2" v-else-if="notif.typedir === shared_consts.TypeNotifs.TYPEDIR_CIRCUITS && notif.status === 0 && notif.typeid === shared_consts.TypeNotifs.ID_CIRCUIT_REQUEST_TO_ENTER" v-ripple>
|
|
|
|
<div class="row no-wrap justify-evenly" v-if="tools.iAmAdminCircuit(notif.extrafield)">
|
|
<q-btn
|
|
dense
|
|
rounded
|
|
size="sm"
|
|
icon="fas fa-user-plus"
|
|
color="positive" :label="$t('circuit.accept')"
|
|
@click="tools.addToMyCircuits($q, notif.sender, notif.extrafield)"
|
|
/>
|
|
<q-btn
|
|
dense
|
|
rounded
|
|
size="sm"
|
|
icon="fas fa-user-minus"
|
|
color="negative" :label="$t('shared.refuse_ask')"
|
|
@click="tools.refuseReqCircuit($q, notif.sender, notif.extrafield)"
|
|
/>
|
|
</div>
|
|
</q-item-label>
|
|
<q-item-label caption lines="2" v-else-if="notif.typedir === shared_consts.TypeNotifs.TYPEDIR_CIRCUITS && notif.status === 0 && notif.typeid === shared_consts.TypeNotifs.ID_CIRCUIT_SENDCOINSREQ" v-ripple>
|
|
|
|
<div class="row no-wrap justify-evenly">
|
|
<q-btn
|
|
dense
|
|
rounded
|
|
size="sm"
|
|
icon="fas fa-user-plus"
|
|
color="positive" :label="$t('circuit.accept_coins')"
|
|
@click="tools.acceptCoins($q, notif.sender, notif.extrarec)"
|
|
/>
|
|
<q-btn
|
|
dense
|
|
rounded
|
|
size="sm"
|
|
icon="fas fa-user-minus"
|
|
color="negative" :label="$t('circuit.refuse_coins')"
|
|
@click="tools.refuseCoins($q, notif.sender, notif.extrarec)"
|
|
/>
|
|
</div>
|
|
</q-item-label>
|
|
|
|
<q-item-label caption lines="1" :class="(!notif.read) ? 'unread-date' : 'read-date'" @click="clickNotif(notif)">
|
|
{{ tools.timeAgo(notif.datenotif) }}
|
|
<!--{{ // getUsernameChatByNotif(notif) }}-->
|
|
</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-item-label>
|
|
<q-btn dense rounded icon="fas fa-ellipsis-h">
|
|
<q-menu>
|
|
<q-list style="min-width: 150px">
|
|
<q-item clickable v-close-popup @click="notifStore.deleteRec(username, notif._id)">
|
|
<q-item-section side>
|
|
<q-icon name="fas fa-trash-alt"/>
|
|
</q-item-section>
|
|
<q-item-section>{{ $t('notifs.delete_notif') }}</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-close-popup @click="notifStore.deactivateRec(notif._id)">
|
|
<q-item-section side>
|
|
<q-icon name="fas fa-bell-slash"/>
|
|
</q-item-section>
|
|
<q-item-section>{{ $t('notifs.deactivate_notif') }}</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</q-item-label>
|
|
</q-item-section>
|
|
|
|
</q-item>
|
|
<q-separator/>
|
|
</q-list>
|
|
</div>
|
|
</q-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" src="./notifPopover.ts">
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import './notifPopover.scss';
|
|
</style>
|