Files
salvato.newfreeplanet/src/views/user/mycircuit/mycircuit.vue
2022-12-04 19:50:07 +01:00

761 lines
28 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 ed accedere 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>
<br />
<CSaldo
:symbol="circuit.symbol"
:account="account"
:color="circuit.color"
:saldo="saldo"
:qtarem="account ? qtarem : 0"
>
</CSaldo>
<div>
<q-banner
v-if="userStore.my.profile.calc.numGoodsAndServices <= 0 &&
userStore.IsMyCircuitByName(circuit.name)"
rounded
class="bg-orange text-white"
style="text-align: center"
>
<template v-slot:avatar>
<q-icon
name="fas fa-exclamation-triangle"
color="yellow"
size="xs"
/>
</template>
<em style="font-weight: bold">{{
$t('db.insertgoodorservices_to_start_circuit')
}}</em
><br />
</q-banner>
<q-banner
v-else-if="userStore.my.profile.calc.numGoodsAndServices <= 0"
rounded
class="bg-orange text-white"
style="text-align: center"
>
<template v-slot:avatar>
<q-icon
name="fas fa-exclamation-triangle"
color="yellow"
size="xs"
/>
</template>
<em style="font-weight: bold">{{
$t('db.insertgoodorservices_to_enter_circuit')
}}</em
><br />
</q-banner>
<q-btn
v-if="userStore.my.profile.calc.numGoodsAndServices > 0 &&
!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 (tabella)"
: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"
filterextra=""
:filterextra2="filterextra2"
: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: 500px"
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"
:filterextra="filterextra"
:filterextra2="filterextra2"
: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"
:filterextra="filterextra"
:filterextra2="filterextra2"
: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"
:filterextra="filterextra"
:filterextra2="filterextra2"
: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>