placeReservation.xhtml 4.67 KB
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:p="http://primefaces.org/ui"  xmlns:reader="http://java.sun.com/jsf/composite/cditools/reader"
	xmlns:tools="http://java.sun.com/jsf/composite/cditools" xmlns:user="http://java.sun.com/jsf/composite/cditools/user"
	xmlns:infoview="http://java.sun.com/jsf/composite/cditools/infoview"
	xmlns:shop="http://java.sun.com/jsf/composite/cditools/shop"
	>
<h:body>
	<ui:composition template="/resources/templates/#{sessionHandler.infoscreen}/template.xhtml">
		<ui:param name="ignorenavigationleft" value="true" />

		<f:metadata>
			<f:viewParam name="userid" value="#{incomingPlaceshopView.userId}" />
			<f:event type="preRenderView" listener="#{incomingPlaceshopView.initView}" />
		</f:metadata>
		<ui:define name="content">

			<reader:backendReader selectvalue="#{i18n['barcodeReader.readBarcode']}" selectaction="#{flowShopView.polledRead}" />

			<infoview:usermultisearch />

			<br />
			<br />
			<h:form rendered="#{!userView.selectedUser.anonymous}">
					<h1>Reserve to user: #{userView.selectedUser.user.nick}</h1>
			</h:form>
			<h:form rendered="#{userView.selectedUser.anonymous}">
					<h1>Infon paikanvaraus</h1>
			</h:form>
			<br />
			<br />

			<!--
			<p:dialog rendered="#{ajaxMapView.isMgmtPermission()}" visible="#{!empty ajaxMapView.place}" id="fbdiag">
				Clicked place name : #{ajaxMapView.place.name};
				<h:link rendered="#{!empty ajaxMapView.place}" outcome="/place/edit">
					<f:param name="placeid" value="#{ajaxMapView.place.id}"/>
					Muokkaa
				</h:link>
			</p:dialog> -->

			<h:outputScript target="head" library="seatjs" name="d3.min.js"/>
			<h:outputScript target="head" library="seatjs" name="d3-tip.js"/>
			<h:outputScript target="head" library="seatjs" name="seatmap.js"/>
			<h:outputStylesheet library="seatjs" name="placemap.css"/>



			<p>#{i18n['placeReservation.mapMultiuserNote']}</p>
			<svg id="seatmap" style="margin: auto; border: 1px solid black;" width="#{ajaxMapView.map.width}px" height="#{ajaxMapView.map.height}px"/>

			<h:form id="placeselectform">
				<p:commandButton update="successText" onclick="$(window).unbind('beforeunload');"  oncomplete="updateLastPlace();" value="#{i18n['shop.buyForUser']}" actionListener="#{incomingPlaceshopView.reserveSelectedPlaces}" >
					<p:confirm header="#{i18n['placeReservation.buyConfirm.title']}" message="#{i18n['placeReservation.buyConfirm.content']}" icon="ui-icon-alert" />
				</p:commandButton>

				<p:outputPanel id="successText">
					<h:outputText styleClass="success" value="#{i18n['shop.buyForUser.success']}"  rendered="#{incomingPlaceshopView.userMustGoAway}"/>
				</p:outputPanel>
			</h:form>
			<br /><br />

			<h:form id="selectedPlaces">
				<h2>#{i18n['placeReservation.selectedPlaces']}</h2>
				<p:dataTable id="selectedPlacesTable" tableStyle="width: auto;" var="place" value="#{incomingPlaceshopView.selectedPlaces}">
					<p:column headerText=" ">
						<h:outputText value="#{place.product.name}"/>
					</p:column>
					<p:column headerText=" ">
						<h:outputText value="#{place.name}"/>
					</p:column>
				</p:dataTable>
			</h:form>





			<script type="text/javascript">

				function updateMap() {
					px.update();
				}

				function updateQueue(data) {
					if (data === undefined) {
						alert('not in queue');
						return;
					}

					if (data.value == 0) {
						updateWholePage();
					} else {
						$("#queuepos").text(data.value);
						var d = new Date();
						$("#queueupdated").text(d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds())
					}
				}

				setInterval(function () {
					updateMap()
				}, 5000);

			</script>


			<script type="text/javascript">


				var lastplace = false;
				px = placemap({
					element: document.getElementById("seatmap"),
					moyaurl: "#{request.contextPath}",
					map_id: #{ajaxMapView.map.id},
					toggleaction: function (d) {
						selectPlace([{name: "placeid", value: d.id}]);
						lastplace = d;
						return false;
					}
				});
				//				document.getElementById("editbutton").addEventListener("click",
				//						function() {
				//						px.enable_edit();
				//					});
				// px.enable_edit();

				function updateLastPlace() {
					px.update();
				}

			</script>



			<h:form>

				<p:remoteCommand oncomplete="updateLastPlace();" update="selectedPlaces" name="selectPlace" actionListener="#{incomingPlaceshopView.reserveRemoteCommand}" />

			</h:form>

			
		</ui:define>
	</ui:composition>

</h:body>
</html>