Files
salvato.newfreeplanet/src/components/CMyEditElem/CMyEditElem.vue
2023-01-12 01:03:19 +01:00

1080 lines
30 KiB
Vue
Executable File

<template>
<div
v-if="myel"
:class="
(editOn ? ` clEditDiv` : ``) +
`` +
(!myel.active ? ` clEditNotActive` : ``)
"
>
<div v-if="!!myel.type">
<div class="column">
<q-btn
v-if="enableAdd"
label="Aggiungi"
icon="fas fa-plus"
color="primary"
@click="visuadd = true"
>
</q-btn>
</div>
<q-bar v-if="enableEdit" dense class="q-px-sm">
<q-toggle v-model="myel.active" color="positive" icon="fas fa-eye">
</q-toggle>
<!--<q-toggle v-if="tools.isManager()"
v-model="enableAdd"
icon="fas fa-plus"
</q-toggle>
>-->
&nbsp;
<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-btn
icon="far fa-copy"
color="primary"
dense
flat
size="sm"
@click="dupElem(myel.order + 10)"
>
</q-btn>
</q-bar>
<div class="justify-center row q-ma-xs">
<q-btn
dense
v-if="enableEdit && !disableSave"
icon="fas fa-check"
color="positive"
label="Applica"
size="sm"
:disable="disableSave"
@click="saveElem"
>
</q-btn>
<q-btn
dense
v-if="enableEdit && !disableSave"
icon="fas fa-check"
color="positive"
label="Salva"
size="sm"
:disable="disableSave"
@click="saveElem(true)"
>
</q-btn>
</div>
<div class="row">
<q-input
label="Lunghezza:"
@update:model-value="modifElem"
style="width: 100px"
v-model="myel.widthimg"
filled
dense
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
label="Altezza:"
@update:model-value="modifElem"
style="width: 100px"
v-model="myel.heightimg"
filled
dense
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
<div class="row">
<q-select
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
v-if="enableEdit"
rounded
outlined
v-model="myel.align"
:options="tools.SelectListAlign"
@update:model-value="modifElem"
dense
label="Allinea"
style="width: 100px"
emit-value
map-options
>
</q-select>
<q-select
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
v-if="enableEdit"
rounded
outlined
v-model="myel.vertalign"
:options="tools.SelectListVertAlign"
@update:model-value="modifElem"
dense
label="Vert Allinea"
style="min-width: 150px"
emit-value
map-options
>
</q-select>
<q-select
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
v-if="enableEdit"
rounded
style="min-width: 150px"
outlined
v-model="myel.class"
:options="tools.SelectListClass"
@update:model-value="modifElem"
dense
label="Classe"
emit-value
map-options
>
</q-select>
<q-select
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
v-if="enableEdit && showFit"
rounded
style="width: 100px"
outlined
v-model="myel.fit"
:options="tools.SelectListFit"
@update:model-value="modifElem"
dense
label="Adatta:"
emit-value
map-options
>
</q-select>
</div>
<div class="row">
<q-input
dense
label="Classe:"
@update:model-value="modifElem"
v-model="myel.class2"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
<CSelectAnimation
v-if="enableEdit && showAnimation"
v-model="myel.anim"
@update:model-value="modifElem"
>
</CSelectAnimation>
<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"
dense
filled
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
</div>
<div
v-if="myel.type === shared_consts.ELEMTYPE.CARD"
:class="myel.span ? '' : ''"
>
<CSelectAnimation
v-if="enableEdit && showAnimation"
v-model="myel.anim2"
@update:model-value="modifElem"
label="Animazione Immagini"
>
</CSelectAnimation>
<div class="row">
<q-input
dense
label="Classe Schede:"
@update:model-value="modifElem"
v-model="myel.class3"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
<q-btn
rounded
dense
color="primary"
label="Scheda"
icon="fas fa-plus"
@click="addNewCard"
>
</q-btn>
<q-tabs
v-model="tabCard"
dense
class="text-grey"
active-color="primary"
indicator-color="primary"
align="justify"
narrow-indicator
>
<q-tab
v-for="(rec, ind) in myel.listcards"
:key="ind"
:name="`card` + ind"
:label="`Scheda ` + (ind + 1)"
icon="fas fa-pencil-alt"
/>
</q-tabs>
<q-tab-panels v-model="tabCard" animated>
<q-tab-panel
v-for="(rec, ind) in myel.listcards"
:key="ind"
:name="`card` + ind"
>
<div v-if="enableEdit" class="column bordered q-ma-xs">
<q-bar class="bg-primary text-white">
Card {{ ind + 1 }}
<q-space />
<q-btn
icon="fas fa-trash-alt"
color="negative"
dense
flat
size="sm"
@click="delRecCard(rec._id, myel)"
>
</q-btn>
</q-bar>
<CMyFieldRec
title="Immagine:"
table="imgcards"
:id="rec._id"
:rec="rec"
field="imagefile"
@update:model-value="modifElem"
@save="saveCard"
:canEdit="true"
:canModify="true"
:nosaveToDb="true"
:path="myel.path"
:fieldtype="costanti.FieldType.imgcard"
>
</CMyFieldRec>
<div v-if="enableEdit" class="row">
<q-input
dense
style="min-width: 150px"
label="Titolo:"
class="fa-border"
@update:model-value="modifElem"
v-model="rec.alt"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
style="min-width: 150px"
label="Style:"
class="fa-border"
@update:model-value="modifElem"
v-model="rec.style"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<CSelectColor
v-if="enableEdit"
style="min-width: 150px"
v-model="rec.color"
@update:model-value="modifElem"
title="Col Titolo"
>
</CSelectColor>
<CSelectFontSize
v-if="enableEdit"
style="min-width: 200px"
v-model="rec.size"
@update:model-value="modifElem"
title="Font Titolo"
>
</CSelectFontSize>
</div>
<CMyEditor
v-model:value="rec.content"
title="Contenuto:"
@keyup.enter.stop
:showButtons="false"
:canModify="true"
@update:value="modifElem"
@showandsave="saveElem"
>
</CMyEditor>
<q-input
label="Sottotitolo:"
class="fa-border"
dense
@update:model-value="modifElem"
v-model="rec.description"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
<div v-if="enableEdit" class="row">
<CSelectColor
v-if="enableEdit"
v-model="rec.colorsub"
@update:model-value="modifElem"
title="Col Sottotitolo"
>
</CSelectColor>
</div>
</q-tab-panel>
</q-tab-panels>
</div>
<div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
<div v-if="enableEdit">
<q-input
dense
label="Margine:"
class="fa-border"
@update:model-value="modifElem"
v-model="myel.size"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
<div v-if="enableEdit">
<q-input
dense
label="Titolo"
class="fa-border"
@update:model-value="modifElem"
v-model="myel.title"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
label="Style"
class="fa-border"
@update:model-value="modifElem"
v-model="myel.styleadd"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
label="Immagine:"
class="fa-border"
@update:model-value="modifElem"
v-model="myel.imgback"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
<div v-if="enableEdit">
<CMyFieldRec
title="Immagine:"
table="myelems"
:id="myel._id"
:rec="myel"
field="image"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
>
</CMyFieldRec>
<q-input
dense
label="Title"
class="fa-border"
@update:model-value="modifElem"
v-model="myel.container"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
label="Sottotitolo"
class="fa-border"
@update:model-value="modifElem"
v-model="myel.container2"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
<div v-if="enableEdit">
<q-input
dense
label="Velocità"
style="max-width: 100px"
class="fa-border"
@update:model-value="modifElem"
v-model="myel.speed"
type="number"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<CMyFieldRec
title="Immagine:"
table="myelems"
:id="myel._id"
:rec="myel"
field="image"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
>
</CMyFieldRec>
<CMyFieldRec
title="Logo:"
table="myelems"
:id="myel._id"
:rec="myel"
field="img"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
>
</CMyFieldRec>
<div class="row">
<q-input
label="Lunghezza Logo:"
@update:model-value="modifElem"
v-model="myel.width"
filled
dense
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
label="Altezza Logo:"
@update:model-value="modifElem"
v-model="myel.height"
filled
dense
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
<q-btn
rounded
dense
color="primary"
label="Testo"
icon="fas fa-plus"
@click="addNewElemText"
>
</q-btn>
<q-tabs
v-model="tabElemsText"
dense
class="text-grey"
active-color="primary"
indicator-color="primary"
align="justify"
narrow-indicator
>
<q-tab
v-for="(rec, ind) in myel.elemsText"
:key="ind"
:name="`elem` + ind"
:label="`Testo ` + (ind + 1)"
icon="fas fa-pencil-alt"
/>
</q-tabs>
<q-tab-panels v-model="tabElemsText" animated>
<q-tab-panel
v-for="(rec, ind) in myel.elemsText"
:key="ind"
:name="`elem` + ind"
>
<div v-if="enableEdit" class="column bordered q-ma-xs">
<q-bar class="bg-primary text-white">
Elem {{ ind + 1 }}
<q-space />
<q-btn
icon="fas fa-trash-alt"
color="negative"
dense
flat
size="sm"
@click="delRecCard(rec._id, myel)"
>
</q-btn>
</q-bar>
<div v-if="enableEdit" class="row">
<CSelectColor
v-if="enableEdit"
style="min-width: 150px"
v-model="rec.color"
@update:model-value="modifElem"
title="Col Titolo"
>
</CSelectColor>
<CSelectFontSize
v-if="enableEdit"
style="min-width: 200px"
v-model="rec.size"
@update:model-value="modifElem"
title="Font Titolo"
>
</CSelectFontSize>
</div>
<q-input
dense
label="Classe:"
@update:model-value="modifElem"
v-model="rec.class"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<CMyEditor
v-model:value="rec.text"
title="Contenuto:"
@keyup.enter.stop
:showButtons="false"
:canModify="true"
@update:value="modifElem"
@showandsave="saveElem"
>
</CMyEditor>
<CSelectAnimation
v-if="enableEdit && showAnimation"
v-model="rec.anim"
@update:model-value="modifElem"
label="Animazione"
>
</CSelectAnimation>
</div>
</q-tab-panel>
</q-tab-panels>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
<div v-if="enableEdit">
<q-input
dense
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 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.image"
filled
dense
v-on:keyup.enter="saveElem"
>
</q-input>
<CMyFieldRec
title="NomeFile Img:"
table="myelems"
:id="myel._id"
:rec="myel"
field="image"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
>
</CMyFieldRec>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
<div v-if="enableEdit">
<q-input
dense
label="NomeFile Img:"
@update:model-value="modifElem"
v-model="myel.image"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<CMyFieldRec
title="NomeFile Img:"
table="myelems"
:id="myel._id"
:rec="myel"
field="image"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
>
</CMyFieldRec>
<div class="">
<div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-sticky">
<q-input
dense
label="Lunghezza:"
@update:model-value="modifElem"
v-model="myel.widthimg"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
label="Altezza:"
@update:model-value="modifElem"
v-model="myel.heightimg"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
<div v-if="enableEdit" class="row">
<q-input
dense
label="NomeFile Video:"
@update:model-value="modifElem"
v-model="myel.container"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
label="Ratio:"
type="number"
@update:model-value="modifElem"
v-model="myel.ratio"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER"></div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
<div v-if="enableEdit" class="row">
<q-select
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
rounded
outlined
v-model="myel.container"
:options="arrPages"
label="Pagina"
emit-value
map-options
@change="saveElem"
>
</q-select>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
<div v-if="enableEdit" class="row">
<q-input
dense
label="NomeFile Img:"
@update:model-value="modifElem"
v-model="myel.container"
debounce="1000"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-sticky">
<q-input
dense
label="Lunghezza:"
type="number"
@update:model-value="modifElem"
debounce="1000"
v-model="myel.widthimg"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
label="Altezza:"
type="number"
@update:model-value="modifElem"
debounce="1000"
v-model="myel.heightimg"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
label="Link:"
@update:model-value="modifElem"
debounce="1000"
v-model="myel.link"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
</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 v-if="enableEdit" class="row">
<q-input
dense
label="ImgMap:"
@update:model-value="modifElem"
v-model="myel.container"
debounce="1000"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
label="UrlMap:"
@update:model-value="modifElem"
v-model="myel.container2"
debounce="1000"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
label="Title:"
@update:model-value="modifElem"
v-model="myel.container3"
debounce="1000"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
label="Coordinata Mappa 1:"
@update:model-value="modifElem"
v-model="myel.containerHtml"
debounce="1000"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
label="Coordinata Mappa Big:"
@update:model-value="modifElem"
v-model="myel.link"
debounce="1000"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
<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>
<!--sss
-->
<q-input
dense
label="Secondi tra un'immagine e l'altra:"
@update:model-value="modifElem"
debounce="1000"
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>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME"></div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.BUTTON">
<q-input
dense
label="Colore:"
@update:model-value="modifElem"
debounce="1000"
v-model="myel.color"
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
label="Colore Testo:"
@update:model-value="modifElem"
debounce="1000"
v-model="myel.containerHtml"
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
label="Link:"
@update:model-value="modifElem"
debounce="1000"
v-model="myel.link"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
label="Testo Bottone:"
@update:model-value="modifElem"
debounce="1000"
v-model="myel.container"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
label="Icona:"
@update:model-value="modifElem"
debounce="1000"
v-model="myel.container2"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
label="Dimensione"
@update:model-value="modifElem"
debounce="1000"
v-model="myel.size"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
label="Target:"
@update:model-value="modifElem"
debounce="1000"
v-model="myel.container3"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CALENDAR">
<div v-if="enableEdit" class="row">
<q-input
dense
label="Visualizza ultimi N eventi:"
@update:model-value="modifElem"
debounce="1000"
v-model="myel.number"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECK_EMAIL"></div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKIFISLOGGED">
<q-select
v-model="myel.container"
:options="[{label: 'Mostra Sempre', value: true, label: 'Solo se Offline', value: false}]"
label="Quando mostrarlo"
emit-value
map-options
>
</q-select>
</div>
</div>
</div>
<div>
<q-dialog
v-model="visuadd"
transition-show="slide-up"
transition-hide="slide-down"
:maximized="$q.screen.lt.sm"
>
<q-card class="dialog_card">
<q-bar dense class="bg-primary text-white">
Aggiungi Elemento:
<q-space />
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
</q-bar>
<q-card-section class="inset-shadow row q-ma-sm q-pa-sm">
<q-tabs v-model="tabadd" inline-label class="bg-gray shadow-2">
<q-tab name="tools" label="Strumenti" />
<q-tab v-if="tools.isAdmin()" name="others" label="Altri" />
<q-tab v-if="tools.isAdmin()" name="others2" label="Altri 2" />
</q-tabs>
<q-tab-panels v-model="tabadd" animated class="row justify-center">
<q-tab-panel name="tools">
<div
v-for="(rec, index) in shared_consts.TypesElem"
:key="index"
class="q-pa-sm"
>
<q-btn
v-if="enableAdd"
:label="rec.label"
icon="fas fa-plus"
color="primary"
@click="
newtype = rec.value;
addNewElem(myel.order - 10);
"
>
</q-btn>
</div>
</q-tab-panel>
<q-tab-panel name="others">
<div
v-for="(rec, index) in shared_consts.TypesElemAdmin"
:key="index"
class="q-pa-sm"
>
<q-btn
v-if="enableAdd"
:label="rec.label"
icon="fas fa-plus"
color="primary"
@click="
newtype = rec.value;
addNewElem(myel.order - 10);
"
>
</q-btn>
</div>
</q-tab-panel>
<q-tab-panel name="others2">
<div
v-for="(rec, index) in shared_consts.TypesElemAdminTools"
:key="index"
class="q-pa-sm"
>
<q-btn
v-if="enableAdd"
:label="rec.label"
icon="fas fa-plus"
color="primary"
@click="
newtype = rec.value;
addNewElem(myel.order - 10);
"
>
</q-btn>
</div>
</q-tab-panel>
</q-tab-panels>
</q-card-section>
</q-card>
</q-dialog>
</div>
</template>
<script lang="ts" src="./CMyEditElem.ts">
</script>
<style lang="scss" scoped>
@import './CMyEditElem.scss';
</style>