- 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/CCardCarousel/CCardCarousel.scss

@@ -0,0 +1,12 @@
+.landing__swirl-bg {
+  background-repeat: no-repeat !important;
+  background-position: top;
+  background-size: contain !important;
+  background-image: url(../../statics/images/landing_first_section.png) !important
+}
+
+.landing__features {
+  opacity: .9;
+  font-size: 1rem;
+  line-height: 1.5;
+}

src/components/CCardCarousel/CCardCarousel.ts

@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import { GlobalStore } from '../../store'
+import { CCardDiscipline } from '../CCardDiscipline'
+import { ICategory } from '../../model'
+import MixinBase from '../../mixins/mixin-base'
+
+@Component({
+  name: 'CCardCarousel',
+  mixins: [MixinBase],
+  components: { CCardDiscipline }
+})
+
+export default class CCardCarousel extends Vue {
+  @Prop({ required: true }) public myarr: []
+
+  public slidedisc = 0
+
+  get autoplaydisc() {
+    return GlobalStore.state.autoplaydisc
+  }
+
+  set autoplaydisc(value) {
+    GlobalStore.state.autoplaydisc = value
+  }
+
+
+}

src/components/CCardCarousel/CCardCarousel.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="row items-center q-gutter-md ">
+        <div class="padding">
+            <div class="landing__features">
+                <q-list bordered class="q-ma-md">
+                    <q-item>
+                        <q-item-section>
+                            <q-item-label overline class="text-subtitle3">Discipline Offerte:</q-item-label>
+                        </q-item-section>
+                    </q-item>
+                    <div v-for="(disc, index) in myarr" :key="index">
+                        <q-item clickable v-ripple
+                                :to="disc.linkpage">
+                            <q-item-section avatar v-if="tools.getimgev(disc)">
+                                <q-avatar>
+                                    <img :src="tools.getimgev(disc)">
+                                </q-avatar>
+                            </q-item-section>
+                            <q-item-section>{{disc.label}}</q-item-section>
+                        </q-item>
+                        <q-separator/>
+                    </div>
+                </q-list>
+            </div>
+        </div>
+
+        <q-carousel
+                swipeable
+                animated
+                :autoplay="autoplaydisc"
+                v-model="slidedisc"
+                thumbnails
+                infinite
+                ref="carousel"
+                transition-next="slide-left"
+                transition-prev="slide-right"
+                height="650px"
+                width="100%"
+        >
+            <template v-slot:control>
+                <q-carousel-control
+                        position="top"
+                        class="text-center"
+                        style="padding: 4px 8px 4px 0; border-radius: 4px; font-weight: bold;"
+                >
+                    <q-toggle dark color="white" v-model="autoplaydisc" label="Auto Play" class="shadow-8"
+                              style="background-color: rgba(0,0,0, 0.2);"></q-toggle>
+                </q-carousel-control>
+
+                <q-carousel-control
+                        position="top-left"
+                        class="q-gutter-xs"
+                        style="opacity: 0.7;"
+                >
+                    <q-btn
+                            push round color="white" text-color="black" icon="keyboard_arrow_left"
+                            @click="$refs.carousel.previous()"></q-btn>
+                </q-carousel-control>
+                <q-carousel-control
+                        position="top-right"
+                        class="q-gutter-xs"
+                        style="opacity: 0.7;"
+                >
+                    <q-btn
+                            push round color="white" text-color="black" icon="keyboard_arrow_right"
+                            @click="$refs.carousel.next()"></q-btn>
+                </q-carousel-control>
+            </template>
+            <q-carousel-slide v-for="(myrec, index) in myarr" :key="index"
+                              :img-src="`statics/`+myrec.img_small"
+                              :name="index">
+                <div class="row q-ma-xs">
+                    <CCardDiscipline :discipline="myrec" mystyle="height: 550px" :autoplay.sync="autoplaydisc">
+
+                    </CCardDiscipline>
+                </div>
+                <div class="absolute-bottom sfondo-grigio">
+                    <span class="text-h6 text-grey-1 shadow-max alignleft">{{index + 1}}. </span>
+                </div>
+
+            </q-carousel-slide>
+        </q-carousel>
+    </div>
+</template>
+
+<script lang="ts" src="./CCardCarousel.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CCardCarousel.scss';
+</style>

src/components/CCardCarousel/index.ts

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

src/components/CMyTeacher/CMyTeacher.scss

@@ -0,0 +1,92 @@
+$heightBtn: 100%;
+$grayshadow: #555;
+
+.text-subtitle-carica {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+}
+
+.text-subtitle-certificato {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+  .text-subtitle-carica {
+    font-size: 1rem;
+  }
+}
+
+.op {
+  text-align: center !important;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+
+  &__cell {
+    font-size: 1rem;
+    color: red;
+  }
+
+  &__email {
+    font-size: 1rem;
+    color: #3b5998;
+  }
+
+  &__email a {
+    text-decoration: none;
+  }
+
+  &__facebook a {
+    font-size: 1rem;
+    text-decoration: none;
+  }
+
+  &__storia {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    text-align: justify;
+  }
+}
+
+.myimg {
+  border-radius: 300px !important;
+}
+
+.q-img {
+  &__image {
+    border-radius: 300px !important;
+  }
+}
+
+.myflex {
+  display: flex;
+  flex: 1;
+}
+
+.mybase {
+  color: black;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: 0.03333em;
+
+  &__teacher {
+    margin-top: 5px;
+
+    &-content {
+      color: darkblue;
+    }
+
+    &-content:hover {
+
+    }
+  }
+
+}

