moveplaces.xhtml 5.85 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:viewParam name="userId" value="#{mapPlacechangeView.userId}"/>
            <f:event type="preRenderView" listener="#{mapPlacechangeView.initView()}"/>
        </f:metadata>
        <ui:define name="content">

            <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"/>

            <!-- Place slot count -->
            <h3>
                <h:outputText value="#{i18n['placemove.header']}"/>
            </h3>
            <p:fragment id="placeselector">
                <h:form>

                    <p:dataTable id="slottable" tableStyle="width: auto;" var="slot"
                                 value="#{mapPlacechangeView.slots}">
                        <!-- rowStyleClass="#{mapPlacechangeView.srcPlace.contains(slot.place)  ? 'selected' : 'unselected'}" -->

                        <p:column headerText="#{i18n['placemove.productname']}">
                            <h:outputText value="#{slot.src.product.name}"/>
                        </p:column>

                        <p:column headerText="#{i18n['placemove.placename']}">
                            <h:outputText renderer="#{!empty slot.src.place}"
                                          value="#{slot.src.place.name}"/>

                        </p:column>
                        <p:column headerText="#{i18n['placemove.placeuser']}">
                            <h:outputText rendered="#{!empty slot.src.place.currentUser}"
                                          value="#{slot.src.place.currentUser.wholeNmae}"/>
                            <h:outputText rendered="#{empty slot.src.place.currentUser}"
                                          value="-"/>
                        </p:column>

                        <p:column headerText="#{i18n['placemove.dstplace']}">
                            <div style="padding: 0.3em 0;">
                                <h:outputText renderer="#{!empty slot.dst}"
                                              value="#{slot.dst.name}"/>
                            </div>
                        </p:column>

                        <p:column>
                            <ui:fragment rendered="#{empty slot.dst}">
                                <p:commandButton
                                        actionListener="#{mapPlacechangeView.selectSlot}"
                                        rendered="#{!slot.isMoving()}"
                                        value="#{i18n['placemove.selectSlotForMove']}"
                                        update="placeselector"/>
                                <p:commandButton
                                        actionListener="#{mapPlacechangeView.unselectSlot}"
                                        rendered="#{slot.moving}" value="#{i18n['placemove.deselect']}"
                                        update="placeselector"/>

                            </ui:fragment>
                        </p:column>
                    </p:dataTable>
                </h:form>

                <script type="text/javascript">
                    var toggleSuccess = #{mapPlacechangeView.toggleSuccess};
                </script>

                <div style="padding: 1em 0;">
                    <h:form id="placemove">
                        <p:commandButton
                                disabled="#{!mapPlacechangeView.isReadyForCommit()}"
                                rendered="#{ajaxMapView.canUserBuy()}"
                                value="#{i18n['placemove.commitMove']}"
                                action="#{mapPlacechangeView.commitMove()}" ajax="false"/>
                    </h:form>
                </div>
            </p:fragment>


            <svg id="seatmap" style="margin: auto; border: 1px solid black;"
                 width="#{ajaxMapView.map.width}px"
                 height="#{ajaxMapView.map.height}px"/>
            <h:form>
                <p:remoteCommand name="toggleDstPlace"
                                 action="#{mapPlacechangeView.toggleDstPlace()}"
                                 update="placeselector" oncomplete="afterToggle()"/>
            </h:form>
            <script type="text/javascript">

                //  <![CDATA[

                px = placemap({
                    element: document.getElementById("seatmap"),
                    moyaurl: "#{request.contextPath}",
                    map_id: #{ajaxMapView.map.id},
                });
                px.toggleaction = function (d) {
                    latestPlace = d;
                    toggleDstPlace([{name: "placeId", value: d.id}])
                };

                function afterToggle() {
                    if (toggleSuccess) {
                        if (latestPlace.state === "F") {
                            latestPlace.state = "T";
                        } else {
                            latestPlace.state = "F";
                        }
                        px.update_placeobj([latestPlace]);
                    }
                }
                //			       ]]>

            </script>

            <map:legend/>

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