ldc-boutique-cnc/integration/resources/js/components/TimeSlotPicker.vue

<template>
    <div class="timeslot-container">
        <div class="calendar">
            <h2><span @click="prevMonth()"><img src="/images/chevron_prev.svg"></span>{{ months[currentmonth] }} {{ currentyear }}<span @click="nextMonth()"><img src="/images/chevron_next.svg"></span></h2>
        <header>
            <div v-for="day in days">{{ short(day) }}</div>
        </header>
        <section class="content">
            <div v-for="tile in tiles" :class="style(tile)" @click="showCreneaux(tile)">
                <span>{{ getday(tile.date) }}</span>
            </div>
        </section>
        </div>
        <div class="creneaux">
            <header>Horaires disponibles le {{selectedDay}}</header>
            <section class="creneaux__list">
                <div class="scroll-up" @click="scroll('up')" :class="{active: (this.scrollCounter>0)}"><img src="/images/chevron_up.svg"></div>
                <section class="creneaux__slots" ref="creneaux__slots" :class="{hasDown: (creneaux.length>3 && this.scrollCounter<(creneaux.length/2-1)), hasUp: (this.scrollCounter>0)}">
                    <div v-for="(creneau,index) in creneaux" :class="styleCren(creneau)" @click="selectSlot(creneau)" ref="cren" :key="index">
                        <span>{{creneau.horaire}}</span>
                    </div>
                </section>
                <div class="scroll-down" @click="scroll('down')" :class="{active: (creneaux.length>3 && this.scrollCounter<(creneaux.length/2-1)) }"><img src="/images/chevron_down.svg"></div>
            </section>
        </div>
    </div>
</template>


