myprojplanet_vite/src/components/CMyCircuit/CMyCircuit.vue

<template>
  <div v-if="tools.isUserOk() || noaut">
    <div v-if="circuit">
      <q-item
        :class="
          `q-my-sm bordo_stondato_circuiti ` +
          ($q.dark.isActive ? `text-white` : `text-black`)
        "
        clickable
      >
        <q-item-section
          v-if="visu !== costanti.ENTER_TO_THE_CIRCUIT"
          avatar
          class="items-center"
          @click="naviga(tools.getPathByTableAndRec(table, circuit))"
        >
          <q-avatar size="60px">
            <q-img
              :src="getImgCircuit(circuit)"
              :alt="circuit.name"
              img-class="imgprofile"
              height="60px"
            />
          </q-avatar>
          <div :class="`q-ma-xs q-px-xs shadow-2 rounded-borders `">
            <span
              :class="
                `q-ma-sm ` + ($q.dark.isActive ? `text-white` : `text-black`)
              "
            >{{ circuit.numMembers }}</span>
            <q-icon name="fas fa-users" size="xs" color="blue"></q-icon>
          </div>
          <div v-if="circuit.link_group" :class="` `">
            
            <q-btn
              icon="fab fa-telegram"
              size="xs"
              color="blue"
              rounded
              @click.stop.prevent="tools.openUrl(circuit.link_group)"
            ></q-btn>
          </div>
        </q-item-section>

        <q-item-section :class="$q.dark.isActive ? `text-white` : `text-black`">
          <q-item-label
            class="text-center"
            @click="naviga(tools.getPathByTableAndRec(table, circuit))"
          >
            <strong>{{ circuit.name }}</strong>
            <span v-if="circuit.subname">({{ circuit.subname }})</span>
          </q-item-label>
          <!---<q-item-label
            @click="naviga(tools.getPathByTableAndRec(table, circuit))"
            v-if="circuit.longdescr && circuit.longdescr !== circuit.name"
            caption
            lines="3"
            ><em>{{ circuit.longdescr }}</em>
          </q-item-label>-->
          <q-item-label v-if="visu === costanti.ENTER_TO_THE_CIRCUIT" caption>
            <span>Membri: {{ circuit.numMembers }}</span>
          </q-item-label>
          <!--<q-item-label caption lines="3">
            <q-chip
              v-if="circuit.status !== undefined && circuit.status !== 0"
              :color="circuitStore.getColorCircuitClass(circuit)"
              text-color="white"
              size="sm"
              :icon="
                globalStore.getValueByTableSingle(
                  'statuscircuit',
                  circuit.status,
                  'icon'
                )
              "
              >{{
                globalStore.getValueByTableSingle(
                  'statuscircuit',
                  circuit.status
                )
              }}
              <q-btn
                class="q-ml-sm"
                icon="fas fa-info"
                color="primary"
                text-color="white"
                size="xs"
                round
                @click="showingtooltip = !showingtooltip"
              >
                <q-tooltip :offset="[10, 10]" v-model="showingtooltip">{{
                  globalStore.getValueByTableSingle(
                    'statuscircuit',
                    circuit.status,
                    'hint'
                  )
                }}</q-tooltip>
              </q-btn>
            </q-chip>
          </q-item-label>-->
          <q-item-label
            v-if="
              !circuit.transactionsEnabled &&
              circuit.status ===
              shared_consts.CIRCUIT_STATUS.FASE3_MONETA_ABILITATA
            "
            caption
            lines="1"
          >
            <q-icon v-if="!circuit.transactionsEnabled" name="fas fa-lock"></q-icon>
            <span class="text-red text-weight-bold">
              {{
                $t('circuit.transaction_suspended')
              }}
            </span>
          </q-item-label>

          <q-item-label @click="naviga(tools.getPathByTableAndRec(table, circuit))" lines="1">
            <CSaldo
              v-if="tools.isUserOk() && username === myusername() && account"
              :account="account"
              :symbol="circuit.symbol"
              :color="circuit.color"
              :saldo="saldo_pend"
              :valueextra="saldo_pend != saldo ? `* ` : ''"
              :qtarem="qtarem"
            ></CSaldo>
          </q-item-label>
          <q-item-label
            lines="4"
            v-if="
              tools.isUserOk() &&
              username === myusername() &&
              !account &&
              visu !== costanti.ENTER_TO_THE_CIRCUIT
            "
          >
            <div class="centermydiv text-center">
              <q-banner
                v-if="!circuitStore.SonoDentroAdAlmeno1CircuitoConFido()"
                inline-actions
                class="bg-blue text-white"
              >
                <span v-html="$t('circuit.entra_italia_solo_dopo_aver_fido')"></span>
              </q-banner>
              <q-banner v-else inline-actions class="bg-blue text-white">
                <span v-html="$t('circuit.non_entrato')"></span>
                <template v-slot:action>
                  <q-btn
                    v-if="
                      !userStore.IsMyCircuitByName(circuit.name) &&
                      !userStore.IsAskedCircuitByName(circuit.name) &&
                      !userStore.IsRefusedCircuitByName(circuit.name)
                    "
                    color="positive"
                    :label="$t('circuit.apri')"
                    @click="
  requestToEnterCircuit = true;
