newfreeplanet_OLD/src/components/CMyElem/CMyElem.vue

<template>
  <div
    v-if="myel"
    :class="
      (editOn ? ` clEditDiv` : ``) +
      `` +
      (!myel.active ? ` clEditNotActive` : ``)
    "
  >
    <div>
      <div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
        <div
          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
          @click="clickOnElem"
        >
          {{ myel.container }}
        </div>
      </div>
      <div
        v-if="myel.type === shared_consts.ELEMTYPE.CARD"
        :class="myel.span ? '' : ''"
      >
        <div
          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
          @click="clickOnElem"
        >
          <div v-for="(rec, ind) in myel.listcards" :key="ind" >
            <q-card class="my-card center_img" flat bordered>
              rec: {{rec}}
              <q-img :src="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 `" 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-subitle2">

              </q-card-section>
            </div>
          </q-slide-transition>
          -->
            </q-card>
          </div>
        </div>
      </div>

      <div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
        <div
          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
          @click="clickOnElem"
          :style="`margin: ` + myel.size"
        >
          &nbsp;
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
        <div>
          <div
            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
            @click="clickOnElem"
          >
            <CTitle
              :imgbackground="myel.imgback"
              :headtitle="myel.title"
              :sizes="myel.size"
              :styleadd="myel.styleadd"
            >
            </CTitle>
          </div>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
        <div>
          <div
            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
            @click="clickOnElem"
          >
            <CImgTitle
              v-if="myel.container"
              :src="myel.container"
              :title="myel.title"
            >
            </CImgTitle>
          </div>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
        <div>
          <div
            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
            @click="clickOnElem"
            v-html="myel.containerHtml"
          ></div>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
        <div class="text-center">
          <div
            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
            @click="clickOnElem"
          >
            <q-img
              :src="getImgFileByElem(myel.container)"
              :fit="myel.fit"
              class="img"
              :width="myel.widthimg ? myel.widthimg : undefined"
              :height="myel.heightimg ? myel.heightimg : undefined"
            ></q-img>
          </div>
        </div>
      </div>

      <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
        <div class="text-center">
          <div
            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
            @click="clickOnElem"
          >
            <q-img
              :src="getImgFileByElem(myel)"
              :fit="myel.fit"
              class="img"
              :width="myel.widthimg ? myel.widthimg : undefined"
              :height="myel.heightimg ? myel.heightimg : undefined"
            ></q-img>
          </div>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
        <div
          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
          @click="clickOnElem"
        >
          <q-video
            v-if="!!rec.container"
            :src="rec.container"
            :ratio="rec.ratio"
          >
          </q-video>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER">
        <div
          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
          @click="clickOnElem"
        >
          <LandingFooter></LandingFooter>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
        <div
          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
          @click="clickOnElem"
        >
          <CMyPage :mypath="myel.container">&nbsp;</CMyPage>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
        <div
          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
          @click="clickOnElem"
        >
          <CMyPageIntro
            :mypath="myel.container"
            :maxheightimg="myel.heightimg"
            :maxwidthimg="myel.widthimg"
            :link="myel.link"
          ></CMyPageIntro>
        </div>
      </div>
      <div
        v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IDISCIPLINE"
      >
        <CCardCarousel :myarr="getArrDisciplines()"> </CCardCarousel>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.OPENSTREETMAP">
        <div
          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
          @click="clickOnElem"
        >
          <div v-if="myel.container">
            <!-- Da Fare -->
            <COpenStreetMap
              :imgmap="myel.container"
              :urlmap="myel.container2"
              :title="myel.container3"
              :coordinates="myel.containerHtml"
              :coord_big="myel.link"
            >
            </COpenStreetMap>
          </div>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
        <section
          class="maxwidth padding_gallery bg-white text-grey-10 text-center"
        >
          <div
            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
            @click="clickOnElem"
          >
            <q-carousel
              swipeable
              animated
              :autoplay="myel.container2 ? myel.container2 * 1000 : 8000"
              v-model="slide2"
              arrows
              :fit="myel.fit"
              :thumbnails="myel.parambool2"
              infinite
              :height="myel.height ? myel.height.toString() : 600"
            >
              <q-carousel-slide
                v-for="(rec, index) in myel.list"
                :key="index"
                :name="index"
                :img-src="
                  getsrcbyimg(`upload/pages/` + path + `/` + rec.imagefile)
                "
                :alt="rec.alt"
                class="carousel_slide"
              >
                <div
                  v-if="myel.parambool"
                  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>
          </div>
        </section>
      </div>
      <div v-else-if="myel.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 myel.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">
                          {{ myel.container }}&nbsp;
                        </div>
                        <div
                          class="
                            text-subtitle1
                            shadow-max
                            big
                            text-italic
                            q-pl-sm
                          "
                        >
                          {{ myel.container2 }}
                        </div>
                        <div class="text-subtitle2 shadow text-italic q-pl-sm">
                          {{ myel.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="myel.type === shared_consts.ELEMTYPE.CALENDAR">
        <CEventsCalendar :mysingleevent="null" :showfirstN="myel.number || 3">
        </CEventsCalendar>
      </div>
      <div v-else-if="myel.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>
  </div>
</template>

<script lang="ts" src="./CMyElem.ts">
</script>
<style lang="scss" scoped>
@import './CMyElem.scss';
</style>