Files
myprojplanet_vite/src/components/CMyElem/CMyElem.vue
Surya Paolo eb2cadb490 - Griglia Orizzontale a Carosello
- Aggiornato Tabella Eventi
- Lista Ultimi Movimenti
- Ultime strette di mano
- Ultimi Invitanti alla App
2024-10-17 00:35:29 +02:00

761 lines
25 KiB
Vue
Executable File

<template>
<div
v-if="myel"
:class="
(editOn ? ` clEditDiv` : ``) +
`` +
getClass() +
(!myel.active ? ` clEditNotActive` : ``)
"
@click="clickOnElem"
>
<div v-if="myel.type">
<div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
<transition
appear
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
>
<div
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
>
{{ myel.container }}
</div>
</transition>
</div>
<div
v-if="myel.type === shared_consts.ELEMTYPE.CARD"
class="card-carousel-container"
>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
class="card-carousel"
ref="carouselRef"
>
<q-card
v-for="(rec, ind) in myel.listcards"
:key="ind"
:class="
`my-card-elem center_img bordered ` +
myel.class3 +
(rec.link ? ' titolo_card' : '')
"
:style="
rec.style +
`; height: ${myel.heightimg || `300px`} !important; width: ${
myel.widthimg || `300px`
} !important;`
"
@click="rec.link ? tools.openUrl(rec.link) : undefined"
>
<div
class="img-container"
:style="`height: ${
myel.heightimg.replace('px', '') * 0.7
}px; overflow: hidden;`"
>
<q-img
:class="tools.getClassAnim(myel.anim2) + ` ` + myel.class4"
:src="tools.getImgFileByElem(myel, rec)"
/>
</div>
<q-card-section>
<div :class="rec.size" :style="`color: ` + rec.color">
{{ tools.getText(rec.alt) }}
</div>
<div
:class="`q-mt-sm q-mb-xs ` + tools.getClassAnim(myel.anim)"
v-html="rec.content"
></div>
<div
v-if="rec.description"
class="text-caption"
:style="`color: ` + rec.colorsub"
>
{{ rec.description }}
</div>
</q-card-section>
</q-card>
</div>
<div class="swipe-indicator left" v-if="!isAtStart">
<q-icon name="chevron_left" size="2rem" color="white" />
</div>
<div class="swipe-indicator right" v-if="!isAtEnd">
<q-icon name="chevron_right" size="2rem" color="white" />
</div>
<div class="scroll-indicator">
<div
v-for="(_, index) in myel.listcards"
:key="index"
:class="['dot', { active: index === activeIndex }]"
></div>
</div>
</div>
<div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
:style="`margin: ` + myel.size"
>
&nbsp;
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
<div>
<div
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
@click="clickOnElem"
>
<CTitle
:imgbackground="myel.imgback"
:headtitle="myel.title"
:sizes="myel.size"
:styleadd="myel.styleadd"
>
</CTitle>
</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
<div>
<div
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
@click="clickOnElem"
>
<CImgTitle
v-if="myel.image"
:src="tools.getImgFileByElem(myel)"
:title="myel.container"
:legendinside="myel.container2"
>
</CImgTitle>
</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
>
<CImgPoster
v-if="myel.image"
:src="tools.getImgFileByElem(myel)"
:title="myel.container"
:myheight="myel.heightimg"
:vertalign="myel.vertalign"
:speed="myel.speed"
:elemsText="myel.elemsText"
:logo="tools.getImgFileByFilename(myel, myel.img)"
:logoheight="myel.height ? myel.height.toString() : '100'"
:logowidth="myel.width ? myel.width.toString() : '100'"
:fit="myel.fit"
:anim="myel.anim"
>
</CImgPoster>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
<div>
<div
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
@click="clickOnElem"
v-html="myel.containerHtml"
></div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
<div class="text-center">
<div
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
@click="clickOnElem"
>
<q-img
:src="tools.getImgFileByElem(myel.image)"
:fit="myel.fit"
class="img"
:width="myel.widthimg ? myel.widthimg : undefined"
:height="myel.heightimg ? myel.heightimg : undefined"
></q-img>
</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
<div class="text-center">
<div
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
@click="clickOnElem"
>
<q-img
:src="tools.getImgFileByElem(myel)"
:fit="myel.fit"
class="img"
:width="myel.widthimg ? myel.widthimg : undefined"
:height="myel.heightimg ? myel.heightimg : undefined"
></q-img>
</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
>
<q-video
v-if="myel && !!myel.container"
:src="myel.container"
:ratio="myel.ratio"
>
</q-video>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
>
<div v-if="editOn" style="color: gray">
Pagina: {{ myel.container }}
</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
>
<CMyPageIntro
:mypath="myel.container"
:maxheightimg="myel.heightimg"
:maxwidthimg="myel.widthimg"
:link="myel.link"
></CMyPageIntro>
</div>
</div>
<div
v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IDISCIPLINE"
>
<CCardCarousel :myarr="getArrDisciplines()"> </CCardCarousel>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.OPENSTREETMAP">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
>
<div v-if="myel.container">
<!-- Da Fare -->
<COpenStreetMap
:imgmap="myel.container"
:urlmap="myel.container2"
:title="myel.container3"
:coordinates="myel.containerHtml"
:coord_big="myel.link"
>
</COpenStreetMap>
</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
<section
:class="
($q.dark.isActive
? `bg-black text-white`
: `bg-white text-grey-10`) + ` padding_gallery text-center`
"
>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
>
<q-carousel
swipeable
animated
:autoplay="myel.container2 ? myel.container2 * 1000 : 8000"
v-model="slide2"
arrows
:fit="myel.fit"
:thumbnails="myel.parambool2"
infinite
:height="
myel.heightimg
? myel.heightimg.toString()
: tools.getheightgallery()
"
>
<q-carousel-slide
v-for="(rec, index) in myel.list"
:key="index"
:name="index"
:img-src="
getsrcbyimg(
costanti.DIR_UPLOAD +
`pages/` +
myel.path +
`/` +
rec.imagefile
)
"
:alt="rec.alt"
class="carousel_slide"
>
<div
v-if="myel.parambool"
class="absolute-bottom custom-caption"
style="margin-bottom: 70px"
>
<div class="text-h5">
<span class="text-h6 text-grey-1 shadow-max"
>{{ index + 1 }}.
</span>
<span v-if="rec.alt" class="text-h6 text-grey-2 shadow">{{
rec.alt
}}</span>
</div>
<div class="text-subtitle1" v-if="rec.description">
<span class="text-grey-4 shadow">{{
rec.description
}}</span>
</div>
</div>
</q-carousel-slide>
</q-carousel>
</div>
</section>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME">
<section>
<div class="landing">
<div class="landing__hero maxwidth1200 text-white">
<q-carousel
animated
:autoplay="animare"
swipeable
infinite
navigation
transition-next="slide-left"
transition-prev="slide-right"
v-model="slide"
:height="getheightgallery()"
width="100%"
>
<q-carousel-slide
v-for="(myrec, ind) in myel.list"
:key="ind"
:name="ind"
:img-src="getsrcbyimg(`images/` + myrec.imagefile)"
>
<div class="landing__header"></div>
<div
class="landing__hero-content row justify-center q-gutter-xs clgutter"
>
<div class="row">&nbsp;</div>
<div class="flex justify-end">
<div class="q-gutter-xs testo-banda clgutter">
<h1 class="text-h1 shadow-max">
{{ tools.getappname() }}
</h1>
<div class="text-subtitle1 shadow text-italic q-pl-sm">
{{ myel.container }}&nbsp;
</div>
<div
class="text-subtitle1 shadow-max big text-italic q-pl-sm"
>
{{ myel.container2 }}
</div>
<div class="text-subtitle2 shadow text-italic q-pl-sm">
{{ myel.container3 }}
</div>
<div>
<br /><br />
<div
v-if="!tools.isLogged()"
style="margin: 5px; padding: 5px"
class="home"
>
<br /><br />
</div>
</div>
</div>
</div>
</div>
<!--<div class="landing__arrow absolute-bottom text-center">
<i aria-hidden="true"
class="q-icon text-h2 text-white material-icons">expand_more</i>
</div>-->
</q-carousel-slide>
</q-carousel>
</div>
</div>
</section>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CALENDAR">
<div v-if="editOn" class="elemEdit">Calendario Eventi</div>
<CEventsCalendar :mysingleevent="null" :showfirstN="myel.number || 3">
</CEventsCalendar>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.MAINVIEW">
<div v-if="editOn" class="elemEdit">CMainView</div>
<CMainView></CMainView>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PROFILETUTORIAL">
<div v-if="editOn" class="elemEdit">CMyProFileTutorual</div>
<CMyProfileTutorial />
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKAPPRUNNING">
<div v-if="editOn" class="elemEdit">CheckAppRunning</div>
<CCheckAppRunning />
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.REGISTRATION">
<div v-if="editOn" class="elemEdit">Registrazione</div>
<div>
<CRegistration />
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.BUTTON">
<div v-if="editOn" class="elemEdit"></div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
>
<q-btn
class="text-center"
v-if="myel.container"
type="a"
rounded
:label="myel.container"
size=""
:color="myel.color"
:text-color="myel.containerHtml"
:icon="myel.container2"
:href="myel.link"
:target="myel.container3"
>
</q-btn>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.DASHBOARD">
<div v-if="editOn" class="elemEdit">CDashboard</div>
<CDashboard></CDashboard>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.DASHGROUP">
<div v-if="editOn" class="elemEdit">CDashGroup</div>
<CDashGroup></CDashGroup>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.MOVEMENTS">
<div v-if="editOn" class="elemEdit">Lista Movimenti</div>
<CMovements :showbuttolastmov="true"></CMovements>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CSENDRISTO">
<div v-if="editOn" class="elemEdit">CSendRISTo</div>
<CSendRISTo></CSendRISTo>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.GRID_ORIZ">
<div v-if="editOn" class="elemEdit">Griglia Orizzontale</div>
<CGridOriz
:table="myel.container"
:tipovisu="myel.number"
:prop_search="myel.parambool"
:finder="myel.parambool2"
:showMap="myel.parambool3"
></CGridOriz>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.STATUSREG">
<div v-if="editOn" class="elemEdit">CStatusReg</div>
<CStatusReg> </CStatusReg>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKIFISLOGGED">
<div v-if="editOn" class="elemEdit">CCheckIfIsLogged</div>
<CCheckIfIsLogged :showalways="myel.container"></CCheckIfIsLogged>
</div>
<div
v-else-if="myel.type === shared_consts.ELEMTYPE.VISUVIDEOPROMOANDPDF"
>
<div v-if="editOn" class="elemEdit">Visu Video Promo and PDF</div>
<CVisuVideoPromoAndPDF
:showalways="myel.container"
></CVisuVideoPromoAndPDF>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.INFO_VERSION">
<div>Versione: {{ tools.getvers() }}</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.BOTT_CONDIVIDI">
<div class="row justify-evenly items-center q-pa-sm q-ma-sm">
<q-btn
icon="fas fa-share"
text-color="blue"
type="a"
size="md"
color="yellow"
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
rounded
:label="$t('reg.link_reg_and_msg')"
@click="clickshare"
>
</q-btn>
</div>
</div>
<div
v-else-if="myel.type === shared_consts.ELEMTYPE.BOTT_CHAT_TERRITORIALE"
>
<div v-if="editOn" class="elemEdit">Bottone Chat Territoriale</div>
<div class="row justify-evenly items-center">
<q-btn
v-if="tools.getLinkChatTerritoriale()"
icon="fab fa-telegram"
color="blue"
type="a"
size="md"
rounded
:label="
$t('dashboard.link_gruppo_telegram', {
prov: tools.getProvincia(),
})
"
:href="tools.getLinkChatTerritoriale()"
target="__blank"
>
</q-btn>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECK_EMAIL">
<div v-if="editOn" class="elemEdit">
Msg di Controllo Verifica Email
</div>
<div class="q-pa-xs q-gutter-md">
<div
v-if="tools.isLogged() && !tools.isVerified()"
class="text-verified"
>
{{ $t('components.authentication.email_verification.link_sent') }}
</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PRESENTAZIONE">
<div v-if="editOn" class="elemEdit">Pagina di Presentazione</div>
<CPresentazione></CPresentazione>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.MYACTIVITIES">
<div v-if="editOn" class="elemEdit">Pagina Attività</div>
<CMyActivities></CMyActivities>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.ECOMMERCE">
<div v-if="editOn" class="elemEdit">PRODOTTI ECOMMERCE:</div>
<CECommerce></CECommerce>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CATALOGO">
<div v-if="editOn" class="elemEdit">PRODOTTI CATALOGO:</div>
<CCatalogo :optcatalogo="myel.catalogo"> </CCatalogo>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPA">
<div v-if="editOn" class="elemEdit">MAPPA:</div>
<!--<CMapMarker :coord_center="{lat: 47.41322, long: -1.219482}"
></CMapMarker>-->
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPAUTENTI">
<div v-if="editOn" class="elemEdit">MAPPA UTENTI:</div>
<CMapUsers></CMapUsers>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPAGETCOORDINATE">
<div v-if="editOn" class="elemEdit">MAPPA COORDINATE:</div>
<CMapGetCoordinates></CMapGetCoordinates>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.EDITADDRESSBYCOORD">
<div v-if="editOn" class="elemEdit">EDIT ADDRESS BY COORD:</div>
<CMapEditAddressByCoord
:editaddress="true"
v-model:model-value="coordaddr"
></CMapEditAddressByCoord>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.MAPPACOMUNI">
<div v-if="editOn" class="elemEdit">MAPPA COMUNI:</div>
<CMapComuni></CMapComuni>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.TOOLSAI">
<div v-if="editOn" class="elemEdit">STRUMENTI AI:</div>
<CAITools></CAITools>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.NOTIFATTOP">
<div v-if="editOn" class="elemEdit">Notifiche in Cima</div>
<CNotifAtTop></CNotifAtTop>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKTESTENV">
<div v-if="editOn" class="elemEdit">Check Sito di Test</div>
<q-banner
v-if="tools.isTest() && false"
rounded
dense
class="bg-negative text-white"
color="primary q-title"
style="text-align: center"
>
<template v-slot:avatar>
<q-icon
name="fas fa-exclamation-triangle"
color="yellow"
size="xs"
/>
</template>
<span class="mybanner"> TEST !</span>
</q-banner>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKNEWVERSION">
<div v-if="editOn" class="elemEdit">Controllo Nuova Versione</div>
<q-banner
v-if="globalStore.isNewVersionAvailable"
rounded
dense
class="bg-green text-white"
color="primary q-title"
style="text-align: center"
>
<template v-slot:avatar>
<q-icon
name="fas fa-exclamation-triangle"
color="yellow"
size="xs"
/>
</template>
<div v-if="$q.platform.is.ios">
<span class="mybanner"
>Chiudere e Riaprire la App, per completare l'Aggiornamento</span
>
</div>
<div v-else>
<span class="mybanner"
>Aggiornamento APP in corso ... Se dopo 1 minuto non dovesse
scomparire questo messaggio, chiudere e riaprire la pagina.</span
>
</div>
</q-banner>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.BTN_REG">
<q-btn
rounded
size="md"
color="primary"
:to="`/registrati/${tools.getInvitante()}`"
:label="$t('reg.submit')"
>
</q-btn>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.BTN_REG_BYBOT">
<q-btn
type="a"
rounded
size="lg"
color="primary"
href="/bot"
:label="$t('reg.submit')"
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
>
</q-btn>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.BTN_LOGIN">
<q-btn
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
rounded
size="lg"
color="primary"
@click="PagLogin"
>
{{ $t('login.enter') }}
</q-btn>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CHART">
<div v-if="editOn">Chart</div>
<!--<CChartMap
title="Mappa"
subtitle="cartina..."
serie1="Serie 1"
>
</CChartMap>-->
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER">
<LandingFooter />
</div>
<div v-if="editOn">
<div class="q-ma-md"></div>
</div>
</div>
</div>
<q-dialog
v-model="visushare"
transition-show="slide-up"
transition-hide="slide-down"
:maximized="$q.screen.lt.sm"
>
<CShareSocial
v-if="social && social.description"
:description="social.description"
:title="social.title"
:url="social.url"
>
</CShareSocial>
</q-dialog>
</template>
<script lang="ts" src="./CMyElem.ts">
</script>
<style lang="scss" scoped>
@import './CMyElem.scss';
</style>