499 lines
15 KiB
Vue
Executable File
499 lines
15 KiB
Vue
Executable File
<template>
|
|
<div v-if="myel"
|
|
:class="(editOn ? ` clEditDiv` : ``) + `` + (!myel.active ? ` clEditNotActive` : ``)"
|
|
>
|
|
<q-bar v-if="enableEdit" dense class="bg-blue-1 text-white q-px-sm">
|
|
<q-toggle
|
|
v-model="myel.active"
|
|
color="positive"
|
|
icon="fas fa-eye"
|
|
>
|
|
</q-toggle>
|
|
<q-toggle
|
|
v-model="enableEdit"
|
|
icon="fas fa-pencil-alt"
|
|
>
|
|
</q-toggle>
|
|
<!--<q-toggle v-if="tools.isManager()"
|
|
v-model="enableAdd"
|
|
icon="fas fa-plus"
|
|
</q-toggle>
|
|
>-->
|
|
|
|
<q-input
|
|
style="max-width: 60px"
|
|
hide-bottom-space
|
|
borderless
|
|
dense
|
|
@update:model-value="modifElem"
|
|
v-model="neworder"
|
|
v-on:keyup.enter="saveElem(false)"
|
|
type="number"
|
|
>
|
|
</q-input>
|
|
<q-space/>
|
|
<q-btn
|
|
icon="fas fa-trash-alt"
|
|
color="negative"
|
|
dense
|
|
flat
|
|
size="sm"
|
|
@click="delElem">
|
|
</q-btn>
|
|
|
|
<q-select v-if="enableAdd"
|
|
v-model="newtype"
|
|
dense
|
|
style="width: 150px;"
|
|
:options="shared_consts.TypesElem"
|
|
emit-value map-options>
|
|
|
|
</q-select>
|
|
<q-btn
|
|
v-if="enableAdd"
|
|
size="sm"
|
|
dense
|
|
flat
|
|
icon="fas fa-plus"
|
|
color="positive"
|
|
@click="addNewElem(myelem.order-10)">
|
|
</q-btn>
|
|
|
|
</q-bar>
|
|
<div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
|
|
<div v-if="enableEdit">
|
|
<q-input
|
|
class="fa-border"
|
|
@update:model-value="modifElem"
|
|
v-model="myel.container"
|
|
filled
|
|
v-on:keyup.enter="saveElem"
|
|
>
|
|
|
|
</q-input>
|
|
|
|
</div>
|
|
<div
|
|
:class="myel.class + (editOn ? ` clEdit` : ``)"
|
|
@click="clickOnElem">{{ myel.container }}
|
|
|
|
</div>
|
|
</div>
|
|
<div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
|
|
<div v-if="enableEdit">
|
|
<q-input
|
|
label="Margine:"
|
|
class="fa-border"
|
|
@update:model-value="modifElem"
|
|
v-model="myel.size"
|
|
filled
|
|
v-on:keyup.enter="saveElem"
|
|
>
|
|
</q-input>
|
|
|
|
</div>
|
|
<div
|
|
:class="myel.class + (editOn ? ` clEdit` : ``)"
|
|
@click="clickOnElem"
|
|
:style="`margin: ` + myel.size">
|
|
</div>
|
|
</div>
|
|
<div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
|
|
<div v-if="enableEdit">
|
|
<q-input
|
|
class="fa-border"
|
|
@update:model-value="modifElem"
|
|
v-model="myel.title"
|
|
filled
|
|
v-on:keyup.enter="saveElem"
|
|
>
|
|
</q-input>
|
|
|
|
</div>
|
|
<div>
|
|
<div
|
|
:class="myel.class + (editOn ? ` clEdit` : ``)"
|
|
@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 v-if="enableEdit">
|
|
<q-input
|
|
label="Img"
|
|
class="fa-border"
|
|
@update:model-value="modifElem"
|
|
v-model="myel.container"
|
|
filled
|
|
v-on:keyup.enter="saveElem(false)"
|
|
>
|
|
</q-input>
|
|
<q-input
|
|
label="Title"
|
|
class="fa-border"
|
|
@update:model-value="modifElem"
|
|
v-model="myel.container"
|
|
filled
|
|
v-on:keyup.enter="saveElem"
|
|
>
|
|
</q-input>
|
|
|
|
</div>
|
|
<div>
|
|
<div :class="myel.class + (editOn ? ` clEdit` : ``)"
|
|
@click="clickOnElem">
|
|
<CImgTitle v-if="myel.container" :src="myel.container" :title="myel.title">
|
|
</CImgTitle>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
|
|
<div v-if="enableEdit">
|
|
<q-input
|
|
label="Classe:"
|
|
@update:model-value="modifElem"
|
|
v-model="myel.class"
|
|
filled
|
|
v-on:keyup.enter="saveElem"
|
|
>
|
|
</q-input>
|
|
<CMyEditor
|
|
v-model:value="myel.containerHtml" title="" @keyup.enter.stop
|
|
:showButtons="false"
|
|
:canModify="true"
|
|
@update:value="modifElem"
|
|
@showandsave="saveElem"
|
|
>
|
|
</CMyEditor>
|
|
|
|
</div>
|
|
<div>
|
|
<div :class="myel.class + (editOn ? ` clEdit` : ``)"
|
|
@click="clickOnElem"
|
|
v-html="myel.containerHtml"></div>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
|
|
<div v-if="enableEdit">
|
|
<q-input
|
|
label="NomeFile Img:"
|
|
@update:model-value="modifElem"
|
|
v-model="myel.container"
|
|
filled
|
|
v-on:keyup.enter="saveElem"
|
|
>
|
|
</q-input>
|
|
<div class="row">
|
|
<q-input
|
|
label="Width:"
|
|
type="number"
|
|
@update:model-value="modifElem"
|
|
v-model="myel.width"
|
|
filled
|
|
v-on:keyup.enter="saveElem"
|
|
>
|
|
</q-input>
|
|
<q-input
|
|
label="Height:"
|
|
type="number"
|
|
@update:model-value="modifElem"
|
|
v-model="myel.height"
|
|
filled
|
|
v-on:keyup.enter="saveElem"
|
|
>
|
|
</q-input>
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div :class="myel.class + (editOn ? ` clEdit` : ``)"
|
|
@click="clickOnElem">
|
|
<q-img :src="myel.container" class="img" :width="myel.width.toString()" :height="myel.height.toString()"></q-img>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
|
|
<div v-if="enableEdit" class="row">
|
|
<q-input
|
|
label="NomeFile Video:"
|
|
@update:model-value="modifElem"
|
|
v-model="myel.container"
|
|
filled
|
|
v-on:keyup.enter="saveElem"
|
|
>
|
|
</q-input>
|
|
<q-input
|
|
label="Ratio:"
|
|
type="number"
|
|
@update:model-value="modifElem"
|
|
v-model="myel.ratio"
|
|
filled
|
|
v-on:keyup.enter="saveElem"
|
|
>
|
|
</q-input>
|
|
</div>
|
|
<div :class="myel.class + (editOn ? ` clEdit` : ``)"
|
|
@click="clickOnElem">
|
|
<q-video v-if="!!rec.container" :src="rec.container" :ratio="rec.ratio">
|
|
</q-video>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER">
|
|
<LandingFooter></LandingFooter>
|
|
</div>
|
|
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
|
|
<div v-if="enableEdit" class="row">
|
|
<q-input
|
|
label="Importa Pagina:"
|
|
@update:model-value="modifElem"
|
|
v-model="myel.container"
|
|
filled
|
|
v-on:keyup.enter="saveElem"
|
|
>
|
|
</q-input>
|
|
</div>
|
|
<div :class="myel.class + (editOn ? ` clEdit` : ``)"
|
|
@click="clickOnElem">
|
|
<CMyPage :mypath="myel.container"> </CMyPage>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
|
|
<div v-if="enableEdit" class="row">
|
|
<q-input
|
|
label="NomeFile Img:"
|
|
@update:model-value="modifElem"
|
|
v-model="myel.container"
|
|
filled
|
|
v-on:keyup.enter="saveElem"
|
|
>
|
|
</q-input>
|
|
<q-input
|
|
label="Width:"
|
|
type="number"
|
|
@update:model-value="modifElem"
|
|
v-model="myel.widthimg"
|
|
filled
|
|
v-on:keyup.enter="saveElem"
|
|
>
|
|
</q-input>
|
|
<q-input
|
|
label="Height:"
|
|
type="number"
|
|
@update:model-value="modifElem"
|
|
v-model="myel.heightimg"
|
|
filled
|
|
v-on:keyup.enter="saveElem"
|
|
>
|
|
</q-input>
|
|
<q-input
|
|
label="Link:"
|
|
@update:model-value="modifElem"
|
|
v-model="myel.link"
|
|
filled
|
|
v-on:keyup.enter="saveElem"
|
|
>
|
|
</q-input>
|
|
</div>
|
|
<div :class="myel.class + (editOn ? ` clEdit` : ``)"
|
|
@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">
|
|
<!-- Da Fare -->
|
|
<COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
|
|
:coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
|
|
|
|
</COpenStreetMap>
|
|
</div>
|
|
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
|
|
<section class="maxwidth padding_gallery bg-white text-grey-10 text-center">
|
|
|
|
<div v-if="enableEdit" class="row">
|
|
<CMyFieldRec
|
|
title="Lista Immagini:"
|
|
table="myelems"
|
|
:id="myel._id"
|
|
:rec="myel"
|
|
field="list"
|
|
@update:model-value="modifElem"
|
|
:canEdit="true"
|
|
:canModify="true">
|
|
</CMyFieldRec>
|
|
|
|
<q-input
|
|
label="Secondi tra un'immagine e l'altra:"
|
|
@update:model-value="modifElem"
|
|
v-model="myel.container2"
|
|
type="number"
|
|
filled
|
|
v-on:keyup.enter="saveElem"
|
|
>
|
|
</q-input>
|
|
<q-toggle
|
|
label="Sottotitoli"
|
|
v-model="myel.parambool"
|
|
color="positive"
|
|
icon="fas fa-eye"
|
|
>
|
|
</q-toggle>
|
|
|
|
<q-toggle
|
|
label="Miniature"
|
|
v-model="myel.parambool2"
|
|
color="positive"
|
|
icon="fas fa-eye"
|
|
>
|
|
</q-toggle>
|
|
|
|
</div>
|
|
<div :class="myel.class + (editOn ? ` clEdit` : ``)"
|
|
@click="clickOnElem">
|
|
|
|
<q-carousel
|
|
swipeable
|
|
animated
|
|
:autoplay="myel.container2 ? (myel.container2 * 1000) : 8000"
|
|
v-model="slide2"
|
|
arrows
|
|
:thumbnails="myel.parambool2"
|
|
infinite
|
|
:height="myel.height ? myel.height.toString() : 600">
|
|
<q-carousel-slide v-for="(rec, index) in myel.list" :key="index" :name="index"
|
|
:img-src="getsrcbyimg(`upload/pages/`+ 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">
|
|
|
|
</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 }}
|
|
</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="enableEdit" class="row">
|
|
<q-input
|
|
label="Visualizza ultimi N eventi:"
|
|
@update:model-value="modifElem"
|
|
v-model="myel.number"
|
|
filled
|
|
v-on:keyup.enter="saveElem"
|
|
>
|
|
</q-input>
|
|
</div>
|
|
|
|
<CEventsCalendar :mysingleevent="null" :showfirstN="myel.number || 3">
|
|
</CEventsCalendar>
|
|
</div>
|
|
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECK_EMAIL">
|
|
<div class="q-pa-md q-gutter-md">
|
|
<div v-if="tools.isLogged() && !isVerified" class="text-verified">{{
|
|
$t('components.authentication.email_verification.link_sent')
|
|
}}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="justify-center q-gutter-xs row">
|
|
<q-btn
|
|
v-if="enableEdit && !disableSave"
|
|
icon="fas fa-check"
|
|
color="positive"
|
|
label="Applica"
|
|
size="sm"
|
|
:disable="disableSave"
|
|
@click="saveElem">
|
|
</q-btn>
|
|
<q-btn
|
|
v-if="enableEdit && !disableSave"
|
|
icon="fas fa-check"
|
|
color="positive"
|
|
label="Salva"
|
|
size="sm"
|
|
:disable="disableSave"
|
|
@click="saveElem(true)">
|
|
</q-btn>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" src="./CMyElem.ts">
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import './CMyElem.scss';
|
|
</style>
|