Erweiterungen

This commit is contained in:
2025-08-18 13:21:54 +02:00
parent 2a7c0d1895
commit 0856d5c374

View File

@@ -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<String> {
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<String> {
"})();"
);
// 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