Assiduites : fix journee entiere + utilisation scodoc-datetime

This commit is contained in:
Iziram 2023-11-14 16:38:07 +01:00
parent 7b5e186c61
commit 338d2f7ec8
3 changed files with 100 additions and 44 deletions

View File

@ -231,7 +231,7 @@ def is_iso_formated(date: str, convert=False) -> bool or datetime.datetime or No
try: try:
date: datetime.datetime = datetime.datetime.fromisoformat(date) date: datetime.datetime = datetime.datetime.fromisoformat(date)
return date if convert else True return date if convert else True
except (dtparser.ParserError, ValueError, TypeError): except (ValueError, TypeError):
return None if convert else False return None if convert else False

View File

@ -1,3 +1,8 @@
Object.defineProperty(Date.prototype, "isValid", {
value: function () {
return !Number.isNaN(this.getTime());
},
});
Object.defineProperty(Date.prototype, "startOf", { Object.defineProperty(Date.prototype, "startOf", {
/** /**
* Génère u la date à la plus petite valeur pour la précision donnée. * Génère u la date à la plus petite valeur pour la précision donnée.
@ -338,6 +343,7 @@ class ScoDocDateTimePicker extends HTMLElement {
const timeInput = document.createElement("input"); const timeInput = document.createElement("input");
timeInput.type = "time"; timeInput.type = "time";
timeInput.id = "time"; timeInput.id = "time";
timeInput.step = 60;
// Ajouter les inputs dans le shadow DOM // Ajouter les inputs dans le shadow DOM
shadow.appendChild(dateInput); shadow.appendChild(dateInput);
@ -362,6 +368,10 @@ class ScoDocDateTimePicker extends HTMLElement {
shadow.appendChild(style); shadow.appendChild(style);
} }
static get observedAttributes() {
return ["show"]; // Ajoute 'show' à la liste des attributs observés
}
connectedCallback() { connectedCallback() {
// Récupérer l'attribut 'name' // Récupérer l'attribut 'name'
this.name = this.getAttribute("name"); this.name = this.getAttribute("name");
@ -386,6 +396,34 @@ class ScoDocDateTimePicker extends HTMLElement {
: ""; : "";
} }
}); });
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 // Vérifier si la valeur forme une date valide
@ -418,17 +456,13 @@ class ScoDocDateTimePicker extends HTMLElement {
return this._value; return this._value;
} }
// Setter pour définir la valeur. Sépare la valeur en date et heure et les définit individuellement. get valueAsObject() {
set value(val) { const dateInput = this.shadowRoot.querySelector("#date");
let [date, time] = val.split("T"); const timeInput = this.shadowRoot.querySelector("#time");
this.shadowRoot.querySelector("#date").value = date; return {
date: dateInput.value,
if ((time.match(/0/g) || []).length > 1) { time: timeInput.value,
time = time.slice(0, time.indexOf(":") + 3); };
}
this.shadowRoot.querySelector("#time").value = time;
this._value = val;
} }
// Getter pour obtenir la valeur en tant qu'objet Date. // Getter pour obtenir la valeur en tant qu'objet Date.
@ -436,6 +470,34 @@ class ScoDocDateTimePicker extends HTMLElement {
return new Date(this._value); 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. // Setter pour définir la valeur à partir d'un objet Date.
set valueAsDate(dateVal) { set valueAsDate(dateVal) {
// Formatage de l'objet Date en string et mise à jour de la valeur. // Formatage de l'objet Date en string et mise à jour de la valeur.

View File

@ -11,15 +11,11 @@
<section class="justi-form page"> <section class="justi-form page">
<fieldset> <fieldset>
<div class="justi-row">
<button onclick="validerFormulaire(this)">Créer le justificatif</button>
<button onclick="effacerFormulaire()">Remettre à zero</button>
</div>
<div class="justi-row"> <div class="justi-row">
<div class="justi-label"> <div class="justi-label">
<legend for="justi_date_debut" required>Date de début</legend> <legend for="justi_date_debut" required>Date de début</legend>
<scodoc-datetime name="justi_date_debut" id="justi_date_debut"> </scodoc-datetime> <scodoc-datetime name="justi_date_debut" id="justi_date_debut"> </scodoc-datetime>
<span>Journée(s) entière(s)</span> <input type="checkbox" name="justi_journee" id="justi_journee"> <span>Journée entière</span> <input type="checkbox" name="justi_journee" id="justi_journee">
</div> </div>
<div class="justi-label" id="date_fin"> <div class="justi-label" id="date_fin">
<legend for="justi_date_fin" required>Date de fin</legend> <legend for="justi_date_fin" required>Date de fin</legend>
@ -55,6 +51,10 @@
</div> </div>
</div> </div>
<div class="justi-row">
<button onclick="validerFormulaire(this)">Créer le justificatif</button>
<button onclick="effacerFormulaire()">Remettre à zero</button>
</div>
</fieldset> </fieldset>
@ -112,15 +112,14 @@
function validateFields() { function validateFields() {
const field = document.querySelector('.justi-form') const field = document.querySelector('.justi-form')
const { deb, fin } = getDates() const { deb, fin } = getDates()
const date_debut = new Date(deb);
const date_fin = new Date(fin);
if (deb == "" || fin == "") { if (deb == "" || fin == "" || !date_debut.isValid() || !date_fin.isValid()) {
openAlertModal("Erreur détéctée", document.createTextNode("Il faut indiquer une date de début et une date de fin valide."), "", color = "crimson"); openAlertModal("Erreur détéctée", document.createTextNode("Il faut indiquer une date de début et une date de fin valide."), "", color = "crimson");
return false; return false;
} }
const date_debut = new Date(deb);
const date_fin = new Date(fin);
if (date_fin.isBefore(date_debut)) { if (date_fin.isBefore(date_debut)) {
openAlertModal("Erreur détéctée", document.createTextNode("La date de fin doit se trouver après la date de début."), "", color = "crimson"); openAlertModal("Erreur détéctée", document.createTextNode("La date de fin doit se trouver après la date de début."), "", color = "crimson");
return false; return false;
@ -219,39 +218,31 @@
} }
function dayOnly() { function dayOnly() {
const { deb, fin } = getDates(); const date_deb = document.getElementById("justi_date_debut");
const date_fin = document.getElementById("justi_date_fin");
if (document.getElementById('justi_journee').checked) { if (document.getElementById('justi_journee').checked) {
document.getElementById("justi_date_debut").type = "date" date_deb.setAttribute("show", "date")
document.getElementById("justi_date_debut").value = deb.slice(0, deb.indexOf('T')) date_fin.setAttribute("show", "date")
document.getElementById("date_fin").classList.add("hidden");
document.getElementById("justi_date_fin").type = "date"
document.getElementById("justi_date_fin").value = fin.slice(0, fin.indexOf('T'))
} else { } else {
document.getElementById("justi_date_debut").type = "datetime-local" date_deb.removeAttribute("show")
document.getElementById("justi_date_debut").value = `${deb}T${assi_morning}` date_fin.removeAttribute("show")
document.getElementById("date_fin").classList.remove("hidden");
document.getElementById("justi_date_fin").type = "datetime-local"
document.getElementById("justi_date_fin").value = `${fin}T${assi_evening}`
} }
} }
function getDates() { function getDates() {
if (document.querySelector('.page #justi_journee').checked) { const date_deb = document.querySelector(".page #justi_date_debut")
const date_str_deb = document.querySelector(".page #justi_date_debut").value const date_fin = document.querySelector(".page #justi_date_fin")
const date_str_fin = document.querySelector(".page #justi_date_fin").value const journee = document.querySelector('.page #justi_journee').checked
const deb = date_deb.valueAsObject.date + "T" + (journee ? assi_morning : date_deb.valueAsObject.time)
const fin = (journee ? date_deb.valueAsObject.date : date_fin.valueAsObject.date) + "T" + (journee ? assi_evening : date_fin.valueAsObject.time)
return {
"deb": date_str_deb ? `${date_str_deb}T${assi_morning}` : "",
"fin": date_str_fin ? `${date_str_fin}T${assi_evening}` : "",
}
}
return { return {
"deb": document.querySelector(".page #justi_date_debut").value, "deb": deb,
"fin": document.querySelector(".page #justi_date_fin").value, "fin": fin,
} }
} }
@ -265,6 +256,9 @@
loadAll(); loadAll();
document.getElementById('justi_journee').addEventListener('click', () => { dayOnly() }); document.getElementById('justi_journee').addEventListener('click', () => { dayOnly() });
dayOnly() dayOnly()
document.getElementById("justi_date_debut").valueAsObject = { time: assi_morning }
document.getElementById("justi_date_fin").valueAsObject = { time: assi_evening }
} }
</script> </script>
{% endblock pageContent %} {% endblock pageContent %}