diff --git a/components/useMapContextMenu.js b/components/useMapContextMenu.js index 06cbf0c62..6a59bbf8e 100644 --- a/components/useMapContextMenu.js +++ b/components/useMapContextMenu.js @@ -1,5 +1,6 @@ +// /components/useMapContextMenu.js import { toast } from "react-toastify"; -import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils"; // Utility-Funktionen +import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils"; // Assuming these are imported correctly const zoomInCallback = (e, map) => { zoomIn(e, map); @@ -12,84 +13,10 @@ const zoomOutCallback = (map) => { const centerHereCallback = (e, map) => { centerHere(e, map); }; - -// Hilfsfunktion zur Umwandlung in das DMS-Format -const toDMS = (decimal, isLat) => { - const direction = decimal >= 0 ? (isLat ? "N" : "E") : isLat ? "S" : "W"; - const absDecimal = Math.abs(decimal); - const degrees = Math.floor(absDecimal); - const minutesDecimal = (absDecimal - degrees) * 60; - const minutes = Math.floor(minutesDecimal); - const seconds = ((minutesDecimal - minutes) * 60).toFixed(1); - return `${degrees}°${minutes}'${seconds}"${direction}`; -}; - -// Funktion zum Anzeigen und Kopieren der Koordinaten +// Funktion zum Anzeigen der Koordinaten const showCoordinates = (e) => { - const latDMS = toDMS(e.latlng.lat, true); - const lngDMS = toDMS(e.latlng.lng, false); - const coordinates = `${latDMS} ${lngDMS}`; - - // Überprüfen, ob das Clipboard-API unterstützt wird - if (navigator.clipboard && navigator.clipboard.writeText) { - navigator.clipboard - .writeText(coordinates) - .then(() => { - toast.success("Koordinaten wurden kopiert: " + coordinates, { - position: "top-center", - autoClose: 3000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - }); - }) - .catch((err) => { - toast.error("Fehler beim Kopieren der Koordinaten!", { - position: "top-center", - autoClose: 3000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - }); - console.error("Fehler beim Kopieren: ", err); - }); - } else { - // Fallback für ältere Browser - const textArea = document.createElement("textarea"); - textArea.value = coordinates; - document.body.appendChild(textArea); - textArea.select(); - try { - document.execCommand("copy"); - toast.success("Koordinaten wurden kopiert: " + coordinates, { - position: "top-center", - autoClose: 3000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - }); - } catch (err) { - toast.error("Fehler beim Kopieren der Koordinaten!", { - position: "top-center", - autoClose: 3000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - }); - console.error("Fehler beim Kopieren: ", err); - } - document.body.removeChild(textArea); - } + alert("Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5)); }; - // Kontextmenü Callback für "POI hinzufügen" const addStationCallback = (event, hasRights, setShowPopup, setPopupCoordinates) => { const editMode = localStorage.getItem("editMode") === "true"; @@ -116,57 +43,43 @@ export const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, h hasRights = editMode ? hasRights : undefined; if (!menuItemAdded && map && map.contextmenu) { - // Event-Listener für Rechtsklick - map.on("contextmenu", (e) => { - // Entferne alle vorherigen dynamischen Einträge - map.contextmenu.removeAllItems(); - - // Koordinaten dynamisch anzeigen - const latDMS = toDMS(e.latlng.lat, true); - const lngDMS = toDMS(e.latlng.lng, false); - const coordinates = `${latDMS} ${lngDMS}`; - - map.contextmenu.addItem({ - text: coordinates, - icon: "img/not_listed_location.png", - callback: () => showCoordinates(e), - }); - - map.contextmenu.addItem({ separator: true }); - - // Zoom-In - map.contextmenu.addItem({ - text: "Reinzoomen", - icon: "img/zoom_in.png", - callback: (e) => zoomInCallback(e, map), - }); - - // Zoom-Out - map.contextmenu.addItem({ - text: "Rauszoomen", - icon: "img/zoom_out.png", - callback: () => zoomOutCallback(map), - }); - - // Hier zentrieren - map.contextmenu.addItem({ - text: "Hier zentrieren", - icon: "img/center_focus.png", - callback: (e) => centerHereCallback(e, map), - }); - - // POI hinzufügen (wenn Bearbeitungsmodus aktiviert ist) - if (editMode) { - map.contextmenu.addItem({ separator: true }); - map.contextmenu.addItem({ - text: "POI hinzufügen", - icon: "img/add_station.png", - className: "background-red", - callback: (event) => addStationCallback(event, hasRights, setShowPopup, setPopupCoordinates), - }); - } + map.contextmenu.addItem({ + text: "Koordinaten anzeigen", + icon: "img/not_listed_location.png", + callback: showCoordinates, }); + map.contextmenu.addItem({ separator: true }); + + map.contextmenu.addItem({ + text: "Reinzoomen", + icon: "img/zoom_in.png", + callback: (e) => zoomInCallback(e, map), + }); + + map.contextmenu.addItem({ + text: "Rauszoomen", + icon: "img/zoom_out.png", + callback: () => zoomOutCallback(map), + }); + + map.contextmenu.addItem({ + text: "Hier zentrieren", + icon: "img/center_focus.png", + callback: (e) => centerHereCallback(e, map), + }); + + // wenn localStorage Variable editMode true ist, dann wird der Button "POI hinzufügen" angezeigt + if (editMode) { + map.contextmenu.addItem({ separator: true }); + map.contextmenu.addItem({ + text: "POI hinzufügen", + icon: "img/add_station.png", + className: "background-red", + callback: (event) => addStationCallback(event, hasRights, setShowPopup, setPopupCoordinates), + }); + } + setMenuItemAdded(true); } }; diff --git a/cypress.config.js b/cypress.config.js index 3b671304d..2f3d07e3c 100644 --- a/cypress.config.js +++ b/cypress.config.js @@ -3,8 +3,9 @@ const { defineConfig } = require("cypress"); module.exports = defineConfig({ e2e: { setupNodeEvents(on, config) { - // implement node event listeners here + // Node-Event-Listeners hier konfigurieren }, + experimentalStudio: true, // Studio aktivieren }, component: { diff --git a/cypress/e2e/contextmenuDeviceInNewTab.cy.js b/cypress/e2e/contextmenuDeviceInNewTab.cy.js new file mode 100644 index 000000000..2a5b93746 --- /dev/null +++ b/cypress/e2e/contextmenuDeviceInNewTab.cy.js @@ -0,0 +1,62 @@ +describe("contextmenuTest", () => { + it("tests contextmenuTest", () => { + cy.log("Test startet jetzt"); + + // 1. Viewport einstellen + cy.viewport(1920, 1080); + cy.log("Viewport eingestellt auf 1920x1080"); + + // 2. Seite besuchen + cy.visit("http://10.10.0.70:3000/?m=12&u=484"); + cy.log("Seite geöffnet"); + + // 3. Sicherstellen, dass die Karte geladen ist + cy.get("#map", { timeout: 15000 }).should("be.visible"); + cy.log("Karte geladen"); + + // 4. Wartezeit zum Stabilisieren der Karte + cy.wait(2000); + + // 5. Marker suchen und Rechtsklick simulieren + cy.get('img[src*="img/icons/marker-icon-20.svg"]') // Marker suchen + .filter(":visible") // Nur sichtbare Marker + .first() // Ersten Marker auswählen + .scrollIntoView() // Marker in den sichtbaren Bereich scrollen + .should("be.visible") // Sicherstellen, dass Marker sichtbar ist + .trigger("mouseover") // Mouseover simulieren + .wait(500) // Wartezeit nach Mouseover + .rightclick({ force: true }); // Rechtsklick auf den Marker + cy.log("Rechtsklick auf Marker ausgeführt"); + + // Screenshot nach Rechtsklick zum Debugging + cy.screenshot("nach-rechtsklick"); + + // 6. Kontextmenü prüfen mit explizitem Selektor + cy.get(".leaflet-contextmenu-item") // Suche alle Menüeinträge mit der Klasse + .contains("Station öffnen (Tab)", { timeout: 5000 }) // Prüfe Text innerhalb des Eintrags + .should("be.visible"); // Sichtbarkeit sicherstellen + cy.log("Menüeintrag gefunden"); + + // 7. URL abfangen und testen, bevor der Tab geöffnet wird + const targetUrl = "http://10.10.0.70/talas5/devices/cpl.aspx?ver=35&kue=24&id=50922"; + + // HTTP-Anfrage zur Überprüfung des Status + cy.request(targetUrl).then((response) => { + expect(response.status).to.eq(200); // Erwartet HTTP 200 OK + cy.log("URL ist erreichbar, Status 200"); + }); + + // 8. Menüeintrag auswählen (öffnet den neuen Tab) + cy.get(".leaflet-contextmenu-item") // Explizit Menüeintrag mit Klasse auswählen + .contains("Station öffnen (Tab)") + .click(); // Menüeintrag anklicken + cy.log("Menüeintrag ausgewählt"); + + // 9. Klick auf die Karte, um Kontextmenü zu schließen + cy.get("#map").click(100, 100); // Klick auf eine leere Stelle + cy.log("Kontextmenü geschlossen"); + + // 10. Optionaler Screenshot nach Abschluss + cy.screenshot("test-abgeschlossen"); + }); +}); diff --git a/cypress/screenshots/karte-geladen (1).png b/cypress/screenshots/karte-geladen (1).png new file mode 100644 index 000000000..53fa5684a Binary files /dev/null and b/cypress/screenshots/karte-geladen (1).png differ diff --git a/cypress/screenshots/karte-geladen (2).png b/cypress/screenshots/karte-geladen (2).png new file mode 100644 index 000000000..36f832521 Binary files /dev/null and b/cypress/screenshots/karte-geladen (2).png differ diff --git a/cypress/screenshots/karte-geladen (3).png b/cypress/screenshots/karte-geladen (3).png new file mode 100644 index 000000000..a365f7b8c Binary files /dev/null and b/cypress/screenshots/karte-geladen (3).png differ diff --git a/cypress/screenshots/karte-geladen.png b/cypress/screenshots/karte-geladen.png new file mode 100644 index 000000000..029c0ac28 Binary files /dev/null and b/cypress/screenshots/karte-geladen.png differ diff --git a/cypress/screenshots/mouseover-marker (1).png b/cypress/screenshots/mouseover-marker (1).png new file mode 100644 index 000000000..0cbd860d5 Binary files /dev/null and b/cypress/screenshots/mouseover-marker (1).png differ diff --git a/cypress/screenshots/mouseover-marker (2).png b/cypress/screenshots/mouseover-marker (2).png new file mode 100644 index 000000000..de1563fe2 Binary files /dev/null and b/cypress/screenshots/mouseover-marker (2).png differ diff --git a/cypress/screenshots/mouseover-marker (3).png b/cypress/screenshots/mouseover-marker (3).png new file mode 100644 index 000000000..7e732da12 Binary files /dev/null and b/cypress/screenshots/mouseover-marker (3).png differ diff --git a/cypress/screenshots/mouseover-marker.png b/cypress/screenshots/mouseover-marker.png new file mode 100644 index 000000000..0948bada4 Binary files /dev/null and b/cypress/screenshots/mouseover-marker.png differ diff --git a/cypress/screenshots/nach-rechtsklick (1).png b/cypress/screenshots/nach-rechtsklick (1).png new file mode 100644 index 000000000..921a66298 Binary files /dev/null and b/cypress/screenshots/nach-rechtsklick (1).png differ diff --git a/cypress/screenshots/nach-rechtsklick (2).png b/cypress/screenshots/nach-rechtsklick (2).png new file mode 100644 index 000000000..bd35e2678 Binary files /dev/null and b/cypress/screenshots/nach-rechtsklick (2).png differ diff --git a/cypress/screenshots/nach-rechtsklick (3).png b/cypress/screenshots/nach-rechtsklick (3).png new file mode 100644 index 000000000..4a8fdb167 Binary files /dev/null and b/cypress/screenshots/nach-rechtsklick (3).png differ diff --git a/cypress/screenshots/nach-rechtsklick (4).png b/cypress/screenshots/nach-rechtsklick (4).png new file mode 100644 index 000000000..4a8fdb167 Binary files /dev/null and b/cypress/screenshots/nach-rechtsklick (4).png differ diff --git a/cypress/screenshots/nach-rechtsklick (5).png b/cypress/screenshots/nach-rechtsklick (5).png new file mode 100644 index 000000000..bd35e2678 Binary files /dev/null and b/cypress/screenshots/nach-rechtsklick (5).png differ diff --git a/cypress/screenshots/nach-rechtsklick (6).png b/cypress/screenshots/nach-rechtsklick (6).png new file mode 100644 index 000000000..4a8fdb167 Binary files /dev/null and b/cypress/screenshots/nach-rechtsklick (6).png differ diff --git a/cypress/screenshots/nach-rechtsklick.png b/cypress/screenshots/nach-rechtsklick.png new file mode 100644 index 000000000..9e008fd6d Binary files /dev/null and b/cypress/screenshots/nach-rechtsklick.png differ diff --git a/cypress/screenshots/test-abgeschlossen (1).png b/cypress/screenshots/test-abgeschlossen (1).png new file mode 100644 index 000000000..1a7d9978d Binary files /dev/null and b/cypress/screenshots/test-abgeschlossen (1).png differ diff --git a/cypress/screenshots/test-abgeschlossen (2).png b/cypress/screenshots/test-abgeschlossen (2).png new file mode 100644 index 000000000..0a8be7783 Binary files /dev/null and b/cypress/screenshots/test-abgeschlossen (2).png differ diff --git a/cypress/screenshots/test-abgeschlossen.png b/cypress/screenshots/test-abgeschlossen.png new file mode 100644 index 000000000..0a8be7783 Binary files /dev/null and b/cypress/screenshots/test-abgeschlossen.png differ diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js index 0e7290a13..50352f101 100644 --- a/cypress/support/e2e.js +++ b/cypress/support/e2e.js @@ -14,7 +14,14 @@ // *********************************************************** // Import commands.js using ES2015 syntax: -import './commands' +import "./commands"; // Alternatively you can use CommonJS syntax: -// require('./commands') \ No newline at end of file +// require('./commands') +const app = window.top; +if (!app.document.head.querySelector("[data-hide-command-log-request]")) { + const style = app.document.createElement("style"); + style.innerHTML = ".command-name-request, .command-name-xhr { display: none }"; + style.setAttribute("data-hide-command-log-request", ""); + app.document.head.appendChild(style); +}