{"id":9991,"date":"2024-12-19T21:08:33","date_gmt":"2024-12-19T21:08:33","guid":{"rendered":"https:\/\/pv-montage-team.work-progress.info\/?page_id=9991"},"modified":"2024-12-19T22:46:21","modified_gmt":"2024-12-19T22:46:21","slug":"index","status":"publish","type":"page","link":"https:\/\/pv-montage-team.work-progress.info\/","title":{"rendered":"Index"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9991\" class=\"elementor elementor-9991\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38976df3 e-con-full e-flex e-con e-parent\" data-id=\"38976df3\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-56c1cb4 elementor-widget__width-inherit elementor-widget elementor-widget-shortcode\" data-id=\"56c1cb4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"hero-section\">\n    <h1>Finden Sie Ihr Potenzial<\/h1>\n    <input type=\"text\" id=\"address-input\" class=\"form-control\" placeholder=\"Adresse eingeben\">\n<\/div>\n<script>\n    function initAutocomplete() {\n        const addressInput = document.getElementById(\"address-input\");\n\n        if (!addressInput) {\n            console.error(\"Adressfeld nicht gefunden.\");\n            return;\n        }\n\n        const autocomplete = new google.maps.places.Autocomplete(addressInput, {\n            types: [\"geocode\"],\n            componentRestrictions: { country: \"de\" },\n        });\n\n        autocomplete.addListener(\"place_changed\", () => {\n            const place = autocomplete.getPlace();\n            if (!place.geometry) {\n                console.error(\"Keine Geometrie f\u00fcr die Adresse.\");\n                return;\n            }\n\n            const { lat, lng } = place.geometry.location;\n            console.log(\"Adresse:\", place.formatted_address);\n            console.log(\"Koordinaten:\", lat(), lng());\n\n            \/\/ Weiterleitung zu Schritt 2\n            document.querySelector(\".hero-section\").style.display = \"none\";\n            document.getElementById(\"step-2\").style.display = \"block\";\n            initMap(lat(), lng(), place.formatted_address);\n        });\n    }\n\n    window.initAutocomplete = initAutocomplete;\n<\/script>\n<div id=\"step-2\" class=\"container mt-5\" style=\"display: none;\">\n    <h2>Dachanalyse<\/h2>\n    <p>Adresse: <span id=\"selected-address\"><\/span><\/p>\n    <button id=\"change-address\" class=\"btn btn-secondary\">\u00c4ndern<\/button>\n    <div id=\"map-container\" style=\"position: relative; height: 400px;\">\n        <div id=\"map\" style=\"height: 100%;\"><\/div>\n        <div id=\"overlay\" style=\"\n            border: 2px dashed red;\n            position: absolute;\n            width: 60%; \n            height: 40%;\n            top: 30%;\n            left: 20%;\n            pointer-events: none;\">\n        <\/div>\n    <\/div>\n    <ul>\n        <li>Sonnenstunden: <span id=\"sun-hours\"><\/span><\/li>\n        <li>Dachfl\u00e4che: <span id=\"roof-area\"><\/span> m\u00b2<\/li>\n        <li>Ausrichtung: <span id=\"orientation\"><\/span><\/li>\n    <\/ul>\n    <div class=\"btn-group\">\n        <button class=\"btn btn-primary option-btn\" data-option=\"efh\">Einfamilienhaus<\/button>\n        <button class=\"btn btn-primary option-btn\" data-option=\"mfh\">Mehrfamilienhaus<\/button>\n        <button class=\"btn btn-primary option-btn\" data-option=\"gewerbe\">Gewerbe<\/button>\n        <button class=\"btn btn-primary option-btn\" data-option=\"freiflaeche\">Freifl\u00e4che<\/button>\n    <\/div>\n<\/div>\n<script>\n    function initMap(lat, lng, address) {\n        const mapElement = document.getElementById(\"map\");\n        if (!mapElement) {\n            console.error(\"Map-Element nicht gefunden.\");\n            return;\n        }\n\n        const map = new google.maps.Map(mapElement, {\n            center: { lat, lng },\n            zoom: 20,\n            mapTypeId: \"satellite\",\n        });\n\n        document.getElementById(\"selected-address\").textContent = address;\n\n        \/\/ Daten speichern\n        sessionStorage.setItem(\"sunHours\", \"1200 Stunden\");\n        sessionStorage.setItem(\"roofArea\", \"40\");\n        sessionStorage.setItem(\"orientation\", \"S\u00fcdwest\");\n\n        document.getElementById(\"sun-hours\").textContent = sessionStorage.getItem(\"sunHours\");\n        document.getElementById(\"roof-area\").textContent = sessionStorage.getItem(\"roofArea\");\n        document.getElementById(\"orientation\").textContent = sessionStorage.getItem(\"orientation\");\n    }\n\n    document.getElementById(\"change-address\").addEventListener(\"click\", () => {\n        document.getElementById(\"step-2\").style.display = \"none\";\n        document.querySelector(\".hero-section\").style.display = \"block\";\n    });\n\n    document.querySelectorAll(\".option-btn\").forEach((button) => {\n        button.addEventListener(\"click\", (e) => {\n            const option = e.target.dataset.option;\n            console.log(\"Option gew\u00e4hlt:\", option); \/\/ Debugging\n            loadForm(option);\n        });\n    });\n\n    function loadForm(option) {\n        const formContainer = document.getElementById(\"form-container\");\n        const url = `${ajax_object.plugin_url}form-${option}.php`;\n\n        console.log(\"Formular URL:\", url); \/\/ Debugging\n\n        fetch(url)\n            .then((response) => {\n                if (!response.ok) {\n                    throw new Error(`Fehler beim Laden von form-${option}.php: ${response.statusText}`);\n                }\n                return response.text();\n            })\n            .then((html) => {\n                console.log(\"Formular geladen:\", html); \/\/ Debugging\n                formContainer.innerHTML = html;\n                document.getElementById(\"step-2\").style.display = \"none\";\n                formContainer.style.display = \"block\";\n            })\n            .catch((error) => {\n                console.error(\"Fehler beim Laden des Formulars:\", error);\n            });\n    }\n<\/script>\n<div id=\"form-container\" style=\"display: none;\"><\/div><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9991","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pv-montage-team.work-progress.info\/index.php\/wp-json\/wp\/v2\/pages\/9991","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pv-montage-team.work-progress.info\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pv-montage-team.work-progress.info\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pv-montage-team.work-progress.info\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pv-montage-team.work-progress.info\/index.php\/wp-json\/wp\/v2\/comments?post=9991"}],"version-history":[{"count":21,"href":"https:\/\/pv-montage-team.work-progress.info\/index.php\/wp-json\/wp\/v2\/pages\/9991\/revisions"}],"predecessor-version":[{"id":10017,"href":"https:\/\/pv-montage-team.work-progress.info\/index.php\/wp-json\/wp\/v2\/pages\/9991\/revisions\/10017"}],"wp:attachment":[{"href":"https:\/\/pv-montage-team.work-progress.info\/index.php\/wp-json\/wp\/v2\/media?parent=9991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}