&Ça ;!DOCTYPEhtml>
{% charger statique %}
{% charger i18n %}
<méta nom="fenêtre" contenu="largeur = largeur de l'appareil, échelle initiale = 1,0">
<!-- Bootstrap CSS -->
<lien rapport="feuille de style" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- Votre CSS personnalisé -->
<lien rapport="feuille de style" href="{% statique ''application_rendez-vous/css/styles.css' %}">
<!-- Flatpickr CSS -->
<lien rapport="feuille de style" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<!-- Bootstrap JavaScript et jQuery -->
<scénario src="https://code.jquery.com/jquery-3.2.1.slim.min.js"> ;scénario>
<scénario src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;scénario>
<scénario src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"> ;scénario>
<!-- Flatpickr JavaScript -->
<scénario src="https://cdn.jsdelivr.net/npm/flatpickr"> ;scénario>
<div classe="conteneur py-5">
<h1 classe="mb-5 affichage du centre de texte-4">{% trans ""Nouveau rendez-vous" %}&C'est ;/h1>
<div classe="ligne justifier-content-center">
<div classe="col-12 col-md-8">
<!-- Balise de début de formulaire ici -->
<formulaire méthode="poste">
{% csrf_token %}
{% pour champ dans formulaire %}
<div classe="groupe de formulaire">
<étiquette pour="Heure affichée" classe="col-lg-2 affichage des étiquettes de contrôle-4">{{ champ.étiquette }}&C'est ;/étiquette>
<div classe="col-lg-10">
{% si champ.nom != "moment" %}
{{ champ }}
{% autre %}
<!-- Champ de saisie affichant la valeur sélectionnée pour le temps -->
<saisir taper="texte" identifiant="Heure affichée" classe="contrôle de formulaire" lecture seulement>
<!-- Nous montrons ici les boutons de sélection de l'heure -->
<div identifiant="timeButtonsContainer"> ;div>
<!-- Nous ajoutons le champ de saisie de l'heure comme masqué -->
<saisir taper="caché" identifiant="id_actuel" nom="moment" Saisie automatique="désactivé"> <!-- fonctionnalité de saisie semi-automatique ajoutée -->
{% fin si %}
<!-- Section ajoutée pour afficher les erreurs dans les champs du formulaire -->
{% si champ.les erreurs %}
<div classe="alerte alerte-danger">
{{ champ.les erreurs|rejoindre:", " }}
&C'est ;/div>
{% fin si %}
<!-- Fin de section ajoutée pour l'affichage des erreurs -->
&C'est ;/div>
&C'est ;/div>
{% finpour %}
<div classe="groupe de formulaire">
<div classe="col-lg-offset-2 col-lg-10">
<bouton classe="btn btn-primaire btn-lg btn-block">{% trans ""Créer un rendez-vous" %}&C'est ;/bouton>
&C'est ;/div>
&C'est ;/div>
&C'est ;/formulaire> <!-- Balise de fin de formulaire ici -->
&C'est ;/div>
&C'est ;/div>
&C'est ;/div>
<style>
.flatpickr-day.disabled, .flatpickr-day.disabled:hover {
fond : rouge !important;
curseur : non autorisé ;
}
&C'est ;/style>
<scénario>
$(document).prêt(fonction() {
$("#timeButtonsContainer").cacher(); // Masquer les boutons de sélection de l'heure lors du chargement de la page
// Obtenez des dates bloquées
$.obtenirJSON('{% url "blocked_dates" %}', fonction(Dates bloquées) {
// Obtenez des jours ouvrables
$.obtenirJSON('{% url "get_working_days" %}', fonction(jours de travail) {
// Combinez les jours ouvrables avec les dates bloquées
était Dates désactivées = getDisabledDates(Dates bloquées, jours de travail);
// Paramètres Flatpickr
$("#date_identifiant").flatpickr({
format de date: "Y-m-d",
désactiver: Dates désactivées,
Date min : "aujourd'hui",
sur le changement: fonction(dates sélectionnées, dateStr, exemple) {
si (dates sélectionnées.longueur > 0) {
était jour de la semaine = dates sélectionnées[0].obtenirJour();
$.obtenirJSON('{% url "get_working_hours" day_of_week=0 %}'.remplacer('0', jour de la semaine), fonction(Heures de travail) {
était Horaires disponibles = générer des TimeSlots(Heures de travail.commencer, Heures de travail.fin);
// Vérifier les rendez-vous pris à la date sélectionnée
$.obtenirJSON('/get_appointments_for_date/', {date: dateStr}, fonction(prisesTimes) {
Horaires disponibles = Horaires disponibles.filtre(fonction(temps) {
retour !prisesTimes.comprend(temps);
});
populateTimeButtons(Horaires disponibles);
});
});
}
}
});
});
});
});
// Combinez les jours ouvrables avec les dates bloquées
fonction getDisabledDates(Dates bloquées, jours de travail) {
était Dates désactivées = Dates bloquées.tranche(); // Copier les dates bloquées
était date actuelle = nouveau Date();
pour (était je = 0; je < 365; je++) { // Vérifiez toutes les dates dans un an
était jour de la semaine = date actuelle.obtenirJour();
si (!jours de travail.comprend(jour de la semaine)) {
Dates désactivées.pousser(formatDate(date actuelle));
}
date actuelle.régler la date(date actuelle.avoir un rendez-vous() + 1);
}
retour Dates désactivées;
}
// Convertir la date au format "AAAA-MM-JJ"
fonction formatDate(date) {
était jour = date.avoir un rendez-vous();
était mois = date.obtenirMois() + 1;
était année = date.getFullYear();
retour année + '-' + (mois < 10 ? '0' : '') + mois + '-' + (jour < 10 ? '0' : '') + jour;
}
fonction populateTimeButtons(Horaires disponibles) {
était récipient = $("#timeButtonsContainer");
récipient.vide(); // Effacer les boutons précédents
Horaires disponibles.pour chaque(fonction(temps) {
était bouton = $("<bouton>")
.ajouterClasse("btn btn-bouton de temps primaire")
.texte(temps)
.Cliquez sur(fonction() {
$("#id_actuel").Val(temps); // Remplissez le champ de saisie de l'heure masquée
$("#Heure affichée").Val(temps); // Afficher l'heure sélectionnée
récipient.cacher(); // Masquer les boutons de sélection de l'horloge
});
récipient.ajouter(bouton);
});
récipient.montrer(); // Afficher les boutons de l'horloge
// Ajouter une fonction pour masquer par clic externe lorsque les boutons de sélection d'horloge sont affichés
$(document).Cliquez sur(fonction(événement) {
si (!$(événement.cible).le plus proche("#id_date, .time-bouton").longueur) {
récipient.cacher();
}
});
}
fonction générer des TimeSlots(commencer, fin) {
était tranches de temps = [];
était heure actuelle = nouveau Date(`1970-01-01 ${commencer}:00`);
était heure de fin = nouveau Date(`1970-01-01 ${fin}:00`);
// Obtenez la valeur de l'intervalle à partir de l'API
$.ajax({
URL : '/get_appointment_interval/',
asynchrone : FAUX,
Type de données: 'json',
succès: fonction(données) {
était intervalle = données.intervalle * 60000; // convertir des minutes en millisecondes
alors que (heure actuelle < heure de fin) {
était heures = Chaîne(heure actuelle.obtenir des heures()).cheminDébut(2, '0');
était minutes = Chaîne(heure actuelle.getMinutes()).cheminDébut(2, '0');
tranches de temps.pousser(`${heures}:${minutes}`);
heure actuelle = nouveau Date(heure actuelle.obtenir du temps() + intervalle);
}
}
});
retour tranches de temps;
}
// Fonction qui ajoute dynamiquement la valeur d'emplacement à l'attribut d'action du formulaire
fonction updateFormActionWithLocation() {
était valeuremplacement = "{{ request.session.chosen_location }}"; // Nous obtenons la valeur d'emplacement de la session en utilisant le langage de modèle Django
était formulaireActionURL = "{% url 'randevu_olustur' lokasyon='PLACEHOLDER' %}".remplacer('EMPLACEMENT', valeuremplacement);
$("formulaire").attr("action", formulaireActionURL);
}
// Ajoutez la valeur d'emplacement à l'attribut d'action du formulaire avant de soumettre le formulaire.
$("formulaire").soumettre(fonction() {
updateFormActionWithLocation();
});
&C'est ;/scénario>
,fichier rendez-vousolustur.html