{"id":13,"date":"2025-08-05T17:42:05","date_gmt":"2025-08-05T15:42:05","guid":{"rendered":"https:\/\/dev.ali-ci.de\/?page_id=13"},"modified":"2025-08-27T17:52:53","modified_gmt":"2025-08-27T15:52:53","slug":"unsere-fahrzeuge","status":"publish","type":"page","link":"https:\/\/dev.ali-ci.de\/?page_id=13","title":{"rendered":"Unsere Fahrzeuge"},"content":{"rendered":"\n<div class=\"wp-block-alici-container\">\n    <!-- loading screen -->\n    <div id=\"loading\">\n        <div class=\"wp-block-alici-card\">\n            <img decoding=\"async\" src=\"\" class=\"skeleton\">\n            <div class=\"wp-block-alici-details\">\n                <div class=\"skeleton wp-block-alici-header\"><\/div>\n                <div class=\"skeleton description\"><\/div>\n                <div class=\"wp-block-alici-content\">\n                    <p class=\"skeleton\"><\/p>\n                    <p class=\"skeleton\"><\/p>\n                    <p class=\"skeleton\"><\/p>\n                    <p class=\"skeleton\"><\/p>\n                    <p class=\"skeleton\"><\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"wp-block-alici-card\">\n            <img decoding=\"async\" src=\"\" class=\"skeleton\">\n            <div class=\"wp-block-alici-details\">\n                <div class=\"skeleton wp-block-alici-header\"><\/div>\n                <div class=\"skeleton description\"><\/div>\n                <div class=\"wp-block-alici-content\">\n                    <p class=\"skeleton\"><\/p>\n                    <p class=\"skeleton\"><\/p>\n                    <p class=\"skeleton\"><\/p>\n                    <p class=\"skeleton\"><\/p>\n                    <p class=\"skeleton\"><\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- container for the actual content -->\n    <div id=\"content\"><\/div>\n\n    <div id=\"loadmore\" style=\"text-align: right; margin: 20px; display: none;\">\n        <a id=\"loadmoreButton\" class=\"wp-block-alici-button\"\n            style=\"background-color: #0b355f; text-align: right; color: white\">\n            <span id=\"btnSpinner\" class=\"mini-spinner hidden\" aria-hidden=\"true\"><\/span>\n            Mehr anzeigen\n        <\/a>\n    <\/div>\n<\/div>\n\n<script>\n    var current;\n\n    document.addEventListener(\"DOMContentLoaded\", function () {\n        loadData(1, 20);\n    });\n\n    function loadData(pageNumber, pageSize) {\n        const baseUrl = \"https:\/\/dev.ali-ci.de\/index.php?rest_route=\/alici\/mobility\/v1\/data\";\n        const url = `${baseUrl}&pageNumber=${pageNumber}&pageSize=${pageSize}`;\n\n        fetch(url)\n            .then(response => response.json())\n            .then(data => {\n                current = data;\n                const loading = document.getElementById('loading');\n                const loadmore = document.getElementById('loadmore');\n                const loadmoreButton = document.getElementById('loadmoreButton');\n                const content = document.getElementById('content');\n                const spinner = document.getElementById('btnSpinner');\n\n                loading.style.display = 'none';\n                loadmore.style.display = 'none';\n                content.style.display = 'block';\n\n                data[\"cars\"].forEach(item => {\n                    \/\/ Create wrapper\n                    const card = document.createElement('div');\n                    card.className = 'wp-block-alici-card';\n\n                    \/\/ Image\n                    const img = document.createElement('img');\n                    img.src = item.image;\n                    img.alt = `${item.model} ${item.make}`;\n                    card.appendChild(img);\n\n                    \/\/ Details container\n                    const details = document.createElement('div');\n                    details.className = 'wp-block-alici-details';\n\n                    \/\/ Header (model + make + price)\n                    const header = document.createElement('div');\n                    header.className = 'wp-block-alici-header';\n\n                    const title = document.createElement('h2');\n                    title.textContent = `${item.model} ${item.make}`;\n\n                    const price = document.createElement('div');\n                    price.className = 'wp-block-alici-price';\n                    price.textContent = `${item.price} \u20ac`;\n\n                    header.appendChild(title);\n                    header.appendChild(price);\n\n                    \/\/ Description\n                    const desc = document.createElement('div');\n                    desc.textContent = item.modelDescription;\n\n                    \/\/ Content details\n                    const info = document.createElement('div');\n                    info.className = 'wp-block-alici-content';\n\n                    info.innerHTML = `\n                        <p>Erstzulassung: ${item.firstRegistration}<\/p>\n                        <p>Kilometer: ${item.mileage} km<\/p>\n                        <p>Leistung: ${item.power_kw} kW (${item.power_ps} PS)<\/p>\n                        <p>Kraftstoffart: ${item.fuel}<\/p>\n                        <p>Getriebe: ${item.gearbox}<\/p>\n                    `;\n\n                    \/\/ Footer with link\n                    const footer = document.createElement('div');\n                    footer.className = 'wp-block-alici-footer';\n\n                    const link = document.createElement('a');\n                    link.href = item.url;\n                    link.target = '_blank';\n                    link.className = 'wp-block-alici-button';\n                    link.textContent = 'Auf Mobile.de ansehen';\n\n                    footer.appendChild(link);\n\n                    \/\/ Assemble card\n                    details.appendChild(header);\n                    details.appendChild(desc);\n                    details.appendChild(info);\n                    details.appendChild(footer);\n\n                    card.appendChild(details);\n\n                    \/\/ Add to page\n                    content.appendChild(card);\n                });\n\n                if (data[\"currentPage\"] < data[\"maxPages\"]) {\n                    loadmore.style.display = 'block';\n                    loadmoreButton.addEventListener('click', loadMore);\n                    btnSpinner.classList.add('hidden');\n                    loadmoreButton.classList.remove('disable');\n                } else {\n                    loadmore.style.display = 'none';\n                }\n            })\n            .catch(error => {\n                loading.style.display = 'none';\n                content.innerHTML = \"Error loading data.\";\n                content.innerHTML = '<div style=\"text-align:center;\">Es ist ein Fehler aufgetreten.<\/div>';\n                console.error(\"REST API error:\", error);\n            });\n    }\n\n    function loadMore() {\n        \/\/ increase current page\n        currentPage = current.currentPage + 1\n        btnSpinner.classList.remove('hidden');\n        loadmoreButton.classList.add('disable');\n        loadData(currentPage, current.pageSize);\n    }\n<\/script>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dev.ali-ci.de\/index.php?rest_route=\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.ali-ci.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.ali-ci.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.ali-ci.de\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.ali-ci.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13"}],"version-history":[{"count":12,"href":"https:\/\/dev.ali-ci.de\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":333,"href":"https:\/\/dev.ali-ci.de\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions\/333"}],"wp:attachment":[{"href":"https:\/\/dev.ali-ci.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}