Webpage Editor: Carousel Images

This commit is contained in:
paoloar77
2022-11-11 18:16:28 +01:00
parent 9fe37c9f3c
commit a751c99237
18 changed files with 373 additions and 85 deletions

25
deploy_spa_on_production.sh Executable file
View File

@@ -0,0 +1,25 @@
#!/bin/bash
source ./.env.production
msg="*** IN PRODUZIONE !!!!! SEI SICURO DI INVIARE GLI AGGIORNAMENTI SUL SERVER DI PRODUZIONE ?? $SERVERDIR_WEBSITE (Y/N) ? "
if [ "$1" = "" ]; then
read -p "$msg" risposta
else
echo $msg
risposta=$1
fi
if [[ $risposta == "Y" || $risposta == "y" ]]; then
npm run buildspa
echo "Sincronizzazione in remoto..."
echo "Sincronizzazione in remoto $SERVERDIR_WEBSITE ..."
sshpass -p $SERVERPW_WEBSITE rsync -e 'ssh -p 8855' -a dist/spa/ ftpadmin@servereng:/var/www/$SERVERDIR_WEBSITE/
echo "Finito $SERVERDIR_WEBSITE "
fi

28
deploy_spa_test_server.sh Executable file
View File

@@ -0,0 +1,28 @@
#!/bin/bash
source ./.env.test
msg="*** Sincronizzazione ??? $DIRECTORY_LOCAL e $SERVERDIR_WEBSITE (Y/N) ? "
if [ "$1" = "" ]; then
read -p "$msg" risposta
else
risposta=$1
fi
cd /home/paolo/myproject/$DIRECTORY_LOCAL/
cp .env.production .env.prod.bak
cp .env.test .env.production
sleep 1
npm run buildspa
echo "Sincronizzazione $SERVERDIR_WEBSITE in remoto..."
sshpass -p $SERVERPW_WEBSITE rsync -e 'ssh -p 8855' -a dist/spa/ ftpadmin@servereng:/var/www/$SERVERDIR_WEBSITE/
cp .env.prod.bak .env.production
sleep 1
echo "Finito $SERVERDIR_WEBSITE"

30
inizia_kolibrilab.it.sh Executable file
View File

@@ -0,0 +1,30 @@
#!/bin/bash
site=kolibrilab.it
if [ -d "__freeplanet.app" ]; then
rmdir __freeplanet.app
fi
if [ -d "__kolibrilab.it" ]; then
rmdir __kolibrilab.it
fi
if [ -d "__arcadei.it" ]; then
rmdir __arcadei.it
fi
if [ -d "__riso.app" ]; then
rmdir __riso.app
fi
if [ -d "__popolodelnuovomondo.app" ]; then
rmdir __popolodelnuovomondo.app
fi
if [ -d "__terradellavisione.app" ]; then
rmdir __terradellavisione.app
fi
source __inizia.sh

14
send_spa_to_production.sh Executable file
View File

@@ -0,0 +1,14 @@
#!/bin/bash
source ./.env.production
read -p "*** IN PRODUZIONE !!!!! SEI SICURO DI INVIARE GLI AGGIORNAMENTI SUL SERVER DI PRODUZIONE ?? $SERVERDIR_WEBSITE (Y/N) ? " risposta
if [[ $risposta == "Y" || $risposta == "y" ]]; then
echo "Sincronizzazione in remoto $SERVERDIR_WEBSITE ..."
sshpass -p $SERVERPW_WEBSITE rsync -e 'ssh -p 8855' -a dist/spa/ ftpadmin@servereng:/var/www/$SERVERDIR_WEBSITE/
echo "Finito $SERVERDIR_WEBSITE "
fi

11
send_spa_to_test.sh Executable file
View File

@@ -0,0 +1,11 @@
#!/bin/bash
source ./.env.test
cp .env.test .env.production
echo "Sincronizzazione in remoto $SERVERDIR_WEBSITE ..."
sshpass -p $SERVERPW_WEBSITE rsync -e 'ssh -p 8855' -a dist/spa/ ftpadmin@servereng:/var/www/$SERVERDIR_WEBSITE/
echo "Finito $SERVERDIR_WEBSITE"
cp .env.prod.bak .env.production

View File

@@ -443,3 +443,22 @@ body.mobile .landing:before {
color: #999;
letter-spacing: 0.093rem;
}
.clEditDiv {
border: #c8c9cb solid 2px;
padding: 2px;
}
.clEditNotActive {
background-color: #e6e6e6;
}
.clEdit {
border: #f69f09 solid 2px;
padding: 2px;
}
.clEdit:hover {
border: #11f609 solid 2px;
cursor: pointer;
}

