diff --git a/src/main/java/de/assecutor/votianlt/pages/view/JobSummaryView.java b/src/main/java/de/assecutor/votianlt/pages/view/JobSummaryView.java index b037805..a54b32d 100644 --- a/src/main/java/de/assecutor/votianlt/pages/view/JobSummaryView.java +++ b/src/main/java/de/assecutor/votianlt/pages/view/JobSummaryView.java @@ -6,7 +6,6 @@ import com.vaadin.flow.component.html.Span; import com.vaadin.flow.component.html.Div; import com.vaadin.flow.component.orderedlayout.HorizontalLayout; import com.vaadin.flow.component.orderedlayout.VerticalLayout; -import com.vaadin.flow.component.UI; import com.vaadin.flow.router.BeforeEvent; import com.vaadin.flow.router.HasUrlParameter; import com.vaadin.flow.router.PageTitle; @@ -220,20 +219,50 @@ public class JobSummaryView extends Main implements HasUrlParameter { map.setHeight("520px"); map.getStyle().set("border", "1px solid var(--lumo-contrast-20pct)"); map.getStyle().set("border-radius", "var(--lumo-border-radius-m)"); - content.add(map); + + // Box für Fahrzeit/Alternativen + Div routeInfo = new Div(); + routeInfo.setWidthFull(); + routeInfo.getStyle().set("border", "1px solid var(--lumo-contrast-20pct)"); + routeInfo.getStyle().set("border-radius", "var(--lumo-border-radius-m)"); + routeInfo.getStyle().set("padding", "var(--lumo-space-m)"); + routeInfo.getStyle().set("background-color", "var(--lumo-base-color)"); + + content.add(map, routeInfo); String js = ( "(function(){" + - " var host = $0;" + + " var host = $0; var infoEl = $1;" + " function init(){" + - " var map = new google.maps.Map(host, {center: {lat: 51.163, lng: 10.447}, zoom: 6});" + + " var map = new google.maps.Map(host, {center: {lat: 51.163, lng: 10.447}, zoom: 6, mapTypeControl: false});" + + " var trafficLayer = new google.maps.TrafficLayer(); trafficLayer.setMap(map);" + " var ds = new google.maps.DirectionsService();" + - " var dr = new google.maps.DirectionsRenderer({map: map});" + " ds.route({" + " origin: '" + escapeJs(origin) + "'," + " destination: '" + escapeJs(destination) + "'," + - " travelMode: google.maps.TravelMode.DRIVING" + - " }, function(res, status){ if(status==='OK'){ dr.setDirections(res); } });" + + " travelMode: google.maps.TravelMode.DRIVING," + + " provideRouteAlternatives: true," + + " drivingOptions: { departureTime: new Date(), trafficModel: google.maps.TrafficModel.BEST_GUESS }" + + " }, function(res, status){ if(status==='OK'){ " + + " infoEl.innerHTML='';" + + " var bounds = new google.maps.LatLngBounds();" + + " res.routes.forEach(function(route, idx){" + + " var dr = new google.maps.DirectionsRenderer({map: map, preserveViewport: idx>0, polylineOptions:{strokeColor: idx===0?'#1976d2':'#9e9e9e', strokeOpacity: 0.9}});" + + " dr.setRouteIndex(idx); dr.setDirections(res);" + + " var leg = route.legs && route.legs[0];" + + " if (leg) {" + + " var dur = leg.duration ? leg.duration.text : '';" + + " var durT = leg.duration_in_traffic ? leg.duration_in_traffic.text : '';" + + " var dist = leg.distance ? leg.distance.text : '';" + + " var alt = (idx===0?'Schnellste Route':'Alternative '+idx);" + + " var row = document.createElement('div'); row.style.margin='4px 0';" + + " row.textContent = alt + ': ' + dist + ' • Dauer: ' + dur + (durT?(' (mit Verkehr: '+durT+')'):'');" + + " infoEl.appendChild(row);" + + " if (leg.steps) { leg.steps.forEach(function(s){ bounds.extend(s.start_location); bounds.extend(s.end_location); }); }" + + " }" + + " });" + + " if (!bounds.isEmpty()) { map.fitBounds(bounds); }" + + " }});" + " }" + " if (!(window.google && window.google.maps)) {" + " var s=document.createElement('script');" + @@ -243,8 +272,7 @@ public class JobSummaryView extends Main implements HasUrlParameter { "})();" ); - // Ausführen im UI-Kontext - map.getElement().executeJs(js, map.getElement()); + map.getElement().executeJs(js, map.getElement(), routeInfo.getElement()); } // Hilfsfunktion zum einfachen Escapen von JS-Zeichen in Strings