- 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/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 {

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)
+  }
+
 }

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">