From 5cff83f582bf578de0ef4871872c5f2bdae8545d Mon Sep 17 00:00:00 2001
From: Paolo Arena <paolo.arena77@gmail.com>
Date: Fri, 15 Nov 2019 00:32:39 +0100
Subject: [PATCH] - Open Dialog for Operators when click on Chip #91 - HOME:
 Show last 5 Events #99 - Creating HOME page with the Services Offering
 (Disciplines...) #96 - CCardDiscipline #104

---
 src/components/CBook/CBook.vue                |   2 +-
 src/components/CCard/CCard.vue                |   2 +-
 .../CCardDiscipline/CCardDiscipline.scss      |  28 ++-
 .../CCardDiscipline/CCardDiscipline.ts        |  42 ++++-
 .../CCardDiscipline/CCardDiscipline.vue       |  53 +++---
 .../CEventsCalendar/CEventsCalendar.scss      |   3 +-
 .../CEventsCalendar/CEventsCalendar.ts        |  31 ++--
 .../CEventsCalendar/CEventsCalendar.vue       | 166 +++++-------------
 .../CFacebookFrame/CFacebookFrame.ts          |  10 ++
 .../CFacebookFrame/CFacebookFrame.vue         |   2 +-
 src/components/CMyChipList/CMyChipList.ts     |  53 ++++--
 src/components/CMyPage/CMyPage.ts             |   1 +
 src/components/CMyPage/CMyPage.vue            |   4 +-
 src/components/CMyPopupEdit/CMyPopupEdit.ts   |   9 +
 src/components/CMyPopupEdit/CMyPopupEdit.vue  |  29 +++
 .../CMySingleEvent/CMySingleEvent.scss        |   3 +-
 .../CMySingleEvent/CMySingleEvent.ts          |  16 +-
 .../CMySingleEvent/CMySingleEvent.vue         |  16 +-
 src/components/Footer/Footer.scss             |   1 +
 src/components/Footer/Footer.ts               |   3 +-
 src/components/Footer/Footer.vue              | 103 +++++------
 .../FormNewsletter/FormNewsletter.vue         |   3 +
 src/components/Header/Header.ts               |   2 +-
 src/components/index.ts                       |   2 +
 src/mixins/mixin-base.ts                      |   8 +-
 src/mixins/mixin-events.ts                    |  15 +-
 src/model/GlobalStore.ts                      |   1 +
 src/statics/i18n.js                           |  20 +++
 src/store/Modules/GlobalStore.ts              |   3 +-
 src/store/Modules/fieldsTable.ts              |  32 +++-
 src/store/Modules/tools.ts                    | 105 ++++++++++-
 31 files changed, 489 insertions(+), 279 deletions(-)

diff --git a/src/components/CBook/CBook.vue b/src/components/CBook/CBook.vue
index f290c2e..a36cb57 100644
--- a/src/components/CBook/CBook.vue
+++ b/src/components/CBook/CBook.vue
@@ -9,7 +9,7 @@
 
         <q-tabs v-model="tab" class="text-teal">
             <q-tab label="Info" name="one"></q-tab>
-            <q-tab label="Storia" name="two"></q-tab>
+            <q-tab label="Biografia" name="two"></q-tab>
         </q-tabs>
 
         <q-separator></q-separator>
diff --git a/src/components/CCard/CCard.vue b/src/components/CCard/CCard.vue
index f850d68..caaf301 100644
--- a/src/components/CCard/CCard.vue
+++ b/src/components/CCard/CCard.vue
@@ -9,7 +9,7 @@
 
         <q-tabs v-model="tab" class="text-teal">
             <q-tab label="Info" name="one"></q-tab>
-            <q-tab label="Storia" name="two"></q-tab>
+            <q-tab label="Biografia" name="two"></q-tab>
         </q-tabs>
 
         <q-separator></q-separator>
diff --git a/src/components/CCardDiscipline/CCardDiscipline.scss b/src/components/CCardDiscipline/CCardDiscipline.scss
index ae21da2..27b34db 100644
--- a/src/components/CCardDiscipline/CCardDiscipline.scss
+++ b/src/components/CCardDiscipline/CCardDiscipline.scss
@@ -25,15 +25,33 @@ $grayshadow: #555;
   width: 100%;
   max-width: 350px;
   min-width: 300px;
-  padding: 1rem 1rem;
+  padding: 0;
 
   box-shadow: none;
-  border-radius: 20px;
-  margin: 1rem 1rem;
+  border-radius: 30px;
+}
+
+.my-card-shadow {
+  width: 100%;
+  max-width: 350px;
+  min-width: 300px;
+  padding-bottom: 20px;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 30px;
+
   transition: transform .2s ease-out;
 }
 
-.my-card-discipline:hover {
+.yes_shadow {
+  -webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.16);
+}
+
+
+.my-card-shadow:hover {
   transition: transform .2s ease-in;
   transform: scale(1.03);
 }
