26.04.2022, 17:35
Hi, ich habe die Datei jetzt soweit reduziert, dass das Zeichnen aus dem Beispiel auch ohne meine Datenbank funktioniert. Unter der Map, befindet sich ein Modal( in dieser Version leider nicht draggable), mit einem submit-Button. Wenn man diesen Button klickt, öffnet sich eine Liste mit Städten unterhalb, die sortable ist. Gleichzeitig wird eine Verbindung zwischen den Städten gezeichnet. Ich möchte nun, dass wenn ein Element der Liste an eine andere Stelle verschoben wird, die Verbindungen mit der neuen Reihenfolge neugezeichnet werden.
So wie ich es verstanden habe, muss der Befehl( eventlistener) aus der init funktion kommen.(Wieso verstehe, ich auch nicht ganz. Es wäre nämlich auch möglich, auf sortable einen Eventlistener anzusetzen. Leider weiß ich aber nicht wie das geht.
Nach dem verschieben einer Stadt in der unteren Liste, startet eine Funktion phpchangeOrder( die die Reihenfolge in der Datenbank verändert. Ich dachte man kann das zeichnen auch in die Funktion setzen. Leider hat es bei mir nicht geklappt.
Deswegen hatte ich die Idee in der Initfunktion einen eventlisterner einzubauen, der nach aufruf von phpChangeOrder() startet.
Ein weiteres Problem, ist, dass ich nicht weiß, wie die alten Verbindungen verschwinden können, bevor bei weiterer Betätigung des Submit-Buttons eine neue Verbindung gezeichnet wird.
Vielen Dank für deine Hilfe
So wie ich es verstanden habe, muss der Befehl( eventlistener) aus der init funktion kommen.(Wieso verstehe, ich auch nicht ganz. Es wäre nämlich auch möglich, auf sortable einen Eventlistener anzusetzen. Leider weiß ich aber nicht wie das geht.
Nach dem verschieben einer Stadt in der unteren Liste, startet eine Funktion phpchangeOrder( die die Reihenfolge in der Datenbank verändert. Ich dachte man kann das zeichnen auch in die Funktion setzen. Leider hat es bei mir nicht geklappt.
Deswegen hatte ich die Idee in der Initfunktion einen eventlisterner einzubauen, der nach aufruf von phpChangeOrder() startet.
Ein weiteres Problem, ist, dass ich nicht weiß, wie die alten Verbindungen verschwinden können, bevor bei weiterer Betätigung des Submit-Buttons eine neue Verbindung gezeichnet wird.
Vielen Dank für deine Hilfe
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="D:\Privat\Entwicklung\windowjs-master\windowjs-master/window.css" />
<script src="D:\Privat\Entwicklung\windowjs-master\windowjs-master/window.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/95e77da10e.js" crossorigin="anonymous"></script>
<script src="D:\xampp\htdocs\supertramp\jquery.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>Document</title>
<link rel="stylesheet" href="css_ts.css">
</head>
<body>
<div class="container">
<div class="main_container">
<div class="map_window">
<div id="map">
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<div id="modal_your_trip" class="my-modal">
<header class="handle">
<button id="btn_close_your_trip" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="my-modal-title">Modal 3</h4>
</header>
<main>
<div class="modal-body">
<div class="ModalButtons">
</div>
<h2>plan your trip</h2>
<button id="submit">submit</button>
<div id="sortable" class="items ul_list">
</div>
<div id="routesCollection_yours"></div>
</div>
</main>
</div>
</div>
</div>
</body>
<script>
map_window = document.querySelector("map_window")
modal3 = document.getElementById("modal_your_trip")
function CreateDraggableItems3(output){
//list_stops = output
list_stops = ["Praga","Warschau","Berlin","Kiel","Dortmund"]
let div_grandpar_your = document.getElementById("sortable");
div_grandpar_your.innerHTML = '<div id="sortable" class="items ul_list">';
WayPoints = [];
for (let x = 0; x < list_stops.length; x++) {
let div = document.createElement('div');
i_icon_town = document.createElement('i')
i_icon_town.classList.add('fas');
i_icon_town.classList.add('fa-city');
input = document.createElement('input');
if (x == 0){Origin_Beg = list_stops[x]}
if (x == list_stops.length-1){Direction_End = list_stops[x],console.log(list_stops[x])}
if(x> 0){
if(x< list_stops.length-1){
WayPoints.push(list_stops[x])
}
}
placeHolder_input = "-";
input.setAttribute("placeholder", placeHolder_input);
input.setAttribute("size", 1)
i_icon_trash = document.createElement('i')
i_icon_trash.classList.add('fa');
i_icon_trash.classList.add('fa-trash');
span = document.createElement('span');
span.appendChild(i_icon_town);
span.appendChild(input);
span.appendChild(i_icon_trash);
div.appendChild(span)
//div.innerHTML = '<span> <i class="fas fa-city"></i> days: <input type="text"><i class="fa fa-trash"></i></span>';
div.classList.add("icons_your_trip");
div.setAttribute("id", x);
let div_par1 = document.createElement("div")
div_par1.innerText = list_stops[x]
div_par1.classList.add("town_name_your_trip")
div_par1.appendChild(div)
let div_par2 = document.createElement("div");
div_par2.classList.add("ui-state-default")
div_par2.classList.add("available_trip_list")
div_par2.classList.add("linkList")
div_par2.appendChild(div_par1)
div_par2.setAttribute("id", x);
div_grandpar_your.appendChild(div_par2)
//this[this.selectedIndex].text
trashes = document.querySelectorAll(".fa-trash");
id = x;
}
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
calculateAndDisplayRoute2(directionsService, directionsRenderer,Origin_Beg,Direction_End,WayPoints);
}
$(function () {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
$(function () {
$("#sortable").sortable({
stop: (event, ui) => {
moved_id = ui.item.attr('id');
next_id = ui.item.next().attr('id');
links = document.querySelectorAll(".linkList");
if (typeof next_id == "undefined") {
ui.item.attr("id", links.length - 1);
for (let x = 0; x < links.length - 1; x++) {
links[x].id = x;
}
}
else if (next_id == 0) {
for (let x = 0; x < links.length; x++) {
links[x].id = x;
}
}
else {
ui.item.attr("id", next_id - 1);
for (let x = parseInt(moved_id); x < parseInt(next_id) - 1; x++) {
links[x].id = x;
}
}
php_changeListorder(moved_id, next_id);
//beginne Zeichnen
}
});
$("#sortable").disableSelection();
});
function php_changeListorder(moved_id,next_id,name){
//name = document.getElementById('myLists_your_trip').selectedIndex.text;
//getContentFromPHP(moved_id,'changeListOrder.php',null,null,next_id,name);
//getContentFromPHP(moved_id,'changeDayOrder.php',null,null,next_id,name);
}
//getContentFetchAPI('paris',CreateCarousselIMGs)
function initMap() {
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
map = new google.maps.Map( document.getElementById( 'map' ), {
center: {
lat: 51.513329,
lng: -0.088950
},
zoom: 6,
mapTypeId: 'roadmap',
scaleControl: true,
streetViewControl: true,
});
document.getElementById("submit").addEventListener( "click", function() {
CreateDraggableItems3()
})
/*
changePHP_ListOrder().addEventListener("nach Ausführung", function() {
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
calculateAndDisplayRoute2(directionsService, directionsRenderer,Origin_Beg,Direction_End,WayPoints);
}
*/
}
function calculateAndDisplayRoute2(directionsService, directionsRenderer,Origin,Destination,WayPoints) {
const waypts = [];
Origin = "Praga";
Destination = "Dortmund"
WayPoints = ["Warschau","Berlin","Kiel"];
for (let i = 0; i < WayPoints.length; i++) {
waypts.push({
location: WayPoints[i],
stopover: true,
});
}
directionsService
.route({
origin: Origin,
destination: Destination,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING,
})
.then((response) => {
directionsRenderer.setDirections(response);
const route = response.routes[0];
})
.catch((e) => window.alert("Directions request failed due to " + status));
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOURCODE&callback=initMap" async defer></script>