inventory/index.php at main · pwlw/inventory · GitHub

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<?php

session_start();
require_once __DIR__ . '/includes/Auth.php';
require_once __DIR__ . '/includes/Database.php';
$hasActions = isset($_SESSION['username']);

try {
    $pdo = Database::connect();

    // Fetch geosite list
    $stmt = $pdo->query("SELECT * FROM geosites");
    $geosites = $stmt->fetchAll(PDO::FETCH_ASSOC);

} catch (PDOException $e) {
    echo "An error occured when accessing the database: " . $e->getMessage();
    exit;
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Geosites and geodiversity sites</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        .geosites-table {
            flex: 3;
            border-collapse: collapse;
            width: 100%;
        }
        #map {
            flex: 2;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="geosite-page-container">
    <div class="header-wrapper" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
		<h1>Geosites and geodiversity sites</h1>
		<div class="top-buttons">
        	<?php if (isset($_SESSION['username'])): ?>
            	<a href="change_password.php" class="btn-link">🔑 Change password</a>
            	<a href="logout.php" class="btn-link">🚪 Logout</a>
        	<?php else: ?>
            	<a href="login.php" class="btn-link">🔐 Login</a>
        	<?php endif; ?>
    	</div>
	</div>

	<?php if (isset($_SESSION['username'])): ?><p><a href="admin.php">➕ Add new geosite / geodiversity site</a></p><?php endif; ?>
    <?php if (count($geosites) > 0): ?>
    <div class="content-wrapper">
        <table id="geosites-table" class="geosites-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Protection status</th>
					<?php if ($hasActions): ?><th>Actions</th><?php endif; ?>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($geosites as $site): ?>
                    <tr data-fid="<?= $site['fid'] ?>">
                        <td>
                            <a href="geosite.php?fid=<?= $site['fid'] ?>">
                                <?= htmlspecialchars($site['name']) ?>
                            </a>
                        </td>
                        <td><?= htmlspecialchars($site['description']) ?></td>
                        <td><?= htmlspecialchars($site['protection_status']) ?></td>
                        <?php if ($hasActions): ?>
                            <td>
                            <a href="admin.php?id=<?= $site['fid'] ?>">Edit</a> |
                            <a href="delete_geosite.php?id=<?= $site['fid'] ?>" onclick="return confirm('Delete geosite?');">Delete</a>
                            </td>
                        <?php endif; ?>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>

        <div id="map"></div>
    </div>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        const geosites = <?= json_encode($geosites, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) ?>;

        const map = L.map('map');
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);

        const markers = {};
        const bounds = L.latLngBounds();

        geosites.forEach(site => {
            const latLng = [site.y_coordinate, site.x_coordinate];
            const marker = L.marker(latLng).addTo(map)
                .bindPopup(`<strong>${site.name}</strong>`);
            markers[site.fid] = marker;
            bounds.extend(latLng);

            // Highlighting
            marker.on('click', () => {
                document.querySelectorAll('#geosites-table tbody tr').forEach(row => {
                    row.classList.remove('highlight');
                });
                const row = document.querySelector(`#geosites-table tbody tr[data-fid='${site.fid}']`);
                if(row) {
                    row.classList.add('highlight');
                    // Map scrolling
                    row.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            });
        });

        map.fitBounds(bounds, { padding: [50, 50] });

        // Hover in table
        document.querySelectorAll('#geosites-table tbody tr').forEach(row => {
            row.addEventListener('mouseenter', () => {
                const fid = row.dataset.fid;
                if (markers[fid]) markers[fid].openPopup();
            });
            row.addEventListener('mouseleave', () => {
                const fid = row.dataset.fid;
                if (markers[fid]) markers[fid].closePopup();
            });
        });
    </script>
    <?php else: ?>
        <p>No geosites are available.</p>
    <?php endif; ?>
</div>
</body>
</html>