- inizio di modifiche all'editor di Pagine Web

src/components/CMyElem/CMyElem.ts

@@ -1,87 +1,122 @@
 import type { PropType } from 'vue';
-import {
-  computed,
-  defineComponent, onMounted, ref, toRef, watch, nextTick,
-} from 'vue'
+import { computed, defineComponent, onMounted, ref, toRef, watch, nextTick } from 'vue';
 
 import type { IOptCatalogo, ICoordGPS, IMyElem, ISocial } from '@src/model';
-import { IMyCard, IMyPage, IOperators } from '@src/model'
-import { useGlobalStore } from '@store/globalStore'
+import { IMyCard, IMyPage, IOperators } from '@src/model';
+import { useGlobalStore } from '@store/globalStore';
 
-import { CImgTitle } from '../CImgTitle/index'
-import { CImgPoster } from '@src/components/CImgPoster'
-import { CTitle } from '@src/components/CTitle/index'
-import { CGridOriz } from '@src/components/CGridOriz/index'
-import { ChatBot } from '@src/components/ChatBot/index'
-import { CCatalogList } from '@src/components/CCatalogList/index'
-import { CRaccoltaCataloghi } from '@src/components/CRaccoltaCataloghi/index'
-import { tools } from '@tools'
-import { shared_consts } from '@src/common/shared_vuejs'
-import { LandingFooter } from '@src/components/LandingFooter'
-import { CMyActivities } from '@src/components/CMyActivities'
-import { CECommerce } from '@src/components/CECommerce'
-import { CStatMacro } from '@src/components/CStatMacro'
-import { CSearchProduct } from '@src/components/CSearchProduct'
-import { CPageViewStats } from '@src/components/CPageViewStats'
-import { CQRCode } from '@src/components/CQRCode'
-import { CAITools } from '@src/components/CAITools'
-import { CCatalogo } from '@src/components/CCatalogo'
-import { CRaccolta } from '@src/components/CRaccolta'
+import { CImgTitle } from '../CImgTitle/index';
+import { CImgPoster } from '@src/components/CImgPoster';
+import CSection from '@src/components/CSection/CSection.vue';
+import CRow from '@src/components/CRow/CRow.vue';
+import CColumn from '@src/components/CColumn/CColumn.vue';
+import { CTitle } from '@src/components/CTitle/index';
+import { CGridOriz } from '@src/components/CGridOriz/index';
+import { ChatBot } from '@src/components/ChatBot/index';
+import { CCatalogList } from '@src/components/CCatalogList/index';
+import { CRaccoltaCataloghi } from '@src/components/CRaccoltaCataloghi/index';
+import { tools } from '@tools';
+import { shared_consts } from '@src/common/shared_vuejs';
+import { LandingFooter } from '@src/components/LandingFooter';
+import { CMyActivities } from '@src/components/CMyActivities';
+import { CECommerce } from '@src/components/CECommerce';
+import { CStatMacro } from '@src/components/CStatMacro';
+import { CSearchProduct } from '@src/components/CSearchProduct';
+import { CPageViewStats } from '@src/components/CPageViewStats';
+import { CQRCode } from '@src/components/CQRCode';
+import { CAITools } from '@src/components/CAITools';
+import { CCatalogo } from '@src/components/CCatalogo';
+import { CRaccolta } from '@src/components/CRaccolta';
 // import { CMapMarker } from '@src/components/CMapMarker.off'
-import { CMapUsers } from '@src/components/CMapUsers'
-import { CMapGetCoordinates } from '@src/components/CMapGetCoordinates'
-import { CMapEditAddressByCoord } from '@src/components/CMapEditAddressByCoord'
-import { CMapComuni } from '@src/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 { CMapUsers } from '@src/components/CMapUsers';
+import { CMapGetCoordinates } from '@src/components/CMapGetCoordinates';
+import { CMapEditAddressByCoord } from '@src/components/CMapEditAddressByCoord';
+import { CMapComuni } from '@src/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 '@src/mixins/mixin-metatags'
-import MixinBase from '@src/mixins/mixin-base'
-import { useQuasar } from 'quasar'
-import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
-import { LatLng } from 'leaflet'
-
-import { costanti } from '@costanti'
+import MixinMetaTags from '@src/mixins/mixin-metatags';
+import MixinBase from '@src/mixins/mixin-base';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { LatLng } from 'leaflet';
 
