- Statistiche

- Menu e Sottomenu
- Lista ultimi Movimenti

src/components/CMyElem/CMyElem.ts

@@ -1,6 +1,6 @@
 import {
   computed,
-  defineComponent, onMounted, PropType, ref, toRef, watch,
+  defineComponent, onMounted, PropType, ref, toRef, watch, nextTick,
 } from 'vue'
 
 import { ICoordGPS, IMyCard, IMyElem, IMyPage, IOperators, ISocial } from '@src/model'
@@ -34,6 +34,7 @@ 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'
@@ -65,7 +66,7 @@ export default defineComponent({
     CTitleBanner, CShareSocial, CCheckAppRunning, CRegistration,
     CVisuVideoPromoAndPDF, CECommerce, CCatalogo, CAITools,
     CMapComuni, CMapUsers, CMapGetCoordinates, CMapEditAddressByCoord,
-    CDashGroup,
+    CDashGroup, CMovements,
     // ,  //CMapMarker, 
   },
   emits: ['selElemClick'],
@@ -125,6 +126,11 @@ export default defineComponent({
 
     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()
     })
@@ -173,14 +179,28 @@ export default defineComponent({
       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() {
-      //console.log('mounted elem ')
-      //console.log(props.myelem.type)
       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() {
@@ -271,6 +291,10 @@ export default defineComponent({
       clickshare,
       isAppRunning,
       coordaddr,
+      isAtStart,
+      isAtEnd,
+      activeIndex,
+      carouselRef,
     }
   },
 

src/components/CMyElem/CMyElem.vue

@@ -31,65 +31,71 @@
       </div>
       <div
         v-if="myel.type === shared_consts.ELEMTYPE.CARD"
-        :class="myel.span ? '' : ''"
+        class="card-carousel-container"
       >
         <div
           :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
           @click="clickOnElem"
+          class="card-carousel"
+          ref="carouselRef"
         >
-          <div v-for="(rec, ind) in myel.listcards" :key="ind">
-            <q-card
-              :class="`my-card center_img bordered ` + myel.class3"
-              :style="rec.style"
+          <q-card
+            v-for="(rec, ind) in myel.listcards"
+            :key="ind"
+            :class="
+              `my-card-elem center_img bordered ` +
+              myel.class3 +
+              (rec.link ? ' titolo_card' : '')
+            "
+            :style="
+              rec.style +
+              `; height: ${myel.heightimg || `300px`} !important; width: ${
+                myel.widthimg || `300px`
+              } !important;`
+            "
+            @click="rec.link ? tools.openUrl(rec.link) : undefined"
+          >
+            <div
+              class="img-container"
+              :style="`height: ${
+                myel.heightimg.replace('px', '') * 0.7
+              }px; overflow: hidden;`"
             >
               <q-img
-                :class="tools.getClassAnim(myel.anim2)"
+                :class="tools.getClassAnim(myel.anim2) + ` ` + myel.class4"
                 :src="tools.getImgFileByElem(myel, rec)"
               />
-              <q-card-section>
-                <div :class="rec.size" :style="`color: ` + rec.color">
-                  {{ rec.alt }}
-                </div>
-                <div
-                  :class="`q-mt-sm q-mb-xs ` + tools.getClassAnim(myel.anim)"
-                  v-html="rec.content"
-                ></div>
-                <div
-                  v-if="rec.description"
-                  class="text-caption"
-                  :style="`color: ` + rec.colorsub"
-                >
-                  {{ rec.description }}
-                </div>
-              </q-card-section>
-
-              <!--<q-card-actions>
-          <q-btn flat color="dark" label="Share"/>
-          <q-btn flat color="primary" label="Book"/>
-
-          <q-space/>
-
-          <q-btn
-            color="grey"
-            round
-            flat
-            dense
-            :icon="expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
-            @click="expanded = !expanded"
-          />
-        </q-card-actions>-->
-
-              <!--<q-slide-transition>
-            <div v-show="expanded">
-              <q-separator />
-              <q-card-section class="text-subtitle2">
-
-              </q-card-section>
             </div>
-          </q-slide-transition>
-          -->
-            </q-card>
-          </div>
+            <q-card-section>
+              <div :class="rec.size" :style="`color: ` + rec.color">
+                {{ tools.getText(rec.alt) }}
+              </div>
+              <div
+                :class="`q-mt-sm q-mb-xs ` + tools.getClassAnim(myel.anim)"
+                v-html="rec.content"
+              ></div>
+              <div
+                v-if="rec.description"
+                class="text-caption"
+                :style="`color: ` + rec.colorsub"
+              >
+                {{ rec.description }}
+              </div>
+            </q-card-section>
+          </q-card>
+        </div>
+        <div class="swipe-indicator left" v-if="!isAtStart">
+          <q-icon name="chevron_left" size="2rem" color="white" />
+        </div>
+        <div class="swipe-indicator right" v-if="!isAtEnd">
+          <q-icon name="chevron_right" size="2rem" color="white" />
+        </div>
+        <div class="scroll-indicator">
+          <div
+            v-for="(_, index) in myel.listcards"
+            :key="index"
+            :class="['dot', { active: index === activeIndex }]"
+          ></div>
         </div>
       </div>
 
@@ -468,6 +474,10 @@
         <div v-if="editOn" class="elemEdit">CDashGroup</div>
         <CDashGroup></CDashGroup>
       </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.MOVEMENTS">
+        <div v-if="editOn" class="elemEdit">Lista Movimenti</div>
+        <CMovements></CMovements>
+      </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.CSENDRISTO">
         <div v-if="editOn" class="elemEdit">CSendRISTo</div>
         <CSendRISTo></CSendRISTo>