<script>
export default {
    props: {
        day: {
            type: Number,
            default: function() {
                return new Date().getDay();
            }
        },
        month : {
            type: Number,
            default: function() {
                return new Date().getMonth();
            }
        },
        year : {
            type: Number,
            default: function() {
                return new Date().getFullYear();
            }
        },
        weekend: {
            type: Array,
            default: function() {
                return [5,6];
            }
        },
        days: {
            type: Array,
            default : function() {
                return ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'];
            }
        },
        months: {
            type: Array,
            default: function() {
                return ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octore', 'Novembre', 'Décembre'];
            }
        },
        maxtiles: {
            type: Number,
            default : 34 //soit 5 semaines
        },
        defaultCreneaux: {
            type: Array,
            default: function() {
                var x = 15; //minutes interval
                var times = []; // time array
                var tt = 0; // start time
                var ap = ['AM', 'PM']; // AM-PM

                //loop to increment the time and push results in array
                for (var i=0;tt<24*60; i++) {
                var hh = Math.floor(tt/60); // getting hours of day in 0-24 format
                var mm = (tt%60); // getting minutes of the hour in 0-55 format
                times[i] = ("0" + hh).slice(-2) + ':' + ("0" + mm).slice(-2) //+ ap[Math.floor(hh/12)]; // pushing data in array in [00:00 - 12:00 AM/PM format]
                tt = tt + x;
                }

                return times;
            }
        },
        dbavailablecreneaux: {
            type: String,
        },
        showOnlyAvailables: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        date() { return new Date(this.currentyear, this.currentmonth, 1);},
        startday() {return this.date.getDay() < 1 ? 6 : this.date.getDay() - 1;},
        dayscount() {return new Date(this.currentyear, this.currentmonth + 1, 0).getDate();},
        tiles() { return this.prepare(); },
        creneaux: {
            get: function(){ return this.listCreneaux(); },
        }
    },
    watch: {

    },
    data() {
        return {
            currentmonth: null,
            currentyear: this.year,
            selectedDay : new Date().toLocaleDateString(),
            selectedCreneau : null,
            current: new Date(),
            availableCreneaux: [],
            scrollCounter: 0,
        }
    },
    mounted() {
        this.availableCreneaux = JSON.parse(this.dbavailablecreneaux);
        //this.availableCrenaux = this.dbavailablecreneaux;
        this.selectedDay = this.current.toLocaleDateString();
        this.currentmonth = this.month; //this.months.indexOf(this.month);
    },
    methods: {
        nextMonth() {
            if(this.currentmonth == 11) {
                this.currentmonth = 0;
                this.currentyear+=1;
            } else {
                this.currentmonth+=1;
            }
        },
        prevMonth() {
            if(this.currentmonth == 0) {
                this.currentmonth = 11;
                this.currentyear-=1;
            } else {
                this.currentmonth-=1;
            }
        },
        short(value) { return value.substring(0, 3) },
        getday(value) { return new Date(value).getDate() },
        style(tile) {
                return {
                    'last': tile.last,
                    'next': tile.next,
                    'current': tile.current,
                    'selected' : tile.selected,
                    'grey': tile.grey
                }
            },
        styleCren(creneau) {
            return {
                'dispo' : creneau.dispo,
                'selected' : creneau.selected
            }
        },
        prepare() {
            let before = [];
            let current = [];
            let daycount = 1;
            for (let i = 0; i <= this.maxtiles; i++) {
                let date = new Date(this.currentyear, this.currentmonth, (i < this.startday) ? -i : daycount);
                let day = date.getDay() < 1 ? 6 : date.getDay() - 1;
                let obj = {
                //this day is from lastmonth
                last: (i < this.startday) ? true : false,
                //this day is next month
                next: i >= this.dayscount + this.startday,
                //this is a weekend day
                grey: this.weekend.find((item) => item === day) ? true : false,
                //this is today
                current: (new Date(this.currentyear, this.currentmonth, daycount).toDateString() == this.current.toDateString()) ? true : false,
                //selected
                selected: (date.toLocaleDateString() == this.selectedDay) ? true : false,
                //this tile's date
                date: date
                };
                if (i < this.startday)
                before.push(obj);
                else {
                current.push(obj);
                daycount++;
                }
            }
            return before.reverse().concat(current);
        },
        showCreneaux(tile){
            this.selectedDay = tile.date.toLocaleDateString();
            //this.selectedCreneau = null;
            //this.creneaux = this.listCreneaux();
        },
        selectSlot(creneau){
            this.selectedCreneau = this.selectedDay+"-"+creneau.horaire;
        },
        listCreneaux() {
                let todaysAvailable = [];
                if(this.selectedDay in this.availableCreneaux) {
                    todaysAvailable = this.availableCreneaux[""+this.selectedDay];
                }
                let crens = [];
                //filtrer les créneaux dispos
                this.defaultCreneaux.forEach(element => {
                    let obj = {
                        //day: index,
                        horaire: element,
                        dispo: todaysAvailable.includes(element),
                        selected: (this.selectedCreneau == this.selectedDay+"-"+element) ? true : false
                    };
                    //option pour ne générer que les créneaux disponibles
                    if(this.showOnlyAvailables) {
                        if (obj.dispo) {
                            crens.push(obj);
                        }
                    } else {
                        crens.push(obj);
                    }

                });
                return crens;
        },
        //animation
        scroll(way) {
            if (way == 'down') {
                //ici on limite le nombre de click down
                //1 er click on scroll 2 crans
                //2 eme click on scroll 2 crans, etx
                //et on démarre à 0 donc, -1
                if (this.scrollCounter < (this.creneaux.length/2)-1) {
                    this.scrollCounter = this.scrollCounter + 1;
                    this.fixScrolling();
                }
            } else if (way == 'up') {
                if (this.scrollCounter > 0) {
                    this.scrollCounter = this.scrollCounter - 1;
                    this.fixScrolling()
                }
            }
        },
        fixScrolling(){
            const divH = this.$refs.cren[this.scrollCounter].clientHeight;
            if(this.scrollCounter==1) {
                //cas du premier on va faire apparaite le bouton pour remonter, et réduire la taille du viewport de l'element
                this.$refs.creneaux__slots.scrollTop = divH * this.scrollCounter + divH;
            } else {
                this.$refs.creneaux__slots.scrollTop = 2 * divH * this.scrollCounter;
            }
        },
    }
}
</script>