CEventsCalendar.ts

calendarioeventi.ts
CMySingleEvent.ts
evento.ts

src/root/calendarioeventi/calendarioeventi.ts

@@ -0,0 +1,21 @@
+import { defineComponent } from 'vue'
+import { CEventsCalendar } from '@/components/CEventsCalendar'
+import { CMyPage } from '@/components/CMyPage'
+import MixinMetaTags from '@/mixins/mixin-metatags'
+import MixinBase from '@/mixins/mixin-base'
+
+export default defineComponent({
+  name: 'Calendarioeventi',
+  components: { CEventsCalendar, CMyPage },
+
+  setup() {
+
+    const { setmeta } = MixinMetaTags()
+    const { getarrValDb } = MixinBase()
+
+    return {
+      setmeta,
+      getarrValDb
+    }
+  }
+})

src/root/calendarioeventi/calendarioeventi.vue

@@ -0,0 +1,31 @@
+<template>
+  <CMyPage
+    title='Calendario Eventi' imgbackground="images/calendario_eventi.jpg"
+    sizes="max-height: 120px" styleadd="bottom: -16px !important;">
+
+        <span>{{
+            setmeta({
+              title: 'Calendario Eventi',
+              description: 'Calendario degli Eventi che si svolgono all\'Associazione Shen di Lugo (RA)',
+              keywords: 'calendario eventi centro olistico',
+            })
+          }}
+        </span>
+
+    <CEventsCalendar :mysingleevent="null">
+
+    </CEventsCalendar>
+    <br>
+    <p class="cltexth3 text-blue q-ma-md" v-for="(mycal, index) in getarrValDb('EVENTS_CAL')" :key="index">
+      <a :href="`../../statics/files/eventi/` + mycal.file" target="_blank">Calendario Eventi {{ mycal.label }}
+        (PDF)</a><br>
+    </p>
+    <br>
+  </CMyPage>
+
+</template>
+<script lang="ts" src="./calendarioeventi.ts">
+</script>
+<style lang="scss" scoped>
+@import './calendarioeventi.scss';
+</style>

src/root/evento/evento.scss

@@ -0,0 +1,86 @@
+.listaev {
+  color: black;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: 0.03333em;
+
+  &__date {
+    font-weight: bold;
+    color: #2ba0fd;
+    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;
+  }
+
+  &__img {
+    padding: 0.25rem !important;
+    float: left;
+    width: 150px;
+    height: 150px;
+    border-radius: 1rem;
+
+    @media (max-width: 718px) {
+      // PER VERSIONE MOBILE
+      float: none;
+      text-align: center;
+      margin: 0 auto;
+    }
+  }
+
+  &__img:hover {
+    transition: transform .2s;
+    transform: scale(1.05);
+    border: inset;
+    border-color: blue;
+    border-width: 1px;
+  }
+
+}

src/root/evento/evento.ts

