forked from ScoDoc/ScoDoc
Assiduité : date_utils suppression scodoc-datetime + ajout time conflit
This commit is contained in:
Iziram
parent
e2b9cd3ded
commit
39dca32d2e
@ -407,196 +407,17 @@ class Duration {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class ScoDocDateTimePicker extends HTMLElement {
|
/**
|
||||||
constructor() {
|
* Fonction qui vérifie si une période est dans un interval
|
||||||
super();
|
* Objet période / interval
|
||||||
// Définir si le champ est requis
|
* {
|
||||||
this.required = this.hasAttribute("required");
|
* deb: Date,
|
||||||
|
* fin: Date,
|
||||||
// Initialiser le shadow DOM
|
* }
|
||||||
const shadow = this.attachShadow({ mode: "open" });
|
* @param {object} period
|
||||||
|
* @param {object} interval
|
||||||
// Créer l'input pour la date
|
* @returns {boolean} Vrai si la période est dans l'interval
|
||||||
const dateInput = document.createElement("input");
|
*/
|
||||||
dateInput.type = "date";
|
function hasTimeConflict(period, interval) {
|
||||||
dateInput.id = "date";
|
return period.deb.isBefore(interval.fin) && period.fin.isAfter(interval.deb);
|
||||||
|
|
||||||
// Créer l'input pour l'heure
|
|
||||||
const timeInput = document.createElement("input");
|
|
||||||
timeInput.type = "time";
|
|
||||||
timeInput.id = "time";
|
|
||||||
timeInput.step = 60;
|
|
||||||
|
|
||||||
// Ajouter les inputs dans le shadow DOM
|
|
||||||
shadow.appendChild(dateInput);
|
|
||||||
shadow.appendChild(timeInput);
|
|
||||||
|
|
||||||
// Gestionnaires d'événements pour la mise à jour de la valeur
|
|
||||||
dateInput.addEventListener("change", () => this.updateValue());
|
|
||||||
timeInput.addEventListener("change", () => this.updateValue());
|
|
||||||
|
|
||||||
// Style CSS pour les inputs
|
|
||||||
const style = document.createElement("style");
|
|
||||||
style.textContent = `
|
|
||||||
input {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
input:invalid {
|
|
||||||
border: 1px solid red;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Ajouter le style au shadow DOM
|
|
||||||
shadow.appendChild(style);
|
|
||||||
|
|
||||||
//Si une value est donnée
|
|
||||||
|
|
||||||
let value = this.getAttribute("value");
|
|
||||||
if (value != null) {
|
|
||||||
this.value = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static get observedAttributes() {
|
|
||||||
return ["show"]; // Ajoute 'show' à la liste des attributs observés
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback() {
|
|
||||||
// Récupérer l'attribut 'name'
|
|
||||||
this.name = this.getAttribute("name");
|
|
||||||
|
|
||||||
// Créer un input caché pour la valeur datetime
|
|
||||||
this.hiddenInput = document.createElement("input");
|
|
||||||
this.hiddenInput.type = "hidden";
|
|
||||||
this.hiddenInput.name = this.name;
|
|
||||||
this.appendChild(this.hiddenInput);
|
|
||||||
|
|
||||||
// Gérer la soumission du formulaire
|
|
||||||
this.closest("form")?.addEventListener("submit", (e) => {
|
|
||||||
if (!this.validate()) {
|
|
||||||
e.preventDefault(); // Empêcher la soumission si non valide
|
|
||||||
this.dispatchEvent(
|
|
||||||
new Event("invalid", { bubbles: true, cancelable: true })
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
// Mettre à jour la valeur de l'input caché avant la soumission
|
|
||||||
this.hiddenInput.value = this.isValid()
|
|
||||||
? this.valueAsDate.toFakeIso()
|
|
||||||
: "";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.updateDisplay();
|
|
||||||
}
|
|
||||||
|
|
||||||
attributeChangedCallback(name, oldValue, newValue) {
|
|
||||||
if (name === "show") {
|
|
||||||
this.updateDisplay(); // Met à jour l'affichage si l'attribut 'show' change
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
updateDisplay() {
|
|
||||||
const mode = this.getAttribute("show") || "both";
|
|
||||||
const dateInput = this.shadowRoot.querySelector("#date");
|
|
||||||
const timeInput = this.shadowRoot.querySelector("#time");
|
|
||||||
|
|
||||||
switch (mode) {
|
|
||||||
case "date":
|
|
||||||
dateInput.style.display = "inline-block";
|
|
||||||
timeInput.style.display = "none";
|
|
||||||
break;
|
|
||||||
case "time":
|
|
||||||
dateInput.style.display = "none";
|
|
||||||
timeInput.style.display = "inline-block";
|
|
||||||
break;
|
|
||||||
case "both":
|
|
||||||
default:
|
|
||||||
dateInput.style.display = "inline-block";
|
|
||||||
timeInput.style.display = "inline-block";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vérifier si la valeur forme une date valide
|
|
||||||
isValid() {
|
|
||||||
return !Number.isNaN(this.valueAsDate.getTime());
|
|
||||||
}
|
|
||||||
|
|
||||||
// Valider l'élément
|
|
||||||
validate() {
|
|
||||||
if (this.required && !this.isValid()) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Mettre à jour la valeur interne
|
|
||||||
updateValue() {
|
|
||||||
const dateInput = this.shadowRoot.querySelector("#date");
|
|
||||||
const timeInput = this.shadowRoot.querySelector("#time");
|
|
||||||
this._value = `${dateInput.value}T${timeInput.value}`;
|
|
||||||
this.dispatchEvent(new Event("change", { bubbles: true }));
|
|
||||||
|
|
||||||
// Appliquer le style 'invalid' si nécessaire
|
|
||||||
dateInput.classList.toggle("invalid", this.required && !this.isValid());
|
|
||||||
timeInput.classList.toggle("invalid", this.required && !this.isValid());
|
|
||||||
}
|
|
||||||
|
|
||||||
// Getter pour obtenir la valeur actuelle.
|
|
||||||
get value() {
|
|
||||||
return this._value;
|
|
||||||
}
|
|
||||||
|
|
||||||
get valueAsObject() {
|
|
||||||
const dateInput = this.shadowRoot.querySelector("#date");
|
|
||||||
const timeInput = this.shadowRoot.querySelector("#time");
|
|
||||||
return {
|
|
||||||
date: dateInput.value,
|
|
||||||
time: timeInput.value,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Getter pour obtenir la valeur en tant qu'objet Date.
|
|
||||||
get valueAsDate() {
|
|
||||||
return new Date(this._value);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Setter pour définir la valeur. Sépare la valeur en date et heure et les définit individuellement.
|
|
||||||
set value(val) {
|
|
||||||
let [date, time] = val.split("T");
|
|
||||||
this.shadowRoot.querySelector("#date").value = date;
|
|
||||||
|
|
||||||
time = time.substring(0, 5);
|
|
||||||
|
|
||||||
this.shadowRoot.querySelector("#time").value = time;
|
|
||||||
this._value = val;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Setter pour définir la valeur à partir d'un objet avec les propriétés 'date' et 'time'.
|
|
||||||
set valueAsObject(obj) {
|
|
||||||
const dateInput = this.shadowRoot.querySelector("#date");
|
|
||||||
const timeInput = this.shadowRoot.querySelector("#time");
|
|
||||||
|
|
||||||
if (obj.hasOwnProperty("date")) {
|
|
||||||
dateInput.value = obj.date || ""; // Définit la valeur de l'input de date si elle est fournie
|
|
||||||
}
|
|
||||||
|
|
||||||
if (obj.hasOwnProperty("time")) {
|
|
||||||
timeInput.value = obj.time.substring(0, 5) || ""; // Définit la valeur de l'input d'heure si elle est fournie
|
|
||||||
}
|
|
||||||
|
|
||||||
// Met à jour la valeur interne en fonction des nouvelles valeurs des inputs
|
|
||||||
this.updateValue();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Setter pour définir la valeur à partir d'un objet Date.
|
|
||||||
set valueAsDate(dateVal) {
|
|
||||||
// Formatage de l'objet Date en string et mise à jour de la valeur.
|
|
||||||
this.value = `${dateVal.getFullYear()}-${String(
|
|
||||||
dateVal.getMonth() + 1
|
|
||||||
).padStart(2, "0")}-${String(dateVal.getDate()).padStart(2, "0")}T${String(
|
|
||||||
dateVal.getHours()
|
|
||||||
).padStart(2, "0")}:${String(dateVal.getMinutes()).padStart(2, "0")}`;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Définition du nouvel élément personnalisé 'scodoc-datetime'.
|
|
||||||
customElements.define("scodoc-datetime", ScoDocDateTimePicker);
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user