groupnameSel = null;
                    "
                  />
                </template>
              </q-banner>
            </div>
          </q-item-label>
        </q-item-section>

        <q-item-section side v-if="visu === costanti.USER_CIRCUITS && tools.isUserOk()">
          <q-item-label>
            <q-btn
              rounded
              :icon="
                userStore.IsMyCircuitByName(circuit.name)
                  ? `fas fa-ellipsis-h`
                  : `fas fa-user`
              "
            >
              <q-menu>
                <q-list
                  v-if="
                    !userStore.IsMyCircuitByName(circuit.name) &&
                    !userStore.IsAskedCircuitByName(circuit.name) &&
                    !userStore.IsRefusedCircuitByName(circuit.name)
                  "
                  style="min-width: 200px"
                >
                  <q-item
                    clickable
                    v-close-popup
                    @click="
                      tools.setCmd(
                        $q,
                        shared_consts.CIRCUITCMD.REQ,
                        myusername(),
                        true,
                        circuitname
                      )
                    "
                  >
                    <q-item-section>{{ $t('circuit.ask') }}</q-item-section>
                  </q-item>
                </q-list>
                <q-list
                  v-else-if="
                    !userStore.IsMyCircuitByName(circuit.name) &&
                    userStore.IsAskedCircuitByName(circuit.name) &&
                    !userStore.IsRefusedCircuitByName(circuit.name)
                  "
                  style="min-width: 200px"
                >
                  <q-item
                    clickable
                    v-close-popup
                    @click="
                      tools.setCmd(
                        $q,
                        shared_consts.CIRCUITCMD.REQ,
                        myusername(),
                        false,
                        circuit.name
                      )
                    "
                  >
                    <q-item-section>
                      {{
                        $t('shared.refuse_ask')
                      }}
                    </q-item-section>
                  </q-item>
                  <q-item
                    clickable
                    v-close-popup
                    @click="
                      tools.setCmd(
                        $q,
                        shared_consts.CIRCUITCMD.REQ,
                        myusername(),
                        false,
                        circuit.name
                      )
                    "
                  >
                    <q-item-section>
                      {{
                        $t('shared.cancel_ask')
                      }}
                    </q-item-section>
                  </q-item>
                </q-list>
                <q-list
                  v-else-if="userStore.IsMyCircuitByName(circuit.name) && (saldo === 0 || !saldo)"
                  style="min-width: 200px"
                >
                  <q-item
                    clickable
                    v-close-popup
                    @click="
                      tools.setCmd(
                        $q,
                        shared_consts.CIRCUITCMD.REMOVE_FROM_MYLIST,
                        myusername(),
                        '',
                        circuit.name
                      )
                    "
                  >
                    <q-item-section>{{ $t('circuit.exit') }}</q-item-section>
                  </q-item>
                </q-list>
                <q-list v-if="userStore.isAdmin" style="min-width: 200px">
                  <q-item
                    clickable
                    v-close-popup
                    @click="
                      tools.setCmd(
                        $q,
                        shared_consts.CIRCUITCMD.DELETE,
                        myusername(),
                        '',
                        circuit.name
                      )
                    "
                  >
                    <q-item-section>{{ $t('circuit.delete') }}</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </q-item-label>
        </q-item-section>
        <q-item-section side v-if="visu === costanti.REQ_CIRCUIT && tools.isUserOk()">
          <q-item-label>
            <q-btn rounded icon="fas fa-ellipsis-h">
              <q-menu>
                <q-list style="min-width: 150px">
                  <q-item
                    clickable
                    icon="fas fa-user-minus"
                    outline
                    v-close-popup
                    @click="
                      tools.setCmd(
                        $q,
                        shared_consts.CIRCUITCMD.REFUSE_REQ,
                        myusername(),
                        false,
                        circuit.name
                      )
                    "
                  >
                    <q-item-section>
                      {{
                        $t('circuit.reject_ask')
                      }}
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </q-item-label>
        </q-item-section>
        <q-item-section side v-if="visu === costanti.ASK_SENT_CIRCUIT && tools.isUserOk()">
          <q-item-label>
            <q-btn rounded icon="fas fa-ellipsis-h">
              <q-menu>
                <q-list style="min-width: 150px">
                  <q-item
                    clickable
                    icon="fas fa-user-minus"
                    outline
                    v-close-popup
                    @click="
                      tools.setCmd(
                        $q,
                        shared_consts.CIRCUITCMD.REFUSE_REQ,
                        myusername(),
                        '',
                        circuit.name
                      )
                    "
                  >
                    <q-item-section>
                      {{
                        $t('shared.refuse_ask')
                      }}
                    </q-item-section>
                  </q-item>
                  <q-item
                    clickable
                    icon="fas fa-user-minus"
                    outline
                    v-close-popup
                    @click="
                      tools.setCmd(
                        $q,
                        shared_consts.CIRCUITCMD.CANCEL_REQ,
                        myusername(),
                        '',
                        circuit.name
                      )
                    "
                  >
                    <q-item-section>
                      {{
                        $t('shared.cancel_ask')
                      }}
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </q-item-label>
        </q-item-section>
      </q-item>

      <div class="centermydiv text-center" v-if="visu === costanti.ENTER_TO_THE_CIRCUIT">
        <q-btn
          v-if="
            !userStore.IsMyCircuitByName(circuit.name) &&
            !userStore.IsAskedCircuitByName(circuit.name) &&
            !userStore.IsRefusedCircuitByName(circuit.name)
          "
          icon="fas fa-user-plus"
          color="primary"
          :label="$t('circuit.ask')"
          rounded
          @click="
  requestToEnterCircuit = true;
