newfreeplanet_OLD/src/components/CNotifAtTop/CNotifAtTop.vue

<template>
  <q-banner
    v-if="num_notifs > 0"
    rounded
    dense
    class="bg-primary text-white"
    color="primary q-title"
    style="text-align: center;">
    <template v-slot:avatar>
      <q-icon name="fas fa-exclamation-triangle" color="yellow" size="xs"/>
    </template>
    <q-item v-for="(notif, index) in lasts_notifs_req" :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>
        <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="18"
                      v-if="notif.typedir === shared_consts.TypeNotifs.TYPEDIR_CIRCUITS && notif.status === shared_consts.CircuitsNotif.STATUS_NONE && notif.typeid === shared_consts.TypeNotifs.ID_CIRCUIT_SENDCOINSREQ"
                      >
          <div class="row no-wrap justify-evenly q-pa-sm">
            <q-btn
              size="md"
              icon="fas fa-coins"
              :disable="notif.disablecoinclick"
              color="positive" :label="$t('circuit.accept_coins_qty', {qty: notif.extrarec.qty, symbol: notif.extrarec.symbol})"
              @click="notif.disablecoinclick = true; tools.acceptCoins(q, notif.sender, notif)"
            />
            <q-btn
              size="md"
              :disable="notif.disablecoinclick"
              color="negative" :label="$t('circuit.refuse_coins_qty', {qty: notif.extrarec.qty, symbol: notif.extrarec.symbol})"
              @click="notif.disablecoinclick = true; tools.refuseCoins(q, notif.sender, notif)"
            />
          </div>
        </q-item-label>
      </q-item-section>
    </q-item>
  </q-banner>
</template>

<script lang="ts" src="./CNotifAtTop.ts">
</script>

<style lang="scss" scoped>
@import './CNotifAtTop.scss';
</style>