other components... (2)

src/components/CMySingleEvent/CMySingleEvent.scss

@@ -0,0 +1,171 @@
+$graytext: #555;
+
+.listaev {
+  color: black;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: 0.03333em;
+
+  &__date {
+    color: #061220;
+    font-size: 1rem;
+  }
+
+  &__title {
+    color: red;
+    font-weight: 700;
+    letter-spacing: 0.066em;
+  }
+
+  &__details {
+    color: black;
+  }
+
+  &__tdimg {
+    width: 150px;
+    height: 150px;
+  }
+
+  &__tdimg_small {
+    width: auto;
+    height: 50px !important;
+    @media (max-width: 800px) {
+      height: 40px !important;
+    }
+  }
+
+  &__table {
+    margin: 10px;
+    border: solid 1px #4198ef;
+    border-radius: 1rem;
+    padding: 2px;
+  }
+  &__table tr {
+    border: solid 1px #4198ef;
+    border-radius: 1rem;
+  }
+
+
+  &__align_center_mobile {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__align_chips {
+    text-align: center;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+  }
+
+  &__singleevimg {
+    padding: 0.25rem !important;
+    float: left;
+    width: 250px;
+    height: 250px;
+    border-radius: 1rem;
+
+    @media (max-width: 718px) {
+      // PER VERSIONE MOBILE
+      float: none;
+      text-align: center;
+      margin: 0 auto;
+
+      width: 200px;
+      height: 200px;
+    }
+  }
+
+  &__img:hover {
+    transition: transform .2s;
+    transform: scale(1.05);
+    border: inset;
+    border-color: blue;
+    border-width: 1px;
+  }
+
+}
+
+.cal {
+  color: black;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: 0.03333em;
+
+  &__title {
+    color: white;
+    font-weight: 700;
+    font-size: 1rem;
+    padding-bottom: 10px;
+  }
+
+  &__details {
+    color: black;
+  }
+
+  &__hours {
+    color: blue;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      font-weight: 400;
+    }
+  }
+
+  &__where {
+    margin-top: 5px;
+    color: blue;
+
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      color: darkblue;
+    }
+  }
+
+  &__when {
+    margin-top: 5px;
+    color: blue;
+
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      color: darkblue;
+    }
+  }
+
+  &__teacher {
+    margin-top: 5px;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      color: darkblue;
+    }
+  }
+
+  &__quota {
+    margin-top: 5px;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+
+    }
+  }
+
+  &__img {
+    width: 100px;
+    height: 100px;
+    padding: 10px;
+  }
+
+}
+

src/components/CMySingleEvent/CMySingleEvent.ts.off

@@ -0,0 +1,85 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { CalendarStore, GlobalStore, UserStore } from '@store'
+
+import { Logo } from '../../components/logo/index'
+
+import { Footer } from '../../components/Footer/index'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import { static_data } from '@src/db/static_data'
+import { Screen } from 'quasar'
+
+import { CImgText } from '../../components/CImgText/index'
+import { CCard, CMyAvatar, CMyTeacher, CMyPage } from '@components'
+import MixinOperator from '@src/mixins/mixin-operator'
+import MixinEvents from '../../mixins/mixin-events'
+import { IEvents } from '@src/model'
+import MixinBase from '@src/mixins/mixin-base'
+import MixinUsers from '@src/mixins/mixin-users'
+
+@Component({
+  name: 'CMySingleEvent',
+  mixins: [MixinOperator, MixinBase, MixinEvents, MixinUsers],
+  components: { Logo, Footer, CImgText, CCard, CMyPage, CMyAvatar, CMyTeacher }
+})
+export default class CMySingleEvent extends MixinEvents {
+  @Prop({ required: true }) public myevent: IEvents
+  public $q
+  public $t
+  public selected: boolean = false
+
+  get mythis() {
+    return this
+  }
+
+  set mythis(aa) {
+
+  }
+
+  public selectEvent(eventparam: IEvents) {
+    this.selected = !this.selected
+  }
+
+  public getTextEvent(myevent: IEvents) {
+    if (myevent.bodytext === '') {
+      return myevent.details
+    } else {
+      return myevent.bodytext
+    }
+  }
+
+  public mounted() {
+    // console.log('MYSINGLEEVENT: myevent', this.myevent)
+  }
+
+  get static_data() {
+    return static_data
+  }
+
+  public duplicateEvent(event, numgg) {
+    this.$emit('duplicateEvent', event, numgg)
+  }
+
+  public askForInfoEventMenu(event) {
+    this.$emit('askForInfoEventMenu', event)
+  }
+
+  public deleteEvent(event) {
+    this.$emit('deleteEvent', event)
+  }
+
+  public editEvent(event) {
+    this.$emit('editEvent', event)
+  }
+
+  public addBookEventMenu(event) {
+    this.$emit('addBookEventMenu', event)
+  }
+
+  public EditBookEvent(event) {
+    this.$emit('EditBookEvent', event)
+  }
+
+}