+import { costanti } from '@costanti';
 
 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, CRaccolta, CAITools, CStatMacro,
-    CMapComuni, CMapUsers, CMapGetCoordinates, CMapEditAddressByCoord,
-    CDashGroup, CMovements, CGridOriz, CQRCode, CCatalogList,
-    CSearchProduct, CRaccoltaCataloghi, CPageViewStats,
+    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,
+    CRaccolta,
+    CAITools,
+    CStatMacro,
+    CMapComuni,
+    CMapUsers,
+    CMapGetCoordinates,
+    CMapEditAddressByCoord,
+    CDashGroup,
+    CMovements,
+    CGridOriz,
+    CQRCode,
+    CCatalogList,
+    CSearchProduct,
+    CRaccoltaCataloghi,
+    CPageViewStats,
     ChatBot,
+    CSection,
+    CRow,
+    CColumn,
     // ,  //CMapMarker,
   },
   emits: ['selElemClick'],
@@ -116,205 +151,212 @@ export default defineComponent({
     },
   },
   setup(props, { emit }) {
-    const globalStore = useGlobalStore()
+    const globalStore = useGlobalStore();
 
-    const { setmeta, getsrcbyimg } = MixinMetaTags()
-    const { setValDb, getValDb } = MixinBase()
+    const { setmeta, getsrcbyimg } = MixinMetaTags();
+    const { setValDb, getValDb } = MixinBase();
 
-    const $router = useRouter()
+    const $router = useRouter();
 
-    const $q = useQuasar()
-    const { t } = useI18n()
+    const $q = useQuasar();
+    const { t } = useI18n();
 
-    const animare = ref(0)
-    const animarecard = 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 animare = ref(0);
+    const animarecard = 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 tabcatalogo = ref('griglia')
+    const tabcatalogo = ref('griglia');
 
-    const social = ref(<ISocial>{})
+    const social = ref(<ISocial>{});
 
-    const neworder = ref(<number | undefined>0)
+    const neworder = ref(<number | undefined>0);
 
-    const myel = ref(<IMyElem>{})
+    const myel = ref(<IMyElem>{});
 
-    const newtype = ref(<any>'')
+    const newtype = ref(<any>'');
 
-    const isAppRunning = computed(() => globalStore.isAppRunning)
+    const isAppRunning = computed(() => globalStore.isAppRunning);
 
     const currentCardsPerSlide = computed(() => {
-      return myel.value.num2 ? myel.value.num2 : 2 // cardsPerSlide
-    })
+      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 = []
+      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))
+        groups.push(cards.slice(i, i + currentCardsPerSlide.value));
       }
 
-      return groups
-    })
+      return groups;
+    });
 
-    const coordaddr = ref(<ICoordGPS>{ address: '', coordinates: [0, 0] })
+    const coordaddr = ref(<ICoordGPS>{ address: '', coordinates: [0, 0] });
+    const speedSafe = computed(() => (myel.value as any).speed ?? 0);
 
-    const carouselRef = ref(<any>null)
-    const isAtStart = ref(true)
-    const isAtEnd = ref(false)
-    const activeIndex = ref(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()
-    })
+    watch(
+      () => myel.value.order,
+      (value, oldval) => {
+        mounted();
+      }
+    );
 
     function getArrDisciplines() {
-      return globalStore.disciplines.filter((rec: any) => rec.showinhome)
+      return globalStore.disciplines.filter((rec: any) => rec.showinhome);
     }
 
     function getheightgallery() {
-      if (tools.isMobile())
-        return '400px'
-      else
-        return '600px'
+      if (tools.isMobile()) return '400px';
+      else return '600px';
     }
 
     function saveElem(exit?: boolean) {
       // Save Elem record
-      const myelem = props.myelem
-      myelem.order = neworder.value
+      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
+          disableSave.value = true;
+          if (exit) enableEdit.value = false;
         }
