newfreeplanet_OLD/src/components/CMyElem/CMyElem.vue

<template>
  <div v-if="myel">
    <q-bar v-if="editOn" dense class="bg-blue-1 text-white q-px-sm">
      <q-input
        style="max-width: 60px"
        hide-bottom-space
        borderless
        dense
        @update:model-value="modifElem"
        v-model="neworder"
        v-on:keyup.enter="saveElem"
        type="number"
      >
      </q-input>
      <q-space/>
      <q-btn
        icon="fas fa-trash-alt"
        color="negative"
        dense
        flat
        size="sm"
        @click="delElem">
      </q-btn>

      <q-select v-if="addOn"
                v-model="newtype"
                dense
                style="width: 150px;"
                :options="shared_consts.TypesElem"
                emit-value map-options>

      </q-select>
      <q-btn
        v-if="addOn"
        size="sm"
        dense
        flat
        icon="fas fa-plus"
        color="positive"
        @click="addNewElem(myelem.order-10)">
      </q-btn>

    </q-bar>
    <div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
      <div v-if="editOn">
        <q-input
          class="fa-border"
          @update:model-value="modifElem"
          v-model="myel.container"
          filled
          v-on:keyup.enter="saveElem"
        >

        </q-input>

      </div>
      <div v-else
           :class="myel.class">{{ myel.container }}

      </div>
    </div>
    <div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
      <div v-if="editOn">
        <q-input
          label="Margine:"
          class="fa-border"
          @update:model-value="modifElem"
          v-model="myel.size"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>

      </div>
      <div :style="`margin: ` + myel.size"></div>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
      <div v-if="editOn">
        <q-input
          class="fa-border"
          @update:model-value="modifElem"
          v-model="myel.title"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>

      </div>
      <div v-else>
        <CTitle
          :imgbackground="myel.imgback"
          :headtitle="myel.title" :sizes="myel.size" :styleadd="myel.styleadd">
        </CTitle>
      </div>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
      <div v-if="editOn">
        <q-input
          label="Img"
          class="fa-border"
          @update:model-value="modifElem"
          v-model="myel.container"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>
        <q-input
          label="Title"
          class="fa-border"
          @update:model-value="modifElem"
          v-model="myel.container"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>

      </div>
      <div v-else>
        <CImgTitle v-if="myel.container" :src="myel.container" :title="myel.title">
        </CImgTitle>
      </div>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
      <div v-if="editOn">
        <q-input
          label="Classe:"
          @update:model-value="modifElem"
          v-model="myel.class"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>
        <CMyEditor
          v-model:value="myel.containerHtml" title="" @keyup.enter.stop
          :showButtons="false"
          :canModify="true"
          @update:value="modifElem"
          @showandsave="saveElem"
        >
        </CMyEditor>

      </div>
      <div v-else>
        <div :class="myel.class" v-html="myel.containerHtml"></div>
      </div>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
      <div v-if="editOn">
        <q-input
          label="NomeFile Img:"
          @update:model-value="modifElem"
          v-model="myel.container"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>
        <div class="row">
          <q-input
            label="Width:"
            type="number"
            @update:model-value="modifElem"
            v-model="myel.width"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
          <q-input
            label="Height:"
            type="number"
            @update:model-value="modifElem"
            v-model="myel.height"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
        </div>
      </div>
      <div class="text-center">
        <q-img :src="myel.container" class="img" :width="myel.width.toString()" :height="myel.height.toString()"></q-img>
      </div>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.VIDEO">
      <div v-if="editOn" class="row">
        <q-input
          label="NomeFile Video:"
          @update:model-value="modifElem"
          v-model="myel.container"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>
        <q-input
          label="Ratio:"
          type="number"
          @update:model-value="modifElem"
          v-model="myel.ratio"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>
      </div>
      <q-video v-if="!!rec.container" :src="rec.container" :ratio="rec.ratio">
      </q-video>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.FOOTER">
      <LandingFooter></LandingFooter>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGE">
      <div v-if="editOn" class="row">
        <q-input
          label="Nome Pagina:"
          @update:model-value="modifElem"
          v-model="myel.container"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>
      </div>
      <CMyPage :mypath="myel.container"></CMyPage>
    </div>
    <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
      <div v-if="editOn" class="row">
        <q-input
          label="NomeFile Img:"
          @update:model-value="modifElem"
          v-model="myel.container"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>
        <q-input
          label="Width:"
          type="number"
          @update:model-value="modifElem"
          v-model="myel.widthimg"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>
        <q-input
          label="Height:"
          type="number"
          @update:model-value="modifElem"
          v-model="myel.heightimg"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>
        <q-input
          label="Link:"
          @update:model-value="modifElem"
          v-model="myel.link"
          filled
          v-on:keyup.enter="saveElem"
        >
        </q-input>
      </div>
      <CMyPageIntro :mypath="myel.container" :maxheightimg="myel.heightimg" :maxwidthimg="myel.widthimg" :link="myel.link"></CMyPageIntro>
    </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">
      <!-- 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="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
      <section class="maxwidth padding_gallery bg-white text-grey-10 text-center">

        <div v-if="editOn" class="row">
          <q-input
            label="lista:"
            @update:model-value="modifElem"
            v-model="myel.list"
            filled
            v-on:keyup.enter="saveElem"
          >
          </q-input>
        </div>

        <q-carousel
          swipeable
          animated
          :autoplay="8000"
          v-model="slide2"
          arrows
          thumbnails
          infinite
          height="600">
          <q-carousel-slide v-for="(rec, index) in myel.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="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>
    <q-btn
      v-if="editOn && !disableSave"
      icon="fas fa-check"
      color="positive"
      label="Salva"
      size="sm"
      :disable="disableSave"
      @click="saveElem">
    </q-btn>

  </div>
</template>

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