@@ -0,0 +1,145 @@
+import { defineComponent, watch, onMounted, ref } from 'vue'
+
+
+import { tools } from '../../store/Modules/tools'
+
+import { CImgText } from '../../components/CImgText/index'
+
+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'
+
+import { Logo } from '../../components/logo/index'
+import { CCard } from '@/components/CCard'
+import { CMyPage } from '@/components/CMyPage'
+import { CMyAvatar } from '@/components/CMyAvatar'
+import { CEventsCalendar } from '@/components/CEventsCalendar'
+import { useRoute } from 'vue-router'
+import { useCalendarStore } from '@store/CalendarStore'
+import MixinMetaTags from '@/mixins/mixin-metatags'
+
+
+export default defineComponent({
+  name: 'Evento',
+  components: { Logo, CImgText, CCard, CMyPage, CMyAvatar, CEventsCalendar },
+  setup() {
+    const myevent = ref(<IEvents | null | undefined> null)
+    const mylastevtypol = ref(<IEvents[]>[])
+    const selected = ref(false)
+
+    const calendarStore = useCalendarStore()
+
+    const { setmeta } = MixinMetaTags()
+
+    const $route = useRoute()
+
+    function changetypol() {
+      // mytypetransgroup = ''
+      const datenow = tools.addDays(tools.getDateNow(), -1)
+      mylastevtypol.value = calendarStore.eventlist.filter((rec: any) => ((rec.typol === $route.params.typol) && (new Date(rec.dateTimeEnd) >= datenow))).slice(-5)
+      console.log('[1] mylastevtypol.value', mylastevtypol.value)
+      if (mylastevtypol.value.length === 0) {
+        mylastevtypol.value = calendarStore.eventlist.filter((rec: any) => (rec.typol === $route.params.typol)).slice(-1)
+      }
+      // console.log('myevent', myevent, 'eventid=', $route.params.eventid)
+    }
+
+    watch(() => $route.params.typol, (value, oldval) => {
+      changetypol()
+    })
+
+    function nextevents() {
+      if (!!mylastevtypol.value && mylastevtypol.value.length > 1) {
+        return mylastevtypol.value
+      } else {
+        return []
+      }
+    }
+
+    function isnotmyevent(ev: any) {
+      if (!!$route.params.eventid)
+        return ev._id !== $route.params.eventid
+      else
+        return true
+    }
+
+    function changeevent() {
+      let eventid: any = null
+      if (!!$route.params.eventid)
+        eventid = $route.params.eventid
+      if (!!$route.query.eventid)
+        eventid = $route.query.eventid
+
+      console.log('changeevent', eventid)
+
+      // mytypetransgroup = ''
+      if (!!eventid) {
+        myevent.value = calendarStore.eventlist.find((rec) => rec._id === eventid)
+      } else {
+        if (!!mylastevtypol.value)
+          myevent.value = mylastevtypol.value[0]
+      }
+    }
+
+    watch(() => $route.params.eventid, (value, oldval) => {
+      changeevent()
+    })
+
+
+    function changeeventquery() {
+      // console.log('changeevent QUERY', $route.query.eventid)
+      // mytypetransgroup = ''
+      if (!!$route.query.eventid) {
+        myevent.value = calendarStore.eventlist.find((rec: any) => rec._id === $route.query.eventid)
+      } else {
+        if (!!mylastevtypol.value)
+          myevent.value = mylastevtypol.value[0]
+      }
+    }
+
+    watch(() => $route.query.eventid, (value, oldval) => {
+      changeeventquery()
+    })
+
+
+    function selectEvent(eventparam: IEvents) {
+      selected.value = !selected.value
+    }
+
+    function getTextEvent(myevent: IEvents) {
+      if (myevent.bodytext === '') {
+        return myevent.details
+      } else {
+        return myevent.bodytext
+      }
+    }
+
+    function mounted() {
+      changetypol()
+      changeevent()
+      // console.log('myevent', myevent)
+    }
+
+    function gettitle() {
+      if (!!myevent.value && (!!myevent.value.title))
+        return myevent.value.title
+      else
+        return ''
+    }
+
+    onMounted(mounted)
+
+    return {
+      gettitle,
+      nextevents,
+      getTextEvent,
+      selectEvent,
+      isnotmyevent,
+      setmeta,
+      myevent,
+    }
+
+  }
+})

src/root/evento/evento.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <CMyPage
+      imgbackground="images/calendario_eventi.jpg" :title="gettitle()" sizes="max-height: 110px;"
+      styleadd="bottom: -36px !important;">
+
+            <span>{{
+                setmeta({
+                  title: gettitle(),
+                  description: '',
+                  keywords: '',
+                })
+              }}
+            </span>
+
+      <CEventsCalendar :mysingleevent="myevent" v-if="myevent">
+
+      </CEventsCalendar>
+
+      <q-separator>
+      </q-separator>
+
+      <div class="q-pa-md text-center" style="max-width: 380px; margin: auto auto 2px; " v-if="nextevents().length > 0">
+        <q-list bordered>
+          <q-item>
+            <q-item-section>
+              <q-item-label overline>PROSSIME DATE:</q-item-label>
+            </q-item-section>
+          </q-item>
+          <div
+            v-for="(ev, index) in nextevents()"
+            :key="index">
+            <q-item
+              v-if="isnotmyevent(ev)"
+              clickable v-ripple
+              :to="`/event/${ev.typol}/${ev._id}`"
+            >
+              <q-item-section avatar v-if="tools.getimgev(ev)">
+                <q-avatar>
+                  <img :src="tools.getimgev(ev)" :alt="ev.title">
+                </q-avatar>
+              </q-item-section>
+              <q-item-section>{{ ev.title }}</q-item-section>
+              <q-item-section side top>{{ tools.getstrDateTimeEventShort($t, ev) }}</q-item-section>
+            </q-item>
+          </div>
+        </q-list>
+      </div>
+
+      <div class="q-ma-md text-center">
+        <q-btn
+          rounded outline type="a" to="/calendario-eventi" color="primary" icon="event"
+          :label="$t('pages.calendarioeventi')">
+        </q-btn>
+
+      </div>
+
+    </CMyPage>
+  </div>
+</template>
+<script lang="ts" src="./evento.ts">
+</script>
+<style lang="scss" scoped>
+@import './evento.scss';
+</style>