@@ -73,8 +91,8 @@ $grayshadow: #555;
 }
 
 .myimg {
+  height: 200px;
   border-radius: 30px !important;
-  margin: 30px auto 10px;
 }
 
 .q-img {
diff --git a/src/components/CCardDiscipline/CCardDiscipline.ts b/src/components/CCardDiscipline/CCardDiscipline.ts
index cf2cc2a..99a4f25 100644
--- a/src/components/CCardDiscipline/CCardDiscipline.ts
+++ b/src/components/CCardDiscipline/CCardDiscipline.ts
@@ -3,19 +3,53 @@ import { Component, Prop, Watch } from 'vue-property-decorator'
 
 import { tools } from '../../store/Modules/tools'
 import { toolsext } from '@src/store/Modules/toolsext'
-import { IDiscipline } from '../../model'
+import { IDiscipline, IEvents } from '../../model'
 import MixinBase from '../../mixins/mixin-base'
+import MixinOperator from '../../mixins/mixin-operator'
+import MixinUsers from '../../mixins/mixin-users'
+import { CMyTeacher } from '../CMyTeacher'
+import { CalendarStore } from '../../store/Modules'
 
 @Component({
-  mixins: [MixinBase],
-  name: 'CCardDiscipline'
+  mixins: [MixinBase, MixinOperator, MixinUsers],
+  name: 'CCardDiscipline',
+  components: { CMyTeacher }
 })
 
 export default class CCardDiscipline extends Vue {
   @Prop({ required: true }) public discipline: IDiscipline
+  @Prop({ required: false, default: '' }) public mystyle: string
+  @Prop({ required: false, default: false }) public autoplay: boolean
+
+  public nextlesson: IEvents
+
+  @Watch('discipline')
+  public disciplinechanged(value) {
+    this.nextlesson = this.getNextLesson(value.typol_code)
+    // console.log('nextlesson', this.nextlesson)
+  }
 
   public getNextLesson(typol) {
     // Get next lesson
-    return ''
+    const datenow = tools.addDays(tools.getDateNow(), -1)
+    return CalendarStore.state.eventlist.find((myevent) => (myevent.typol === typol) && (new Date(myevent.dateTimeEnd) >= datenow))
+    // return CalendarStore.state.eventlist.find((myevent) => (myevent.typol === typol))
   }
+
+  public ExistLesson() {
+    return !!this.nextlesson
+  }
+
+  public NextEventDate() {
+    return tools.getstrDateTimeEventSimple(this, this.nextlesson)
+  }
+
+  get getLinkEvent() {
+    return `event/${this.nextlesson.typol}/${this.nextlesson._id}`
+  }
+
+  public created() {
+    this.disciplinechanged(this.discipline)
+  }
+
 }
diff --git a/src/components/CCardDiscipline/CCardDiscipline.vue b/src/components/CCardDiscipline/CCardDiscipline.vue
index 60a4072..3ba2d2c 100644
--- a/src/components/CCardDiscipline/CCardDiscipline.vue
+++ b/src/components/CCardDiscipline/CCardDiscipline.vue
@@ -1,30 +1,43 @@
 <template>
-    <q-card class="my-card-discipline text-center fa-border inset-shadow">
-        <q-img :src="`statics/` + discipline.img_small" class="myimg">
-            <div class="absolute-bottom text-spacetrans">
-                <q-btn rounded :to="discipline.linkpage">
-                    <div class="text-h4 text-trans disc__title shadow-max">{{discipline.label}}</div>
+    <div class="my-card-shadow yes_shadow" style="opacity: 1 !important;">
+        <q-card class="my-card-discipline text-center inset-shadow" :style="mystyle">
+            <q-img :src="`statics/` + discipline.img_small" class="myimg">
+                <div class="absolute-bottom text-spacetrans">
+                    <q-btn rounded :to="discipline.linkpage">
+                        <div class="text-h5 disc__title shadow-max">{{discipline.label}}</div>
+                    </q-btn>
+                </div>
+            </q-img>
+
+            <q-card-section>
+                <div class="disc__description">{{discipline.description}}</div>
+            </q-card-section>
+
+            <q-card-section v-if="ExistLesson()" class="text-blue">
+                {{ $t('cal.nextevent') }}:
+                <q-btn rounded type="a" :to="getLinkEvent" color="primary" icon="event" :label="NextEventDate()">
                 </q-btn>
-            </div>
-        </q-img>
+            </q-card-section>
 
-        <q-card-section>
-            <div class="disc__description">{{discipline.description}}</div>
-        </q-card-section>
+            <q-separator inset></q-separator>
 
-        <q-card-section v-if="getNextLesson(discipline.typol_code)">
-            <i class="icon ion-calendar"></i> Prossima Lezione:
-            <div class="disc__description">{{getNextLesson(discipline.typol_code)}}</div>
-        </q-card-section>
+            <q-card-section class="row justify-center">
+                <div v-for="(teach, index) in discipline.teachers" :key="index"
+                     v-if="getImgTeacherByUsername(teach) && isValidUsername(teach)">
+                    <CMyTeacher :username="teach">
+                    </CMyTeacher>
+                </div>
+            </q-card-section>
 
-        <q-btn rounded size="sm" color="primary" :to="discipline.linkpage">Leggi tutto</q-btn>
+            <q-btn class="q-mb-md" rounded size="md" color="primary" :to="discipline.linkpage" :label="$t('cal.readall')"></q-btn>
 
 
-        <!--<q-card-section>-->
-        <!--<div class="text-subtitle3">{{myop.disciplines}}</div>-->
-        <!--{{myop.info}}-->
-        <!--</q-card-section>-->
-    </q-card>
+            <!--<q-card-section>-->
+            <!--<div class="text-subtitle3">{{myop.disciplines}}</div>-->
+            <!--{{myop.info}}-->
+            <!--</q-card-section>-->
+        </q-card>
+    </div>
 </template>
 
 <script lang="ts" src="./CCardDiscipline.ts">
diff --git a/src/components/CEventsCalendar/CEventsCalendar.scss b/src/components/CEventsCalendar/CEventsCalendar.scss
index 8e2eb10..a46b266 100644
--- a/src/components/CEventsCalendar/CEventsCalendar.scss
+++ b/src/components/CEventsCalendar/CEventsCalendar.scss
@@ -114,8 +114,7 @@ $graytext: #555;
   letter-spacing: 0.03333em;
 
   &__date {
-    font-weight: bold;
-    color: #2ba0fd;
+    color: #061220;
     font-size: 1rem;
   }
 
diff --git a/src/components/CEventsCalendar/CEventsCalendar.ts b/src/components/CEventsCalendar/CEventsCalendar.ts
index 8bad9a6..cbf8af2 100644
--- a/src/components/CEventsCalendar/CEventsCalendar.ts
+++ b/src/components/CEventsCalendar/CEventsCalendar.ts
@@ -36,6 +36,7 @@ import MixinEvents from '../../mixins/mixin-events'
 import { CDateTime } from '../CDateTime'
 import { CMyAvatar } from '../CMyAvatar'
 import { CMySingleEvent } from '../CMySingleEvent'
+import { CMyTeacher } from '../CMyTeacher'
 
 @Component({
   mixins: [MixinOperator, MixinUsers, MixinEvents],
@@ -51,11 +52,12 @@ import { CMySingleEvent } from '../CMySingleEvent'
     CMyEditor,
     CDateTime,
     CMyAvatar,
-    CMySingleEvent
+    CMySingleEvent, CMyTeacher
   }
 })
 export default class CEventsCalendar extends MixinEvents {
   @Prop({ required: false, default: null }) public mysingleevent: IEvents
+  @Prop({ required: false, default: 0 }) public showfirstN: number
   public $q
   public $t: any
   public calendarView = 'month'
@@ -920,7 +922,7 @@ export default class CEventsCalendar extends MixinEvents {
   }
 
   public badgeStyles(eventparam, type, timeStartPos, timeDurationHeight) {
-    const s = { color: '', top: '', height: '' }
+    const s = { color: '', top: '', height: '', opacity: 1 }
 
     if (tools.isCssColor(eventparam.bgcolor)) {
       s['background-color'] = eventparam.bgcolor
@@ -932,6 +934,11 @@ export default class CEventsCalendar extends MixinEvents {
     if (timeDurationHeight) {
       s.height = timeDurationHeight(this.func_tools.getMinutesDuration(eventparam.dateTimeStart, eventparam.dateTimeEnd)) + 'px'
     }
+
+    if (!this.isEventEnabled(eventparam)) {
+      s.opacity = 0.5
+    }
+
     s['align-items'] = 'flex-start'
     return s
   }
@@ -964,21 +971,11 @@ export default class CEventsCalendar extends MixinEvents {
   }
 
   public getEventList() {
-    const eventsloc = []
-
-    const datenow = tools.addDays(tools.getDateNow(), -1)
-
-    for (let i = 0; i < CalendarStore.state.eventlist.length; ++i) {
-      // console.log('  ciclo i = ', i, CalendarStore.state.eventlist[i])
-      // const dateEvent = new Date(CalendarStore.state.eventlist[i].date + ' 00:00:00')
-      const dateEvent = new Date(CalendarStore.state.eventlist[i].dateTimeEnd)
-
-      if (dateEvent >= datenow) {
-        eventsloc.push(CalendarStore.state.eventlist[i])
-      }
-    }
-
-    return eventsloc
+    const mylist = CalendarStore.state.eventlist.filter((rec) => (new Date(rec.dateTimeEnd) >= tools.getDateNowEvent()))
+    if (this.showfirstN > 0)
+      return mylist.slice(0, this.showfirstN)
+    else
+      return mylist
   }
 
   public getEvents(dt) {
diff --git a/src/components/CEventsCalendar/CEventsCalendar.vue b/src/components/CEventsCalendar/CEventsCalendar.vue
index b4f394d..4e01743 100644
--- a/src/components/CEventsCalendar/CEventsCalendar.vue
+++ b/src/components/CEventsCalendar/CEventsCalendar.vue
@@ -50,21 +50,11 @@
                         </q-chip>
                         <div class="cal__details" v-html="myevent.details"></div>
                         <div v-if="myevent.teacher" class="cal__teacher">
-                                    <span class="cal__teacher-title">{{$t('cal.teacher')}}: <span
-                                            class="margin_with"></span></span>
+                            <span class="cal__teacher-title">{{$t('cal.teacher')}}: <span
+                                    class="margin_with"></span></span>
                             <!--<span class="cal__teacher-content">{{myevent.teacher}}</span>-->
-                            <span class="cal__teacher-content">
-                                    <q-chip>
-                                        <CMyAvatar :myimg="getImgTeacherByUsername(myevent.teacher)"></CMyAvatar>
-                                        <span class="cal__teacher-content">{{getTeacherByUsername(myevent.teacher)}}</span>
-                                    </q-chip>
-                                    <span v-if="getImgTeacherByUsername(myevent.teacher2) && isValidUsername(myevent.teacher2)"
-                                          class="margin_avatar2"></span>
-                                    <q-chip v-if="getImgTeacherByUsername(myevent.teacher2) && isValidUsername(myevent.teacher2)">
-                                        <CMyAvatar :myimg="getImgTeacherByUsername(myevent.teacher2)"></CMyAvatar>
-                                        <span class="cal__teacher-content">{{getTeacherByUsername(myevent.teacher2)}}</span>
-                                    </q-chip>
-                                </span>
+                            <CMyTeacher :username="myevent.teacher"></CMyTeacher>
+                            <CMyTeacher :username="myevent.teacher2"></CMyTeacher>
                         </div>
                         <div v-if="myevent.wherecode" class="cal__where">
                             <!--<span v-if="tools.isMobile()"><br/></span>-->
@@ -72,7 +62,8 @@
                             <span class="cal__where-content">
                                     <q-chip>
                                         <q-avatar v-if="getWhereIcon(myevent.wherecode)">
-                                            <img :src="`../../statics/images/avatar/` + getWhereIcon(myevent.wherecode)" alt="Località">
+                                            <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>showpage
@@ -139,7 +130,6 @@
                                  :rules="[v => v && v.length > 0 || $t('event.notempty')]"></q-input>
 
 
-
                         <q-tabs
                                 v-model="tabeditor"
                                 dense
@@ -408,7 +398,7 @@
         <!--v-touch-swipe.mouse.left.right="handleSwipe" -->
 
         <!-- the calendar -->
-        <q-page v-if="visuAllCal" class="column" style="min-height: 500px !important;">
+        <q-page v-if="visuAllCal && showfirstN === 0" class="column" style="min-height: 500px !important;">
 
             <div>
                 <q-toolbar class="mytoolbar">
@@ -554,16 +544,8 @@
         </q-page>
 
         <div class="q-mt-md">
-            <p v-if="visuAllCal" class="text-subtitle1 text-red text-center">LISTA PROSSIMI EVENTI:</p>
-
-            <!--<q-intersection-->
-            <!--v-for="index in 10"-->
-            <!--:key="index"-->
-            <!--transition="scale"-->
-            <!--class="example-item"-->
-            <!--&gt;-->
-
             <div v-if="!mysingleevent">
+                <p class="text-subtitle1 text-red bg-amber text-center ">LISTA PROSSIMI <span v-if="showfirstN > 0">{{ showfirstN }}</span> EVENTI:</p>
                 <q-markup-table wrap-cells bordered separator="horizontal" class="listaev__table">
                     <tbody>
                     <tr v-for="(event, index) in getEventList()" class="listaev listaev__table">
@@ -602,7 +584,8 @@
                                            @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-btn v-if="editable" flat round color="white" icon="cancel"
+                                           @click="selectEvent(null)"></q-btn>
                                 </q-chip>
                                 <q-chip v-if="event.news" class="cltexth4 chipnews shadow-5 glossy text-right"
                                         color="red"
@@ -623,36 +606,26 @@
 
                                 <div class="">
                                     <!-- Se c'è un link, allora -->
-                                    <q-btn v-if="event.linkpdf" size="md" type="a"
-                                           :href="`../../statics/` + event.linkpdf"
+                                    <q-btn size="md" type="a"
+                                           :to="`/event/${event.typol}/${event._id}`"
                                            target="_blank"
-                                           ripple rounded :label="event.title" :icon="event.icon"
+                                           :style="`background-color: ${event.bgcolor} !important; color: white !important;`"
+                                           ripple
+                                           rounded
+                                           :label="event.title" :icon="event.icon"
                                            :color="event.bgcolor" text-color="white" glossy>
 
                                     </q-btn>
-                                    <!-- altrimenti mostra solo Chip -->
-                                    <div v-else>
-                                        <q-btn size="md" type="a"
-                                               :to="`/event/` + event._id"
-                                               target="_blank"
-                                               :style="`background-color: ${event.bgcolor} !important; color: white !important;`"
-                                               ripple
-                                               rounded
-                                               :label="event.title" :icon="event.icon"
-                                               :color="event.bgcolor" text-color="white" glossy>
-
-                                        </q-btn>
-                                        <!--<div v-if="tools.isMobile()" class="cltexth3 text-center"-->
-                                        <!--:style="`background-color: ${event.bgcolor} !important; color: white !important;`">-->
-                                        <!--{{event.title}}-->
-                                        <!--</div>-->
-                                        <!--<q-chip v-else class="cltexth3 text-center"-->
-                                        <!--:style="`background-color: ${event.bgcolor} !important; color: white !important;`"-->
-                                        <!--text-color="white"-->
-                                        <!--:icon="event.icon"-->
-                                        <!--dense>{{event.title}}-->
-                                        <!--</q-chip>-->
-                                    </div>
+                                    <!--<div v-if="tools.isMobile()" class="cltexth3 text-center"-->
+                                    <!--:style="`background-color: ${event.bgcolor} !important; color: white !important;`">-->
+                                    <!--{{event.title}}-->
+                                    <!--</div>-->
+                                    <!--<q-chip v-else class="cltexth3 text-center"-->
+                                    <!--:style="`background-color: ${event.bgcolor} !important; color: white !important;`"-->
+                                    <!--text-color="white"-->
+                                    <!--:icon="event.icon"-->
+                                    <!--dense>{{event.title}}-->
+                                    <!--</q-chip>-->
                                 </div>
 
                                 <div style="margin: 10px;"></div>
@@ -662,16 +635,8 @@
                                     <span class="cal__teacher-title">{{$t('cal.teacher')}}: <span
                                             class="margin_with"></span></span>
 
-                                    <q-chip>
-                                        <CMyAvatar :myimg="getImgTeacherByUsername(event.teacher)"></CMyAvatar>
-                                        <span class="cal__teacher-content">{{getTeacherByUsername(event.teacher)}}</span>
-                                    </q-chip>
-                                    <span v-if="getImgTeacherByUsername(event.teacher2) && isValidUsername(event.teacher2)"
-                                          class="margin_avatar2"></span>
-                                    <q-chip v-if="getImgTeacherByUsername(event.teacher2) && isValidUsername(event.teacher2)">
-                                        <CMyAvatar :myimg="getImgTeacherByUsername(event.teacher2)"></CMyAvatar>
-                                        <span class="cal__teacher-content">{{getTeacherByUsername(event.teacher2)}}</span>
-                                    </q-chip>
+                                    <CMyTeacher :username="event.teacher"></CMyTeacher>
+                                    <CMyTeacher :username="event.teacher2"></CMyTeacher>
 
                                     <span v-if="event.wherecode" class="">
                                         <span v-if="tools.isMobile()"><br/></span>
@@ -704,19 +669,19 @@
 
 
                                 <div class="row justify-end">
-                                    <div class="justify-start">
-                                        <q-btn v-if="event.linkpdf" size="md" type="a"
-                                               :href="`../../statics/` + event.linkpdf"
-                                               target="_blank" rounded color="primary" icon="info"
-                                               :label="$t('cal.showpdf')">
+                                    <q-btn v-if="event.linkpdf" size="md" type="a"
+                                           :href="`../../statics/` + event.linkpdf"
+                                           target="_blank" rounded color="primary" icon="info"
+                                           class="q-ma-sm"
+                                           :label="$t('cal.showpdf')">
 
-                                        </q-btn>
-                                        <q-btn v-if="event.bodytext" rounded outline class="q-mx-sm"
-                                               color="primary"
-                                               :to="`/event/` + event._id"
-                                               :label="$t('event.showpage')">
-                                        </q-btn>
-                                    </div>
+                                    </q-btn>
+                                    <q-btn v-if="event.bodytext" rounded outline
+                                           class="q-ma-sm"
+                                           color="primary"
+                                           :to="`/event/${event.typol}/${event._id}`"
+                                           :label="$t('event.showpage')">
+                                    </q-btn>
                                     <q-btn rounded outline class="q-ma-sm"
                                            color="primary" @click="askForInfoEventMenu(event)"
                                            :label="$t('event.askinfo')">
@@ -744,6 +709,14 @@
                     </tr>
                     </tbody>
                 </q-markup-table>
+
+                <div class="q-ma-lg text-center">
+                    <q-btn rounded type="a" to="/calendarioeventi" color="primary" icon="event" size="lg"
+                           :label="$t('cal.showlastschedule')">
+                    </q-btn>
+
+                </div>
+
             </div>
             <div v-else>
                 <CMySingleEvent :myevent="mysingleevent" calendarView="month" :iseditable="editable"
@@ -756,49 +729,6 @@
 
                 </CMySingleEvent>
             </div>
-            <!--</q-intersection>-->
-            <!-- Example of a Dialog with a Card -->
-            <!--
-                            <q-dialog v-model="card">
-                                <q-card>
-                                    <q-img src="https://media-cdn.tripadvisor.com/media/photo-s/0a/47/a8/91/chicken-salad-sandwich.jpg" />
-
-                                    <q-card-section>
-                                        <q-btn
-                                                fab
-                                                color="primary"
-                                                icon="place"
-                                                class="absolute"
-                                                style="top: 0; right: 12px; transform: translateY(-50%);"
-                                        />
-
-                                        <div class="row no-wrap items-center">
-                                            <div class="col text-h6 ellipsis">Cafe Basilico</div>
-                                            <div class="col-auto text-grey q-pt-md">
-                                                <q-icon name="place" /> 250 ft
-                                            </div>
-                                        </div>
-
-                                        <q-rating v-model="stars" :max="5" size="32px" />
-                                    </q-card-section>
-
-                                    <q-card-section>
-                                        <div class="text-subtitle1">$・Italian, Cafe</div>
-                                        <div class="text-subtitle2 text-grey">Small plates, salads & sandwiches in an intimate setting.</div>
-                                    </q-card-section>
-
-                                    <q-separator />
-
-                                    <q-card-actions>
-                                        <q-btn flat round icon="event" v-close-popup />
-                                        <q-btn flat v-close-popup>5:30PM</q-btn>
-                                        <q-btn flat v-close-popup>7:30PM</q-btn>
-                                        <q-btn flat v-close-popup>9:00PM</q-btn>
-                                        <q-btn flat color="primary" v-close-popup>Reserve</q-btn>
-                                    </q-card-actions>
-                                </q-card>
-                            </q-dialog>
-            -->
         </div>
     </div>
 </template>
diff --git a/src/components/CFacebookFrame/CFacebookFrame.ts b/src/components/CFacebookFrame/CFacebookFrame.ts
index eb038a6..6bd5ba2 100644
--- a/src/components/CFacebookFrame/CFacebookFrame.ts
+++ b/src/components/CFacebookFrame/CFacebookFrame.ts
@@ -22,4 +22,14 @@ export default class CFacebookFrame extends Vue {
   public geturlfbpageEncoded() {
     return encodeURIComponent(this.urlfbpage)
   }
+
+  get mywidth() {
+    let myw = 340
+    if (tools.getwidth(this) < 400)
+      return myw
+    if ((tools.getwidth(this) > 400) && (tools.getwidth(this) < 1100))
+      return Math.round((tools.getwidth(this) / 3) - 30)
+    else
+      return myw
+  }
 }
diff --git a/src/components/CFacebookFrame/CFacebookFrame.vue b/src/components/CFacebookFrame/CFacebookFrame.vue
index 793ddbe..96ca28e 100644
--- a/src/components/CFacebookFrame/CFacebookFrame.vue
+++ b/src/components/CFacebookFrame/CFacebookFrame.vue
@@ -8,7 +8,7 @@
         <!--</blockquote>-->
         <!--</div>-->
 
-        <iframe :src="`https://www.facebook.com/plugins/page.php?href=`+geturlfbpageEncoded()+`&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=164292303671962`"
+        <iframe :src="`https://www.facebook.com/plugins/page.php?href=`+geturlfbpageEncoded()+`&tabs=timeline&width=`+mywidth+`&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=164292303671962`"
                 width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
                 allowTransparency="true" allow="encrypted-media"></iframe>
     </div>
diff --git a/src/components/CMyChipList/CMyChipList.ts b/src/components/CMyChipList/CMyChipList.ts
index 7149621..dfbebf0 100644
--- a/src/components/CMyChipList/CMyChipList.ts
+++ b/src/components/CMyChipList/CMyChipList.ts
@@ -12,6 +12,7 @@ export default class CMyChipList extends Vue {
   public $t
   @Prop({ required: true }) public options: []
   @Prop({ required: true }) public value
+  @Prop({ required: true }) public type
   @Prop({ required: true, default: '' }) public optlab
   @Prop({ required: true, default: '' }) public optval
   @Prop({ required: false, default: '' }) public myclass
@@ -35,21 +36,49 @@ export default class CMyChipList extends Vue {
 
     // console.table(this.options)
     this.options.forEach((rec, index) => {
-      if (tools.isBitActive(this.value, rec[this.optval])) {
-        const mydata = {
-          label: this.$t(rec[this.optlab]),
-          value: rec[this.optval],
-          valbool: tools.isBitActive(this.value, rec[this.optval]),
-          icon: '',
-          color: tools.getColorByIndexBest(index)
+      if (this.type === tools.FieldType.multiselect) {
+        if (this.value.includes(rec[this.optval])) {
+          const mydata = {
+            label: null,
+            value: rec[this.optval],
+            // myris = mylist.filter((myrec) => arrval.includes(myrec[key]))
+            valbool: true,
+            icon: '',
+            color: tools.getColorByIndexBest(index)
+          }
+
+          if (tools.isObject(this.optlab)) {
+            mydata.label = this.options.filter((myrec) => myrec[this.optval] === mydata.value).map(this.optlab)
+            if (mydata.label)
+              mydata.label = mydata.label[0]
+          } else {
+            mydata.label = rec[this.optlab]
+          }
+
+          if (this.opticon)
+            mydata.icon = rec[this.opticon]
+          if (this.optcolor)
+            mydata.color = rec[this.optcolor]
+
+          this.myarrvalues.push(mydata)
         }
+      } else {
+        if (tools.isBitActive(this.value, rec[this.optval])) {
+          const mydata = {
+            label: this.$t(rec[this.optlab]),
+            value: rec[this.optval],
+            valbool: tools.isBitActive(this.value, rec[this.optval]),
+            icon: '',
+            color: tools.getColorByIndexBest(index)
+          }
 
-        if (this.opticon)
-          mydata.icon = rec[this.opticon]
-        if (this.optcolor)
-          mydata.color = rec[this.optcolor]
+          if (this.opticon)
+            mydata.icon = rec[this.opticon]
+          if (this.optcolor)
+            mydata.color = rec[this.optcolor]
 
-        this.myarrvalues.push(mydata)
+          this.myarrvalues.push(mydata)
+        }
       }
     })
 
diff --git a/src/components/CMyPage/CMyPage.ts b/src/components/CMyPage/CMyPage.ts
index 84b3898..547b606 100644
--- a/src/components/CMyPage/CMyPage.ts
+++ b/src/components/CMyPage/CMyPage.ts
@@ -23,6 +23,7 @@ export default class CMyPage extends Vue {
   @Prop({ required: false, default: '' }) public imgbackground: string
   @Prop({ required: false, default: '' }) public sizes: string
   @Prop({ required: false, default: '' }) public styleadd: string
+  @Prop({ required: false, default: false }) public nofooter: boolean
   public $t
   public $q
 
diff --git a/src/components/CMyPage/CMyPage.vue b/src/components/CMyPage/CMyPage.vue
index 147afef..06362e8 100644
--- a/src/components/CMyPage/CMyPage.vue
+++ b/src/components/CMyPage/CMyPage.vue
@@ -7,7 +7,9 @@
             </CImgTitle>
         </div>
         <slot></slot>
-        <Footer></Footer>
+        <div v-if="!nofooter">
+            <Footer></Footer>
+        </div>
     </div>
 </template>
 
diff --git a/src/components/CMyPopupEdit/CMyPopupEdit.ts b/src/components/CMyPopupEdit/CMyPopupEdit.ts
index 8b70c74..22691e6 100644
--- a/src/components/CMyPopupEdit/CMyPopupEdit.ts
+++ b/src/components/CMyPopupEdit/CMyPopupEdit.ts
@@ -107,6 +107,11 @@ export default class CMyPopupEdit extends Vue {
         return '[---]'
       else
         return fieldsTable.getValueByTable(col, val)
+    } else if (col.fieldtype === tools.FieldType.multiselect) {
+      if (val === undefined)
+        return '[---]'
+      else
+        return fieldsTable.getMultiValueByTable(col, val)
     } else {
       if (val === undefined)
         return '[]'
@@ -135,4 +140,8 @@ export default class CMyPopupEdit extends Vue {
       return ''
     }
   }
+
+  public changeCol() {
+
+  }
 }
diff --git a/src/components/CMyPopupEdit/CMyPopupEdit.vue b/src/components/CMyPopupEdit/CMyPopupEdit.vue
index 587bc8b..22b4c67 100644
--- a/src/components/CMyPopupEdit/CMyPopupEdit.vue
+++ b/src/components/CMyPopupEdit/CMyPopupEdit.vue
@@ -15,6 +15,7 @@
         <div v-else>
             <div v-if="col.fieldtype === tools.FieldType.binary">
                 <CMyChipList
+                        :type="tools.FieldType.binary"
                         :value="myvalue"
                         :options="db_fieldsTable.getTableJoinByName(col.jointable)"
                         :optval="db_fieldsTable.getKeyByTable(col.jointable)"
@@ -22,6 +23,15 @@
                         :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
             </div>
             <!-- Show Value -->
+            <div v-else-if="col.fieldtype === tools.FieldType.multiselect">
+                <CMyChipList
+                        :type="tools.FieldType.multiselect"
+                        :value="myvalue"
+                        :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+                        :optval="db_fieldsTable.getKeyByTable(col.jointable)"
+                        :optlab="db_fieldsTable.getLabelByTable(col.jointable)"
+                        :opticon="db_fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
+            </div>
             <div v-else>
                 {{ visuValByType(myvalue, col, row) }}
             </div>
@@ -88,6 +98,25 @@
                                :useinput="false">
                     </CMySelect>
                 </div>
+                <div v-else-if="col.fieldtype === tools.FieldType.multiselect">
+                    <q-select
+                            v-model="myvalue"
+                            rounded
+                            outlined
+                            multiple
+                            dense
+                            options-dense
+                            :display-value="db_fieldsTable.getTitleByTable(col.jointable)"
+                            emit-value
+                            map-options
+                            :options="db_fieldsTable.getTableJoinByName(col.jointable)"
+                            :option-label="db_fieldsTable.getLabelByTable(col.jointable)"
+                            :option-value="db_fieldsTable.getKeyByTable(col.jointable)"
+                            style="min-width: 150px"
+                            @input="changeCol">
+
+                    </q-select>
+                </div>
 
             </q-popup-edit>
         </div>
diff --git a/src/components/CMySingleEvent/CMySingleEvent.scss b/src/components/CMySingleEvent/CMySingleEvent.scss
index b9c7f03..b72af56 100644
--- a/src/components/CMySingleEvent/CMySingleEvent.scss
+++ b/src/components/CMySingleEvent/CMySingleEvent.scss
@@ -8,8 +8,7 @@ $graytext: #555;
   letter-spacing: 0.03333em;
 
   &__date {
-    font-weight: bold;
-    color: #2ba0fd;
+    color: #061220;
     font-size: 1rem;
   }
 
diff --git a/src/components/CMySingleEvent/CMySingleEvent.ts b/src/components/CMySingleEvent/CMySingleEvent.ts
index 309a88f..983c9e8 100644
--- a/src/components/CMySingleEvent/CMySingleEvent.ts
+++ b/src/components/CMySingleEvent/CMySingleEvent.ts
@@ -12,7 +12,7 @@ import { static_data } from '@src/db/static_data'
 import { Screen } from 'quasar'
 
 import { CImgText } from '../../components/CImgText/index'
-import { CCard, CMyAvatar, CMyPage } from '@components'
+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'
@@ -22,21 +22,14 @@ import MixinUsers from '@src/mixins/mixin-users'
 @Component({
   name: 'CMySingleEvent',
   mixins: [MixinOperator, MixinBase, MixinEvents, MixinUsers],
-  components: { Logo, Footer, CImgText, CCard, CMyPage, CMyAvatar }
+  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 myevent: IEvents = null
   public selected: boolean = false
 
-  @Watch('$route.params.eventid')
-  public changeevent() {
-    // this.mytypetransgroup = ''
-    this.myevent = CalendarStore.state.eventlist.find((rec) => rec._id === this.$route.params.eventid)
-    // console.log('myevent', this.myevent, 'eventid=', this.$route.params.eventid)
-  }
-
   public selectEvent(eventparam: IEvents) {
     this.selected = !this.selected
   }
@@ -50,8 +43,7 @@ export default class CMySingleEvent extends MixinEvents {
   }
 
   public mounted() {
-    this.changeevent()
-    console.log('myevent', this.myevent)
+    // console.log('MYSINGLEEVENT: myevent', this.myevent)
   }
 
   get static_data() {
diff --git a/src/components/CMySingleEvent/CMySingleEvent.vue b/src/components/CMySingleEvent/CMySingleEvent.vue
index 792515d..ed92529 100644
--- a/src/components/CMySingleEvent/CMySingleEvent.vue
+++ b/src/components/CMySingleEvent/CMySingleEvent.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <CMyPage v-if="myevent" :imgbackground="myevent.img" :title="myevent.title" keywords="" description="">
+        <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">
@@ -89,16 +89,8 @@
                                     <span class="cal__teacher-title">{{$t('cal.teacher')}}: <span
                                             class="margin_with"></span></span>
 
-                        <q-chip>
-                            <CMyAvatar :myimg="getImgTeacherByUsername(myevent.teacher)"></CMyAvatar>
-                            <span class="cal__teacher-content">{{getTeacherByUsername(myevent.teacher)}}</span>
-                        </q-chip>
-                        <span v-if="getImgTeacherByUsername(myevent.teacher2) && isValidUsername(myevent.teacher2)"
-                              class="margin_avatar2"></span>
-                        <q-chip v-if="getImgTeacherByUsername(myevent.teacher2) && isValidUsername(myevent.teacher2)">
-                            <CMyAvatar :myimg="getImgTeacherByUsername(myevent.teacher2)"></CMyAvatar>
-                            <span class="cal__teacher-content">{{getTeacherByUsername(myevent.teacher2)}}</span>
-                        </q-chip>
+                        <CMyTeacher :username="myevent.teacher"></CMyTeacher>
+                        <CMyTeacher :username="myevent.teacher2"></CMyTeacher>
 
                         <span v-if="myevent.wherecode" class="q-ma-md">
                                         <span v-if="tools.isMobile()"><br/></span>
@@ -141,7 +133,7 @@
                         </q-btn>
                         <q-btn v-if="myevent.bodytext" rounded outline class="q-mx-sm"
                                color="primary"
-                               :to="`/event/` + myevent._id"
+                               :to="`/event/${myevent.typol}/${myevent._id}`"
                                :label="$t('event.showpage')">
                         </q-btn>
                     </div>
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
index addaaae..0a4f1e6 100644
--- a/src/components/Footer/Footer.scss
+++ b/src/components/Footer/Footer.scss
@@ -171,6 +171,7 @@ $textcol_scuro: darkblue;
 }
 
 .mycontacts_text {
+  font-size: 1rem;
   color: #999;
   letter-spacing: normal !important;
 }
diff --git a/src/components/Footer/Footer.ts b/src/components/Footer/Footer.ts
index 4789b42..40e12b4 100644
--- a/src/components/Footer/Footer.ts
+++ b/src/components/Footer/Footer.ts
@@ -14,11 +14,12 @@ import Quasar from 'quasar'
 import { FormNewsletter } from '../FormNewsletter'
 import { IUserState } from '../../model'
 import MixinBase from '../../mixins/mixin-base'
+import { CFacebookFrame } from '../CFacebookFrame'
 
 @Component({
   mixins: [MixinBase],
   name: 'Footer',
-  components: { Logo, FormNewsletter }
+  components: { Logo, FormNewsletter, CFacebookFrame }
 })
 
 export default class Footer extends Vue {
diff --git a/src/components/Footer/Footer.vue b/src/components/Footer/Footer.vue
index 2fd2cb9..5036a47 100644
--- a/src/components/Footer/Footer.vue
+++ b/src/components/Footer/Footer.vue
@@ -3,16 +3,40 @@
         <section class="landing__footer">
             <div class="row justify-between items-start q-col-gutter-xs">
                 <div class="col-12 col-sm-4 ">
-                    <p style="text-align: center">
-                        <logo></logo>
-                    </p>
                     <!--<span v-html="$t('homepage.footer.description')">-->
                     <!--</span>-->
 
 
-                    <FormNewsletter v-if="static_data.functionality.SHOW_NEWSLETTER" :idwebsite="tools.appid()"
-                                    :locale="tools.getLocale()">
-                    </FormNewsletter>
+                    <CFacebookFrame myclass="text-center" :urlfbpage="getValDb('FBPAGE_FRAME')" title="getValDb('FBPAGE_TITLE')">
+
+                    </CFacebookFrame>
+
+                    <div class="landing__footer-icons row flex-center q-mt-md">
+                        <a v-if="!!FBPage" :href="FBPage" target="_blank">
+                            <i aria-hidden="true" class="q-icon fab fa-facebook-f icon_contact links"> </i></a>
+
+                        <a v-if="!!InstagramPage" :href="InstagramPage" target="_blank">
+                            <i aria-hidden="true" class="q-icon fab fa-instagram icon_contact links"> </i></a>
+
+                        <a v-if="!!TelegramSupport" :href="TelegramSupport" target="_blank">
+                            <i aria-hidden="true" class="q-icon fab fa-telegram icon_contact links"></i></a>
+
+                        <a v-if="!!Whatsapp_Cell" :href="ChatWhatsapp" target="_blank">
+                            <i aria-hidden="true" class="q-icon fab fa-whatsapp icon_contact links"></i></a>
+
+                        <a v-if="!!Telegram_UsernameHttp" :href="Telegram_UsernameHttp" target="_blank">
+                            <i aria-hidden="true" class="q-icon fab fa-telegram icon_contact links"></i></a>
+
+
+                        <!--<a href="" target="_blank"><i aria-hidden="true" class="q-icon fab fa-github"> </i></a>-->
+                        <!--<a href="https://twitter.com/" target="_blank"><i aria-hidden="true" class="q-icon fab fa-twitter"> </i></a>-->
+                        <!--<a href="https://discord.gg/5TDhbDg" target="_blank"><i aria-hidden="true"-->
+                        <!--class="q-icon fab fa-discord"> </i></a><a-->
+                        <!--href="https://forum.quasar-framework.org/" target="_blank"><i aria-hidden="true"-->
+                        <!--class="q-icon fas fa-comments"> </i></a><a-->
+                        <!--href="https://www.patreon.com/quasarframework" target="_blank"><i aria-hidden="true"-->
+                        <!--class="q-icon fab fa-patreon"> </i></a>-->
+                    </div>
 
                     <!--<div class="q-mt-xs copyrights">-->
                     <!--<p class="mycontacts_text" v-html="$t('homepage.copyrights')"></p>-->
@@ -26,68 +50,42 @@
                             <p class="mycontacts_title">{{$t('homepage.titlecontatti')}}</p>
 
 
-                            <p class="mycontacts_text">
+                            <div class="mycontacts_text">
                                 <i v-if="getValDb('MAIN_EMAIL')" aria-hidden="true"
                                    class="q-icon fas fa-envelope q-mx-sm"></i>
                                 <a :href="`mailto:` + getValDb('MAIN_EMAIL')" class="links">{{ getValDb('MAIN_EMAIL')
                                     }}</a><br>
-                                <q-separator dark spaced></q-separator>
-                                <span v-for="rec in getarrValDb('CONTACTS_EMAIL_CELL')">
+                                <div style="margin-bottom: 20px;"></div>
+                                <div v-for="rec in getarrValDb('CONTACTS_EMAIL_CELL')" class="mycontacts_text"
+                                     style="margin-bottom: 0px;">
                                     {{ rec.name }}: {{ rec.phone }}
                                     <br>
-                                    <a v-if="!!tools.getHttpForWhatsapp(rec.phone)" :href="tools.getHttpForWhatsapp(rec.phone)" target="_blank">
-                                        <i aria-hidden="true" class="q-icon fab fa-whatsapp landing__footer-icons icon_contact links q-mx-xs"></i></a>
-                                    <a v-if="!!tools.getHttpForTelegram(rec.usertelegram)" :href="tools.getHttpForTelegram(rec.usertelegram)" target="_blank">
-                                        <i aria-hidden="true" class="q-icon fab fa-telegram landing__footer-icons icon_contact links q-mx-xs"></i></a>
-                                    <br>
                                     <i v-if="rec.email" aria-hidden="true"
                                        class="q-icon fas fa-envelope q-mx-sm"></i> <a :href="`mailto:`+ rec.email "
                                                                                       class="links">{{rec.email}}</a>
+
+                                    <a v-if="!!tools.getHttpForWhatsapp(rec.phone)"
+                                       :href="tools.getHttpForWhatsapp(rec.phone)" target="_blank">
+                                        <i aria-hidden="true"
+                                           class="q-icon fab fa-whatsapp landing__footer-icons icon_contact links q-mx-xs"></i></a>
+                                    <a v-if="!!tools.getHttpForTelegram(rec.usertelegram)"
+                                       :href="tools.getHttpForTelegram(rec.usertelegram)" target="_blank">
+                                        <i aria-hidden="true"
+                                           class="q-icon fab fa-telegram landing__footer-icons icon_contact links q-mx-xs"></i></a>
                                     <br>
-                                    <q-separator dark spaced></q-separator>
-                                </span>
+                                </div>
                                 <span v-if="getValDb('CALL_WORKING_DAYS')"><br>orari per chiamate:<br>
                                     <span v-html="getValDb('CALL_WORKING_DAYS')"></span></span>
-                                <!--Elisa Ghizzardi: 338-9344724 <a href="mailto:elisa.ghizzardi@yahoo.com" class="links">elisa.ghizzardi@yahoo.com</a><br>
 
-                                Cristina Barattoni: 335-8233721 <a href="mailto:info@cristinabarattoni.it"
-                                                                    class="links">info@cristinabarattoni.it</a><br><br>'
-                                +
-                                'orari per chiamate:<br>lun-ven: 12:30-13:30; 17:00-19.30<br>sab-dom: 10-18
-
-                                -->
-
-                            </p>
-                        </div>
-                        <div class="landing__footer-icons row flex-center">
-                            <a v-if="!!FBPage" :href="FBPage" target="_blank">
-                                <i aria-hidden="true" class="q-icon fab fa-facebook-f icon_contact links"> </i></a>
-
-                            <a v-if="!!InstagramPage" :href="InstagramPage" target="_blank">
-                                <i aria-hidden="true" class="q-icon fab fa-instagram icon_contact links"> </i></a>
-
-                            <a v-if="!!TelegramSupport" :href="TelegramSupport" target="_blank">
-                                <i aria-hidden="true" class="q-icon fab fa-telegram icon_contact links"></i></a>
-
-                            <a v-if="!!Whatsapp_Cell" :href="ChatWhatsapp" target="_blank">
-                                <i aria-hidden="true" class="q-icon fab fa-whatsapp icon_contact links"></i></a>
-
-                            <a v-if="!!Telegram_UsernameHttp" :href="Telegram_UsernameHttp" target="_blank">
-                                <i aria-hidden="true" class="q-icon fab fa-telegram icon_contact links"></i></a>
-
-
-                            <!--<a href="" target="_blank"><i aria-hidden="true" class="q-icon fab fa-github"> </i></a>-->
-                            <!--<a href="https://twitter.com/" target="_blank"><i aria-hidden="true" class="q-icon fab fa-twitter"> </i></a>-->
-                            <!--<a href="https://discord.gg/5TDhbDg" target="_blank"><i aria-hidden="true"-->
-                            <!--class="q-icon fab fa-discord"> </i></a><a-->
-                            <!--href="https://forum.quasar-framework.org/" target="_blank"><i aria-hidden="true"-->
-                            <!--class="q-icon fas fa-comments"> </i></a><a-->
-                            <!--href="https://www.patreon.com/quasarframework" target="_blank"><i aria-hidden="true"-->
-                            <!--class="q-icon fab fa-patreon"> </i></a>-->
+                            </div>
                         </div>
 
                     </div>
 
+                    <FormNewsletter v-if="static_data.functionality.SHOW_NEWSLETTER" :idwebsite="tools.appid()"
+                                    :locale="tools.getLocale()">
+                    </FormNewsletter>
+
                     <p class="text-center">
                         <router-link v-if="static_data.functionality.SHOW_ONLY_POLICY" to="/policy"><span
                                 class="footer_link">{{$t('privacy_policy')}}</span></router-link>
@@ -96,6 +94,9 @@
                 </div>
 
                 <div class="col-12 col-sm-4 q-pa-md" v-for="">
+                    <p style="text-align: center">
+                        <logo></logo>
+                    </p>
                     <div v-for="myitemmenu in static_data.routes">
                         <div v-if="myitemmenu.infooter">
 
diff --git a/src/components/FormNewsletter/FormNewsletter.vue b/src/components/FormNewsletter/FormNewsletter.vue
index 8fbcc2c..74e2376 100644
--- a/src/components/FormNewsletter/FormNewsletter.vue
+++ b/src/components/FormNewsletter/FormNewsletter.vue
@@ -10,6 +10,7 @@
                 <q-input
                         filled
                         name="firstName"
+                        dense
                         dark standout
                         v-model="name"
                         :label="$t('newsletter.name') + `*`"
@@ -21,6 +22,7 @@
 
                 <q-input
                         filled
+                        dense
                         dark standout
                         v-model="surname"
                         name="lastName"
@@ -33,6 +35,7 @@
 
                 <q-input
                         filled
+                        dense
                         dark standout
                         v-model="email"
                         :label="$t('newsletter.email') + `*`"
diff --git a/src/components/Header/Header.ts b/src/components/Header/Header.ts
index e5b7a56..fbdc289 100644
--- a/src/components/Header/Header.ts
+++ b/src/components/Header/Header.ts
@@ -172,7 +172,7 @@ export default class Header extends Vue {
       if (this.static_data.functionality.SHOW_IF_IS_SERVER_CONNECTION) {
 
         if (!!oldValue) {
-          tools.showNotif(this.$q, this.$t('connection') + ` ${value}`, {
+          tools.showNotif(this.$q, this.$t('connection') + ` disc__value}`, {
             color,
             icon: 'wifi'
           })
diff --git a/src/components/index.ts b/src/components/index.ts
index c6e82fe..d3ded28 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,6 +3,7 @@ export * from './todos'
 export * from './logo'
 export * from './CProgress'
 export * from './CCard'
+export * from './CCardCarousel'
 export * from './CCardDiscipline'
 export * from './CBook'
 export * from './CMyPage'
@@ -13,6 +14,7 @@ export * from './CMyPopupEdit'
 export * from './CMyToggleList'
 export * from './CMyChipList'
 export * from './CMyEditor'
+export * from './CMyTeacher'
 export * from './CImgText'
 export * from './CImgTitle'
 export * from './CPreloadImages'
diff --git a/src/mixins/mixin-base.ts b/src/mixins/mixin-base.ts
index 29b4b31..307f3e6 100644
--- a/src/mixins/mixin-base.ts
+++ b/src/mixins/mixin-base.ts
@@ -25,8 +25,12 @@ export default class MixinBase extends Vue {
     return tools
   }
 
-  public getValDb(keystr) {
-    return GlobalStore.getters.getValueSettingsByKey(keystr)
+  public getValDb(keystr, def?) {
+    const ris = GlobalStore.getters.getValueSettingsByKey(keystr)
+    if (ris === '')
+      return def
+    else
+      return ris
   }
   public getarrValDb(keystr) {
     const myval = GlobalStore.getters.getValueSettingsByKey(keystr)
diff --git a/src/mixins/mixin-events.ts b/src/mixins/mixin-events.ts
index c4a2881..e24b2d4 100644
--- a/src/mixins/mixin-events.ts
+++ b/src/mixins/mixin-events.ts
@@ -14,17 +14,20 @@ export default class MixinEvents extends Vue {
 
   public getImgEvent(event: IEvents) {
     if (!!event.img)
-      return '../../statics/' + event.img
+      return 'statics/' + event.img
     else
-      return '../../statics/images/noimg.png'
+      return 'statics/images/noimg.png'
   }
 
+
   public getStyleByEvent(event: IEvents, visu: boolean) {
-    if (visu) {
-      return 'border: inset; border-color: darkblue; border-width: 3px; padding: 5px !important; '
-    } else {
-      return ''
+    let myst = 'border: inset; border-color: darkblue; border-width: 3px; padding: 5px !important; '
+
+    if (!this.isEventEnabled(event)) {
+      myst += ' opacity: 0.5'
     }
+
+    return myst
   }
 
   public isAlreadyBooked(eventparam: IEvents) {
diff --git a/src/model/GlobalStore.ts b/src/model/GlobalStore.ts
index 42d4e42..3f56437 100644
--- a/src/model/GlobalStore.ts
+++ b/src/model/GlobalStore.ts
@@ -96,6 +96,7 @@ export interface IGlobalState {
   lastaction: IAction
   settings: ISettings[],
   disciplines: IDiscipline[],
+  autoplaydisc: number
 }
 
 export interface IMenuList {
diff --git a/src/statics/i18n.js b/src/statics/i18n.js
index ef2941d..614ad94 100644
--- a/src/statics/i18n.js
+++ b/src/statics/i18n.js
@@ -30,6 +30,7 @@ const msgglobal = {
       write: 'scrive'
     },
     dialog: {
+      close: 'Chiudi',
       ok: 'Ok',
       yes: 'Si',
       no: 'No',
@@ -231,6 +232,8 @@ const msgglobal = {
       cancelederrorevent: 'Cancellazione Evento non effettuata, Riprovare',
       event: 'Evento',
       starttime: 'Dalle',
+      nextevent: 'Prossimo Evento',
+      readall: 'Leggi tutto',
       enddate: 'al',
       endtime: 'alle',
       duration: 'Durata',
@@ -253,6 +256,7 @@ const msgglobal = {
       data: 'Data',
       teachertitle: 'Insegnante',
       peoplebooked: 'Prenotaz.',
+      showlastschedule: 'Vedi tutto il Calendario',
     },
     msgs: {
       message: 'Messaggio',
@@ -339,6 +343,7 @@ const msgglobal = {
       write: 'escribe'
     },
     dialog: {
+      close: 'Cerrar',
       ok: 'Vale',
       yes: 'Sí',
       no: 'No',
@@ -531,6 +536,8 @@ const msgglobal = {
       cancelederrorbooking: 'Cancelación no realizada, intente nuevamente más tarde',
       event: 'Evento',
       starttime: 'Inicio',
+      nextevent: 'Próximo evento',
+      readall: 'Lee todo',
       enddate: 'a',
       endtime: 'fin',
       duration: 'Duración',
@@ -553,6 +560,7 @@ const msgglobal = {
       data: 'Fecha',
       teachertitle: 'Maestro',
       peoplebooked: 'Reserv.',
+      showlastschedule: 'Ver todo el calendario',
     },
     msgs: {
       message: 'Mensaje',
@@ -639,6 +647,7 @@ const msgglobal = {
       write: 'écrit'
     },
     dialog: {
+      close: 'Fermer',
       ok: 'Bien',
       yes: 'Oui',
       no: 'Non',
@@ -830,6 +839,8 @@ const msgglobal = {
       cancelederrorbooking: 'Annulation non effectuée, réessayez plus tard',
       event: 'événement',
       starttime: 'Accueil',
+      nextevent: 'Prochain événement',
+      readall: 'Tout lire',
       enddate: 'au',
       endtime: 'fin',
       duration: 'Durée',
@@ -852,6 +863,7 @@ const msgglobal = {
       data: 'Date',
       teachertitle: 'Professeur',
       peoplebooked: 'Réserv.',
+      showlastschedule: 'Voir tout le calendrier',
     },
     msgs: {
       message: 'Message',
@@ -938,6 +950,7 @@ const msgglobal = {
       write: 'write'
     },
     dialog: {
+      close: 'Close',
       ok: 'Ok',
       yes: 'Yes',
       no: 'No',
@@ -1128,6 +1141,8 @@ const msgglobal = {
       cancelederrorbooking: 'Cancellation unsuccessfully, try again later',
       event: 'Event',
       starttime: 'From',
+      nextevent: 'Next Event',
+      readall: 'Read All',
       enddate: 'to',
       endtime: 'to',
       duration: 'Duration',
@@ -1150,6 +1165,7 @@ const msgglobal = {
       data: 'Date',
       teachertitle: 'Teacher',
       peoplebooked: 'Booked',
+      showlastschedule: 'See Full Schedule',
     },
     msgs: {
       message: 'Messaggio',
@@ -1236,6 +1252,7 @@ const msgglobal = {
       write: 'write'
     },
     dialog: {
+      close: 'Close',
       ok: 'Ok',
       yes: 'Yes',
       no: 'No',
@@ -1428,6 +1445,8 @@ const msgglobal = {
       cancelederrorbooking: 'Cancellation unsuccessfully, try again later',
       event: 'Event',
       starttime: 'From',
+      nextevent: 'Next Event',
+      readall: 'Read All',
       enddate: 'to',
       endtime: 'to',
       duration: 'Duration',
@@ -1450,6 +1469,7 @@ const msgglobal = {
       data: 'Date',
       teachertitle: 'Teacher',
       peoplebooked: 'Booked',
+      showlastschedule: 'See Full Schedule',
     },
     msgs: {
       message: 'Messaggio',
diff --git a/src/store/Modules/GlobalStore.ts b/src/store/Modules/GlobalStore.ts
index e49941c..e53236b 100644
--- a/src/store/Modules/GlobalStore.ts
+++ b/src/store/Modules/GlobalStore.ts
@@ -69,7 +69,8 @@ const state: IGlobalState = {
     _id: 0
   },
   settings: [],
-  disciplines: []
+  disciplines: [],
+  autoplaydisc: 8000
 }
 
 async function getConfig(id) {
diff --git a/src/store/Modules/fieldsTable.ts b/src/store/Modules/fieldsTable.ts
index 0841d70..19092c0 100644
--- a/src/store/Modules/fieldsTable.ts
+++ b/src/store/Modules/fieldsTable.ts
@@ -193,6 +193,32 @@ export const fieldsTable = {
     }
   },
 
+  getMultiValueByTable(col: IColGridTable, arrval) {
+    if (col.jointable) {
+      const mylist = this.getTableJoinByName(col.jointable)
+      const key = this.getKeyByTable(col.jointable)
+      const collab = this.getLabelByTable(col.jointable)
+
+      // console.table(mylist)
+      // console.log('key=', key, 'collab', collab, 'val', val)
+
+      const myris = mylist.filter((myrec) => arrval.includes(myrec[key]))
+      // console.log('myris', myris)
+      if (myris) {
+        console.log('collab', collab)
+        if (tools.isObject(collab))
+          return myris.map(collab)
+        else
+          return myris.map((rec) => rec[collab])
+      } else {
+        return ''
+      }
+
+    } else {
+      return ''
+    }
+  },
+
   getColByTable(table) {
     if (table === 'permissions') {
       return ['value', 'label']
@@ -224,6 +250,10 @@ export const fieldsTable = {
     else
       return 'label'
   },
+  getTitleByTable(mytable): string {
+    const myrec = this.getrecTableList(mytable)
+    return myrec.label
+  },
   getIconByTable(mytable): string {
     const myrec = this.getrecTableList(mytable)
     if (myrec)
@@ -237,7 +267,7 @@ export const fieldsTable = {
       label: 'Insegnanti',
       columns: colTableOperator,
       colkey: 'username',
-      collabel: 'username'
+      collabel: (rec) => rec.name + ' ' + rec.surname
     },
     {
       value: 'wheres',
diff --git a/src/store/Modules/tools.ts b/src/store/Modules/tools.ts
index 3b1489b..58e6289 100644
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -1726,6 +1726,44 @@ export const tools = {
       return ''
   },
 
+  getstrShortDate(mydate) {
+    const DateFormatter = new Intl.DateTimeFormat(func_tools.getLocale() || void 0, {
+      weekday: 'long',
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric'
+      // timeZone: 'UTC'
+    })
+    try {
+      if (DateFormatter) {
+        const date1 = new Date(mydate)
+        return DateFormatter.format(date1)
+      }
+      return mydate
+    } catch (e) {
+      return ''
+    }
+
+  },
+  getstrVeryShortDate(mydate) {
+    const DateFormatter = new Intl.DateTimeFormat(func_tools.getLocale() || void 0, {
+      weekday: 'short',
+      day: 'numeric',
+      month: 'short',
+      // timeZone: 'UTC'
+    })
+    try {
+      if (DateFormatter) {
+        const date1 = new Date(mydate)
+        return DateFormatter.format(date1)
+      }
+      return mydate
+    } catch (e) {
+      return ''
+    }
+
+  },
+
   getstrDateTimeEvent(mythis, myevent, withhtml) {
     let mystr = ''
     // is same day?
@@ -1756,6 +1794,34 @@ export const tools = {
     return mystr
   },
 
+  getstrDateTimeEventSimple(mythis, myevent) {
+    let mystr = ''
+    // is same day?
+    if (tools.getstrShortDate(myevent.dateTimeStart) === tools.getstrShortDate(myevent.dateTimeEnd)) {
+      mystr = `${tools.getstrShortDate(myevent.dateTimeStart)}
+                 h. ${ tools.getstrTime(myevent.dateTimeStart) }`
+    } else {
+      mystr = `${tools.getstrShortDate(myevent.dateTimeStart)} - ${ tools.getstrShortDate(myevent.dateTimeEnd) }`
+
+    }
+
+    return mystr
+  },
+
+  getstrDateTimeEventShort(mythis, myevent) {
+    let mystr = ''
+    // is same day?
+    if (tools.getstrShortDate(myevent.dateTimeStart) === tools.getstrShortDate(myevent.dateTimeEnd)) {
+      mystr = `${tools.getstrVeryShortDate(myevent.dateTimeStart)}
+                 h. ${ tools.getstrTime(myevent.dateTimeStart) }`
+    } else {
+      mystr = `${tools.getstrVeryShortDate(myevent.dateTimeStart)} - ${ tools.getstrVeryShortDate(myevent.dateTimeEnd) }`
+
+    }
+
+    return mystr
+  },
+
   getstrDateTime(mytimestamp) {
     // console.log('getstrDate', mytimestamp)
     if (!!mytimestamp)
@@ -1814,7 +1880,7 @@ export const tools = {
     } else {
       return null
     }
-    console.log('mystrdate', mystrdate, strdate, mydate)
+    // console.log('mystrdate', mystrdate, strdate, mydate)
     return mydate
   }
   ,
@@ -1846,8 +1912,10 @@ export const tools = {
   getDateNow() {
     const mydate = new Date()
     return mydate
-  }
-  ,
+  },
+  getDateNowEvent() {
+    return tools.addDays(tools.getDateNow(), -1)
+  },
   getDateNull() {
     return new Date(0)
   }
@@ -2080,8 +2148,7 @@ export const tools = {
     } else {
       return '500'
     }
-  }
-  ,
+  },
 
   styles_imgtitle(sized ?: string) {
     if (!!sized) {
@@ -2279,6 +2346,15 @@ export const tools = {
 
   },
 
+  getimgev(ev) {
+    if (!!ev.img_small)
+      return `statics/` + ev.img_small
+    else if (!!ev.img)
+      return `statics/` + ev.img
+    else
+      return ''
+  },
+
   getimgbysize(dir: string, file: string) {
     const myimage = dir + file
     // console.log('includes = ', static_data.preLoadImages.map((a) => a.imgname).includes(myimage), myimage)
@@ -2524,14 +2600,20 @@ export const tools = {
   },
   getwidth(mythis) {
     // return height()
-    return mythis.$q.screen.width
+    let myw = mythis.$q.screen.width
+    if (GlobalStore.state.leftDrawerOpen)
+      myw -= 300
+    // if (GlobalStore.state.RightDrawerOpen)
+    //   myw -= 300
+    return myw
+
   },
 
   getwidthscale(mythis, mywidth, maxwidth) {
     if (this.isMobile()) {
       return mywidth
     } else {
-      let myw = mywidth + ((this.getwidth(mythis) - mywidth - 300) * 0.4)
+      let myw = mywidth + ((this.getwidth(mythis) - mywidth) * 0.4)
       if (myw > maxwidth)
         myw = maxwidth
 
@@ -2641,6 +2723,8 @@ export const tools = {
     setScrollPosition(target, offset, duration)
   },
   getCellForWhatsapp(numbercell) {
+    if (!numbercell)
+      return ''
     let mynum = numbercell.replace(/\-/g, '')
     const intcode = GlobalStore.getters.getValueSettingsByKey('INT_CODE')
     if (numbercell.substring(0, 1) !== '+')
@@ -2652,6 +2736,8 @@ export const tools = {
   },
 
   getHttpForWhatsapp(numbercell) {
+    if (!numbercell)
+      return ''
     const mynum = this.getCellForWhatsapp(numbercell)
     if (mynum)
       return 'https://wa.me/' + mynum
@@ -2681,9 +2767,12 @@ export const tools = {
         equiv: { 'http-equiv': 'Content-Type', 'content': 'text/html; charset=UTF-8' }
       }
     }
+  },
+  isObject(anything) {
+    //Object.create(null) instanceof Object → false
+    return Object(anything) === anything
   }
 
-
 // getLocale() {
   //   if (navigator.languages && navigator.languages.length > 0) {
   //     return navigator.languages[0]