550 lines
23 KiB
Vue
Executable File
550 lines
23 KiB
Vue
Executable File
<template>
|
|
<CNotifAtTop/>
|
|
<div class="q-gutter-sm q-pa-sm q-pb-md">
|
|
<div v-if="!circuit && !loading">
|
|
<div v-if="mystatus === 403">
|
|
<h3>Non hai i permessi per accedere al Circuito.<br>
|
|
|
|
Occorre prima registrarsi alla App </h3>
|
|
</div>
|
|
<div v-else-if="tools.isLogged() && path">
|
|
<h3>Circuito non Esistente</h3>
|
|
</div>
|
|
<div v-else>
|
|
<div v-if="!tools.isLogged()">
|
|
<CCheckIfIsLogged></CCheckIfIsLogged>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
|
|
<div v-if="!tools.isLogged()">
|
|
<CCheckIfIsLogged></CCheckIfIsLogged>
|
|
</div>
|
|
<div v-if="circuit">
|
|
|
|
<div v-if="circuit.name" class="fit column no-wrap justify-evenly items-center content-start">
|
|
|
|
<div class="">
|
|
<q-avatar size="140px">
|
|
<q-img :src="getImgCircuit()" :alt="circuit.name" img-class="imgprofile" height="140px" @click="showPic = true"/>
|
|
</q-avatar>
|
|
</div>
|
|
|
|
<div class="text-h6">
|
|
<span v-if="checkifShow('name')"> {{ circuit.name }}</span>
|
|
</div>
|
|
|
|
<q-banner
|
|
v-if="userStore.IsRefusedCircuitByName(circuit.name)"
|
|
rounded
|
|
class="bg-red text-white"
|
|
style="text-align: center;"
|
|
>
|
|
<em style="font-weight: bold">{{ $t('db.youarerefusedcircuit') }}</em><br>
|
|
</q-banner>
|
|
|
|
<CSaldo
|
|
:symbol="circuit.symbol"
|
|
:account="account"
|
|
:color="circuit.color"
|
|
:saldo="saldo"
|
|
:qtarem="account ? qtarem : 0">
|
|
</CSaldo>
|
|
<div>
|
|
<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"
|
|
/>
|
|
<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"
|
|
@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 :label="$t('shared.cancel_ask_short')"
|
|
@click="tools.cancelReqCircuit($q, userStore.my.username, circuit.name)"
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-if="circuit.name" class="no-wrap justify-evenly items-center content-start">
|
|
|
|
<q-tabs v-model="tabgrp" class="text-blue">
|
|
<q-tab :label="t('shared.info1')" name="info" icon="fas fa-info"></q-tab>
|
|
<q-tab v-if="tools.iCanShowCircuitsMember(circuit) || tools.iAmAdminCircuit(circuit.name)"
|
|
:label="t('shared.subscribes')" name="members" icon="fas fa-users"></q-tab>
|
|
<q-tab v-if="userStore.IsMyCircuitByName(circuit.name)" :label="t('circuit.movements')" name="mov" icon="fas fa-coins"></q-tab>
|
|
<q-tab v-if="!!circuit.note" :label="t('circuit.page')" name="page" icon="fas fa-file-word"></q-tab>
|
|
</q-tabs>
|
|
|
|
<q-tab-panels v-model="tabgrp" animated>
|
|
<q-tab-panel name="mov">
|
|
|
|
<q-toggle v-model="showonlymine" :label="t('movement.onlymymov')"></q-toggle>
|
|
<q-toggle v-model="tabellare" label="Tabella"></q-toggle>
|
|
|
|
<CGridTableRec
|
|
v-if="tabellare && !loading"
|
|
prop_mytable="movements"
|
|
prop_mytitle=""
|
|
:prop_mycolumns="colmyMovementTable"
|
|
prop_colkey="_id"
|
|
col_title="Lista Movimenti"
|
|
:vertical="0"
|
|
nodataLabel="Nessun Movimento effettuato"
|
|
:prop_search="true"
|
|
:enableExport="true"
|
|
hint="nota da trovare"
|
|
:finder="false"
|
|
:choose_visutype="false"
|
|
:finder_noNull="false"
|
|
:options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
|
|
:butt_modif_new="false"
|
|
noresultLabel="movimenti non trovati con questa ricerca"
|
|
:arrfilters="arrfilterand"
|
|
:filtercustom="filtercustom_rich"
|
|
:prop_searchList="searchList"
|
|
:prop_pagination="{ sortBy: 'transactionDate', descending: true, page: 1, rowsNumber: 20, rowsPerPage: 20 }"
|
|
:showType="costanti.SHOW_MOVEMENTS"
|
|
keyMain=""
|
|
:showCol="true"
|
|
:showHeaderCol="true"
|
|
:extraparams="extraparams_movs()"
|
|
extrafield=""
|
|
:visufind="costanti.FRIENDS"
|
|
>
|
|
|
|
</CGridTableRec>
|
|
<CGridTableRec
|
|
v-else-if="!loading"
|
|
prop_mytable="movements"
|
|
prop_mytitle=""
|
|
:prop_mycolumns="colmyMovement"
|
|
prop_colkey="_id"
|
|
col_title="Lista Movimenti"
|
|
:vertical="costanti.VISUTABLE_LISTA"
|
|
nodataLabel="Nessun Movimento effettuato"
|
|
:enableExport="true"
|
|
:prop_search="true"
|
|
hint="nota da trovare"
|
|
:finder="false"
|
|
:choose_visutype="false"
|
|
:finder_noNull="false"
|
|
:options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
|
|
:butt_modif_new="false"
|
|
noresultLabel="movimenti non trovati con questa ricerca"
|
|
:arrfilters="arrfilterand"
|
|
:filtercustom="filtercustom_rich"
|
|
:prop_searchList="searchList"
|
|
:prop_pagination="{ sortBy: 'transactionDate', descending: true, page: 1, rowsNumber: 20, rowsPerPage: 20 }"
|
|
:showType="costanti.SHOW_MOVEMENTS"
|
|
keyMain=""
|
|
:showCol="false"
|
|
:showHeaderCol="false"
|
|
:extraparams="extraparams_movs()"
|
|
extrafield=""
|
|
:visufind="costanti.FRIENDS"
|
|
>
|
|
|
|
</CGridTableRec>
|
|
|
|
</q-tab-panel>
|
|
<q-tab-panel name="info">
|
|
<div>
|
|
<q-card>
|
|
<q-card-section>
|
|
<div class="text-h6">{{ t('circuit.info') }}</div>
|
|
</q-card-section>
|
|
|
|
<q-separator/>
|
|
|
|
<q-card-section>
|
|
<div v-if="circuit.createdBy" class="container">
|
|
<q-icon name="fas fa-lightbulb" class="iconcirc"></q-icon>
|
|
{{
|
|
$t('shared.createdby', {
|
|
username: circuit.createdBy,
|
|
date: tools.getstrDateYY(circuit.date_created),
|
|
})
|
|
}}
|
|
</div>
|
|
<div v-if="!!circuit.date_updated && tools.getstrDate(circuit.date_updated) !== tools.getstrDate(circuit.date_created)" class="container">
|
|
<q-icon name="fas fa-pencil-alt" class="iconcirc"></q-icon>
|
|
<span class="element">{{
|
|
$t('shared.lastmodify', {
|
|
date: tools.getstrDateYY(circuit.date_updated),
|
|
})
|
|
}}</span>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<q-icon name="fas fa-users" class="iconcirc"></q-icon>
|
|
<span class="element">{{ numUsers() }}</span> {{ numUsers() === 1 ? t('shared.member') : t('shared.members') }}
|
|
</div>
|
|
<div class="container">
|
|
<q-icon name="fas fa-user-cog" class="iconcirc"></q-icon>
|
|
<span class="element">{{ numAdmins() }}</span> {{ numAdmins() === 1 ? t('shared.admin') : t('shared.admins') }}
|
|
</div>
|
|
<div v-for="(user, index) of circuit.admins" :key="index">
|
|
<CMyUser
|
|
:mycontact="user"
|
|
:visu="costanti.FIND_PEOPLE"
|
|
@setCmd="tools.setCmd"
|
|
>
|
|
</CMyUser>
|
|
</div>
|
|
<div class="sezioni">
|
|
<q-icon name="fas fa-coins" class="iconcirc"></q-icon>
|
|
{{ t('circuit.symbol') }}:
|
|
<span class="text-h5">
|
|
<em class="q-px-sm text-black rounded-borders"
|
|
:style="`background-color: ` + tools.getColorByCircuit(circuit)">{{ tools.getSymbolByCircuit(circuit) }}</em>
|
|
</span>
|
|
</div>
|
|
<div :class="$q.screen.lt.sm ? '' : 'row'">
|
|
<div v-if="circuit.fido_scoperto_default" class="sezioni">
|
|
<CCurrencyValue
|
|
:symbol="tools.getSymbolByCircuit(circuit)"
|
|
:color="tools.getColorByCircuit(circuit)"
|
|
color_border="red"
|
|
:value="circuit.fido_scoperto_default"
|
|
icon="fas fa-battery-quarter"
|
|
:label="t('circuit.fido_scoperto_default')"
|
|
:tips="t('circuit.fido_scoperto_default_tips')"
|
|
>
|
|
</CCurrencyValue>
|
|
</div>
|
|
<div v-if="circuit.fido_scoperto_default" class="sezioni">
|
|
<CCurrencyValue
|
|
:symbol="tools.getSymbolByCircuit(circuit)"
|
|
:color="tools.getColorByCircuit(circuit)"
|
|
color_border="green"
|
|
:value="circuit.qta_max_default"
|
|
icon="fas fa-battery-quarter"
|
|
:label="t('circuit.qta_max_default')"
|
|
:tips="t('circuit.qta_max_default_tips')"
|
|
>
|
|
</CCurrencyValue>
|
|
</div>
|
|
</div>
|
|
<div class="sezioni">
|
|
<q-icon name="fas fa-stats" class="iconcirc"></q-icon>
|
|
{{ t('circuit.stats') }}:<br>
|
|
</div>
|
|
<div :class="$q.screen.lt.sm ? '' : 'row'">
|
|
<div v-if="circuit.totTransato" class="sezioni">
|
|
<CCurrencyValue
|
|
:symbol="tools.getSymbolByCircuit(circuit)"
|
|
:color="tools.getColorByCircuit(circuit)"
|
|
color_border="blue"
|
|
:value="circuit.totTransato"
|
|
icon="fas fa-battery-quarter"
|
|
:label="t('circuit.totTransato')"
|
|
:tips="t('circuit.totTransato_tips')"
|
|
>
|
|
</CCurrencyValue>
|
|
</div>
|
|
<div v-if="circuit.totCircolante" class="sezioni">
|
|
<CCurrencyValue
|
|
:symbol="tools.getSymbolByCircuit(circuit)"
|
|
:color="tools.getColorByCircuit(circuit)"
|
|
color_border="blue"
|
|
:value="circuit.totCircolante"
|
|
icon="fas fa-battery-quarter"
|
|
:label="t('circuit.totCircolante')"
|
|
:tips="t('circuit.totCircolante_tips')"
|
|
>
|
|
</CCurrencyValue>
|
|
</div>
|
|
</div>
|
|
<div class="sezioni">
|
|
<q-icon name="fas fa-toggle-on" class="iconcirc"></q-icon>
|
|
{{ t('circuit.transactionsEnabled') }}: <span class="text-section">{{ circuit.transactionsEnabled ? t('dialog.yes') : t('dialog.no') }} {{ }}</span>
|
|
</div>
|
|
<div class="sezioni" v-if="circuit.deperimento !== undefined">
|
|
<q-icon name="fas fa-battery-full" class="iconcirc"></q-icon>
|
|
{{ t('circuit.deperimento') }}: <span class="text-section">{{ circuit.deperimento ? t('dialog.yes') : t('dialog.no') }} {{ }}</span>
|
|
</div>
|
|
|
|
</q-card-section>
|
|
</q-card>
|
|
|
|
<br>
|
|
</div>
|
|
<q-card v-if="circuit.name">
|
|
<q-card-section>
|
|
<div class="text-h6">{{t('circuit.descr')}}:</div>
|
|
</q-card-section>
|
|
<q-separator/>
|
|
|
|
<q-card-section>
|
|
<div class="col-12 text-h7">
|
|
<span v-if="checkifShow('descr')" v-html="circuit.longdescr"></span>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
|
|
<q-card v-if="circuit.name">
|
|
<q-card-section>
|
|
<div class="text-h6">{{t('circuit.regulation')}}:</div>
|
|
</q-card-section>
|
|
<q-separator/>
|
|
|
|
<q-card-section>
|
|
<div class="col-12 text-h7">
|
|
<span v-if="checkifShow('descr')" v-html="circuit.regulation"></span>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="page">
|
|
<div v-if="circuit.note">
|
|
<br>
|
|
<div class="q-ma-sm q-gutter-sm q-pa-xs">
|
|
<div v-if="circuit.note" v-html="circuit.note">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="members" style="max-width: 400px;" v-if="tools.iCanShowCircuitsMember(circuit)">
|
|
|
|
<q-tabs
|
|
v-show="tools.iAmAdminCircuit(circuit.name)"
|
|
v-model="tabmembers" class="text-blue">
|
|
<q-tab label="Iscritti" name="all" icon="fas fa-users"></q-tab>
|
|
<q-tab v-if="tools.iAmAdminCircuit(circuit.name)" label="Richieste" name="rich" icon="fas fa-user-plus"></q-tab>
|
|
<q-tab v-if="tools.iAmAdminCircuit(circuit.name)" label="Rifiutati" name="refused" icon="fas fa-user-minus"></q-tab>
|
|
</q-tabs>
|
|
|
|
<q-tab-panels v-model="tabmembers" animated>
|
|
<q-tab-panel name="all">
|
|
|
|
<!--<q-toggle v-model="showsaldi" :label="t('movement.showsaldi')"></q-toggle>-->
|
|
|
|
<CGridTableRec
|
|
v-if="!loading"
|
|
ref="tabMembri"
|
|
prop_mytable="users"
|
|
prop_mytitle=""
|
|
:prop_mycolumns="showsaldi ? colmyUserPeopleSaldi : colmyUserPeople"
|
|
prop_colkey="_id"
|
|
col_title="username"
|
|
:vertical="costanti.VISUTABLE_LISTA"
|
|
nodataLabel="Nessun Iscritto"
|
|
:prop_search="true"
|
|
hint="Username da trovare"
|
|
:finder="false"
|
|
:choose_visutype="true"
|
|
:finder_noNull="false"
|
|
:options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
|
|
:butt_modif_new="false"
|
|
noresultLabel="Username non trovato"
|
|
:arrfilters="arrfilterand"
|
|
:filtercustom="filtercustom"
|
|
:prop_searchList="searchList"
|
|
:showType="costanti.SHOW_USERINFO"
|
|
:showCol="false"
|
|
:circuitname="circuit.name"
|
|
:extraparams="extraparams()"
|
|
:visufind="tools.iAmAdminCircuit(circuit.name) ? costanti.REQ_REMOVE_USER_TO_CIRCUIT : costanti.FIND_PEOPLE"
|
|
>
|
|
|
|
</CGridTableRec>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="rich">
|
|
|
|
<CGridTableRec
|
|
v-if="!loading"
|
|
prop_mytable="circuits"
|
|
prop_mytitle=""
|
|
:prop_mycolumns="colmyUserPeople"
|
|
prop_colkey="_id"
|
|
col_title=""
|
|
:vertical="costanti.VISUTABLE_USER_TABCIRCUIT"
|
|
nodataLabel="Nessuna Richiesta in sospeso"
|
|
:prop_search="false"
|
|
hint="Username da trovare"
|
|
:finder="false"
|
|
:choose_visutype="false"
|
|
:finder_noNull="false"
|
|
:options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
|
|
:butt_modif_new="false"
|
|
noresultLabel="Username non trovato"
|
|
:arrfilters="arrfilterand"
|
|
:filtercustom="filtercustom_rich"
|
|
:prop_searchList="searchList"
|
|
:showType="costanti.SHOW_USERINFO"
|
|
keyMain=""
|
|
:showCol="false"
|
|
:extraparams="extraparams_rich()"
|
|
:circuitname="circuit.name"
|
|
:visufind="costanti.REQ_ADD_USER_TO_CIRCUIT"
|
|
>
|
|
|
|
</CGridTableRec>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="refused">
|
|
|
|
<CGridTableRec
|
|
prop_mytable="circuits"
|
|
prop_mytitle=""
|
|
:prop_mycolumns="colmyUserPeople"
|
|
prop_colkey="_id"
|
|
col_title=""
|
|
:vertical="costanti.VISUTABLE_USER_TABCIRCUIT"
|
|
nodataLabel="Nessun utente Rifiutato"
|
|
:prop_search="false"
|
|
hint="Username da trovare"
|
|
:finder="false"
|
|
:choose_visutype="false"
|
|
:finder_noNull="false"
|
|
:options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
|
|
:butt_modif_new="false"
|
|
noresultLabel="Username non trovato"
|
|
:arrfilters="arrfilterand"
|
|
:filtercustom="filtercustom_rich"
|
|
:prop_searchList="searchList"
|
|
:showType="costanti.SHOW_USERINFO"
|
|
keyMain=""
|
|
:showCol="false"
|
|
:extraparams="extraparams_refused()"
|
|
:circuitname="circuit.name"
|
|
:visufind="costanti.REQ_ADD_USER_TO_CIRCUIT"
|
|
>
|
|
|
|
</CGridTableRec>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
|
|
</q-tab-panel>
|
|
<q-tab-panel name="mov">
|
|
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
|
|
</div>
|
|
<div v-else class="fit column no-wrap justify-evenly items-center content-start">
|
|
<q-skeleton type="QAvatar" size="140px" height="140px" animation="fade"/>
|
|
<q-card flat bordered style="width: 250px">
|
|
<div class="text-h6">
|
|
<q-skeleton :animation="animation"/>
|
|
</div>
|
|
<div class="col-12 text-h7 text-grey text-center">
|
|
{{ path }}
|
|
</div>
|
|
<div class="col-12 text-h7">
|
|
<q-skeleton :animation="animation"/>
|
|
</div>
|
|
|
|
<div class="col-12 text-h8 q-mt-sm">
|
|
<q-skeleton :animation="animation"/>
|
|
</div>
|
|
<div class="col-12 text-h8 q-mt-sm">
|
|
<q-skeleton :animation="animation"/>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
</div>
|
|
<q-dialog
|
|
v-model="showPic"
|
|
full-height full-width
|
|
>
|
|
|
|
<img :src="getImgCircuit()" :alt="circuit.name" class="full-width">
|
|
|
|
</q-dialog>
|
|
|
|
<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 }}
|
|
</q-toolbar-title>
|
|
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
|
|
</q-toolbar>
|
|
<q-card-section class="inset-shadow">
|
|
<q-banner
|
|
rounded
|
|
class="bg-green text-white"
|
|
style="text-align: center;"
|
|
>
|
|
<em style="font-weight: bold">Disclaimer:</em><br>
|
|
</q-banner>
|
|
<div v-html="t('circuit.disclaimer')">
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-section class="inset-shadow">
|
|
<q-banner
|
|
rounded
|
|
class="bg-green text-white"
|
|
style="text-align: center;"
|
|
>
|
|
<em style="font-weight: bold">Regolamento interno:</em><br>
|
|
</q-banner>
|
|
<div v-html="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)"
|
|
/>
|
|
<q-btn flat round color="negative"
|
|
:label="$t('friends.refuse')"
|
|
icon="close" v-close-popup></q-btn>
|
|
|
|
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script lang="ts" src="./mycircuit.ts">
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './mycircuit.scss';
|
|
</style>
|
|
|