src/components/CMySingleEvent/CMySingleEvent.vue.off2

@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <CMyPage
+v-if="myevent" :imgbackground="myevent.img" :title="myevent.title" keywords="" description=""
+             nofooter="true">
+
+      <div class="q-mx-md">
+        <div class="listaev__align_chips q-ma-md">
+          <img
+:src="getImgEvent(myevent)"
+               @click="selectEvent(myevent)"
+               class="text-left padding_cell listaev__tdimg listaev__singleevimg cursor-pointer"
+               :style="getStyleByEvent(myevent, true)"
+               :alt="myevent.title">
+          <q-chip
+dense v-if="isAlreadyBooked(myevent)" class="cltexth4 chipbooked shadow-5 q-mb-md"
+                  color="green" text-color="white"
+                  icon="event_available">{{ $t('cal.booked') }}
+          </q-chip>
+          <div v-if="selected">
+            <q-chip v-if="editable" class="text-center shadow-5 glossy bg-blue chipmodif">
+
+              <q-btn v-if="editable" flat round color="white" icon="fas fa-copy">
+                <q-menu
+                  transition-show="flip-right"
+                  transition-hide="flip-left">
+                  <q-list style="min-width: 100px">
+                    <q-item clickable @click="duplicateEvent(myevent, 7)">
+                      <q-item-section>Tra 1 Settimana</q-item-section>
+                    </q-item>
+                    <q-item clickable @click="duplicateEvent(myevent, 14)">
+                      <q-item-section>Tra 2 Settimane</q-item-section>
+                    </q-item>
+                    <q-item clickable @click="duplicateEvent(myevent, 7, 4)">
+                      <q-item-section>4 Eventi ogni Settimana</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+              <q-btn
+v-if="editable" flat round color="white" icon="delete" v-close-popup
+                     @click="deleteEvent(myevent)"></q-btn>
+              <q-btn
+v-if="editable" flat round color="white" icon="edit" v-close-popup
+                     @click="editEvent(myevent)"></q-btn>
+              <q-btn
+v-if="editable" flat round color="white" icon="cancel"
+                     @click="selectEvent(null)"></q-btn>
+            </q-chip>
+          </div>
+          <q-chip
+v-if="myevent.news" class="cltexth4 chipnews shadow-5 glossy text-right" color="red"
+                  text-color="white" icon-right="star" icon="star" dense
+                  style="">
+            {{ $t('event.news') }}
+          </q-chip>
+
+        </div>
+
+        <div class="listaev__date listaev__align_center_mobile">
+          <span v-html="tools.getstrDateTimeEvent(mythis, myevent, true)"></span>
+        </div>
+
+        <div class="listaev__align_center_mobile">
+
+          <div style="margin: 10px;"></div>
+
+          <div class="q-pa-sm q-gutter-md text-center">
+            <!-- Se c'è un link, allora -->
+            <q-btn
+class="text-center boldhigh" v-if="myevent.linkpdf" size="md" type="a"
+                   :href="`../../statics/` + myevent.linkpdf"
+                   target="_blank"
+                   ripple rounded :label="myevent.title"
+                   :color="myevent.bgcolor" text-color="white" glossy>
+
+            </q-btn>
+            <!-- altrimenti mostra solo Chip -->
+            <div
+v-else-if="tools.isMobile()" class="cltexth3 text-center boldhigh"
+                 :style="`background-color: ${myevent.bgcolor} !important; color: white !important;`">
+              {{ myevent.title }}
+            </div>
+            <q-chip
+v-else class="cltexth3 text-center boldhigh"
+                    icon="bookmark"
+                    :style="`background-color: ${myevent.bgcolor} !important; color: white !important;`"
+                    text-color="white"
+                    dense>{{ myevent.title }}
+            </q-chip>
+          </div>
+
+          <div style="margin: 10px;"></div>
+
+          <p v-if="myevent.bodytext" class="listaev__details text-left q-mb-md" v-html="myevent.bodytext"></p>
+          <p v-else class="listaev__details" v-html="myevent.details"></p>
+
+
+          <div v-for="(mypage, index) in myevent.pagefooter" :key="index">
+            <CMyPage v-if="!!mypage" :mypath="`/`+ mypage">
+            </CMyPage>
+          </div>
+
+          <div v-if="myevent.teacher" class="">
+                                    <span class="cal__teacher-title">{{ $t('cal.teacher') }}: <span
+                                      class="margin_with"></span></span>
+
+            <CMyTeacher :username="myevent.teacher"></CMyTeacher>
+            <CMyTeacher :username="myevent.teacher2"></CMyTeacher>
+            <CMyTeacher :username="myevent.teacher3"></CMyTeacher>
+            <CMyTeacher :username="myevent.teacher4"></CMyTeacher>
+
+            <span v-if="myevent.wherecode" class="q-ma-md">
+                                        <span v-if="tools.isMobile()"><br/></span>
+                                        <span class="cal__where-title">{{ $t('cal.where') }}: </span>
+
+                                        <q-chip>
+                                            <q-avatar v-if="getWhereIcon(myevent.wherecode)">
+                                                <img
+                                                  :src="`../../statics/images/avatar/` + getWhereIcon(myevent.wherecode)"
+                                                  alt="località">
+                                            </q-avatar>
+                                            <q-avatar
+v-else color="blue" font-size="20px" text-color="white"
+                                                      icon="home">
+                                            </q-avatar>
+                                            <span
+                                              class="cal__teacher-content">{{ getWhereName(myevent.wherecode) }}</span>
+                                        </q-chip>
+                                    </span>
+          </div>
+          <div v-if="myevent.contribtype" class="q-ma-sm">
+                                <span class="cal__quota-title">{{ $t('event.price') }}:<span
+                                  class="margin_with"></span></span>
+            <span v-if="!isShowPrice(myevent)" class="">
+                                    <q-chip class="glossy" color="orange" text-color="white">
+                                        <span
+                                          class="cal__quota-content">{{
+                                            getContribtypeById(myevent.contribtype)
+                                          }}</span>
+                                    </q-chip>
+                                </span>
+
+            <q-chip
+v-if="myevent.price && isShowPrice(myevent)" class="glossy" color="orange"
+                    text-color="white" icon-right="star">
+              <span class="cal__quota-content">{{ getPrice(myevent) }}</span>
+            </q-chip>
+          </div>
+
+
+          <div class="row justify-start q-ma-md">
+            <q-btn
+v-if="myevent.linkpdf"
+                   size="md" type="a" :href="`../../statics/` + myevent.linkpdf"
+                   target="_blank" rounded outline
+                   color="primary" icon="info"
+                   :label="$t('cal.showpdf')">
+
+            </q-btn>
+            <!--<q-btn v-if="myevent.bodytext" rounded outline class="q-mx-sm"
+                   color="primary"
+                   :to="`/event/${myevent.typol}/${myevent._id}`"
+                   :label="$t('event.showpage')">
+            </q-btn>-->
+          </div>
+          <div class="row text-center">
+            <q-btn
+rounded outline class="q-mx-sm"
+                   color="primary" @click="askForInfoEventMenu(myevent)"
+                   :label="$t('event.askinfo')">
+            </q-btn>
+            <q-btn
+rounded class="q-mx-sm"
+                   v-if="!myevent.nobookable && !isAlreadyBooked(myevent) && static_data.functionality.BOOKING_EVENTS"
+                   color="primary" @click="addBookEventMenu(myevent)"
+                   :label="$t('cal.booking')" :disable="!isEventEnabled(myevent)">
+            </q-btn>
+            <q-btn
+rounded outline class="q-mx-sm"
+                   v-if="!myevent.nobookable && isAlreadyBooked(myevent) && static_data.functionality.BOOKING_EVENTS"
+                   text-color="red"
+                   @click="EditBookEvent(myevent)"
+                   :label="$t('cal.modifybooking')">
+            </q-btn>
+            <br>
+            <!--
+                                                <q-btn push rounded v-if="!myevent.nobookable && isAlreadyBooked(myevent)" color="positive" @click="BookEvent(myevent)"
+                                                       :label="$t('cal.booked')">
+                                                </q-btn>
+            -->
+
+          </div>
+        </div>
+      </div>
+    </CMyPage>
+  </div>
+</template>
+<script lang="ts" src="./CMySingleEvent.ts">
+</script>
+<style lang="scss" scoped>
+@import './CMySingleEvent.scss';
+</style>

src/components/CMySingleEvent/index.ts

@@ -0,0 +1 @@
+export {default as CMySingleEvent} from './CMySingleEvent.vue'