Bug bootstrap-select corrigé

 */

?>

<button onclick="ts()">Suceess</button>

<button onclick="te()">Error</button>

<select class="form-select">

    <option selected>Open this select menu</option>

    <option value="1">One</option>

    <option value="2">Two</option>

    <option value="3">Three</option>

</select>

<h2>bootstrap-select</h2>

<select id="test">

    <option selected>Open this select menu</option>

    <option value="1">One</option>

    <option value="2">Two</option>

    <option value="3">Three</option>

</select>

    <div class="dropdown">

        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">

            Dropdown button

        </button>

        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">

            <li><a class="dropdown-item" href="#">Action</a></li>

            <li><a class="dropdown-item" href="#">Another action</a></li>

            <li><a class="dropdown-item" href="#">Something else here</a></li>

        </ul>

    </div>

<script>

    function toast(message, severity) {

        const bgClasses = {

            info: 'bg-info',

            success: 'bg-success',

            warning: 'bg-warning',

            error: 'bg-danger'

        };

        const iconClasses = {

            info: 'info-circle',

            success: 'check-circle',

            warning: 'exclamation-circle',

            error: 'exclamation-triangle'

        };

        let toastContainer = document.getElementById('unicaen-vue-toast-container');

        if (!toastContainer) {

            toastContainer = document.createElement('div');

            toastContainer.id = 'unicaen-vue-toast-container';

            toastContainer.classList.add('toast-container', 'position-fixed', 'top-0', 'end-0', 'p-3');

            document.body.appendChild(toastContainer);

        }

        // Création de l'élément HTML pour le toast

        const toast = document.createElement('div');

        toast.classList.add('toast', 'show', 'text-white', bgClasses[severity] ? bgClasses[severity] : 'bg-secondary');

        toast.setAttribute('role', 'alert');

        toast.setAttribute('aria-live', 'assertive');

        toast.setAttribute('aria-atomic', 'true');

        if (severity === 'error'){

            toast.setAttribute('style', 'width:100%');

        }

        const toastContent =

            '<button class="btn-close btn-close-white h5" style="float:right" data-bs-dismiss="toast" aria-label="Close"></button>' +

            '<i class="icon fas fa-' + iconClasses[severity] + '" style="float: left;font-size: 26pt;padding-left: .4rem;margin-top:.4rem;padding-right: 1rem;"></i>' +

            '<div class="toast-body">' + message + '  </div>';

        toast.innerHTML = toastContent;

        // Ajout du toast à l'élément du conteneur de toasts

        toastContainer.appendChild(toast);

        // Affichage du toast

        //const bsToast = new bootstrap.Toast(toast);

        //bsToast.show();

        // Masquage du toast si ce n'est pas une erreur

        if (severity !== 'error') {

            // setTimeout(() => {

            //     toast.classList.remove('show');

            // }, 3000);

        }

    }

    $(() => {

        toast('mon success est phénoménal et j\'ai envie d\'en parler tout le temps mais ce serait bien trop long à expliquer et patati et patatta', 'success');

        toast('Et voici une info à ne pas rater!!', 'info');

        toast('Warning', 'warning');

        toast('Erreur magistrale!!!', 'error');

    $(function () {

        $('#test').selectpicker();

    });

</script>

<?php

echo $this->vue('exemple/mon-test');

echo $this->vue('application/utilisateur', ['valeur' => 12.0]);

 No newline at end of file

## Création de composants Vue

Ose embarque BootstrapVue.

A privilégier pour utiliser des composants Bootstrap.

Sites officiels :

- https://vuejs.org/

- https://vitejs.dev/

- https://bootstrap-vue.org/

Doc Vue de Stéphane : 

- https://git.unicaen.fr/bouvry/presentation-dev/-/blob/master/src/vuejs.md

<template>

    <div class="calendar">

        <div class="recherche">

            <div class="recherche btn-group">

                <button class="btn btn-light" id="prevMois" @click="prevMois" title="Mois précédant">

                    <u-icon name="chevron-left"/>

                </button>

                <select class="form-select btn btn-light" id="otherMois" v-model="mois">

                    <option v-for="m in listeMois()" :value="m.id">{{ m.libelle }}</option>

                </select>

                <select class="form-select btn btn-light" id="otherAnnee" v-model="annee">

                    <option v-for="a in listeAnnees()" :value="a">{{ a }}</option>

                </select>

                <button class="btn btn-light" id="nextMois" @click="nextMois" title="Mois suivant">

                    <u-icon name="chevron-right"/>

                </button>

            </div>

        </div>

        <table class="table table-bordered table-hover table-sm">

            <tr v-for="jour in listeJours" :data-jour="jour">

                <th class="nom-jour">

                    {{ nomJour(jour) }}

                </th>

                <th class="numero-jour">

                    <div class="num-jour badge bg-secondary rounded-circle">{{ jour < 10 ? '0' + jour.toString() : jour }}</div>

                </th>

                <td>

                    <div class="event" :style="'border-color:'+event.color+';background-color:'+event.bgcolor" v-for="(event, index) in eventsByJour(jour)" :key="index">

                        <component :is="event.component" :event="event"></component>

                    </div>

                    <div v-if="canAddEvent">

                        <button @click="addEvent" :data-jour="jour" class="btn btn-light btn-sm">

                            <u-icon name="plus"/>

                            Nouvel événement

                        </button>

                    </div>

                </td>

            </tr>

        </table>

    </div>

</template>

<script>

export default {

    name: 'UCalendar',

    props: {

        date: {type: Date, required: true},

        events: {type: Array, required: true},

        canAddEvent: {type: Boolean, required: true, default: true},

    },

    data()

    {

        const dateObj = new Date(this.date);

        return {

            mois: dateObj.getMonth() + 1,

            annee: dateObj.getFullYear(),

        };

    },

    computed: {

        listeJours()

        {

            const dateObj = new Date(this.date);

            dateObj.setDate(1);

            dateObj.setMonth(dateObj.getMonth() + 1);

            dateObj.setDate(dateObj.getDate() - 1);

            let nombreJours = dateObj.getDate();

            return Array.from({length: nombreJours}, (v, k) => k + 1)

        },

    },

    watch: {

        date: function (newVal, oldVal) { // watch it

            const dateObj = new Date(this.date);

            this.mois = dateObj.getMonth() + 1;

            this.annee = dateObj.getFullYear();

        },

        mois: function (newVal, oldVal) { // watch it

            const dateObj = new Date(this.date);

            dateObj.setMonth(newVal - 1);

            this.$emit('changeDate', dateObj);

        },

        annee: function (newVal, oldVal) { // watch it

            const dateObj = new Date(this.date);

            dateObj.setFullYear(newVal);

            this.$emit('changeDate', dateObj);

        }

    },

    methods: {

        nomJour(numJour)

        {

            const dateObj = new Date(this.date);

            dateObj.setDate(numJour);

            return dateObj.toLocaleString("fr-FR", {weekday: "short"});

        },

        listeMois()

        {

            let mois = [];

            const dateObj = new Date();

            for (let i = 1; i <= 12; i++) {

                dateObj.setMonth(i - 1);

                let nomMois = dateObj.toLocaleString("fr-FR", {month: "long"});

                mois.push({id: i, libelle: nomMois});

            }

            return mois;

        },

        listeAnnees()

        {

            const dateObj = new Date();

            const annee = dateObj.getFullYear();

            const range = 1;

            let annees = [];

            for (let a = annee - range; a <= annee + range; a++) {

                annees.push(a);

            }

            return annees;

        },

        addEvent(event)

        {

            const dateObj = new Date(this.date);

            dateObj.setDate(event.currentTarget.dataset.jour);

            this.$emit('addEvent', dateObj, event);

        },

        prevMois()

        {

            const dateObj = new Date(this.date);

            dateObj.setMonth(dateObj.getMonth() - 1);

            this.$emit('changeDate', dateObj);

        },

        nextMois()

        {

            const dateObj = new Date(this.date);

            dateObj.setMonth(dateObj.getMonth() + 1);

            this.$emit('changeDate', dateObj);

        },

        eventsByJour(jour)

        {

            const dateObj = new Date(this.date);

            let res = {};

            for (let e in this.events) {

                let event = this.events[e];

                if (event.date.getFullYear() === dateObj.getFullYear()

                    && event.date.getMonth() + 1 === dateObj.getMonth() + 1

                    && event.date.getDate() === jour

                ) {

                    res[e] = event;

                }

            }

            return res;

        },

    }

}

</script>

<style scoped>

.table tr {

    background-color: #f4f4f4;

    border-left: 1px #ddd solid;

    border-right: 1px #ddd solid;

}

.table-hover tr:hover {

    background-color: #f7f7f7;

}

.recherche {

    text-align: center;

}

.recherche .btn-group {

    box-shadow: none;

    margin: auto;

}

.recherche select.btn {

    padding-right: 3em;

}

th.nom-jour {

    width: 1%;

    padding-left: 3px;

}

th.numero-jour {

    width: 1%;

    padding-right: .5em;

}

.recherche {

    justify-content: center;

    padding-bottom: 5px;

}

.event {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 3px;

    border-left: 10px #bbb solid;

    border-right: 10px #bbb solid;

}

.event:hover {

    background-color: white;

}

</style>

 No newline at end of file

<template>

    {{ formatted }}

</template>

<script>

export default {

    name: "UDate",

    props: {

        'value': {required: false, type: [String,Date]},

        'format': {required: false, type: String},

    },

    mounted(){

        this.formatted = this.formatage(this.value);

    },

    data(){

        return {

            formatted: undefined,

        };

    },

    watch: {

        'value': function(val){

            this.formatted = this.formatage(val);

        },

    },

    methods: {

        formatage(val){

            if (val === undefined) {

                return undefined;

            }

            let date = new Date(val);

            const year = date.getFullYear();

            const month = (date.getMonth() + 1).toString().padStart(2, '0');

            const day = date.getDate().toString().padStart(2, '0');

            const hour = date.getHours().toString().padStart(2, '0');

            const min =  date.getMinutes().toString().padStart(2, '0');

            const sec =  date.getSeconds().toString().padStart(2, '0');

            switch(this.format){

                case 'datetime':

                    return `${day}/${month}/${year} à ${hour}:${min}`;

                case 'time':

                    return `${hour}:${min}:${sec}`;

            }

            // format 0 : DATE par défaut

            return `${day}/${month}/${year}`;

        }

    },

}

</script>

<style scoped>

</style>

 No newline at end of file

<script>

export default {

    name: "UIcon",

    props: {

        valeur: {required: true, type: Float64Array},

    },