-      })
+      });
     }
 
     function addNewElem(order?: number) {
-
-      const newrec = globalStore.prepareAddNewElem(order, $q, t, props.myelem, newtype.value)
+      const newrec = globalStore.prepareAddNewElem(
+        order,
+        $q,
+        t,
+        props.myelem,
+        newtype.value
+      );
     }
 
     function dupElem(order?: number) {
+      const newrec = props.myelem;
 
-      const newrec = props.myelem
+      newrec._id = undefined;
+      newrec.order = order ? order : newrec.order! + 10;
 
-      newrec._id = undefined
-      newrec.order = order ? order : (newrec.order! + 10)
-
-      globalStore.addNewElem($q, t, newrec)
+      globalStore.addNewElem($q, t, newrec);
     }
 
     function modifElem() {
-      disableSave.value = false
+      disableSave.value = false;
     }
 
     const checkScrollPosition = () => {
-      const container = carouselRef.value
-      if (!container || !myel.value || !myel.value.listcards) return
+      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
+      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)
-    }
+      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
+      myel.value = props.myelem;
+      neworder.value = props.myelem.order;
 
-      if (props.myelem)
-        newtype.value = props.myelem.type
+      if (props.myelem) newtype.value = props.myelem.type;
 
       nextTick(() => {
-        checkScrollPosition()
-        carouselRef.value?.addEventListener('scroll', checkScrollPosition)
-      })
+        checkScrollPosition();
+        carouselRef.value?.addEventListener('scroll', checkScrollPosition);
+      });
     }
 
     function clickOnElem() {
       if (props.editOn) {
-        enableEdit.value = true
+        enableEdit.value = true;
         // console.log('selElemClick', props.myelem)
-        emit('selElemClick', props.myelem)
+        emit('selElemClick', props.myelem);
       }
     }
 
     function getClass() {
-      let mycl = ''
+      let mycl = '';
       if (props.myelem.align === shared_consts.ALIGNTYPE.CEHTER) {
-        mycl += ' align_center'
+        mycl += ' align_center';
       } else if (props.myelem.align === shared_consts.ALIGNTYPE.RIGHT) {
-        mycl += ' align_right'
+        mycl += ' align_right';
       } else if (props.myelem.align === shared_consts.ALIGNTYPE.LEFT) {
-        mycl += ' align_left'
+        mycl += ' align_left';
       }
 
-      if (props.myelem.class2)
-        mycl += ' ' + props.myelem.class2
+      if (props.myelem.class2) mycl += ' ' + props.myelem.class2;
 
       if (props.selElem && props.editOn) {
-        if (props.myelem._id === props.selElem._id)
-          mycl += ' selectedElem'
+        if (props.myelem._id === props.selElem._id) mycl += ' selectedElem';
       }
 
-      return mycl
+      return mycl;
     }
 
     function showFit() {
       if (props.myelem && props.myelem.type)
-        return [shared_consts.ELEMTYPE.TEXT].includes(props.myelem.type)
-      else
-        return false
+        return [shared_consts.ELEMTYPE.TEXT].includes(props.myelem.type);
+      else return false;
     }
 
     function PagLogin() {
-      $router.replace('/signin')
+      $router.replace('/signin');
     }
 
     async function clickshare() {
-      tools.addToTemporaryLinkReg()
+      tools.addToTemporaryLinkReg();
 
       const mytext = await tools.sendMsgTelegramCmd(
         $q,
         t,
         shared_consts.MsgTeleg.SHARE_MSGREG,
         true
-      )
+      );
 
       if (false) {
-        social.value.description = mytext
-        visushare.value = true
+        social.value.description = mytext;
+        visushare.value = true;
       }
-
     }
 
     // Classe per le colonne delle card
     function cardColumnClass() {
-      const width = 12 / currentCardsPerSlide.value
-      return `col-${width}`
+      const width = 12 / currentCardsPerSlide.value;
+      return `col-${width}`;
     }
 
-    function updateCatalogoEmit(updatedCatalogo: IOptCatalogo) {
-      console.log('CMyElem: updateCatalogoEmit')
-      myel.value.catalogo = updatedCatalogo
+function updateCatalogoEmit(updatedCatalogo?: IOptCatalogo) {
+  if (!updatedCatalogo) return;
+  console.log('CMyElem: updateCatalogoEmit');
+  myel.value.catalogo = updatedCatalogo;
+}
+
+    function naviga(path?: string): void {
+      if (path) {
+        $router.push(path);
+      } else {
+        // default fallback route
+        $router.push('/');
+      }
     }
 
-    function naviga(path: string) {
-      $router.push(path)
-    }
-
-    onMounted(mounted)
+    onMounted(mounted);
 
     return {
       tools,
@@ -359,8 +401,8 @@ export default defineComponent({
       tabcatalogo,
       costanti,
       naviga,
+      speedSafe,
       t,
-    }
+    };
   },
-
-})
+});