feat(cambi): dialog cambi con tabella IN/OUT, validazioni e aggiornamento formazione

- dialog “CAMBI” con tabella 2x2 e intestazioni IN/OUT
- etichette riga con nomi squadre
- conferma solo con righe complete (almeno un cambio)
- sostituzione OUT→IN in formazione con controlli errori

src/components/HomePage/HomePage.html

@@ -68,6 +68,35 @@
         Ok
       </w-button>
     </w-dialog>
+    <w-dialog v-model="diaCambi.show" :width="520" @close="chiudiDialogCambi">
+      <div class="text-bold text-center mb2">CAMBI</div>
+      <table class="cambi-table">
+        <thead>
+          <tr>
+            <th></th>
+            <th>IN</th>
+            <th>OUT</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="row-label">{{ sp.nomi.home }}</td>
+            <td><w-input v-model="diaCambi.home.in" type="text" class="cambi-input"></w-input></td>
+            <td><w-input v-model="diaCambi.home.out" type="text" class="cambi-input"></w-input></td>
+          </tr>
+          <tr>
+            <td class="row-label">{{ sp.nomi.guest }}</td>
+            <td><w-input v-model="diaCambi.guest.in" type="text" class="cambi-input"></w-input></td>
+            <td><w-input v-model="diaCambi.guest.out" type="text" class="cambi-input"></w-input></td>
+          </tr>
+        </tbody>
+      </table>
+      <w-flex justify-end class="pa3">
+        <w-button bg-color="success" :disabled="!cambiConfermabili" @click="confermaCambi">
+          CONFERMA
+        </w-button>
+      </w-flex>
+    </w-dialog>
     <div class="campo">
 
       <span v-if="order">
@@ -193,6 +222,9 @@
             <span v-if="visuForm">PUNTEGGIO</span>
             <span v-if="!visuForm">FORMAZIONI</span>
           </w-button>
+          <w-button @click="apriDialogCambi">
+            CAMBI
+          </w-button>
           <w-button @click="visuStriscia = !visuStriscia">
             STRISCIA
           </w-button>

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

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;
+}