Un esempio pratico: integrare più calendari in un servizio di prenotazione sale

In questo capitolo viene presentato il caso di un servizio di prenotazione sale in cui il cittadino seleziona una delle sale messe a disposizione dal Comune

OpenCity Italia mette a disposizione un servizio di Prenotazione sale all'interno del catalogo per i Comuni

Inserisci e configura un componente Select

All'interno del modulo, inserisci un componente Select.

Una volta inserito, accedi alla sezione "Data" (1) del componente e seleziona la voce "Custom" come "Data source type" (2).

Successivamente, seleziona la voce "Autotype" come "Storage type" (1) e indica l'id come "ID Path" (3)

Configura i luoghi selezionabili

All'interno dei "Custom values" della sezione "Data", inserisci il codice JSON contenente l'identificativo dei calendari da associare al servizio ("id") e il nome delle sale selezionabili nella select ("title")

Devi obbligatoriamente inserire gli id di calendari già presenti in Stanza del Cittadino.

Se non li hai ancora, provvedi a crearli nella sezione dedicata.

Nell'esempio indicato nell'immagine, vengono configurati due lughi chiamati "Castello di Bugliano" e "Lago di Bugliano" per un servizio di prenotazione sale per matrimoni.

Oltre all'identificato del calendario e al titolo del luogo, in questo caso vengono indicati anche il link alla pagina del sito web ("place_link") e l'importo da pagare per la prenotazione ("cost")

  {
    "id": "b95b5409-2b3d-44d1-b534-12bb99206b1b",
    "title": "Castello di Bugliano",
    "place_link": "https://www.comune.bugliano.pi.it/Vivere-il-comune/Luoghi/Castello-di-Bugliano",
    "cost": 150.00,
  },
  {
    "id": "d35879fc-2047-47ed-8dd1-e317dc6c5cd0",
    "title": "Lago di Bugliano",
    "place_link": "https://www.comune.bugliano.pi.it/Vivere-il-comune/Luoghi/Lago-di-Bugliano",
    "cost": 55.00,
  },
  {
    "id": "f1146129-21b8-4b95-bd55-335f51fc98b8",
    "title": "Palazzo Colline della Corte",
    "place_link": "https://www.comune.bugliano.pi.it/Vivere-il-comune/Luoghi/Palazzo-Colline-della-Corte",
    "cost": 150.00,
  },
  {
    "id": "937634a3-b3cc-40d1-ad52-acf8eab7d5f5",
    "title": "Sala dei Quadri",
    "place_link": "https://www.comune.bugliano.pi.it/Vivere-il-comune/Luoghi/Sala-dei-Quadri",
    "cost": 110.00,
  },
  {
    "id": "44dd69ef-4716-408b-bb15-65283e52f669",
    "title": "Villa Girasoli",
    "place_link": "https://www.comune.bugliano.pi.it/Vivere-il-comune/Luoghi/Villa-Girasoli",
    "cost": 150.00,
  }

Inserisci e configura il componente Calendar

Trascina nel modulo un componente di tipo "Calendar".

Una volta inserito, accedi alla sezione "Data" del componente (1) e seleziona la label del componente Select che hai inserito in precedenza alla voce "Redraw On" (2).

Configura la visualizzazione degli slot

Successivamente, alla voce "JavaScript" della sezione "Data" inserisci il codice di verifica dei calendari associati.

Il codice JavaScript controlla se:

• esiste un calendario selezionato (select_calendar.id),
• non è vuoto,
• il calendarId del componente non è ancora impostato o è diverso.

Nel caso in cui il calendarId fosse diverso, aggiorna component.calendarId con il nuovo id e ridisegna il componente (instance.redraw()).

if ( 
  data.select_calendar?.id && data.select_calendar?.id !== "" && 
  (!component.calendarId || (component.calendarId && component.calendarId[0] !== data.select_calendar.id))
) {
  component.calendarId = [data.select_calendar.id]
  instance.redraw()
}
console.log(value)

Bonus track: impostare un pagamento

Se il servizio prevede il pagamento di un importo in base alla sala o il luogo selezionato nella Select, inserisci un componente Hidden all'interno del modulo, intitolato "payment_amount"

Una volta inserito, accedi alla sezione "Data" (1) del componente e inserisci nel "Calculated value" il codice JavaScript per recuperare gli importi configurati nella Select (2).

value = data.select_calendar.cost