blob: 70810e58d61b3a912f0b7e0a37be97149ab89f6c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Four Sections Layout</title>
<link rel="stylesheet" href="css/style.css">
<script type="module" src="js/main.js"></script>
</head>
<body>
<div class="container">
<div class="section overview_control" id="overview_control"></div>
<div class="section notifications" id="notifications"></div>
<div class="section lfv_selector" id="lfv_selector"></div>
<div class="section map" id="map"></div>
</div>
<script>
// Function to include HTML content from given URL into specified element
async function includeHTML(url, elementId) {
const response = await fetch(url);
const html = await response.text();
document.getElementById(elementId).innerHTML = html;
}
// Function to handle item click and load respective HTML page
function handleItemClick(event) {
const target = event.target.getAttribute('data-target');
includeHTML(`sections/lfv/${target}.html`, 'overview_control');
}
// Include HTML content into respective div elements
// includeHTML('sections/overview_control.html', 'overview_control');
includeHTML('sections/notifications.html', 'notifications');
includeHTML('sections/lfv_selector.html', 'lfv_selector');
includeHTML('sections/map.html', 'map');
// Add event listener to each item in the list (event delegation)
document.getElementById('lfv_selector').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
handleItemClick(event);
}
});
</script>
</body>
</html>
|