adminPlacemap.xhtml 4.11 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:map="http://java.sun.com/jsf/composite/cditools/map" xmlns:tools="http://java.sun.com/jsf/composite/cditools" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:p="http://primefaces.org/ui">


<h:body>

	<ui:composition template="#{sessionHandler.template}">
		<f:metadata>
			<f:param name="mgmtPlaceId" value="#{ajaxMapManageView.placeId}" />
			<f:event type="preRenderView" listener="#{ajaxMapView.initManageViewMap()}" />
		</f:metadata>
		<ui:define name="content">
			<h:form>
				<p:remoteCommand name="placeClicker" update=":fbdiag" actionListener="#{ajaxMapManageView.placeClicked}" />
			</h:form>

			<!-- Modal does not seem to work for some reason. -->
			<p:dialog style="width: 50%; min-width:200px;" rendered="#{ajaxMapView.isMgmtPermission()}" visible="#{!empty ajaxMapManageView.place}" id="fbdiag">

				<h:panelGrid rendered="#{!empty ajaxMapManageView.place}" columnClasses=",rightalign" columns="2">

					<h:outputLabel value="#{i18n['placeSelect.placeName']}:" />
					<h:link outcome="/place/edit" value="#{ajaxMapManageView.place.name}">
						<f:param name="placeid" value="#{ajaxMapManageView.place.id}" />
					</h:link>

					<h:outputLabel value="#{i18n['placeSelect.placeProductName']}:" />
					<h:outputText value="#{ajaxMapManageView.place.product.name}" />

					<h:outputLabel value="#{i18n['placeSelect.placePrice']}:" />
					<h:outputText class="" value="#{ajaxMapManageView.place.product.price}">
						<f:convertNumber maxFractionDigits="2" minFractionDigits="2" />
					</h:outputText>

					<h:outputLabel rendered="#{placeView.canEdit()}" value="#{i18n['placegroup.creator']}" />
					<h:outputText rendered="#{placeView.canEdit()}" value="#{ajaxMapManageView.place.group.creator.wholeName}" />




				</h:panelGrid>
				<p:dataTable style="width: 500px;" rendered="#{placeView.canEdit() and not empty ajaxMapManageView.place}" border="1" id="placelist" value="#{ ajaxMapManageView.place.group.places}" var="place">

					<p:column style="width: 20%;" >
						<f:facet name="header">
							<h:outputText value="${i18n['placegroup.placename']}" />
						</f:facet>
						<h:link outcome="/place/edit" value="#{place.name}">
							<f:param name="placeid" value="#{place.id}" />
						</h:link>
					</p:column>

					<p:column>
						<h:outputText rendered="#{empty place.placeReserver.user}" value="#{i18n['place.noReserver']}" />
						<h:link rendered="#{!empty place.placeReserver.user}" outcome="/useradmin/edit">
							<h:outputText value="#{place.placeReserver.user.wholeName}" />
						(<h:outputText value="#{place.placeReserver.user.nick}" />)
						<f:param name="userid" value="#{place.placeReserver.user.user.id}" />
						</h:link>
					</p:column>


				</p:dataTable>
			</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" />

			<button onclick="px.update()">#{i18n['neomap.updateMap']}</button>
			<br />

			<svg id="seatmap" style="margin: auto; border: 1px solid black;" width="#{ajaxMapView.map.width}px" height="#{ajaxMapView.map.height}px" />
			<script type="text/javascript">
			
			// If queue is enabled, do not allow clicking of places.
			px = placemap({
					element : document.getElementById("seatmap"),
					moyaurl : "#{request.contextPath}",
					map_id : #{ajaxMapView.map.id},
					toggleaction : function(d) {
						placeClicker([{name: 'mgmtPlaceId', value: d.id}]);
						return false;
					},
				});
//				document.getElementById("editbutton").addEventListener("click",
//						function() {
	//						px.enable_edit();
	//					});
				//px.enable_edit();
			//	setInterval(function () { updateMap() }, 5000);

			</script>

			<map:legend />


		</ui:define>
	</ui:composition>
</h:body>
</html>