diff --git a/src/components/HomePage/HomePage.html b/src/components/HomePage/HomePage.html index 06e7993..b806753 100644 --- a/src/components/HomePage/HomePage.html +++ b/src/components/HomePage/HomePage.html @@ -68,6 +68,35 @@ Ok + +
CAMBI
+ + + + + + + + + + + + + + + + + + + + +
INOUT
{{ sp.nomi.home }}
{{ sp.nomi.guest }}
+ + + CONFERMA + + +
@@ -193,6 +222,9 @@ PUNTEGGIO FORMAZIONI + + CAMBI + STRISCIA diff --git a/src/components/HomePage/HomePage.js b/src/components/HomePage/HomePage.js index e426b20..96d88ba 100644 --- a/src/components/HomePage/HomePage.js +++ b/src/components/HomePage/HomePage.js @@ -11,6 +11,11 @@ export default { home: "", guest: "", }, + diaCambi: { + show: false, + guest: { in: "", out: "" }, + home: { in: "", out: "" }, + }, visuForm: false, visuButt: true, visuStriscia: true, @@ -42,6 +47,22 @@ export default { computed: { isPunteggioZeroZero() { return this.sp.punt.home === 0 && this.sp.punt.guest === 0; + }, + cambiConfermabili() { + const guestIn = (this.diaCambi.guest.in || "").trim(); + const guestOut = (this.diaCambi.guest.out || "").trim(); + const homeIn = (this.diaCambi.home.in || "").trim(); + const homeOut = (this.diaCambi.home.out || "").trim(); + + const guestEmpty = !guestIn && !guestOut; + const homeEmpty = !homeIn && !homeOut; + const guestComplete = !!guestIn && !!guestOut; + const homeComplete = !!homeIn && !!homeOut; + + const noIncomplete = (guestEmpty || guestComplete) && (homeEmpty || homeComplete); + const atLeastOne = guestComplete || homeComplete; + + return noIncomplete && atLeastOne; } }, methods: { @@ -214,6 +235,65 @@ export default { this.disabilitaTastiSpeciali(); this.diaNomi.show = true; }, + resettaCambi() { + this.diaCambi.guest.in = ""; + this.diaCambi.guest.out = ""; + this.diaCambi.home.in = ""; + this.diaCambi.home.out = ""; + }, + apriDialogCambi() { + this.disabilitaTastiSpeciali(); + this.resettaCambi(); + this.diaCambi.show = true; + }, + chiudiDialogCambi() { + this.diaCambi.show = false; + this.resettaCambi(); + this.abilitaTastiSpeciali(); + }, + confermaCambi() { + if (!this.cambiConfermabili) { + return; + } + + const cambi = [ + { team: "guest", in: (this.diaCambi.guest.in || "").trim(), out: (this.diaCambi.guest.out || "").trim() }, + { team: "home", in: (this.diaCambi.home.in || "").trim(), out: (this.diaCambi.home.out || "").trim() }, + ]; + + const cambiDaApplicare = []; + for (const cambio of cambi) { + if (!cambio.in && !cambio.out) { + continue; + } + + const form = this.sp.form[cambio.team].map((val) => String(val).trim()); + + if (form.includes(cambio.in)) { + this.$waveui.notify(`Numero ${cambio.in} giĆ  presente in formazione ${cambio.team}`, "warning"); + return; + } + if (!form.includes(cambio.out)) { + this.$waveui.notify(`Numero ${cambio.out} non presente in formazione ${cambio.team}`, "warning"); + return; + } + if (cambio.in === cambio.out) { + this.$waveui.notify(`Numero IN e OUT uguali per ${cambio.team}`, "warning"); + return; + } + + cambiDaApplicare.push({ ...cambio }); + } + + for (const cambio of cambiDaApplicare) { + const idx = this.sp.form[cambio.team].findIndex((val) => String(val).trim() === cambio.out); + if (idx !== -1) { + this.sp.form[cambio.team].splice(idx, 1, cambio.in); + } + } + + this.chiudiDialogCambi(); + }, disabilitaTastiSpeciali() { window.removeEventListener("keydown", this.funzioneTastiSpeciali); }, @@ -221,6 +301,10 @@ export default { window.addEventListener("keydown", this.funzioneTastiSpeciali); }, funzioneTastiSpeciali(e) { + const target = e.target; + if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)) { + return; + } e.preventDefault(); if (e.ctrlKey && e.key == "m") { this.diaNomi.show = true diff --git a/src/style.css b/src/style.css index b061700..2949bbd 100644 --- a/src/style.css +++ b/src/style.css @@ -190,3 +190,28 @@ button:focus-visible { height: 0; margin: 0; } + +.cambi-table { + width: 100%; + border-collapse: collapse; +} + +.cambi-table th, +.cambi-table td { + padding: 8px; + text-align: center; +} + +.cambi-table th { + font-weight: bold; +} + +.cambi-table .row-label { + text-align: left; + font-weight: bold; + width: 90px; +} + +.cambi-input { + min-width: 110px; +}