myprojplanet_vite/src/components/CMyElem/CMyElem.vue

<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>