newfreeplanet_OLD/src/components/CNotifAtTop/CNotifAtTop.vue

<template>
  <div class="q-ma-sm text-center">
    <q-btn
      v-if="num_notifs > 0"
      :label="t('circuit.ris_in_arrivo') + (num_notifs > 1 ? (' (' + num_notifs + ' ' + t('circuit.transaz') + ')') : '')"
      @click="shownotif = true"
      icon="fas fa-coins"
      rounded
      color="primary"
    ></q-btn>
  </div>

  <q-dialog v-model="shownotif" :maximized="$q.screen.lt.sm">
    <q-card class="dialog_card">
      <q-bar class="bg-primary text-white">
        {{ $t('circuit.receive_coins') }}
        <q-space />
        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
      </q-bar>
      <q-card-section class="q-px-xs inset-shadow">
        <q-banner
          v-if="num_notifs > 0"
          rounded
          dense
          class="bg-light-blue text-black"
          color="primary q-title"
          style="text-align: center"
        >
          <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>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

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

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