Kilometerregistratie Hondenuitlaatservice<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 20px;\n background: #f5f7fa;\n color: #333;\n }\n h1 {\n text-align: center;\n color: #2c3e50;\n }\n .box {\n background: white;\n padding: 15px;\n margin-bottom: 20px;\n border-radius: 10px;\n box-shadow: 0 2px 6px rgba(0,0,0,0.1);\n }\n label {\n display: block;\n margin-top: 10px;\n font-weight: bold;\n }\n input, select, button {\n padding: 8px;\n margin-top: 5px;\n width: 100%;\n box-sizing: border-box;\n border: 1px solid #ccc;\n border-radius: 5px;\n }\n button {\n background: #3498db;\n color: white;\n cursor: pointer;\n font-weight: bold;\n }\n button:hover {\n background: #2980b9;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n margin-top: 15px;\n }\n th, td {\n border: 1px solid #ddd;\n padding: 8px;\n text-align: left;\n }\n th {\n background: #3498db;\n color: white;\n }\n details {\n margin-bottom: 20px;\n }\n summary {\n font-weight: bold;\n cursor: pointer;\n padding: 8px;\n background: #ecf0f1;\n border-radius: 6px;\n }\n .delete-btn {\n background: #e74c3c;\n color: white;\n border: none;\n padding: 5px 10px;\n border-radius: 5px;\n cursor: pointer;\n }\n .delete-btn:hover {\n background: #c0392b;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Kilometerregistratie Hondenuitlaatservice<\/h1>\n\n \n <div class=\"box\">\n <h2>Rit invoeren<\/h2>\n <label for=\"date\">Datum:<\/label>\n <input type=\"date\" id=\"date\">\n\n <label for=\"dog\">Hond:<\/label>\n <select id=\"dog\"><\/select>\n\n <label for=\"startKm\">Beginstand km:<\/label>\n <input type=\"number\" id=\"startKm\">\n\n <label for=\"endKm\">Eindstand km:<\/label>\n <input type=\"number\" id=\"endKm\">\n\n <button onclick=\"addTrip()\">Rit toevoegen<\/button>\n <\/div>\n\n \n <details>\n <summary>Hondenbestand beheren<\/summary>\n <div class=\"box\">\n <label for=\"dogName\">Naam hond:<\/label>\n <input type=\"text\" id=\"dogName\">\n\n <label for=\"dogAddress\">Adres:<\/label>\n <input type=\"text\" id=\"dogAddress\">\n\n <button onclick=\"addDog()\">Hond toevoegen\/wijzigen<\/button>\n <table id=\"dogsTable\">\n <thead>\n <tr><th>Naam<\/th><th>Adres<\/th><th>Actie<\/th><\/tr>\n <\/thead>\n <tbody><\/tbody>\n <\/table>\n <\/div>\n <\/details>\n\n \n <details>\n <summary>Weekoverzicht & Export<\/summary>\n <div class=\"box\">\n <table id=\"tripsTable\">\n <thead>\n <tr><th>Datum<\/th><th>Hond<\/th><th>Adres<\/th><th>Beginstand<\/th><th>Eindstand<\/th><th>Gereden km<\/th><\/tr>\n <\/thead>\n <tbody><\/tbody>\n <\/table>\n <button onclick=\"downloadXLS()\">Exporteer naar Excel<\/button>\n <\/div>\n <\/details>\n\n <script>\n let dogs = JSON.parse(localStorage.getItem(\"dogs\") || \"{}\");\n let trips = JSON.parse(localStorage.getItem(\"trips\") || \"[]\");\n\n function saveData() {\n localStorage.setItem(\"dogs\", JSON.stringify(dogs));\n localStorage.setItem(\"trips\", JSON.stringify(trips));\n }\n\n function refreshDogs() {\n let select = document.getElementById(\"dog\");\n select.innerHTML = \"\";\n Object.keys(dogs).forEach(name => {\n let option = document.createElement(\"option\");\n option.value = name;\n option.textContent = name;\n select.appendChild(option);\n });\n\n let tbody = document.getElementById(\"dogsTable\").querySelector(\"tbody\");\n tbody.innerHTML = \"\";\n Object.entries(dogs).forEach(([name, address]) => {\n let row = document.createElement(\"tr\");\n row.innerHTML = `<td>${name}<\/td><td>${address}<\/td>\n <td><button class=\"delete-btn\" onclick=\"deleteDog('${name}')\">Verwijderen<\/button><\/td>`;\n tbody.appendChild(row);\n });\n }\n\n function refreshTrips() {\n let tbody = document.getElementById(\"tripsTable\").querySelector(\"tbody\");\n tbody.innerHTML = \"\";\n trips.forEach(trip => {\n let row = `<tr>\n <td>${trip.date}<\/td>\n <td>${trip.dog}<\/td>\n <td>${trip.address}<\/td>\n <td>${trip.startKm}<\/td>\n <td>${trip.endKm}<\/td>\n <td>${trip.endKm - trip.startKm}<\/td>\n <\/tr>`;\n tbody.innerHTML += row;\n });\n\n \/\/ Vul automatisch de beginstand in bij nieuwe rit\n document.getElementById(\"startKm\").value = trips.length > 0 ? trips[trips.length - 1].endKm : \"\";\n }\n\n function addDog() {\n let name = document.getElementById(\"dogName\").value.trim();\n let address = document.getElementById(\"dogAddress\").value.trim();\n if (!name || !address) {\n alert(\"Vul zowel naam als adres in!\");\n return;\n }\n dogs[name] = address;\n saveData();\n refreshDogs();\n document.getElementById(\"dogName\").value = \"\";\n document.getElementById(\"dogAddress\").value = \"\";\n }\n\n function deleteDog(name) {\n if (confirm(`Weet je zeker dat je ${name} wilt verwijderen?`)) {\n delete dogs[name];\n saveData();\n refreshDogs();\n }\n }\n\n function addTrip() {\n let date = document.getElementById(\"date\").value;\n let dog = document.getElementById(\"dog\").value;\n let startKm = parseFloat(document.getElementById(\"startKm\").value);\n let endKm = parseFloat(document.getElementById(\"endKm\").value);\n\n if (!date || !dog || isNaN(startKm) || isNaN(endKm)) {\n alert(\"Vul alle velden in!\");\n return;\n }\n if (endKm < startKm) {\n alert(\"Eindstand kan niet kleiner zijn dan beginstand!\");\n return;\n }\n\n let address = dogs[dog] || \"\";\n trips.push({ date, dog, address, startKm, endKm });\n saveData();\n refreshTrips();\n document.getElementById(\"endKm\").value = \"\";\n }\n\n function downloadXLS() {\n let csv = \"Datum\\tHond\\tAdres\\tBeginstand\\tEindstand\\tGereden km\\n\";\n trips.forEach(t => {\n csv += `${t.date}\\t${t.dog}\\t${t.address}\\t${t.startKm}\\t${t.endKm}\\t${t.endKm - t.startKm}\\n`;\n });\n\n const blob = new Blob([csv], { type: \"application\/vnd.ms-excel\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = \"ritten_week.xls\";\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n }\n\n refreshDogs();\n refreshTrips();\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Kilometerregistratie Hondenuitlaatservice Kilometerregistratie Hondenuitlaatservice Rit invoeren Datum: Hond: Beginstand km: Eindstand km: Rit toevoegen Hondenbestand beheren Naam hond: Adres: Hond toevoegen\/wijzigen Naam Adres Actie Weekoverzicht & Export Datum Hond Adres Beginstand Eindstand Gereden km Exporteer naar Excel<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-4942","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/pages\/4942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/comments?post=4942"}],"version-history":[{"count":3,"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/pages\/4942\/revisions"}],"predecessor-version":[{"id":4946,"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/pages\/4942\/revisions\/4946"}],"wp:attachment":[{"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/media?parent=4942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\n\n\n \n Kilometerregistratie Hondenuitlaatservice<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 20px;\n background: #f5f7fa;\n color: #333;\n }\n h1 {\n text-align: center;\n color: #2c3e50;\n }\n .box {\n background: white;\n padding: 15px;\n margin-bottom: 20px;\n border-radius: 10px;\n box-shadow: 0 2px 6px rgba(0,0,0,0.1);\n }\n label {\n display: block;\n margin-top: 10px;\n font-weight: bold;\n }\n input, select, button {\n padding: 8px;\n margin-top: 5px;\n width: 100%;\n box-sizing: border-box;\n border: 1px solid #ccc;\n border-radius: 5px;\n }\n button {\n background: #3498db;\n color: white;\n cursor: pointer;\n font-weight: bold;\n }\n button:hover {\n background: #2980b9;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n margin-top: 15px;\n }\n th, td {\n border: 1px solid #ddd;\n padding: 8px;\n text-align: left;\n }\n th {\n background: #3498db;\n color: white;\n }\n details {\n margin-bottom: 20px;\n }\n summary {\n font-weight: bold;\n cursor: pointer;\n padding: 8px;\n background: #ecf0f1;\n border-radius: 6px;\n }\n .delete-btn {\n background: #e74c3c;\n color: white;\n border: none;\n padding: 5px 10px;\n border-radius: 5px;\n cursor: pointer;\n }\n .delete-btn:hover {\n background: #c0392b;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Kilometerregistratie Hondenuitlaatservice<\/h1>\n\n \n <div class=\"box\">\n <h2>Rit invoeren<\/h2>\n <label for=\"date\">Datum:<\/label>\n <input type=\"date\" id=\"date\">\n\n <label for=\"dog\">Hond:<\/label>\n <select id=\"dog\"><\/select>\n\n <label for=\"startKm\">Beginstand km:<\/label>\n <input type=\"number\" id=\"startKm\">\n\n <label for=\"endKm\">Eindstand km:<\/label>\n <input type=\"number\" id=\"endKm\">\n\n <button onclick=\"addTrip()\">Rit toevoegen<\/button>\n <\/div>\n\n \n <details>\n <summary>Hondenbestand beheren<\/summary>\n <div class=\"box\">\n <label for=\"dogName\">Naam hond:<\/label>\n <input type=\"text\" id=\"dogName\">\n\n <label for=\"dogAddress\">Adres:<\/label>\n <input type=\"text\" id=\"dogAddress\">\n\n <button onclick=\"addDog()\">Hond toevoegen\/wijzigen<\/button>\n <table id=\"dogsTable\">\n <thead>\n <tr><th>Naam<\/th><th>Adres<\/th><th>Actie<\/th><\/tr>\n <\/thead>\n <tbody><\/tbody>\n <\/table>\n <\/div>\n <\/details>\n\n \n <details>\n <summary>Weekoverzicht & Export<\/summary>\n <div class=\"box\">\n <table id=\"tripsTable\">\n <thead>\n <tr><th>Datum<\/th><th>Hond<\/th><th>Adres<\/th><th>Beginstand<\/th><th>Eindstand<\/th><th>Gereden km<\/th><\/tr>\n <\/thead>\n <tbody><\/tbody>\n <\/table>\n <button onclick=\"downloadXLS()\">Exporteer naar Excel<\/button>\n <\/div>\n <\/details>\n\n <script>\n let dogs = JSON.parse(localStorage.getItem(\"dogs\") || \"{}\");\n let trips = JSON.parse(localStorage.getItem(\"trips\") || \"[]\");\n\n function saveData() {\n localStorage.setItem(\"dogs\", JSON.stringify(dogs));\n localStorage.setItem(\"trips\", JSON.stringify(trips));\n }\n\n function refreshDogs() {\n let select = document.getElementById(\"dog\");\n select.innerHTML = \"\";\n Object.keys(dogs).forEach(name => {\n let option = document.createElement(\"option\");\n option.value = name;\n option.textContent = name;\n select.appendChild(option);\n });\n\n let tbody = document.getElementById(\"dogsTable\").querySelector(\"tbody\");\n tbody.innerHTML = \"\";\n Object.entries(dogs).forEach(([name, address]) => {\n let row = document.createElement(\"tr\");\n row.innerHTML = `<td>${name}<\/td><td>${address}<\/td>\n <td><button class=\"delete-btn\" onclick=\"deleteDog('${name}')\">Verwijderen<\/button><\/td>`;\n tbody.appendChild(row);\n });\n }\n\n function refreshTrips() {\n let tbody = document.getElementById(\"tripsTable\").querySelector(\"tbody\");\n tbody.innerHTML = \"\";\n trips.forEach(trip => {\n let row = `<tr>\n <td>${trip.date}<\/td>\n <td>${trip.dog}<\/td>\n <td>${trip.address}<\/td>\n <td>${trip.startKm}<\/td>\n <td>${trip.endKm}<\/td>\n <td>${trip.endKm - trip.startKm}<\/td>\n <\/tr>`;\n tbody.innerHTML += row;\n });\n\n \/\/ Vul automatisch de beginstand in bij nieuwe rit\n document.getElementById(\"startKm\").value = trips.length > 0 ? trips[trips.length - 1].endKm : \"\";\n }\n\n function addDog() {\n let name = document.getElementById(\"dogName\").value.trim();\n let address = document.getElementById(\"dogAddress\").value.trim();\n if (!name || !address) {\n alert(\"Vul zowel naam als adres in!\");\n return;\n }\n dogs[name] = address;\n saveData();\n refreshDogs();\n document.getElementById(\"dogName\").value = \"\";\n document.getElementById(\"dogAddress\").value = \"\";\n }\n\n function deleteDog(name) {\n if (confirm(`Weet je zeker dat je ${name} wilt verwijderen?`)) {\n delete dogs[name];\n saveData();\n refreshDogs();\n }\n }\n\n function addTrip() {\n let date = document.getElementById(\"date\").value;\n let dog = document.getElementById(\"dog\").value;\n let startKm = parseFloat(document.getElementById(\"startKm\").value);\n let endKm = parseFloat(document.getElementById(\"endKm\").value);\n\n if (!date || !dog || isNaN(startKm) || isNaN(endKm)) {\n alert(\"Vul alle velden in!\");\n return;\n }\n if (endKm < startKm) {\n alert(\"Eindstand kan niet kleiner zijn dan beginstand!\");\n return;\n }\n\n let address = dogs[dog] || \"\";\n trips.push({ date, dog, address, startKm, endKm });\n saveData();\n refreshTrips();\n document.getElementById(\"endKm\").value = \"\";\n }\n\n function downloadXLS() {\n let csv = \"Datum\\tHond\\tAdres\\tBeginstand\\tEindstand\\tGereden km\\n\";\n trips.forEach(t => {\n csv += `${t.date}\\t${t.dog}\\t${t.address}\\t${t.startKm}\\t${t.endKm}\\t${t.endKm - t.startKm}\\n`;\n });\n\n const blob = new Blob([csv], { type: \"application\/vnd.ms-excel\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = \"ritten_week.xls\";\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n }\n\n refreshDogs();\n refreshTrips();\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Kilometerregistratie Hondenuitlaatservice Kilometerregistratie Hondenuitlaatservice Rit invoeren Datum: Hond: Beginstand km: Eindstand km: Rit toevoegen Hondenbestand beheren Naam hond: Adres: Hond toevoegen\/wijzigen Naam Adres Actie Weekoverzicht & Export Datum Hond Adres Beginstand Eindstand Gereden km Exporteer naar Excel<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-4942","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/pages\/4942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/comments?post=4942"}],"version-history":[{"count":3,"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/pages\/4942\/revisions"}],"predecessor-version":[{"id":4946,"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/pages\/4942\/revisions\/4946"}],"wp:attachment":[{"href":"https:\/\/bertaltena.nl\/index.php\/wp-json\/wp\/v2\/media?parent=4942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}