Home Page With Element ! (Modular)

Arcadei Project...
Inscription

src/components/CMyElem/CMyElem.vue

@@ -0,0 +1,156 @@
+<template>
+  <div v-if="myelem">
+    <div v-if="myelem.type === shared_consts.ELEMTYPE.TEXT">
+      <div :class="myelem.class">{{ myelem.container }}</div>
+    </div>
+    <div v-if="myelem.type === shared_consts.ELEMTYPE.MARGINI">
+      <div :style="`margin: ` + myelem.size"></div>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.TITLE">
+      <CTitle
+        :imgbackground="myelem.imgback"
+        :headtitle="myelem.title" :sizes="myelem.size" :styleadd="myelem.styleadd">
+      </CTitle>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.IMGTITLE">
+      <CImgTitle v-if="myelem.container" :src="myelem.container" :title="myelem.title">
+      </CImgTitle>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.HTML">
+      <div :class="myelem.class" v-html="myelem.containerHtml"></div>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.IMAGE">
+      <div class="text-center">
+         <q-img :src="myelem.container" class="img" :width="myelem.width" :height="myelem.height"></q-img>
+      </div>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.VIDEO">
+      <q-video v-if="!!rec.container" :src="rec.container" :ratio="rec.ratio">
+      </q-video>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.FOOTER">
+      <LandingFooter></LandingFooter>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.PAGE">
+      <CMyPage :mypath="myelem.container"></CMyPage>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.PAGEINTRO">
+      <CMyPageIntro :mypath="myelem.container" :maxheightimg="myelem.heightimg" :maxwidthimg="myelem.widthimg" :link="myelem.link"></CMyPageIntro>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CAROUSEL_IDISCIPLINE">
+      <CCardCarousel :myarr="getArrDisciplines()">
+
+      </CCardCarousel>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.OPENSTREETMAP">
+      <!-- Da Fare -->
+      <COpenStreetMap :imgmap="getValDb('IMGMAP', false)" :urlmap="getValDb('URLMAP', false)" :title="getValDb('MAP_TITLE', false)"
+                      :coordinates="getValDb('COORD_MAP_1', false)" :coord_big="getValDb('COORD_MAP_BIG', false)">
+
+      </COpenStreetMap>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
+      <section class="maxwidth padding_gallery bg-white text-grey-10 text-center" >
+
+        <q-carousel
+          swipeable
+          animated
+          :autoplay="8000"
+          v-model="slide2"
+          arrows
+          thumbnails
+          infinite
+          height="600">
+          <q-carousel-slide v-for="(rec, index) in myelem.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>
+              </div>
+            </div>
+          </q-carousel-slide>
+        </q-carousel>
+      </section>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CAROUSEL_HOME">
+      <section>
+        <div class="landing">
+          <div class="landing__hero maxwidth1200 text-white">
+          <q-carousel
+            animated
+            :autoplay="animare"
+            swipeable
+            infinite
+            navigation
+            transition-next="slide-left"
+            transition-prev="slide-right"
+            v-model="slide"
+            :height="getheightgallery()"
+            width="100%"
+          >
+                <q-carousel-slide
+                  v-for="(myrec, ind) in myelem.list" :key="ind"
+                  :name="ind"
+                                :img-src="getsrcbyimg(`images/`+ myrec.imagefile)">
+
+                <div class="landing__header"></div>
+                <div class="landing__hero-content row justify-center q-gutter-xs clgutter">
+                  <div class="row">
+                    &nbsp;
+                  </div>
+                  <div class="flex justify-end">
+                    <div class="q-gutter-xs testo-banda clgutter">
+                      <h1 class="text-h1 shadow-max">{{ tools.getappname() }}</h1>
+                      <div class="text-subtitle1 shadow text-italic q-pl-sm">
+                        {{myelem.container}}&nbsp;
+                      </div>
+                      <div class="text-subtitle1 shadow-max big text-italic q-pl-sm">
+                        {{myelem.container2}}
+                      </div>
+                      <div class="text-subtitle2 shadow text-italic q-pl-sm">
+                        {{myelem.container3}}
+                      </div>
+                      <div>
+                        <br><br>
+                        <div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px;" class="home">
+                          <br><br>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!--<div class="landing__arrow absolute-bottom text-center">
+                  <i aria-hidden="true"
+                     class="q-icon text-h2 text-white material-icons">expand_more</i>
+                </div>-->
+              </q-carousel-slide>
+          </q-carousel>
+        </div>
+        </div>
+      </section>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CALENDAR">
+      <CEventsCalendar :mysingleevent="null" :showfirstN="myelem.number || 3">
+      </CEventsCalendar>
+    </div>
+    <div v-else-if="myelem.type === shared_consts.ELEMTYPE.CHECK_EMAIL">
+      <div class="q-pa-md q-gutter-md">
+        <div v-if="tools.isLogged() && !isVerified" class="text-verified">{{
+            $t('components.authentication.email_verification.link_sent') }}
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CMyElem.ts">
+</script>
+<style lang="scss" scoped>
+@import './CMyElem.scss';
+</style>