Skip to content

Max Mecklin / Moya

Go to a project
Commit 30369d58 by Tuomas Riihimäki
Options

Refactor seatmap to allow set arbitrary onclick callback

1 parent 89cff9f2
Inline Side-by-side
Showing with 72 additions and 100 deletions
code/moya-web/WebContent/info/placeReservation.xhtml
...@@ -113,7 +113,6 @@ ...@@ -113,7 +113,6 @@
element: document.getElementById("seatmap"), element: document.getElementById("seatmap"),
moyaurl: "#{request.contextPath}", moyaurl: "#{request.contextPath}",
map_id: #{ajaxMapView.map.id}, map_id: #{ajaxMapView.map.id},
placereserve: true,
toggleaction: function (d) { toggleaction: function (d) {
selectPlace([{name: "placeid", value: d.id}]); selectPlace([{name: "placeid", value: d.id}]);
lastplace = d; lastplace = d;
......
code/moya-web/WebContent/info/usermapsearch.xhtml
...@@ -35,8 +35,6 @@ ...@@ -35,8 +35,6 @@
element : document.getElementById("seatmap"), element : document.getElementById("seatmap"),
moyaurl : "#{request.contextPath}", moyaurl : "#{request.contextPath}",
map_id : #{ajaxMapView.map.id}, map_id : #{ajaxMapView.map.id},
placereserve: false,
onclick: function(d) {},
hilightUser: #{userView.selectedUser.user.id}, hilightUser: #{userView.selectedUser.user.id},
tooltip: function(d) { tooltip: function(d) {
return '<span style="font-size: 180%; font-weight: bold;">' + d.name +"</span><br /><br />"+ return '<span style="font-size: 180%; font-weight: bold;">' + d.name +"</span><br /><br />"+
......
code/moya-web/WebContent/neomap/reserve.xhtml
...@@ -16,18 +16,11 @@ ...@@ -16,18 +16,11 @@
<f:metadata> <f:metadata>
<f:event type="preRenderView" listener="#{ajaxMapView.initReserveMap()}"/> <f:event type="preRenderView" listener="#{ajaxMapView.initReserveMap()}"/>
</f:metadata> </f:metadata>
<ui:param name="thispage" value="page.place.placemap"/>
<ui:define name="content"> <ui:define name="content">
<h:form> <h:form>
<p:remoteCommand name="updateWholePage" update="@all" action="#{ajaxMapView.initReserveMap()}"/> <p:remoteCommand name="updateWholePage" update="@all" action="#{ajaxMapView.initReserveMap()}"/>
</h:form> </h:form>
<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.min.js"/>
<h:outputScript target="head" library="seatjs" name="d3-tip.js"/> <h:outputScript target="head" library="seatjs" name="d3-tip.js"/>
...@@ -58,28 +51,35 @@ ...@@ -58,28 +51,35 @@
</ui:repeat> </ui:repeat>
<br/> <br/>
<h3>
<h:outputText value="#{i18n['mapView.yourPlaces']}"/>
</h3>
<p:dataTable tableStyle=" width: auto;" var="cnt" value="#{ajaxMapView.slotcount}">
<!-- Place slot count -->
<h3><h:outputText value="#{i18n['mapView.yourPlaces']}"/></h3>
<h:form>
<p:remoteCommand name="updateSlottable" action="#{ajaxMapView.initPlacecount()}" update=":slottable" />
</h:form>
<p:dataTable id="slottable" tableStyle="width: auto;" var="cnt" value="#{ajaxMapView.slotcount}">
<p:column headerText="#{i18n['mapView.productcount.productname']}"> <p:column headerText="#{i18n['mapView.productcount.productname']}">
<h:outputText value="#{cnt.product.name}"/> <h:outputText value="#{cnt.product.name}"/>
</p:column> </p:column>
<p:column headerText="#{i18n['mapView.productcount.productcount']}"> <p:column headerText="#{i18n['mapView.productcount.productcount']}">
<h:outputText value="#{cnt.count}"/> <h:outputText value="#{cnt.count}"/>
</p:column> </p:column>
<p:column headerText="#{i18n['mapView.productcount.unused']}">
<h:outputText value="#{cnt.unused}"/>
</p:column>
</p:dataTable> </p:dataTable>
<ui:fragment rendered="#{ajaxMapView.reserving}"> <ui:fragment rendered="#{ajaxMapView.reserving}">
<div style="margin: 5px;"> <div style="margin: 5px;">
<h:form id="placeselectform"> <h:form id="placeselectform">
<p:commandButton onclick="$(window).unbind('beforeunload');" rendered="#{ajaxMapView.canUserBuy()}" value="#{i18n['mapView.buyPlaces']}" actionListener="#{ajaxMapView.buySelectedPlaces()}" /> <p:commandButton onclick="$(window).unbind('beforeunload');" rendered="#{ajaxMapView.canUserBuy()}" value="#{i18n['mapView.buyPlaces']}" actionListener="#{ajaxMapView.buySelectedPlaces()}" />
</h:form> </h:form>
</div> </div>
</ui:fragment> </ui:fragment>
<!-- Print queue status -->
<ui:fragment rendered="#{ajaxMapView.queueEnabled and not ajaxMapView.reserving}"> <ui:fragment rendered="#{ajaxMapView.queueEnabled and not ajaxMapView.reserving}">
<h3><h:outputText value="#{i18n['mapView.youAreInQueue']}"/></h3> <h3><h:outputText value="#{i18n['mapView.youAreInQueue']}"/></h3>
...@@ -143,33 +143,22 @@ ...@@ -143,33 +143,22 @@
$().ready(function () { $().ready(function () {
reloadQueue(); reloadQueue();
}); });
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
px = placemap({ px = placemap({
element: document.getElementById("seatmap"), element: document.getElementById("seatmap"),
moyaurl: "#{request.contextPath}", moyaurl: "#{request.contextPath}",
map_id: #{ajaxMapView.map.id}, map_id: #{ajaxMapView.map.id},
placereserve: true,
onclick: function (d) {
// px.update();
//alert(d);
// #{ajaxMapView.isMgmtPermission()?'placeClicker([{name: \'placeId\', value: d}])':''}
return false;
}
}); });
// document.getElementById("editbutton").addEventListener("click",
// function() {
// px.enable_edit();
// });
//px.enable_edit();
px.toggleaction = function(d){
px.toggle_place(d);
updateSlottable();
}
</script> </script>
<!-- Legend -->
<h:panelGrid columns="3" cellpadding="10"> <h:panelGrid columns="3" cellpadding="10">
<h:panelGrid columns="2"> <h:panelGrid columns="2">
<div style="border-color: black; border-style: solid; border-width: 1px; background-color: rgb(83, 83, 83); width: 10px; height: 10px;">&nbsp;</div> <div style="border-color: black; border-style: solid; border-width: 1px; background-color: rgb(83, 83, 83); width: 10px; height: 10px;">&nbsp;</div>
...@@ -194,8 +183,6 @@ ...@@ -194,8 +183,6 @@
<h:outputLabel value="#{i18n['placeSelect.placesleft']}:"/> <h:outputLabel value="#{i18n['placeSelect.placesleft']}:"/>
<h:outputText value="#{ajaxMapView.placesLeftToSelect}"/> <h:outputText value="#{ajaxMapView.placesLeftToSelect}"/>
</h:panelGrid> </h:panelGrid>
</h:panelGrid> </h:panelGrid>
......
code/moya-web/WebContent/neomap/view.xhtml
...@@ -59,20 +59,8 @@ ...@@ -59,20 +59,8 @@
element : document.getElementById("seatmap"), element : document.getElementById("seatmap"),
moyaurl : "#{request.contextPath}", moyaurl : "#{request.contextPath}",
map_id : #{ajaxMapView.map.id}, map_id : #{ajaxMapView.map.id},
placereserve: #{ajaxMapView.queueEnabled?"false":"true"},
onclick : function(d) {
// px.update();
//alert(d);
// #{ajaxMapView.isMgmtPermission()?'placeClicker([{name: \'placeId\', value: d}])':''}
return false;
}
}); });
// document.getElementById("editbutton").addEventListener("click", px.toggleaction = #{ajaxMapView.queueEnabled?'undefined':'px.toggle_place'},
// function() {
// px.enable_edit();
// });
//px.enable_edit();
// setInterval(function () { updateMap() }, 5000);
</script> </script>
......
code/moya-web/WebContent/resources/seatjs/seatmap.js
...@@ -36,10 +36,6 @@ function placemap(opts) ...@@ -36,10 +36,6 @@ function placemap(opts)
opts.toggleaction = false; opts.toggleaction = false;
} }
if(opts.placereserve === undefined)
{
opts.placereserve = false;
}
if(opts.tooltip === undefined) { if(opts.tooltip === undefined) {
opts.tooltip = function(d) { opts.tooltip = function(d) {
return "<strong>" + d.name + "</strong>"; return "<strong>" + d.name + "</strong>";
...@@ -59,7 +55,6 @@ function placemap(opts) ...@@ -59,7 +55,6 @@ function placemap(opts)
editclick: opts.editclick, editclick: opts.editclick,
clicked_place: undefined, clicked_place: undefined,
locale: opts.locale || 'fi', locale: opts.locale || 'fi',
placereserve: opts.placereserve,
toggleaction: opts.toggleaction, toggleaction: opts.toggleaction,
}; };
...@@ -245,25 +240,6 @@ function placemap(opts) ...@@ -245,25 +240,6 @@ function placemap(opts)
tip_updown.hide(d, i); tip_updown.hide(d, i);
} }
function toggle_clicked(element)
{
// TODO: reserve place from rest first!
data = element.data()[0];
px.clicked_place = data.id;
if(px.toggleaction) {
px.toggleaction(data);
} else {
px.toggle_place(data);
}
px.onclick(data);
}
px.update_leavemessage = function() { px.update_leavemessage = function() {
if(px.is_leave_message_on) { if(px.is_leave_message_on) {
...@@ -332,9 +308,11 @@ function placemap(opts) ...@@ -332,9 +308,11 @@ function placemap(opts)
.on('mouseover', show_tooltip) .on('mouseover', show_tooltip)
.on('mouseout', hide_tooltip); .on('mouseout', hide_tooltip);
if(px.placereserve) { if( px.toggleaction ) {
places.on('click', function (d, i) { places.on('click', function (d, i) {
toggle_clicked(d3.select(this)); svgElement = d3.select(this);
data = svgElement.data()[0];
px.toggleaction(data)
}); });
} }
} }
......
code/moya-web/src/main/java/fi/codecrew/moya/web/cdiview/map/AjaxMapView.java
...@@ -63,12 +63,15 @@ public class AjaxMapView extends GenericCDIView { ...@@ -63,12 +63,15 @@ public class AjaxMapView extends GenericCDIView {
private QueueBeanLocal quebean; private QueueBeanLocal quebean;
private Collection<Slotcounter> slotcount; private Collection<Slotcounter> slotcount;
private Boolean reserving;
private Integer placeId;
public static class Slotcounter { public static class Slotcounter {
private final Product product; private final Product product;
private Integer count = 0; private Integer count = 0;
private Integer unused = 0;
public Slotcounter(Product prod) public Slotcounter(Product prod) {
{
this.product = prod; this.product = prod;
} }
...@@ -80,9 +83,18 @@ public class AjaxMapView extends GenericCDIView { ...@@ -80,9 +83,18 @@ public class AjaxMapView extends GenericCDIView {
return product; return product;
} }
public Integer getUnused() {
return unused;
}
public void incrementUnused() {
++unused;
}
public void increment() { public void increment() {
++count; ++count;
} }
} }
public void initReserveMap() { public void initReserveMap() {
...@@ -101,19 +113,32 @@ public class AjaxMapView extends GenericCDIView { ...@@ -101,19 +113,32 @@ public class AjaxMapView extends GenericCDIView {
super.navihandler.forward("/neomap/notenoughslots?faces-redirect=true"); super.navihandler.forward("/neomap/notenoughslots?faces-redirect=true");
} else { } else {
quebean.enterQueue(map, u); quebean.enterQueue(map, u);
slotcount = countPlaceslots(placebean.getFreePlaceslots(u, map)); slotcount = countPlaceslots(placebean.getPlaceslots(u));
// slotcount = countPlaceslots(placebean.getFreePlaceslots(u, map));
} }
} }
} }
private static Collection<Slotcounter> countPlaceslots(List<PlaceSlot> slots) public void initPlacecount() {
{ if (super.requirePermissions(MapPermission.BUY_PLACES) && slotcount == null) {
EventUser u = userview.getSelectedUser();
slotcount = countPlaceslots(placebean.getPlaceslots(u));
}
}
private static Collection<Slotcounter> countPlaceslots(List<PlaceSlot> slots) {
Map<Product, Slotcounter> prodmap = new HashMap<>(); Map<Product, Slotcounter> prodmap = new HashMap<>();
for (PlaceSlot p : slots) { for (PlaceSlot p : slots) {
if (!prodmap.containsKey(p.getProduct())) { if (!prodmap.containsKey(p.getProduct())) {
prodmap.put(p.getProduct(), new Slotcounter(p.getProduct())); prodmap.put(p.getProduct(), new Slotcounter(p.getProduct()));
} }
prodmap.get(p.getProduct()).increment(); Slotcounter pm = prodmap.get(p.getProduct());
pm.increment();
logger.info("got used {} for slot {} with place {}", p.getUsed(), p, p.getPlace());
if (!p.isUsed()) {
pm.incrementUnused();
}
} }
Collection<Slotcounter> ret = prodmap.values(); Collection<Slotcounter> ret = prodmap.values();
...@@ -127,6 +152,12 @@ public class AjaxMapView extends GenericCDIView { ...@@ -127,6 +152,12 @@ public class AjaxMapView extends GenericCDIView {
} }
} }
public void initManageViewMap() {
if (super.requirePermissions(MapPermission.MANAGE_MAPS) && map == null) {
initMap();
}
}
private Boolean queEnabled = null; private Boolean queEnabled = null;
private MapReservationQueueEntry queueEntry; private MapReservationQueueEntry queueEntry;
...@@ -190,10 +221,7 @@ public class AjaxMapView extends GenericCDIView { ...@@ -190,10 +221,7 @@ public class AjaxMapView extends GenericCDIView {
} }
private Boolean reserving; public boolean isReserving() {
public boolean isReserving()
{
if (reserving == null) { if (reserving == null) {
reserving = quebean.isReserving(initMap(), userview.getSelectedUser()); reserving = quebean.isReserving(initMap(), userview.getSelectedUser());
} }
...@@ -203,12 +231,10 @@ public class AjaxMapView extends GenericCDIView { ...@@ -203,12 +231,10 @@ public class AjaxMapView extends GenericCDIView {
public boolean canUserBuy() { public boolean canUserBuy() {
return permbean.hasPermission(MapPermission.BUY_PLACES) && return permbean.hasPermission(MapPermission.BUY_PLACES) &&
(permbean.hasPermission(MapPermission.MANAGE_OTHERS) || (permbean.hasPermission(MapPermission.MANAGE_OTHERS) ||
quebean.isReserving(initMap(), userview.getSelectedUser()) quebean.isReserving(initMap(), userview.getSelectedUser()));
);
} }
public EventUser getEventuser() public EventUser getEventuser() {
{
return userview.getSelectedUser(); return userview.getSelectedUser();
} }
...@@ -225,24 +251,17 @@ public class AjaxMapView extends GenericCDIView { ...@@ -225,24 +251,17 @@ public class AjaxMapView extends GenericCDIView {
} }
public boolean isMgmtPermission() public boolean isMgmtPermission() {
{
return permbean.hasPermission(MapPermission.MANAGE_OTHERS); return permbean.hasPermission(MapPermission.MANAGE_OTHERS);
} }
// public void placeClicked() // public void placeClicked() {
// {
// //
// Map<String, String> vmap = context.getExternalContext().getRequestParameterMap();
// int placeId = Integer.parseInt(vmap.get("placeId"));
// place = placebean.find(placeId); // place = placebean.find(placeId);
// logger.info("Found place {} with placeid {}", place, placeId); // logger.info("Found place {} with placeid {}", place, placeId);
// if (place.isReservedFor(permbean.getCurrentUser())) // if (place.isReservedFor(permbean.getCurrentUser())) {
// {
// placebean.releasePlace(place); // placebean.releasePlace(place);
// } // } else if (place.isBuyable() && !place.isTaken()) {
// else if (place.isBuyable() && !place.isTaken())
// {
// placebean.reservePlace(place, permbean.getCurrentUser()); // placebean.reservePlace(place, permbean.getCurrentUser());
// } // }
// } // }
......
code/moya-web/src/main/resources/fi/codecrew/moya/resources/i18n.properties
...@@ -528,6 +528,7 @@ mapView.errorWhileBuyingPlaces = Error in buying places. Please try again. If ...@@ -528,6 +528,7 @@ mapView.errorWhileBuyingPlaces = Error in buying places. Please try again. If
mapView.notEnoughCreditsToReserve = You don't have enough credits to reserve this place. mapView.notEnoughCreditsToReserve = You don't have enough credits to reserve this place.
mapView.productcount.productcount = Number of tickets mapView.productcount.productcount = Number of tickets
mapView.productcount.productname = Ticket type mapView.productcount.productname = Ticket type
mapView.productcount.unused = Unused tickets
mapView.queuePosition = Your position in queue mapView.queuePosition = Your position in queue
mapView.queuePositionUpdated = Queue position updated mapView.queuePositionUpdated = Queue position updated
mapView.youAreInQueue = You are in queue. Wait for your turn to select places. mapView.youAreInQueue = You are in queue. Wait for your turn to select places.
......
code/moya-web/src/main/resources/fi/codecrew/moya/resources/i18n_en.properties
...@@ -759,6 +759,7 @@ mapView.lockPlacesBeforeLeaving = Remember to lock the places before leaving t ...@@ -759,6 +759,7 @@ mapView.lockPlacesBeforeLeaving = Remember to lock the places before leaving t
mapView.notEnoughCreditsToReserve = You don't have enough credits to reserve this place. mapView.notEnoughCreditsToReserve = You don't have enough credits to reserve this place.
mapView.productcount.productcount = Number of tickets mapView.productcount.productcount = Number of tickets
mapView.productcount.productname = Ticket type mapView.productcount.productname = Ticket type
mapView.productcount.unused = Unused tickets
mapView.queuePosition = Your position in queue mapView.queuePosition = Your position in queue
mapView.queuePositionUpdated = Queue position updated mapView.queuePositionUpdated = Queue position updated
mapView.youAreInQueue = You are in queue. Wait for your turn to select places. mapView.youAreInQueue = You are in queue. Wait for your turn to select places.
......
code/moya-web/src/main/resources/fi/codecrew/moya/resources/i18n_fi.properties
...@@ -762,6 +762,7 @@ mapView.lockPlacesBeforeLeaving = Lukitse paikat ennen sivulta poistumista ...@@ -762,6 +762,7 @@ mapView.lockPlacesBeforeLeaving = Lukitse paikat ennen sivulta poistumista
mapView.notEnoughCreditsToReserve = Sinulla ei ole riitt\u00E4v\u00E4sti suoritettuja konepaikkamaksuja t\u00E4m\u00E4n paikan varaamiseen. mapView.notEnoughCreditsToReserve = Sinulla ei ole riitt\u00E4v\u00E4sti suoritettuja konepaikkamaksuja t\u00E4m\u00E4n paikan varaamiseen.
mapView.productcount.productcount = Lippujen m\u00E4\u00E4r\u00E4 mapView.productcount.productcount = Lippujen m\u00E4\u00E4r\u00E4
mapView.productcount.productname = Lipputyyppi mapView.productcount.productname = Lipputyyppi
mapView.productcount.unused = K\u00E4ytt\u00E4m\u00E4tt\u00F6m\u00E4t liput
mapView.queuePosition = Paikkasi jonossa mapView.queuePosition = Paikkasi jonossa
mapView.queuePositionUpdated = Jonotustieto p\u00E4ivitetty mapView.queuePositionUpdated = Jonotustieto p\u00E4ivitetty
mapView.youAreInQueue = Olet jonossa. Odota vuoroasi valitaksesi haluamasi paikat. mapView.youAreInQueue = Olet jonossa. Odota vuoroasi valitaksesi haluamasi paikat.
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!