View File

@@ -16,6 +16,7 @@ import { CMyPage } from '@src/components/CMyPage'
import { CMyPageIntro } from '@src/components/CMyPageIntro'
import { CEventsCalendar } from '@src/components/CEventsCalendar'
import { CMyEditor } from '@src/components/CMyEditor'
import { CMyFieldRec } from '@src/components/CMyFieldRec'
import MixinMetaTags from '@/mixins/mixin-metatags'
import { useQuasar } from 'quasar'
@@ -23,12 +24,17 @@ import { useI18n } from '@/boot/i18n'
export default defineComponent({
name: 'CMyElem',
components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar, CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor },
components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar, CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec },
props: {
myelem: {
type: Object as PropType<IMyElem>,
required: true,
},
path: {
type: String,
required: false,
default: '',
},
editOn: {
type: Boolean,
required: false,
@@ -52,6 +58,8 @@ export default defineComponent({
const slide = ref(0)
const slide2 = ref(0)
const disableSave = ref(true)
const enableEdit = ref(false)
const enableAdd = ref(true)
const neworder = ref(<number|undefined>0)
@@ -73,7 +81,7 @@ export default defineComponent({
return '600px'
}
function saveElem() {
function saveElem(exit?: boolean) {
// Save Elem record
const myelem = props.myelem
myelem.order = neworder.value
@@ -81,6 +89,8 @@ export default defineComponent({
if (ris) {
// OK
disableSave.value = true
if (exit)
enableEdit.value = false
}
})
}
@@ -96,6 +106,11 @@ export default defineComponent({
container: ''
}
if (newrec.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS) {
newrec.container2 = '8'
newrec.height = 600
}
globalStore.addNewElem($q, t, newrec)
}
@@ -134,6 +149,12 @@ export default defineComponent({
newtype.value = props.myelem.type
}
function clickOnElem() {
if (props.editOn) {
enableEdit.value = true
}
}
onMounted(mounted)
return {
@@ -154,6 +175,9 @@ export default defineComponent({
addNewElem,
newtype,
neworder,
enableEdit,
enableAdd,
clickOnElem,
}
},

View File

@@ -1,6 +1,25 @@
<template>
<div v-if="myel">
<q-bar v-if="editOn" dense class="bg-blue-1 text-white q-px-sm">
<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
@@ -8,7 +27,7 @@
dense
@update:model-value="modifElem"
v-model="neworder"
v-on:keyup.enter="saveElem"
v-on:keyup.enter="saveElem(false)"
type="number"
>
</q-input>
@@ -22,7 +41,7 @@
@click="delElem">
</q-btn>
<q-select v-if="addOn"
<q-select v-if="enableAdd"
v-model="newtype"
dense
style="width: 150px;"
@@ -31,7 +50,7 @@
</q-select>
<q-btn
v-if="addOn"
v-if="enableAdd"
size="sm"
dense
flat
@@ -42,7 +61,7 @@
</q-bar>
<div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
<div v-if="editOn">
<div v-if="enableEdit">
<q-input
class="fa-border"
@update:model-value="modifElem"
@@ -54,13 +73,14 @@
</q-input>
</div>
<div v-else
:class="myel.class">{{ myel.container }}
<div
:class="myel.class + (editOn ? ` clEdit` : ``)"
@click="clickOnElem">{{ myel.container }}
</div>
</div>
<div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
<div v-if="editOn">
<div v-if="enableEdit">
<q-input
label="Margine:"
class="fa-border"
@@ -72,10 +92,14 @@
</q-input>
</div>
<div :style="`margin: ` + myel.size"></div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``)"
@click="clickOnElem"
:style="`margin: ` + myel.size">&nbsp;
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
<div v-if="editOn">
<div v-if="enableEdit">
<q-input
class="fa-border"
@update:model-value="modifElem"
@@ -86,22 +110,26 @@
</q-input>
</div>
<div v-else>
<CTitle
:imgbackground="myel.imgback"
:headtitle="myel.title" :sizes="myel.size" :styleadd="myel.styleadd">
</CTitle>
<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="editOn">
<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"
v-on:keyup.enter="saveElem(false)"
>
</q-input>
<q-input
@@ -115,13 +143,16 @@
</q-input>
</div>
<div v-else>
<CImgTitle v-if="myel.container" :src="myel.container" :title="myel.title">
</CImgTitle>
<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="editOn">
<div v-if="enableEdit">
<q-input
label="Classe:"
@update:model-value="modifElem"
@@ -140,12 +171,14 @@
</CMyEditor>
</div>
<div v-else>
<div :class="myel.class" v-html="myel.containerHtml"></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="editOn">
<div v-if="enableEdit">
<q-input
label="NomeFile Img:"
@update:model-value="modifElem"
@@ -176,11 +209,14 @@
</div>
</div>
<div class="text-center">
<q-img :src="myel.container" class="img" :width="myel.width.toString()" :height="myel.height.toString()"></q-img>
<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="editOn" class="row">
<div v-if="enableEdit" class="row">
<q-input
label="NomeFile Video:"
@update:model-value="modifElem"
@@ -199,16 +235,19 @@
>
</q-input>
</div>
<q-video v-if="!!rec.container" :src="rec.container" :ratio="rec.ratio">
</q-video>
<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="editOn" class="row">
<div v-if="enableEdit" class="row">
<q-input
label="Nome Pagina:"
label="Importa Pagina:"
@update:model-value="modifElem"
v-model="myel.container"
filled
@@ -216,10 +255,13 @@
>
</q-input>
</div>
<CMyPage :mypath="myel.container"></CMyPage>
<div :class="myel.class + (editOn ? ` clEdit` : ``)"
@click="clickOnElem">
<CMyPage :mypath="myel.container">&nbsp;</CMyPage>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
<div v-if="editOn" class="row">
<div v-if="enableEdit" class="row">
<q-input
label="NomeFile Img:"
@update:model-value="modifElem"
@@ -255,7 +297,10 @@
>
</q-input>
</div>
<CMyPageIntro :mypath="myel.container" :maxheightimg="myel.heightimg" :maxwidthimg="myel.widthimg" :link="myel.link"></CMyPageIntro>
<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()">
@@ -272,40 +317,72 @@
<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="editOn" class="row">
<q-input
label="lista:"
<div v-if="enableEdit" class="row">
<CMyFieldRec
title="Lista Immagini:"
table="myelems"
:id="myel._id"
:rec="myel"
field="list"
@update:model-value="modifElem"
v-model="myel.list"
: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>
</div>
<q-toggle
label="Sottotitoli"
v-model="myel.parambool"
color="positive"
icon="fas fa-eye"
>
</q-toggle>
<q-carousel
swipeable
animated
:autoplay="8000"
v-model="slide2"
arrows
thumbnails
infinite
height="600">
<q-carousel-slide v-for="(rec, index) in myel.list" :key="index" :name="index"
:img-src="getsrcbyimg(`images/`+ rec.imagefile)"
:alt="rec.alt"
class="carousel_slide">
<div 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>
<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>
</div>
</q-carousel-slide>
</q-carousel>
</q-carousel-slide>
</q-carousel>
</div>
</section>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_HOME">
@@ -367,6 +444,17 @@
</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>
@@ -379,15 +467,26 @@
</div>
</div>
<q-btn
v-if="editOn && !disableSave"
icon="fas fa-check"
color="positive"
label="Salva"
size="sm"
:disable="disableSave"
@click="saveElem">
</q-btn>
<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>

View File

@@ -1,7 +1,5 @@
<template>
<div v-if="visuElem()" :class="mytitle ? `row items-center justify-center q-ma-xs text-center` : ``">
<div v-if="mytitle" class="q-ma-xs">
<q-field rounded outlined bg-color="blue-1" dense style="min-width:110px;">
<template v-slot:control>
@@ -35,6 +33,7 @@
:jointable="jointable"
:myimg="myimg"
:canModify="canModify"
:isInModif="canModify"
:canEdit="canEdit"
:id="id"
:idmain="idmain"

View File

@@ -61,6 +61,7 @@ export default defineComponent({
const editOn = ref(false)
const addOn = ref(false)
const myelemVoid = ref({active: true, type: shared_consts.ELEMTYPE.TEXT, container: '...', path: mypathin.value} as IMyElem)
const globalStore = useGlobalStore()
@@ -92,6 +93,7 @@ export default defineComponent({
addOn,
tools,
shared_consts,
myelemVoid,
}
},

View File

@@ -43,10 +43,15 @@
<div v-if="!!rec.content4" v-html="rec.content4"></div>
<span v-for="(myelem, ind) in myelems" :key="ind">
<CMyElem v-if="myelem.active" :myelem="myelem" :editOn="editOn" :addOn="addOn">
<CMyElem v-if="myelem.active || editOn" :myelem="myelem" :editOn="editOn" :addOn="addOn" :path="rec.path">
</CMyElem>
</span>
<div v-if="myelems.length === 0">
<CMyElem v-if="editOn" :myelem="myelemVoid" :editOn="editOn" :addOn="addOn" :path="rec.path">
</CMyElem>
</div>
</div>
</div>
<div v-else>

View File

@@ -194,23 +194,23 @@ export default defineComponent({
const userStore = useUserStore()
const globalStore = useGlobalStore()
const myvalue = ref(<any>null)
const myvalue = ref(null as any)
const myvalueprec = ref('false')
const countryname = ref('')
const visueditor = ref(false)
const visuhtml = ref(false)
const showeditor = ref(false)
const myImgGall = ref(<IImgGallery[]>[{}])
const myImgGall = ref([{}] as IImgGallery[])
const col = ref(<IColGridTable>{
const col = ref({
name: 'test',
fieldtype: 0,
showWhen: costanti.showWhen.NewRec + costanti.showWhen.InEdit + costanti.showWhen.InView,
visible: true,
maxlength: props.mycol ? props.mycol.maxlength : 0,
minlength: props.mycol ? props.mycol.minlength : undefined
})
} as IColGridTable)
const { setValDb, getValDb } = MixinBase()
const { getMyUsername } = MixinUsers()
@@ -625,12 +625,12 @@ export default defineComponent({
}
}
function getclassCol(col: any) {
if (col) {
let mycl = (col.disable || isviewfield()) ? '' : 'colmodif'
mycl += ((col.fieldtype === costanti.FieldType.date) || (col.fieldtype === costanti.FieldType.onlydate)) ? ' coldate flex flex-container' : ''
function getclassCol(mycol: any) {
if (mycol) {
let myclstr = (mycol.disable || isviewfield()) ? '' : 'colmodif'
myclstr += ((mycol.fieldtype === costanti.FieldType.date) || (mycol.fieldtype === costanti.FieldType.onlydate)) ? ' coldate flex flex-container' : ''
return mycl
return myclstr
} else {
return ''
}
@@ -674,7 +674,7 @@ export default defineComponent({
let ris = ''
try {
let username = myrow.value.hasOwnProperty('username') ? myrow.value['username'] : ''
let userId = myrow.value.hasOwnProperty('userId') ? myrow.value['userId'] : ''
const userId = myrow.value.hasOwnProperty('userId') ? myrow.value['userId'] : ''
if (username === '') {
if (userId === userStore.my._id)
@@ -695,6 +695,8 @@ export default defineComponent({
ris = 'circuits/' + myrow.value['path']
} else if (!!myrow.value && !!myrow.value.directory) {
ris = myrow.value.directory
} else if (props.table === 'myelems') {
ris = 'pages/' + myrow.value.path
} else {
ris = props.table
}

View File

@@ -119,6 +119,9 @@ export interface IMyElem {
container?: string
container2?: string
container3?: string
parambool?: boolean
parambool2?: boolean
parambool3?: boolean
number?: number
imgback?: string
ratio?: string

View File

@@ -1262,6 +1262,7 @@ const msg_it = {
container: 'Container',
container2: 'Container2',
container3: 'Container3',
parambool: 'parambool',
number: 'Number',
imgback: 'imgback',
size: 'size',

View File

@@ -132,6 +132,9 @@ export const colmyelems = [
AddCol({ name: 'container', label_trans: 'myelems.container' }),
AddCol({ name: 'container2', label_trans: 'myelems.container2' }),
AddCol({ name: 'container3', label_trans: 'myelems.container3' }),
AddCol({ name: 'parambool', label_trans: 'myelems.parambool', fieldtype: costanti.FieldType.boolean }),
AddCol({ name: 'parambool2', label_trans: 'myelems.parambool2', fieldtype: costanti.FieldType.boolean }),
AddCol({ name: 'parambool3', label_trans: 'myelems.parambool3', fieldtype: costanti.FieldType.boolean }),
AddCol({ name: 'number', label_trans: 'myelems.number', fieldtype: costanti.FieldType.number }),
AddCol({ name: 'imgback', label_trans: 'myelems.imgback' }),
AddCol({ name: 'size', label_trans: 'myelems.size' }),

23
termina_kolibrilab.it.sh Executable file
View File

@@ -0,0 +1,23 @@
#!/bin/bash
site=kolibrilab.it
if [ -d "__insiemesipuo.app" ]; then
rmdir __insiemesipuo.app
fi
if [ -d "__arcadei.it" ]; then
rmdir __arcadei.it
fi
if [ -d "__riso.app" ]; then
rmdir __riso.app
fi
if [ -d "__popolodelnuovomondo.app" ]; then
rmdir __popolodelnuovomondo.app
fi
source __termine.sh