src/components/CMyTeacher/CMyTeacher.ts

@@ -0,0 +1,43 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { tools } from '../../store/Modules/tools'
+import { GlobalStore, UserStore } from '../../store/Modules'
+import { CMyAvatar } from '../CMyAvatar'
+import MixinBase from '../../mixins/mixin-base'
+import MixinOperator from '../../mixins/mixin-operator'
+import MixinUsers from '../../mixins/mixin-users'
+
+
+@Component({
+  name: 'CMyTeacher',
+  mixins: [MixinBase, MixinOperator, MixinUsers],
+  components: { CMyAvatar }
+})
+
+export default class CMyTeacher extends MixinOperator {
+  @Prop({ required: true, default: '' }) public username
+
+  public showuserdetails = false
+  public autoplaydiscsaved: number
+  public tab: string = 'one'
+
+  @Watch('showuserdetails')
+  public changeshowuserdetails() {
+    if (!this.showuserdetails) {
+      GlobalStore.state.autoplaydisc = this.autoplaydiscsaved
+    }
+  }
+
+  public executeclick(event) {
+    console.log('executeclick')
+    this.showuserdetails = true
+
+    this.autoplaydiscsaved = GlobalStore.state.autoplaydisc
+    GlobalStore.state.autoplaydisc = 0
+  }
+
+  get myop() {
+    return this.getOperatorByUsername(this.username)
+  }
+}

src/components/CMyTeacher/CMyTeacher.vue

@@ -0,0 +1,85 @@
+<template>
+    <span>
+        <q-dialog v-model="showuserdetails" v-if="myop">
+            <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+                <q-toolbar class="bg-primary text-white">
+                    <q-toolbar-title>
+                        {{myop.name}} {{myop.surname}}
+                    </q-toolbar-title>
+                    <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
+                </q-toolbar>
+                <q-card-section class="text-center inset-shadow">
+                    <div style="width: 200px; float: left;">
+                        <q-img :src="`statics/images/` + myop.img" class="myimg">
+                        </q-img>
+                    </div>
+
+                    <div class="text-h6 text-trans">{{myop.name}} {{myop.surname}}</div>
+                    <div class="text-subtitle-carica text-trans">{{myop.qualification}}</div>
+                    <div class="text-subtitle-carica">{{myop.disciplines}}</div>
+                    <div v-if="myop.certifications" class="text-subtitle-certificato">{{myop.certifications}}</div>
+                    <div class="op__cell">
+                        <q-icon class="flex-icon" name="mobile_friendly" v-if="myop.cell"></q-icon>
+                        <span class="q-mx-sm">{{myop.cell}}</span>
+
+                        <div class="row justify-center q-gutter-xs ">
+                            <q-btn v-if="myop.email" fab-mini icon="fas fa-envelope"
+                                   color="blue-grey-6" type="a"
+                                   size="xs"
+                                   :href="tools.getemailto(myop.email)" target="__blank">
+                            </q-btn>
+                            <q-btn v-if="tools.getHttpForWhatsapp(myop.cell)" fab-mini icon="fab fa-whatsapp"
+                                   color="green" type="a"
+                                   size="xs"
+                                   :href="tools.getHttpForWhatsapp(myop.cell)" target="__blank">
+                            </q-btn>
+
+                            <q-btn v-if="tools.getHttpForTelegram(myop.usertelegram)" fab-mini icon="fab fa-telegram"
+                                   color="blue" type="a"
+                                   size="xs"
+                                   :href="tools.getHttpForTelegram(myop.usertelegram)" target="__blank">
+                            </q-btn>
+                        </div>
+                    </div>
+                    <div class="op__email">
+                        <q-icon class="flex-icon" name="contact_mail"></q-icon>&nbsp;
+                        <a :href="tools.getemailto(myop.email)" target="_blank">{{myop.email}}
+                        </a>
+                    </div>
+
+                    <div class="op__facebook" v-if="myop.paginafb">
+                        <a :href="myop.paginafb" target="_blank">
+                            <i aria-hidden="true" class="q-icon fab fa-facebook-f icon_contact links"></i> Pagina
+                            Facebook
+                        </a>
+                    </div>
+
+                    <br>
+                    <div class="op__storia" v-html="myop.info"></div>
+
+
+                    <!--<q-card-section>-->
+                    <!--<div class="text-subtitle3">{{myop.disciplines}}</div>-->
+                    <!--{{myop.info}}-->
+                    <!--</q-card-section>-->
+                </q-card-section>
+                <q-card-actions align="center">
+                    <q-btn rounded dense :label="$t('dialog.close')" color="primary" v-close-popup></q-btn>
+                </q-card-actions>
+            </q-card>
+        </q-dialog>
+        <q-chip clickable
+                v-if="getImgTeacherByUsername(username) && isValidUsername(username)" @click="executeclick"
+                class="mybase__teacher-content">
+            <CMyAvatar :myimg="getImgTeacherByUsername(username)"></CMyAvatar>
+            <span>{{getTeacherByUsername(username)}}</span>
+        </q-chip>
+    </span>
+</template>
+
+<script lang="ts" src="./CMyTeacher.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CMyTeacher.scss';
+</style>

src/components/CMyTeacher/index.ts

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