onPlacesWithTicketTypesPrompt

Click on a group of Seats or the Area to have a browser prompt handle the number of places to be selected per ticket type.

by seatsio

HTML

<script src="https://cdn.seatsio.net/chart.js"></script>
<div id="instructions">
	<div>
		You must select 3 places.
	</div>
</div>
<div id="chart"></div>

CSS

body {
	margin: 0;
	padding: 0;
}

#instructions {
	height: 30px;
	display: flex;
	flex-direction: column;
	background: #eee;
	text-align: center;
	justify-content: center;
}

#chart {
	width: 100vw;
	height: calc(100vh - 30px);
}

JavaScript

var chart = new seatsio.SeatingChart({
	divId: "chart",
	workspaceKey: "publicDemoKey",
	event: "smallTheatreEvent",
	pricing: [
		{ category: 1, price: 30 },
		{ category: 2, ticketTypes: [
			{ ticketType: 'Adult', price: 8 },
			{ ticketType: 'Child', price: 12 }
		]},
		{ category: 3, price: 50 }
	],
	numberOfPlacesToSelect: 3,
	onPlacesWithTicketTypesPrompt: showPlacesWithTicketTypesDialog
}).render();

	
function showPlacesWithTicketTypesDialog (params, confirmSelection) {
	console.log('showPlacesWithTicketTypesDialog', params)
	
	if (params.objectsToSelect[0].objectType === 'Seat') {
		// Generating a list.
		const ticketTypesList = params.objectsToSelect.map(object =>
		   askForTicketTypeWithLabel(params.ticketTypes, object.label)
		)
		console.log('Selecting objects using the following ticket type list:', ticketTypesList)
		confirmSelection(ticketTypesList)
	} else {
		// Generating a dictionary.
		const placesByTicketType = {}
		Object.keys(params.ticketTypes).forEach(key => {
			const ticketTypeName = params.ticketTypes[key].ticketType
			const currentPlaces = params.selectedPlacesByTicketType[ticketTypeName] || 0
			placesByTicketType[ticketTypeName] = parseInt(prompt(`Set the number of places for ticket type "${ticketTypeName}":`, currentPlaces))
		})
		console.log('Selecting objects using the following number of places by ticket type:', placesByTicketType)
		confirmSelection(placesByTicketType)
	}
}


function askForTicketTypeWithLabel (ticketTypes, objectLabel) {
	const ticketTypeOptions = ticketTypes.map(ticketType => ticketType.ticketType)
	// Using prompt would be bad practice. This is done to keep this example short.
	return prompt(`Choose a ticket type for [${objectLabel}] among options: "${ticketTypeOptions.join('", "')}"`, ticketTypeOptions[0])
}