330 lines
9.3 KiB
TypeScript
Executable File
330 lines
9.3 KiB
TypeScript
Executable File
import {
|
|
computed,
|
|
defineComponent, onMounted, PropType, ref, toRef, watch, nextTick,
|
|
} from 'vue'
|
|
|
|
import { ICoordGPS, IMyCard, IMyElem, IMyPage, IOperators, ISocial } from '@src/model'
|
|
import { useGlobalStore } from '@store/globalStore'
|
|
|
|
import { CImgTitle } from '../CImgTitle/index'
|
|
import { CImgPoster } from '@/components/CImgPoster'
|
|
import { CTitle } from '@/components/CTitle/index'
|
|
import { CGridOriz } from '@/components/CGridOriz/index'
|
|
import { tools } from '@store/Modules/tools'
|
|
import { shared_consts } from '@/common/shared_vuejs'
|
|
import { LandingFooter } from '@/components/LandingFooter'
|
|
import { CMyActivities } from '@/components/CMyActivities'
|
|
import { CECommerce } from '@/components/CECommerce'
|
|
import { CAITools } from '@/components/CAITools'
|
|
import { CCatalogo } from '@/components/CCatalogo'
|
|
// import { CMapMarker } from '@src/components/CMapMarker.off'
|
|
import { CMapUsers } from '@/components/CMapUsers'
|
|
import { CMapGetCoordinates } from '@/components/CMapGetCoordinates'
|
|
import { CMapEditAddressByCoord } from '@/components/CMapEditAddressByCoord'
|
|
import { CMapComuni } from '@/components/CMapComuni'
|
|
import { COpenStreetMap } from '@src/components/COpenStreetMap'
|
|
import { CCardCarousel } from '@src/components/CCardCarousel'
|
|
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 { CSelectColor } from '@src/components/CSelectColor'
|
|
import { CMainView } from '@src/components/CMainView'
|
|
import { CMyProfileTutorial } from '@src/components/CMyProfileTutorial'
|
|
import { CSendRISTo } from '@src/components/CSendRISTo'
|
|
import { CDashboard } from '@src/components/CDashboard'
|
|
import { CDashGroup } from '@src/components/CDashGroup'
|
|
import { CMovements } from '@src/components/CMovements'
|
|
import { CCheckAppRunning } from '@src/components/CCheckAppRunning'
|
|
import { CStatusReg } from '@src/components/CStatusReg'
|
|
import { CTitleBanner } from '@src/components/CTitleBanner'
|
|
import { CCheckIfIsLogged } from '@src/components/CCheckIfIsLogged'
|
|
import { CSelectFontSize } from '@src/components/CSelectFontSize'
|
|
import { CNotifAtTop } from '@src/components/CNotifAtTop'
|
|
import { CPresentazione } from '@src/components/CPresentazione'
|
|
import { CRegistration } from '@src/components/CRegistration'
|
|
import { CShareSocial } from '@src/components/CShareSocial'
|
|
import { CVisuVideoPromoAndPDF } from '@src/components/CVisuVideoPromoAndPDF'
|
|
|
|
import MixinMetaTags from '@/mixins/mixin-metatags'
|
|
import MixinBase from '@/mixins/mixin-base'
|
|
import { useQuasar } from 'quasar'
|
|
import { useI18n } from '@/boot/i18n'
|
|
import { useRouter } from 'vue-router'
|
|
import { LatLng } from 'leaflet'
|
|
|
|
|
|
export default defineComponent({
|
|
name: 'CMyElem',
|
|
components: {
|
|
CImgTitle, CTitle, LandingFooter, CEventsCalendar,
|
|
CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
|
|
CSelectColor, CSelectFontSize, CImgPoster,
|
|
CCheckIfIsLogged, CStatusReg, CDashboard, CMainView, CNotifAtTop,
|
|
CPresentazione, CMyActivities,
|
|
CMyProfileTutorial, CSendRISTo,
|
|
CTitleBanner, CShareSocial, CCheckAppRunning, CRegistration,
|
|
CVisuVideoPromoAndPDF, CECommerce, CCatalogo, CAITools,
|
|
CMapComuni, CMapUsers, CMapGetCoordinates, CMapEditAddressByCoord,
|
|
CDashGroup, CMovements, CGridOriz,
|
|
// , //CMapMarker,
|
|
},
|
|
emits: ['selElemClick'],
|
|
props: {
|
|
myelem: {
|
|
type: Object as PropType<IMyElem>,
|
|
required: true,
|
|
},
|
|
selElem: {
|
|
type: Object as PropType<IMyElem>,
|
|
required: false,
|
|
},
|
|
path: {
|
|
type: String,
|
|
required: false,
|
|
default: '',
|
|
},
|
|
editOn: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
addOn: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
},
|
|
setup(props, { emit }) {
|
|
const globalStore = useGlobalStore()
|
|
|
|
const { setmeta, getsrcbyimg } = MixinMetaTags()
|
|
const { setValDb, getValDb } = MixinBase()
|
|
|
|
const $router = useRouter()
|
|
|
|
const $q = useQuasar()
|
|
const { t } = useI18n()
|
|
|
|
const animare = ref(0)
|
|
const slide = ref(0)
|
|
const slide2 = ref(0)
|
|
const disableSave = ref(true)
|
|
const enableEdit = ref(false)
|
|
const enableAdd = ref(true)
|
|
const visushare = ref(false)
|
|
|
|
const social = ref(<ISocial>{})
|
|
|
|
const neworder = ref(<number | undefined>0)
|
|
|
|
const myel = ref(<IMyElem>{})
|
|
|
|
const newtype = ref(<any>'')
|
|
|
|
const isAppRunning = computed(() => globalStore.isAppRunning)
|
|
|
|
const currentCardsPerSlide = computed(() => {
|
|
if ($q.screen.lt.sm) return 1
|
|
if ($q.screen.lt.md) return 2
|
|
return myel.value.num2 ? myel.value.num2 : 2! // cardsPerSlide
|
|
})
|
|
|
|
// Raggruppa le card in base al numero di card per slide
|
|
const cardGroups = computed(() => {
|
|
const cards = myel.value.listcards || []
|
|
const groups = []
|
|
|
|
for (let i = 0; i < cards.length; i += currentCardsPerSlide.value) {
|
|
groups.push(cards.slice(i, i + currentCardsPerSlide.value))
|
|
}
|
|
|
|
return groups
|
|
})
|
|
|
|
const coordaddr = ref(<ICoordGPS>{ address: '', coordinates: [0, 0] })
|
|
|
|
const carouselRef = ref(<any>null)
|
|
const isAtStart = ref(true)
|
|
const isAtEnd = ref(false)
|
|
const activeIndex = ref(0)
|
|
|
|
watch(() => myel.value.order, (value, oldval) => {
|
|
mounted()
|
|
})
|
|
|
|
function getArrDisciplines() {
|
|
return globalStore.disciplines.filter((rec: any) => rec.showinhome)
|
|
}
|
|
|
|
function getheightgallery() {
|
|
if (tools.isMobile())
|
|
return '400px'
|
|
else
|
|
return '600px'
|
|
}
|
|
|
|
function saveElem(exit?: boolean) {
|
|
// Save Elem record
|
|
const myelem = props.myelem
|
|
myelem.order = neworder.value
|
|
globalStore.saveMyElem($q, t, myelem).then((ris) => {
|
|
if (ris) {
|
|
// OK
|
|
disableSave.value = true
|
|
if (exit)
|
|
enableEdit.value = false
|
|
}
|
|
})
|
|
}
|
|
|
|
function addNewElem(order?: number) {
|
|
|
|
let newrec = globalStore.prepareAddNewElem(order, $q, t, props.myelem, newtype.value)
|
|
}
|
|
|
|
function dupElem(order?: number) {
|
|
|
|
const newrec = props.myelem
|
|
|
|
newrec._id = undefined
|
|
newrec.order = order ? order : (newrec.order! + 10)
|
|
|
|
globalStore.addNewElem($q, t, newrec)
|
|
}
|
|
|
|
function modifElem() {
|
|
disableSave.value = false
|
|
}
|
|
|
|
const checkScrollPosition = () => {
|
|
const container = carouselRef.value
|
|
if (!container || !myel.value || !myel.value.listcards) return
|
|
|
|
isAtStart.value = container.scrollLeft <= 0
|
|
isAtEnd.value = container.scrollLeft + container.clientWidth >= container.scrollWidth - 1
|
|
|
|
const cardWidth = container.scrollWidth / myel.value.listcards.length
|
|
activeIndex.value = Math.round(container.scrollLeft / cardWidth)
|
|
}
|
|
|
|
function mounted() {
|
|
myel.value = props.myelem
|
|
neworder.value = props.myelem.order
|
|
|
|
if (props.myelem)
|
|
newtype.value = props.myelem.type
|
|
|
|
nextTick(() => {
|
|
checkScrollPosition()
|
|
carouselRef.value?.addEventListener('scroll', checkScrollPosition)
|
|
})
|
|
}
|
|
|
|
function clickOnElem() {
|
|
if (props.editOn) {
|
|
enableEdit.value = true
|
|
console.log('selElemClick', props.myelem)
|
|
emit('selElemClick', props.myelem)
|
|
}
|
|
}
|
|
|
|
function getClass() {
|
|
let mycl = ''
|
|
if (props.myelem.align === shared_consts.ALIGNTYPE.CEHTER) {
|
|
mycl += ' align_center'
|
|
} else if (props.myelem.align === shared_consts.ALIGNTYPE.RIGHT) {
|
|
mycl += ' align_right'
|
|
} else if (props.myelem.align === shared_consts.ALIGNTYPE.LEFT) {
|
|
mycl += ' align_left'
|
|
}
|
|
|
|
if (props.myelem.class2)
|
|
mycl += ' ' + props.myelem.class2
|
|
|
|
if (props.selElem && props.editOn) {
|
|
if (props.myelem._id === props.selElem._id)
|
|
mycl += ' selectedElem'
|
|
}
|
|
|
|
return mycl
|
|
}
|
|
|
|
function showFit() {
|
|
if (props.myelem && props.myelem.type)
|
|
return [shared_consts.ELEMTYPE.TEXT].includes(props.myelem.type)
|
|
else
|
|
return false
|
|
}
|
|
|
|
function PagLogin() {
|
|
$router.replace('/signin')
|
|
}
|
|
|
|
async function clickshare() {
|
|
let mytext = await tools.sendMsgTelegramCmd(
|
|
$q,
|
|
t,
|
|
shared_consts.MsgTeleg.SHARE_MSGREG,
|
|
true
|
|
)
|
|
|
|
if (false) {
|
|
social.value.description = mytext
|
|
visushare.value = true
|
|
}
|
|
|
|
}
|
|
|
|
// Classe per le colonne delle card
|
|
function cardColumnClass() {
|
|
const width = 12 / currentCardsPerSlide.value
|
|
return `col-xs-12 col-sm-6 col-md-${width}`
|
|
}
|
|
|
|
onMounted(mounted)
|
|
|
|
return {
|
|
tools,
|
|
shared_consts,
|
|
getArrDisciplines,
|
|
getheightgallery,
|
|
slide,
|
|
slide2,
|
|
animare,
|
|
setmeta,
|
|
getsrcbyimg,
|
|
saveElem,
|
|
myel,
|
|
disableSave,
|
|
modifElem,
|
|
addNewElem,
|
|
newtype,
|
|
neworder,
|
|
enableEdit,
|
|
enableAdd,
|
|
clickOnElem,
|
|
getClass,
|
|
showFit,
|
|
getValDb,
|
|
dupElem,
|
|
globalStore,
|
|
PagLogin,
|
|
visushare,
|
|
social,
|
|
clickshare,
|
|
isAppRunning,
|
|
coordaddr,
|
|
isAtStart,
|
|
isAtEnd,
|
|
activeIndex,
|
|
carouselRef,
|
|
cardColumnClass,
|
|
cardGroups,
|
|
currentCardsPerSlide,
|
|
}
|
|
},
|
|
|
|
})
|