groupnameSel = null;
          "
        />
        <q-btn v-if="userStore.IsMyCircuitByName(circuit.name)" rounded icon="fas fa-ellipsis-h">
          <q-menu>
            <q-list v-if="true" style="min-width: 150px">
              <q-item
                clickable
                v-close-popup
                v-if="true"
                @click="(saldo !== 0) ?
                  tools.showNegativeNotif($q, t('circuit.per_uscire_dal_circuito_occorre_essere_a_zero'), 30000) :
                  tools.removeFromMyCircuits(
                    $q,
                    userStore.my.username,
                    circuit.name,
                    '',
                    $t('circuit.domanda_exit_fromcircuit', {
                      circuitname: circuit.name,
                    })
                  )
                "
              >
                <q-item-section avatar>
                  <q-icon color="negative" name="fas fa-user-minus" />
                </q-item-section>
                <q-item-section>
                  {{
                    $t('circuit.exit_circuit')
                  }}
                </q-item-section>
              </q-item>

              <q-list v-if="userStore.isAdmin" style="min-width: 200px">
                <q-item
                  clickable
                  v-close-popup
                  @click="
                    tools.setCmd(
                      $q,
                      shared_consts.CIRCUITCMD.DELETE,
                      userStore.my.username,
                      '',
                      circuit.name
                    )
                  "
                >
                  <q-item-section avatar>
                    <q-icon color="negative" name="fas fa-trash-alt" />
                  </q-item-section>
                  <q-item-section>{{ $t('circuit.delete') }}</q-item-section>
                </q-item>
              </q-list>
            </q-list>
          </q-menu>
        </q-btn>

        <q-btn
          v-if="
            userStore.IsAskedCircuitByName(circuit.name) &&
            !userStore.IsMyCircuitByName(circuit.name)
          "
          icon="fas fa-user-minus"
          flat
          outline
          :label="$t('shared.cancel_ask_short')"
          @click="
            tools.cancelReqCircuit($q, userStore.my.username, circuit.name)
          "
        />
      </div>
    </div>
    <q-dialog
      v-model="requestToEnterCircuit"
      maximized
      transition-show="slide-up"
      transition-hide="slide-down"
    >
      <q-card v-if="circuit" class="dialog_card">
        <q-toolbar class="bg-primary text-white" dense>
          <!--<q-toolbar :class="tools.displayClasses(myevent)"-->
          <!--:style="tools.displayStyles(myevent) + ` min-width: `+ tools.myheight_dialog() + `px;`">-->
          <q-toolbar-title>
            {{ circuit.name }}
            <div v-if="groupnameSel">Gruppo: {{ groupnameSel.groupname }}</div>
          </q-toolbar-title>
          <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
        </q-toolbar>
        <q-card-section class="inset-shadow">
          <div v-html="t('circuit.disclaimer')"></div>
        </q-card-section>
        <q-card-section class="inset-shadow">
          <div style="font-weight: bold; font-size: 1.25rem">Regolamento:</div>
          <q-btn label="vedi Regolamento" @click="showrules = !showrules"></q-btn>
          <div v-if="showrules" v-html="getRegulation(circuit.regulation)"></div>
        </q-card-section>
        <q-card-actions align="center">
          <q-btn
            class="centeritems"
            icon="fas fa-user-plus"
            color="positive"
            :label="$t('circuit.acceptregulation')"
            @click="
  requestToEnterCircuit = false;
tools.setRequestCircuit(
  $q,
  userStore.my.username,
  circuit.name,
  true,
  groupnameSel ? groupnameSel.groupname : ''
);
            "
          />
          <q-btn outline :label="$t('dialog.cancel')" icon="close" v-close-popup></q-btn>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
  <div v-else>
    <CUserNonVerif></CUserNonVerif>
  </div>
</template>

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

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