Files
myprojplanet_vite/src/components/CMyCircuit/CMyCircuit.vue
Surya Paolo 114af5b3fd - tutorial Circuito Ris Italia
- Invia RIS (visibile per tutti)
2023-11-26 01:38:09 +01:00

520 lines
17 KiB
Vue
Executable File

<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
@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>
</q-item-section>
<q-item-section :class="$q.dark.isActive ? `text-white` : `text-black`">
<q-item-label
@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"
: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 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)"
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="tools.iAmAdminCircuit(circuit.name)"
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')"
@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="saldo === 0 || !saldo"
@click="
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="tools.iAmAdminCircuit(circuit.name)"
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>