539 lines
18 KiB
Vue
Executable File
539 lines
18 KiB
Vue
Executable File
<template>
|
|
<div>
|
|
<div v-if="mypathin && !!rec">
|
|
<q-inner-loading
|
|
id="spinner"
|
|
:showing="onloading"
|
|
>
|
|
<q-spinner-tail
|
|
color="primary"
|
|
size="4em"
|
|
>
|
|
</q-spinner-tail>
|
|
</q-inner-loading>
|
|
|
|
<div v-if="!onloading">
|
|
<q-toggle
|
|
v-if="tools.isManager()"
|
|
v-model="editOn"
|
|
dense
|
|
color="green"
|
|
size="sm"
|
|
@update:model-value="changeVisuDrawer(mypathin, editOn)"
|
|
icon="fas fa-pencil-alt"
|
|
>
|
|
</q-toggle>
|
|
|
|
<q-drawer
|
|
v-model="visuEditor"
|
|
v-if="selElem && editOn && !tools.isObjectEmpty(selElem)"
|
|
show-if-above
|
|
:breakpoint="350"
|
|
side="right"
|
|
:width="tools.isMobile() ? 350 : mywidthEditor"
|
|
elevated
|
|
style="transition: 'width 0.3s ease'"
|
|
>
|
|
<q-bar
|
|
dense
|
|
class="q-ma-xs bg-primary text-white"
|
|
>
|
|
<q-toolbar-title> Editor </q-toolbar-title>
|
|
<q-btn
|
|
flat
|
|
round
|
|
size="md"
|
|
color="white"
|
|
icon="close"
|
|
@click="
|
|
visuEditor = false;
|
|
selElem = {};
|
|
"
|
|
></q-btn>
|
|
</q-bar>
|
|
|
|
<CMyEditElem
|
|
:myelem="selElem"
|
|
:editOn="true"
|
|
:path="rec.path"
|
|
:idPage="rec._id"
|
|
@selElemClick="selElemClick"
|
|
@deleteElem="deleteElem"
|
|
@toggleSize="toggleSize"
|
|
@dupPage="duplicatePage"
|
|
@expPage="showexportPage = !showexportPage"
|
|
@impPage="showimportPage = !showimportPage"
|
|
>
|
|
</CMyEditElem>
|
|
</q-drawer>
|
|
|
|
<div
|
|
:class="{ 'q-gutter-xs': !hideHeader }"
|
|
:style="[
|
|
{
|
|
'margin-left': hideHeader ? 0 : 1 + 'px',
|
|
'margin-right': hideHeader ? 0 : 1 + 'px',
|
|
},
|
|
]"
|
|
>
|
|
<div
|
|
v-if="!!rec.img1"
|
|
class="text-center"
|
|
>
|
|
<q-img
|
|
:src="`` + rec.img1"
|
|
class="img"
|
|
></q-img>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!!rec.content"
|
|
v-html="rec.content"
|
|
></div>
|
|
<q-video
|
|
v-if="!!rec.video1"
|
|
:src="rec.video1"
|
|
:ratio="rec.ratio1"
|
|
>
|
|
</q-video>
|
|
|
|
<div
|
|
v-if="!!rec.img2"
|
|
class="text-center"
|
|
>
|
|
<q-img
|
|
:src="`` + rec.img2"
|
|
class="img"
|
|
></q-img>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!!rec.content2"
|
|
v-html="rec.content2"
|
|
></div>
|
|
<q-video
|
|
v-if="!!rec.video2"
|
|
:src="rec.video2"
|
|
:ratio="rec.ratio2"
|
|
></q-video>
|
|
|
|
<div
|
|
v-if="!!rec.img3"
|
|
class="text-center"
|
|
>
|
|
<q-img
|
|
:src="`` + rec.img2"
|
|
class="img"
|
|
></q-img>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!!rec.content3"
|
|
v-html="rec.content3"
|
|
></div>
|
|
<q-video
|
|
v-if="!!rec.video3"
|
|
:src="rec.video3"
|
|
:ratio="rec.ratio3"
|
|
></q-video>
|
|
<div
|
|
v-if="!!rec.content4"
|
|
v-html="rec.content4"
|
|
></div>
|
|
|
|
<div
|
|
v-for="myelem in myelems"
|
|
:key="myelem._id"
|
|
>
|
|
<div>
|
|
<transition
|
|
:duration="1000"
|
|
appear
|
|
>
|
|
<div>
|
|
<CTitleBanner
|
|
v-if="(myelem.active || editOn) && !!rec.path && myelem.titleBanner"
|
|
:class="`q-pa-xs`"
|
|
:title="myelem.titleBanner"
|
|
bgcolor="bg-primary"
|
|
:clcolor="myelem.color ? `` : `text-white`"
|
|
:mystyle="myelem.color ? `color: ${myelem.color} !important;` : ``"
|
|
:myclass="myelem.classBanner"
|
|
:canopen="true"
|
|
>
|
|
</CTitleBanner>
|
|
|
|
<!-- Sezione -->
|
|
<div v-if="myelem.type === shared_consts.ELEMTYPE.SECTION">
|
|
<div
|
|
v-if="editOn"
|
|
class="text-center"
|
|
>
|
|
<div v-if="editOn">SEZIONE:</div>
|
|
</div>
|
|
|
|
<CMyElem
|
|
:myelem="myelem"
|
|
:idPage="rec._id"
|
|
:editOn="editOn"
|
|
:addOn="addOn"
|
|
:path="!!rec.path ? rec.path : ''"
|
|
:selElem="selElem"
|
|
@selElemClick="selElemClick"
|
|
>
|
|
<!-- Rendering righe dentro la sezione -->
|
|
<div
|
|
v-for="(row, indriga) in myelem.rows"
|
|
:key="row._id"
|
|
class="row-container"
|
|
>
|
|
<div
|
|
v-if="editOn"
|
|
class="text-center q-mb-md"
|
|
>
|
|
<q-btn
|
|
v-if="editOn"
|
|
dense
|
|
rounded
|
|
label="Riga"
|
|
size="sm"
|
|
color="positive"
|
|
icon="add"
|
|
@click="
|
|
addNewElemSectRow(
|
|
myelem.order + 1,
|
|
myelem,
|
|
shared_consts.ELEMTYPE.ROW,
|
|
row._id
|
|
)
|
|
"
|
|
>
|
|
<q-tooltip> Aggiungi Riga </q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
|
|
<div v-if="row.type === shared_consts.ELEMTYPE.ROW">
|
|
<div
|
|
v-if="editOn"
|
|
class="text-center"
|
|
>
|
|
<div v-if="editOn">RIGA {{ indriga + 1 }}:</div>
|
|
</div>
|
|
<CMyElem
|
|
:myelem="row"
|
|
:idPage="rec._id"
|
|
:editOn="editOn"
|
|
:addOn="addOn"
|
|
:path="!!rec.path ? rec.path : ''"
|
|
:selElem="selElem"
|
|
@selElemClick="selElemClick"
|
|
>
|
|
<!-- Rendering colonne dentro la riga -->
|
|
<div class="row q-col-gutter-md items-stretch">
|
|
<template
|
|
v-for="(col, index) in row.columns"
|
|
:key="col._id"
|
|
>
|
|
<div
|
|
v-if="col.type === shared_consts.ELEMTYPE.COLUMN"
|
|
:class="getColClasses(col, row, index)"
|
|
>
|
|
<div
|
|
:style="editOn ? `border: 2px dashed #1976d2` : ``"
|
|
>
|
|
<div
|
|
v-if="editOn"
|
|
class="text-center"
|
|
>
|
|
Colonna {{ index + 1 }}:
|
|
</div>
|
|
<div
|
|
v-for="el in col.elems"
|
|
:key="el._id"
|
|
>
|
|
<CMyElem
|
|
:myelem="el"
|
|
:idPage="rec._id"
|
|
:editOn="editOn"
|
|
:addOn="addOn"
|
|
:path="!!rec.path ? rec.path : ''"
|
|
:selElem="selElem"
|
|
@selElemClick="selElemClick"
|
|
/>
|
|
<div class="text-center q-mb-md">
|
|
<q-btn
|
|
v-if="editOn"
|
|
dense
|
|
rounded
|
|
size="sm"
|
|
color="negative"
|
|
icon="delete"
|
|
@click="deleteElemento(el)"
|
|
>
|
|
<q-tooltip> Elimina Elemento </q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center q-mb-md">
|
|
<q-btn
|
|
v-if="editOn"
|
|
dense
|
|
rounded
|
|
size="sm"
|
|
color="positive"
|
|
icon="add"
|
|
@click="
|
|
visuadd = true;
|
|
myElemSel = col;
|
|
myElemParent = myelem;
|
|
"
|
|
>
|
|
<q-tooltip> Aggiungi Elemento </q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
|
|
<div class="text-center q-mb-md">
|
|
<q-btn
|
|
v-if="editOn"
|
|
dense
|
|
rounded
|
|
size="sm"
|
|
label="Colonna"
|
|
color="negative"
|
|
icon="delete"
|
|
@click="deleteCol(col)"
|
|
>
|
|
<q-tooltip> Elimina Colonna </q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</CMyElem>
|
|
|
|
<div
|
|
v-if="editOn"
|
|
class="text-center q-mb-md"
|
|
>
|
|
<q-btn
|
|
v-if="editOn"
|
|
dense
|
|
rounded
|
|
size="sm"
|
|
label="Colonna"
|
|
color="primary"
|
|
icon="add"
|
|
@click="
|
|
addNewElemSectRow(
|
|
row.order + 1,
|
|
row,
|
|
shared_consts.ELEMTYPE.COLUMN
|
|
)
|
|
"
|
|
>
|
|
<q-tooltip> Aggiungi Colonna </q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
<div class="text-center q-mb-md">
|
|
<q-btn
|
|
v-if="editOn"
|
|
dense
|
|
rounded
|
|
size="sm"
|
|
label="Riga"
|
|
color="negative"
|
|
icon="delete"
|
|
@click="deleteRow(row)"
|
|
>
|
|
<q-tooltip> Elimina Riga </q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="editOn"
|
|
class="text-center q-mb-md"
|
|
>
|
|
<q-btn
|
|
v-if="editOn"
|
|
dense
|
|
rounded
|
|
label="Riga"
|
|
size="sm"
|
|
color="positive"
|
|
icon="add"
|
|
@click="
|
|
addNewElemSectRow(
|
|
myelem.order + 1,
|
|
myelem,
|
|
shared_consts.ELEMTYPE.ROW
|
|
)
|
|
"
|
|
>
|
|
<q-tooltip> Aggiungi Riga </q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</CMyElem>
|
|
</div>
|
|
|
|
<!-- Elementi senza Sezione (retrocompatibilità) -->
|
|
<div v-if="myelem.type !== shared_consts.ELEMTYPE.SECTION">
|
|
<CMyElem
|
|
:myelem="myelem"
|
|
:idPage="rec._id"
|
|
:editOn="editOn"
|
|
:addOn="addOn"
|
|
:path="!!rec.path ? rec.path : ''"
|
|
:selElem="selElem"
|
|
@selElemClick="selElemClick"
|
|
/>
|
|
</div>
|
|
|
|
<div class="text-center q-mb-md">
|
|
<q-btn
|
|
v-if="editOn"
|
|
dense
|
|
rounded
|
|
size="sm"
|
|
color="positive"
|
|
icon="add"
|
|
@click="
|
|
visuadd = true;
|
|
myElemSel =
|
|
myelems.length > 0 ? myelems[myelems.length - 1] : null;
|
|
myElemParent =
|
|
myelems.length > 0 ? myelems[myelems.length - 1] : null;
|
|
"
|
|
>
|
|
<q-tooltip> Aggiungi Elemento </q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="myelems.length === 0">
|
|
<CMyElem
|
|
v-if="editOn && !!rec.path"
|
|
:myelem="myelemVoid"
|
|
:editOn="editOn"
|
|
:addOn="addOn"
|
|
:idPage="rec._id"
|
|
:selElem="selElem"
|
|
:path="rec.path"
|
|
@selElemClick="selElemClick"
|
|
>
|
|
</CMyElem>
|
|
</div>
|
|
</div>
|
|
<LandingFooter v-if="rec.showFooter"></LandingFooter>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div v-if="!!title">
|
|
<CTitle
|
|
v-if="imgbackground"
|
|
:imgbackground="imgbackground"
|
|
:headtitle="title"
|
|
:sizes="sizes"
|
|
:styleadd="styleadd"
|
|
></CTitle>
|
|
<div v-if="!imgbackground">
|
|
<CImgTitle
|
|
v-if="img"
|
|
:src="img"
|
|
:title="title"
|
|
>
|
|
</CImgTitle>
|
|
</div>
|
|
<slot></slot>
|
|
<div v-if="!nofooter"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<q-dialog v-model="showexportPage">
|
|
<q-card class="dialog_card">
|
|
<q-toolbar class="bg-primary text-white">
|
|
<q-toolbar-title> Esporta Pagina </q-toolbar-title>
|
|
<q-btn
|
|
flat
|
|
round
|
|
color="white"
|
|
icon="close"
|
|
v-close-popup
|
|
></q-btn>
|
|
</q-toolbar>
|
|
<q-card-section class="q-pa-xs inset-shadow">
|
|
<br />
|
|
<CExportImportPage
|
|
:idPage="rec._id"
|
|
:nomefileprop="`esporta_${rec.path}.json`"
|
|
:esporta="true"
|
|
>
|
|
</CExportImportPage>
|
|
<br />
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
<q-dialog v-model="showimportPage">
|
|
<q-card class="dialog_card">
|
|
<q-toolbar class="bg-primary text-white">
|
|
<q-toolbar-title> Esporta Pagina </q-toolbar-title>
|
|
<q-btn
|
|
flat
|
|
round
|
|
color="white"
|
|
icon="close"
|
|
v-close-popup
|
|
></q-btn>
|
|
</q-toolbar>
|
|
<q-card-section class="q-pa-xs inset-shadow">
|
|
<br />
|
|
<CExportImportPage
|
|
:idPage="rec._id"
|
|
:nomefileprop="`esporta_${rec.path}.json`"
|
|
>
|
|
</CExportImportPage>
|
|
<br />
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
<div>
|
|
<q-dialog
|
|
v-model="visuadd"
|
|
style="
|
|
width: 600px;
|
|
max-width: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
"
|
|
transition-show="slide-up"
|
|
transition-hide="slide-down"
|
|
>
|
|
<CMyElemAdd
|
|
v-if="visuadd"
|
|
:myelem="myElemSel"
|
|
:myElemParent="myElemParent"
|
|
:idPage="rec._id"
|
|
:editOn="editOn"
|
|
:addOn="addOn"
|
|
:addonlyinMem="true"
|
|
@AddedNewElem="AddedNewElem"
|
|
@close="visuadd = false"
|
|
>
|
|
</CMyElemAdd>
|
|
</q-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" src="./CMyPageElem.ts"></script>
|
|
<style lang="scss" scoped>
|
|
@import './CMyPageElem.scss';
|
|
</style>
|