salvato.newfreeplanet/src/components/CMyElem/CMyElem.vue

<template>
  <div
    v-if="myel"
    :class="
      (editOn ? ` clEditDiv` : ``) +
      `` +
      getClass() +
      (!myel.active ? ` clEditNotActive` : ``)
    "
    @click="clickOnElem"
  >
    <div>
      <div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
        <transition
          appear
          enter-active-class="animated fadeIn"
          leave-active-class="animated fadeOut"
        >
          <div
            :class="
              myel.class +
              (editOn ? ` clEdit` : ``) +
              getClass() +
              ` ` +
              tools.getClassAnim(myel.anim)
            "
          >
            {{ myel.container }}
          </div>
        </transition>
      </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 bordered ` + myel.class3"
              :style="rec.style"
            >
              <q-img
                :class="tools.getClassAnim(myel.anim2)"
                :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>
        </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() +
              ` ` +
              tools.getClassAnim(myel.anim)
            "
            @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() +
              ` ` +
              tools.getClassAnim(myel.anim)
            "
            @click="clickOnElem"
          >
            <CImgTitle
              v-if="myel.image"
              :src="tools.getImgFileByElem(myel)"
              :title="myel.container"
              :legendinside="myel.container2"
            >
            </CImgTitle>
          </div>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
        <div
          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
          @click="clickOnElem"
        >
          <CImgPoster
            v-if="myel.image"
            :src="tools.getImgFileByElem(myel)"
            :title="myel.container"
            :myheight="myel.heightimg"
            :vertalign="myel.vertalign"
            :speed="myel.speed"
            :elemsText="myel.elemsText"
            :logo="tools.getImgFileByFilename(myel, myel.img)"
            :logoheight="myel.height ? myel.height.toString() : '100'"
            :logowidth="myel.width ? myel.width.toString() : '100'"
            :fit="myel.fit"
            :anim="myel.anim"
          >
          </CImgPoster>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
        <div>
          <div
            :class="
              myel.class +
              (editOn ? ` clEdit` : ``) +
              getClass() +
              ` ` +
              tools.getClassAnim(myel.anim)
            "
            @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() +
              ` ` +
              tools.getClassAnim(myel.anim)
            "
            @click="clickOnElem"
          >
            <q-img
              :src="tools.getImgFileByElem(myel.image)"
              :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() +
              ` ` +
              tools.getClassAnim(myel.anim)
            "
            @click="clickOnElem"
          >
            <q-img
              :src="tools.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="myel && !!myel.container"
            :src="myel.container"
            :ratio="myel.ratio"
          >
          </q-video>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
        <div
          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
          @click="clickOnElem"
        >
          <div v-if="editOn" style="color: gray">
            Pagina: {{ myel.container }}
          </div>
        </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="
            ($q.dark.isActive
              ? `bg-black text-white`
              : `bg-white text-grey-10`) + ` padding_gallery 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.heightimg
                  ? myel.heightimg.toString()
                  : tools.getheightgallery()
              "
            >
              <q-carousel-slide
                v-for="(rec, index) in myel.list"
                :key="index"
                :name="index"
                :img-src="
                  getsrcbyimg(`upload/pages/` + myel.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">
        <div v-if="editOn" class="elemEdit">Calendario Eventi</div>
        <CEventsCalendar :mysingleevent="null" :showfirstN="myel.number || 3">
        </CEventsCalendar>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.MAINVIEW">
        <div v-if="editOn" class="elemEdit">CMainView</div>
        <CMainView></CMainView>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.PROFILETUTORIAL">
        <div v-if="editOn" class="elemEdit">CMyProFileTutorual</div>
        <CMyProfileTutorial />
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKAPPRUNNING">
        <div v-if="editOn" class="elemEdit">CheckAppRunning</div>
        <CCheckAppRunning />
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.REGISTRATION">
        <div v-if="editOn" class="elemEdit">Registrazione</div>

        <div>
          <CRegistration />
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.BUTTON">
        <div v-if="editOn" class="elemEdit"></div>
        <div
          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
          @click="clickOnElem"
        >
          <q-btn
            class="text-center"
            v-if="myel.container"
            type="a"
            rounded
            :label="myel.container"
            size=""
            :color="myel.color"
            :text-color="myel.containerHtml"
            :icon="myel.container2"
            :href="myel.link"
            :target="myel.container3"
          >
          </q-btn>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.DASHBOARD">
        <div v-if="editOn" class="elemEdit">CDashboard</div>
        <CDashboard></CDashboard>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CSENDRISTO">
        <div v-if="editOn" class="elemEdit">CSendRISTo</div>
        <CSendRISTo></CSendRISTo>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.STATUSREG">
        <div v-if="editOn" class="elemEdit">CStatusReg</div>
        <CStatusReg> </CStatusReg>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKIFISLOGGED">
        <div v-if="editOn" class="elemEdit">CCheckIfIsLogged</div>
        <CCheckIfIsLogged :showalways="myel.container"></CCheckIfIsLogged>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.INFO_VERSION">
        <div>Versione: {{ tools.getvers() }}</div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.BOTT_CONDIVIDI">
        <div class="row justify-evenly items-center q-pa-sm q-ma-sm">
          <q-btn
            icon="fas fa-link"
            color="blue"
            type="a"
            size="md"
            :class="
              myel.class +
              (editOn ? ` clEdit` : ``) +
              getClass() +
              ` ` +
              tools.getClassAnim(myel.anim)
            "
            rounded
            :label="$t('reg.link_reg_and_msg')"
            @click="clickshare"
          >
          </q-btn>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECK_EMAIL">
        <div v-if="editOn" class="elemEdit">
          Msg di Controllo Verifica Email
        </div>
        <div class="q-pa-md q-gutter-md">
          <div
            v-if="tools.isLogged() && !tools.isVerified()"
            class="text-verified"
          >
            {{ $t('components.authentication.email_verification.link_sent') }}
          </div>
        </div>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.PRESENTAZIONE">
        <div v-if="editOn" class="elemEdit">Pagina di Presentazione</div>
        <CPresentazione></CPresentazione>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.MYACTIVITIES">
        <div v-if="editOn" class="elemEdit">Pagina Attività</div>
        <CMyActivities></CMyActivities>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.NOTIFATTOP">
        <div v-if="editOn" class="elemEdit">Notifiche in Cima</div>
        <CNotifAtTop></CNotifAtTop>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKTESTENV">
        <div v-if="editOn" class="elemEdit">Check Sito di Test</div>
        <q-banner
          v-if="tools.isTest() && false"
          rounded
          dense
          class="bg-negative text-white"
          color="primary q-title"
          style="text-align: center"
        >
          <template v-slot:avatar>
            <q-icon
              name="fas fa-exclamation-triangle"
              color="yellow"
              size="xs"
            />
          </template>
          <span class="mybanner"> TEST !</span>
        </q-banner>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHECKNEWVERSION">
        <div v-if="editOn" class="elemEdit">Controllo Nuova Versione</div>
        <q-banner
          v-if="globalStore.isNewVersionAvailable"
          rounded
          dense
          class="bg-green text-white"
          color="primary q-title"
          style="text-align: center"
        >
          <template v-slot:avatar>
            <q-icon
              name="fas fa-exclamation-triangle"
              color="yellow"
              size="xs"
            />
          </template>
          <span class="mybanner"
            >Aggiornamento APP in corso ... Se dopo 1 minuto non dovesse
            scomparire questo messaggio, chiudere e riaprire la pagina.</span
          >
        </q-banner>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.BTN_REG">
        <q-btn
          rounded
          size="md"
          color="primary"
          to="/registrati"
          :label="$t('reg.submit')"
        >
        </q-btn>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.BTN_REG_BYBOT">
        <q-btn
          type="a"
          rounded
          size="lg"
          color="primary"
          href="/bot"
          :label="$t('reg.submit')"
          :class="
            myel.class +
            (editOn ? ` clEdit` : ``) +
            getClass() +
            ` ` +
            tools.getClassAnim(myel.anim)
          "
        >
        </q-btn>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.BTN_LOGIN">
        <q-btn
          :class="
            myel.class +
            (editOn ? ` clEdit` : ``) +
            getClass() +
            ` ` +
            tools.getClassAnim(myel.anim)
          "
          rounded
          size="lg"
          color="primary"
          @click="PagLogin"
        >
          {{ $t('login.enter') }}
        </q-btn>
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.CHART">
        <div v-if="editOn">Chart</div>
        <!--<CChartMap
            title="Mappa"
            subtitle="cartina..."
            serie1="Serie 1"
          >
          </CChartMap>-->
      </div>
      <div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER">
        <LandingFooter />
      </div>
      <div v-if="editOn">
        <div class="q-ma-md"></div>
      </div>
    </div>
  </div>

  <q-dialog
    v-model="visushare"
    transition-show="slide-up"
    transition-hide="slide-down"
    :maximized="$q.screen.lt.sm"
  >
    <CShareSocial
      v-if="social && social.description"
      :description="social.description"
      :title="social.title"
      :url="social.url"
    >
    </CShareSocial>
  </q-dialog>
</template>

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