https://hessischer-pflegemonitor.de/wp-content/themes/hpm/blocks/hesse-map/hesse-map.js?ver=0.1.6

1function toggleHighlight(area, on) {
2    if (on) {
3        area.classList.add('highlight');
4    } else {
5        area.classList.remove('highlight');
6    }
7}
8
9function highlightGebiet(area, on) {
10    if (area.dataset.level === 'vg') {
11        // Alle Regionen im VG hervorheben
12        var regions = JSON.parse(area.dataset.regions_in_vg);
13        regions.forEach((region_id) => {
14            var region = area.closest('.map').querySelector('svg [data-region="' + region_id + '"]');
15            if (region) {
16                toggleHighlight(region, on);
17            }
18        });
19    } else {
20        // Einzelne Region hervorheben
21        toggleHighlight(area, on);
22    }
23}
24
25function pickDistrict(area) {
26    var mapContainer = area.closest('.map');
27    var show_table = mapContainer.classList.contains('show_table');
28    if (!show_table) {
29        return;
30    }
31
32    mapContainer.querySelector('svg').querySelectorAll('.selected').forEach((selected) => {
33        selected.classList.remove('selected');
34    });
35
36    if (area.dataset.level === 'vg') {
37        var regions = JSON.parse(area.dataset.regions_in_vg);
38        regions.forEach((region_id) => {
39            var region = mapContainer.querySelector('svg [data-region="' + region_id + '"]');
40            if (region) {
41                region.classList.add('selected');
42            }
43        });
44    } else {
45        // Einzelne Region
46        area.classList.add('selected');
47    }
48
49    var tableOfValues = mapContainer.querySelector('.table-of-values');
50    tableOfValues.classList.remove('hidden');
51    tableOfValues.querySelector('.region_name').innerHTML = area.dataset.title;
52    var values = JSON.parse(area.dataset.values);
53    for (var i = 0; i <= values.length; i++) {
54        var field = tableOfValues.querySelector('.values-' + i);
55        if (field != null) {
56            field.innerHTML = values[i];
57        }
58    }
59    mapContainer.querySelector('.back-to-default')?.classList.remove('hidden');
60    var hint = mapContainer.querySelector('.show-table-hint');
61    if (hint) {
62        hint.classList.add('hidden');
63    }
64
65    // Überprüfen, ob die Tabelle sichtbar ist
66    const rect = tableOfValues.getBoundingClientRect();
67    const isVisible = rect.top >= 0 && rect.bottom <= window.innerHeight;
68
69    // Nur scrollen, wenn die Tabelle nicht sichtbar ist
70    if (!isVisible) {
71        tableOfValues.scrollIntoView({ behavior: 'smooth', block: 'end' });
72    }
73}
74
75function resetDistrict(table_id) {
76    var mapContainer = document.querySelector('#map-' + table_id).closest('.map');
77    var svg = mapContainer.querySelector('svg');
78    svg.querySelectorAll('.selected').forEach((selected) => {
79        selected.classList.remove('selected');
80    });
81
82    var tableOfValues = mapContainer.querySelector('.table-of-values');
83    var values = svg.dataset.values ? JSON.parse(svg.dataset.values) : null;
84    if (mapContainer.classList.contains('show_table') === false || !values) {
85        tableOfValues.classList.add('hidden');
86
87        var hint = mapContainer.querySelector('.show-table-hint');
88        if (hint) {
89            hint.classList.remove('hidden');
90        }
91
92        return;
93    }
94
95    tableOfValues.querySelector('.region_name').innerHTML = svg.dataset.title ?? svg.dataset.region_name ?? "Hessen";
96    if (Array.isArray(values)) {
97        for (var i = 0; i <= values.length; i++) {
98            var field = tableOfValues.querySelector('.values-' + i);
99            if (field != null) {
100                field.innerHTML = values[i];
101            }
102        }
103    } else {
104        tableOfValues.querySelectorAll('.values-0, .values-1, .values-2, .values-3, .values-4, .values-5, .values-6, .values-7').forEach((field) => {
105            field.innerHTML = "";
106        });
107        tableOfValues.classList.add('hidden');
108    }
109    mapContainer.querySelector('.back-to-default').classList.add('hidden');
110
111    var hint = mapContainer.querySelector('.show-table-hint');
112    if (hint) {
113        hint.classList.remove('hidden');
114    }
115}
116
117window.addEventListener('load', function () {
118    let mainNavigation = document.getElementById('primary-navigation')
119    let mainNavigationToggle = document.getElementById('primary-menu-toggle')
120
121    if (mainNavigation && mainNavigationToggle) {
122        mainNavigationToggle.addEventListener('click', function (e) {
123            e.preventDefault()
124            mainNavigation.classList.toggle('hidden')
125        })
126    }
127
128    // Tooltip-Element erzeugen
129    const tooltip = document.createElement('div');
130    tooltip.className = 'tooltip absolute z-10 inline-block px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg shadow-xs';
131    document.body.appendChild(tooltip);
132
133    // Element, das den Tooltip auslösen soll
134    const triggers = document.querySelectorAll('.allow_tooltips .district');
135

136    triggers.forEach((trigger) => trigger.addEventListener('mouseenter', (e) => {
137        tooltip.style.left = (e.pageX + 10) + 'px';
138        tooltip.style.top = (e.pageY + 10) + 'px';
139        tooltip.style.display = 'block';
140        const mapContainer = e.target.closest('.map');
141        // innerhalb dieses Containers die table-of-values finden (Fallback global)
142        const tableEl = mapContainer ? mapContainer.querySelector('.table-of-values') : null;
143        tooltip.innerHTML = tableEl ? tableEl.innerHTML : "";
144        var values = JSON.parse(e.target.dataset.values);
145        tooltip.querySelector('.region_name').innerHTML = e.target.dataset.title;
146        for (var i = 0; i <= values.length; i++) {
147            var field = tooltip.querySelector('.values-' + i);
148            if (field != null) {
149                field.innerHTML = values[i];
150            }
151        }
152    }));
153
154    triggers.forEach((trigger) => trigger.addEventListener('mousemove', (e) => {
155        tooltip.style.left = (e.pageX + 10) + 'px';
156        tooltip.style.top = (e.pageY + 10) + 'px';
157    }));
158
159    triggers.forEach((trigger) => trigger.addEventListener('mouseleave', () => {
160        tooltip.style.display = 'none';
161        tooltip.innerHTML = "";
162    }));
163
164    function printTableOfValues(region) {
165        var values = JSON.parse(region.values);
166        document.querySelector('.table-of-values .region_name').innerHTML = region.title;
167        for (var i = 0; i <= values.length; i++) {
168            var field = document.querySelector('.table-of-values .values-' + i);
169            if (field != null) {
170                field.innerHTML = values[i];
171            }
172        }
173    }
174
175    document.querySelectorAll('.has-default-values').forEach((table) => {
176        var dataset = table.closest('.map').querySelector('svg').dataset;
177        var defaultValues = JSON.parse(dataset.values);
178        if (Array.isArray(defaultValues)) {
179            for (var i = 0; i < defaultValues.length; i++) {
180                var field = table.querySelector('.values-' + i);
181                if (field != null) {
182                    field.innerHTML = defaultValues[i];
183                }
184            }
185        }
186        table.querySelector('.region_name').innerHTML = dataset.title ?? dataset.region_name ?? "Hessen";
187    });
188});