Services
Welcome to our website
T<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Golfkenttien Sää ja Vapaat Paikat</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- HTMX -->
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<style>
/* Mukautettu tyylit */
.weather-icon {
width: 40px;
height: 40px;
}
.slot-available {
color: green;
font-weight: bold;
}
.slot-full {
color: red;
font-weight: bold;
}
</style>
</head>
<body class="bg-gray-50">
<div class="container mx-auto p-4 max-w-6xl">
<!-- Otsikko -->
<header class="mb-8 text-center">
<h1 class="text-3xl font-bold text-blue-800">Golfkenttien Sää ja Vapaat Paikat</h1>
<p class="text-gray-600 mt-2">Päivitetty: <span id="last-updated">7.7.2026</span></p>
</header>
<!-- Päivämäärävalinta -->
<div class="mb-6 bg-white p-4 rounded-lg shadow">
<h2 class="text-xl font-semibold mb-4 text-gray-700">Valitse päivä</h2>
<div class="flex flex-wrap gap-2 justify-center">
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition "
onclick="filterByDate('2026-07-07')"
hx-get="#golf-courses"
hx-target="#golf-courses"
hx-swap="innerHTML"
>7.7.2026</button>
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
onclick="filterByDate('2026-07-08')"
hx-get="#golf-courses"
hx-target="#golf-courses"
hx-swap="innerHTML"
>8.7.2026</button>
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
onclick="filterByDate('2026-07-09')"
hx-get="#golf-courses"
hx-target="#golf-courses"
hx-swap="innerHTML"
>9.7.2026</button>
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
onclick="filterByDate('2026-07-10')"
hx-get="#golf-courses"
hx-target="#golf-courses"
hx-swap="innerHTML"
>10.7.2026</button>
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
onclick="filterByDate('2026-07-11')"
hx-get="#golf-courses"
hx-target="#golf-courses"
hx-swap="innerHTML"
>11.7.2026</button>
</div>
</div>
<!-- Säätaulukko -->
<div class="mb-8 bg-white p-4 rounded-lg shadow">
<h2 class="text-xl font-semibold mb-4 text-gray-700">Paikallissää</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white border">
<thead>
<tr class="bg-gray-100">
<th class="py-2 px-4 border">Golfkenttä</th>
<th class="py-2 px-4 border">Sijainti</th>
<th class="py-2 px-4 border">Aamu</th>
<th class="py-2 px-4 border">Iltapäivä</th>
<th class="py-2 px-4 border">Ilta</th>
<th class="py-2 px-4 border">Sateen todennäköisyys</th>
<th class="py-2 px-4 border">Sademäärä (mm)</th>
</tr>
</thead>
<tbody id="weather-table">
<!-- Säädata ladataan JavaScriptillä -->
</tbody>
</table>
</div>
</div>
<!-- Golfkenttätaulukko -->
<div class="mb-8 bg-white p-4 rounded-lg shadow">
<h2 class="text-xl font-semibold mb-4 text-gray-700">Vapaat Paikat</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white border">
<thead>
<tr class="bg-gray-100">
<th class="py-2 px-4 border">Golfkenttä</th>
<th class="py-2 px-4 border">Sijainti</th>
<th class="py-2 px-4 border">7.7.</th>
<th class="py-2 px-4 border">8.7.</th>
<th class="py-2 px-4 border">9.7.</th>
<th class="py-2 px-4 border">10.7.</th>
<th class="py-2 px-4 border">11.7.</th>
</tr>
</thead>
<tbody id="golf-courses">
<!-- Golfkenttädata ladataan JavaScriptillä -->
</tbody>
</table>
</div>
</div>
<!-- Karttanäkymä (valinnainen) -->
<div class="mb-8 bg-white p-4 rounded-lg shadow">
<h2 class="text-xl font-semibold mb-4 text-gray-700">Golfkenttien Sijainti</h2>
<div id="map" class="h-96 bg-gray-200 rounded"></div>
</div>
</div>
<!-- JavaScript -->
<script>
// Golfkenttien data (staattinen JSON)
const golfCourses = [
{
name: "Alastaro Golf, AlGo",
location: "Alastaro",
coords: [60.95, 23.15],
available_slots: {
"2026-07-07": 1,
"2026-07-08": 2,
"2026-07-09": 3,
"2026-07-10": 4,
"2026-07-11": 5
}
},
{
name: "Botniagolf, BG",
location: "Vaasa",
coords: [63.09, 21.61],
available_slots: {
"2026-07-07": 2,
"2026-07-08": 4,
"2026-07-09": 3,
"2026-07-10": 3,
"2026-07-11": 0
}
},
{
name: "Eerikkala Golf, EeG",
location: "Lohja",
coords: [60.25, 24.08],
available_slots: {
"2026-07-07": 6,
"2026-07-08": 2,
"2026-07-09": 4,
"2026-07-10": 2,
"2026-07-11": 6
}
},
{
name: "Eke Golf, EkeG",
location: "Espoo",
coords: [60.21, 24.65],
available_slots: {
"2026-07-07": 3,
"2026-07-08": 3,
"2026-07-09": 1,
"2026-07-10": 0,
"2026-07-11": 6
}
},
{
name: "Espoo Ringside Golf, ERG",
location: "Espoo",
coords: [60.18, 24.83],
available_slots: {
"2026-07-07": 2,
"2026-07-08": 0,
"2026-07-09": 2,
"2026-07-10": 2,
"2026-07-11": 4
}
}
];
// Säädata (simuloitu, todellisuudessa haettaisiin Ilmatieteenlaitoksen API:sta)
const weatherData = [
{
location: "Alastaro",
dates: {
"2026-07-07": { morning: "Pilvistä, sadetta", afternoon: "Sadekuuroja", evening: "Osittain selkenevää", rain_probability: "85%", rain_amount: "3–6 mm" },
"2026-07-08": { morning: "Pilvistä", afternoon: "Sadekuuroja", evening: "Poutaa", rain_probability: "70%", rain_amount: "2–4 mm" },
"2026-07-09": { morning: "Puolipilvistä", afternoon: "Pilvistä, sadetta", evening: "Selkenevää", rain_probability: "50%", rain_amount: "1–2 mm" },
"2026-07-10": { morning: "Pilvistä", afternoon: "Poutaa", evening: "Poutaa", rain_probability: "30%", rain_amount: "0–1 mm" },
"2026-07-11": { morning: "Selkeää", afternoon: "Puolipilvistä", evening: "Poutaa", rain_probability: "20%", rain_amount: "0 mm" }
}
},
{
location: "Vaasa",
dates: {
"2026-07-07": { morning: "Pilvistä, ajoittain sadetta", afternoon: "Sadekuuroja", evening: "Poutaa", rain_probability: "80%", rain_amount: "2–5 mm" },
"2026-07-08": { morning: "Pilvistä", afternoon: "Sadekuuroja", evening: "Poutaa", rain_probability: "65%", rain_amount: "1–3 mm" },
"2026-07-09": { morning: "Puolipilvistä", afternoon: "Sadetta", evening: "Selkenevää", rain_probability: "60%", rain_amount: "1–2 mm" },
"2026-07-10": { morning: "Pilvistä", afternoon: "Poutaa", evening: "Poutaa", rain_probability: "40%", rain_amount: "0–1 mm" },
"2026-07-11": { morning: "Selkeää", afternoon: "Puolipilvistä", evening: "Poutaa", rain_probability: "10%", rain_amount: "0 mm" }
}
},
{
location: "Lohja",
dates: {
"2026-07-07": { morning: "Pilvistä", afternoon: "Sadekuuroja", evening: "Poutaa", rain_probability: "75%", rain_amount: "2–4 mm" },
"2026-07-08": { morning: "Puolipilvistä", afternoon: "Pilvistä", evening: "Poutaa", rain_probability: "50%", rain_amount: "1–2 mm" },
"2026-07-09": { morning: "Selkeää", afternoon: "Puolipilvistä", evening: "Poutaa", rain_probability: "30%", rain_amount: "0–1 mm" },
"2026-07-10": { morning: "Pilvistä", afternoon: "Poutaa", evening: "Poutaa", rain_probability: "20%", rain_amount: "0 mm" },
"2026-07-11": { morning: "Selkeää", afternoon: "Selkeää", evening: "Poutaa", rain_probability: "5%", rain_amount: "0 mm" }
}
},
{
location: "Espoo",
dates: {
"2026-07-07": { morning: "Pilvistä, ajoittain sadetta", afternoon: "Sadekuuroja", evening: "Poutaa", rain_probability: "80%", rain_amount: "3–5 mm" },
"2026-07-08": { morning: "Puolipilvistä", afternoon: "Pilvistä", evening: "Poutaa", rain_probability: "60%", rain_amount: "1–3 mm" },
"2026-07-09": { morning: "Selkeää", afternoon: "Puolipilvistä", evening: "Poutaa", rain_probability: "40%", rain_amount: "0–1 mm" },
"2026-07-10": { morning: "Pilvistä", afternoon: "Poutaa", evening: "Poutaa", rain_probability: "20%", rain_amount: "0 mm" },
"2026-07-11": { morning: "Selkeää", afternoon: "Selkeää", evening: "Poutaa", rain_probability: "10%", rain_amount: "0 mm" }
}
}
];
// Alustetaan sivu
document.addEventListener('DOMContentLoaded', () => {
renderGolfCourses('2026-07-07');
renderWeatherTable('2026-07-07');
initMap();
});
// Piirretään golfkenttätaulukko
function renderGolfCourses(selectedDate) {
const tableBody = document.getElementById('golf-courses');
tableBody.innerHTML = '';
golfCourses.forEach(course => {
const row = document.createElement('tr');
row.innerHTML = `
<td class="py-2 px-4 border">${course.name}</td>
<td class="py-2 px-4 border">${course.location}</td>
<td class="py-2 px-4 border ${course.available_slots[selectedDate] > 0 ? 'slot-available' : 'slot-full'}">
${course.available_slots[selectedDate]}
</td>
<td class="py-2 px-4 border ${course.available_slots[getNextDate(selectedDate, 1)] > 0 ? 'slot-available' : 'slot-full'}">
${course.available_slots[getNextDate(selectedDate, 1)]}
</td>
<td class="py-2 px-4 border ${course.available_slots[getNextDate(selectedDate, 2)] > 0 ? 'slot-available' : 'slot-full'}">
${course.available_slots[getNextDate(selectedDate, 2)]}
</td>
<td class="py-2 px-4 border ${course.available_slots[getNextDate(selectedDate, 3)] > 0 ? 'slot-available' : 'slot-full'}">
${course.available_slots[getNextDate(selectedDate, 3)]}
</td>
<td class="py-2 px-4 border ${course.available_slots[getNextDate(selectedDate, 4)] > 0 ? 'slot-available' : 'slot-full'}">
${course.available_slots[getNextDate(selectedDate, 4)]}
</td>
`;
tableBody.appendChild(row);
});
}
// Piirretään säätaulukko
function renderWeatherTable(selectedDate) {
const tableBody = document.getElementById('weather-table');
tableBody.innerHTML = '';
golfCourses.forEach(course => {
const courseWeather = weatherData.find(w => w.location === course.location);
if (courseWeather) {
const weather = courseWeather.dates[selectedDate];
const row = document.createElement('tr');
row.innerHTML = `
<td class="py-2 px-4 border">${course.name}</td>
<td class="py-2 px-4 border">${course.location}</td>
<td class="py-2 px-4 border">${weather.morning}</td>
<td class="py-2 px-4 border">${weather.afternoon}</td>
<td class="py-2 px-4 border">${weather.evening}</td>
<td class="py-2 px-4 border">${weather.rain_probability}</td>
<td class="py-2 px-4 border">${weather.rain_amount}</td>
`;
tableBody.appendChild(row);
}
});
}
// Alustetaan kartta (Leaflet.js)
function initMap() {
const map = L.map('map').setView([62.0, 25.0], 6);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap'
}).addTo(map);
golfCourses.forEach(course => {
L.marker(course.coords)
.addTo(map)
.bindPopup(`<b>${course.name}</b><br>${course.location}`);
});
}
// Apufunktio: Seuraava päivämäärä
function getNextDate(date, daysToAdd) {
const currentDate = new Date(date);
currentDate.setDate(currentDate.getDate() + daysToAdd);
return currentDate.toISOString().split('T')[0];
}
// Suodatus päivämäärän mukaan
function filterByDate(date) {
document.getElementById('last-updated').textContent = date;
renderGolfCourses(date);
renderWeatherTable(date);
}
</script>
<!-- Leaflet.js kartalle -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</body>
</html>
<html lang="fi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Golfkenttien Sää ja Vapaat Paikat</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- HTMX -->
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<style>
/* Mukautettu tyylit */
.weather-icon {
width: 40px;
height: 40px;
}
.slot-available {
color: green;
font-weight: bold;
}
.slot-full {
color: red;
font-weight: bold;
}
</style>
</head>
<body class="bg-gray-50">
<div class="container mx-auto p-4 max-w-6xl">
<!-- Otsikko -->
<header class="mb-8 text-center">
<h1 class="text-3xl font-bold text-blue-800">Golfkenttien Sää ja Vapaat Paikat</h1>
<p class="text-gray-600 mt-2">Päivitetty: <span id="last-updated">7.7.2026</span></p>
</header>
<!-- Päivämäärävalinta -->
<div class="mb-6 bg-white p-4 rounded-lg shadow">
<h2 class="text-xl font-semibold mb-4 text-gray-700">Valitse päivä</h2>
<div class="flex flex-wrap gap-2 justify-center">
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition "
onclick="filterByDate('2026-07-07')"
hx-get="#golf-courses"
hx-target="#golf-courses"
hx-swap="innerHTML"
>7.7.2026</button>
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
onclick="filterByDate('2026-07-08')"
hx-get="#golf-courses"
hx-target="#golf-courses"
hx-swap="innerHTML"
>8.7.2026</button>
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
onclick="filterByDate('2026-07-09')"
hx-get="#golf-courses"
hx-target="#golf-courses"
hx-swap="innerHTML"
>9.7.2026</button>
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
onclick="filterByDate('2026-07-10')"
hx-get="#golf-courses"
hx-target="#golf-courses"
hx-swap="innerHTML"
>10.7.2026</button>
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
onclick="filterByDate('2026-07-11')"
hx-get="#golf-courses"
hx-target="#golf-courses"
hx-swap="innerHTML"
>11.7.2026</button>
</div>
</div>
<!-- Säätaulukko -->
<div class="mb-8 bg-white p-4 rounded-lg shadow">
<h2 class="text-xl font-semibold mb-4 text-gray-700">Paikallissää</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white border">
<thead>
<tr class="bg-gray-100">
<th class="py-2 px-4 border">Golfkenttä</th>
<th class="py-2 px-4 border">Sijainti</th>
<th class="py-2 px-4 border">Aamu</th>
<th class="py-2 px-4 border">Iltapäivä</th>
<th class="py-2 px-4 border">Ilta</th>
<th class="py-2 px-4 border">Sateen todennäköisyys</th>
<th class="py-2 px-4 border">Sademäärä (mm)</th>
</tr>
</thead>
<tbody id="weather-table">
<!-- Säädata ladataan JavaScriptillä -->
</tbody>
</table>
</div>
</div>
<!-- Golfkenttätaulukko -->
<div class="mb-8 bg-white p-4 rounded-lg shadow">
<h2 class="text-xl font-semibold mb-4 text-gray-700">Vapaat Paikat</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white border">
<thead>
<tr class="bg-gray-100">
<th class="py-2 px-4 border">Golfkenttä</th>
<th class="py-2 px-4 border">Sijainti</th>
<th class="py-2 px-4 border">7.7.</th>
<th class="py-2 px-4 border">8.7.</th>
<th class="py-2 px-4 border">9.7.</th>
<th class="py-2 px-4 border">10.7.</th>
<th class="py-2 px-4 border">11.7.</th>
</tr>
</thead>
<tbody id="golf-courses">
<!-- Golfkenttädata ladataan JavaScriptillä -->
</tbody>
</table>
</div>
</div>
<!-- Karttanäkymä (valinnainen) -->
<div class="mb-8 bg-white p-4 rounded-lg shadow">
<h2 class="text-xl font-semibold mb-4 text-gray-700">Golfkenttien Sijainti</h2>
<div id="map" class="h-96 bg-gray-200 rounded"></div>
</div>
</div>
<!-- JavaScript -->
<script>
// Golfkenttien data (staattinen JSON)
const golfCourses = [
{
name: "Alastaro Golf, AlGo",
location: "Alastaro",
coords: [60.95, 23.15],
available_slots: {
"2026-07-07": 1,
"2026-07-08": 2,
"2026-07-09": 3,
"2026-07-10": 4,
"2026-07-11": 5
}
},
{
name: "Botniagolf, BG",
location: "Vaasa",
coords: [63.09, 21.61],
available_slots: {
"2026-07-07": 2,
"2026-07-08": 4,
"2026-07-09": 3,
"2026-07-10": 3,
"2026-07-11": 0
}
},
{
name: "Eerikkala Golf, EeG",
location: "Lohja",
coords: [60.25, 24.08],
available_slots: {
"2026-07-07": 6,
"2026-07-08": 2,
"2026-07-09": 4,
"2026-07-10": 2,
"2026-07-11": 6
}
},
{
name: "Eke Golf, EkeG",
location: "Espoo",
coords: [60.21, 24.65],
available_slots: {
"2026-07-07": 3,
"2026-07-08": 3,
"2026-07-09": 1,
"2026-07-10": 0,
"2026-07-11": 6
}
},
{
name: "Espoo Ringside Golf, ERG",
location: "Espoo",
coords: [60.18, 24.83],
available_slots: {
"2026-07-07": 2,
"2026-07-08": 0,
"2026-07-09": 2,
"2026-07-10": 2,
"2026-07-11": 4
}
}
];
// Säädata (simuloitu, todellisuudessa haettaisiin Ilmatieteenlaitoksen API:sta)
const weatherData = [
{
location: "Alastaro",
dates: {
"2026-07-07": { morning: "Pilvistä, sadetta", afternoon: "Sadekuuroja", evening: "Osittain selkenevää", rain_probability: "85%", rain_amount: "3–6 mm" },
"2026-07-08": { morning: "Pilvistä", afternoon: "Sadekuuroja", evening: "Poutaa", rain_probability: "70%", rain_amount: "2–4 mm" },
"2026-07-09": { morning: "Puolipilvistä", afternoon: "Pilvistä, sadetta", evening: "Selkenevää", rain_probability: "50%", rain_amount: "1–2 mm" },
"2026-07-10": { morning: "Pilvistä", afternoon: "Poutaa", evening: "Poutaa", rain_probability: "30%", rain_amount: "0–1 mm" },
"2026-07-11": { morning: "Selkeää", afternoon: "Puolipilvistä", evening: "Poutaa", rain_probability: "20%", rain_amount: "0 mm" }
}
},
{
location: "Vaasa",
dates: {
"2026-07-07": { morning: "Pilvistä, ajoittain sadetta", afternoon: "Sadekuuroja", evening: "Poutaa", rain_probability: "80%", rain_amount: "2–5 mm" },
"2026-07-08": { morning: "Pilvistä", afternoon: "Sadekuuroja", evening: "Poutaa", rain_probability: "65%", rain_amount: "1–3 mm" },
"2026-07-09": { morning: "Puolipilvistä", afternoon: "Sadetta", evening: "Selkenevää", rain_probability: "60%", rain_amount: "1–2 mm" },
"2026-07-10": { morning: "Pilvistä", afternoon: "Poutaa", evening: "Poutaa", rain_probability: "40%", rain_amount: "0–1 mm" },
"2026-07-11": { morning: "Selkeää", afternoon: "Puolipilvistä", evening: "Poutaa", rain_probability: "10%", rain_amount: "0 mm" }
}
},
{
location: "Lohja",
dates: {
"2026-07-07": { morning: "Pilvistä", afternoon: "Sadekuuroja", evening: "Poutaa", rain_probability: "75%", rain_amount: "2–4 mm" },
"2026-07-08": { morning: "Puolipilvistä", afternoon: "Pilvistä", evening: "Poutaa", rain_probability: "50%", rain_amount: "1–2 mm" },
"2026-07-09": { morning: "Selkeää", afternoon: "Puolipilvistä", evening: "Poutaa", rain_probability: "30%", rain_amount: "0–1 mm" },
"2026-07-10": { morning: "Pilvistä", afternoon: "Poutaa", evening: "Poutaa", rain_probability: "20%", rain_amount: "0 mm" },
"2026-07-11": { morning: "Selkeää", afternoon: "Selkeää", evening: "Poutaa", rain_probability: "5%", rain_amount: "0 mm" }
}
},
{
location: "Espoo",
dates: {
"2026-07-07": { morning: "Pilvistä, ajoittain sadetta", afternoon: "Sadekuuroja", evening: "Poutaa", rain_probability: "80%", rain_amount: "3–5 mm" },
"2026-07-08": { morning: "Puolipilvistä", afternoon: "Pilvistä", evening: "Poutaa", rain_probability: "60%", rain_amount: "1–3 mm" },
"2026-07-09": { morning: "Selkeää", afternoon: "Puolipilvistä", evening: "Poutaa", rain_probability: "40%", rain_amount: "0–1 mm" },
"2026-07-10": { morning: "Pilvistä", afternoon: "Poutaa", evening: "Poutaa", rain_probability: "20%", rain_amount: "0 mm" },
"2026-07-11": { morning: "Selkeää", afternoon: "Selkeää", evening: "Poutaa", rain_probability: "10%", rain_amount: "0 mm" }
}
}
];
// Alustetaan sivu
document.addEventListener('DOMContentLoaded', () => {
renderGolfCourses('2026-07-07');
renderWeatherTable('2026-07-07');
initMap();
});
// Piirretään golfkenttätaulukko
function renderGolfCourses(selectedDate) {
const tableBody = document.getElementById('golf-courses');
tableBody.innerHTML = '';
golfCourses.forEach(course => {
const row = document.createElement('tr');
row.innerHTML = `
<td class="py-2 px-4 border">${course.name}</td>
<td class="py-2 px-4 border">${course.location}</td>
<td class="py-2 px-4 border ${course.available_slots[selectedDate] > 0 ? 'slot-available' : 'slot-full'}">
${course.available_slots[selectedDate]}
</td>
<td class="py-2 px-4 border ${course.available_slots[getNextDate(selectedDate, 1)] > 0 ? 'slot-available' : 'slot-full'}">
${course.available_slots[getNextDate(selectedDate, 1)]}
</td>
<td class="py-2 px-4 border ${course.available_slots[getNextDate(selectedDate, 2)] > 0 ? 'slot-available' : 'slot-full'}">
${course.available_slots[getNextDate(selectedDate, 2)]}
</td>
<td class="py-2 px-4 border ${course.available_slots[getNextDate(selectedDate, 3)] > 0 ? 'slot-available' : 'slot-full'}">
${course.available_slots[getNextDate(selectedDate, 3)]}
</td>
<td class="py-2 px-4 border ${course.available_slots[getNextDate(selectedDate, 4)] > 0 ? 'slot-available' : 'slot-full'}">
${course.available_slots[getNextDate(selectedDate, 4)]}
</td>
`;
tableBody.appendChild(row);
});
}
// Piirretään säätaulukko
function renderWeatherTable(selectedDate) {
const tableBody = document.getElementById('weather-table');
tableBody.innerHTML = '';
golfCourses.forEach(course => {
const courseWeather = weatherData.find(w => w.location === course.location);
if (courseWeather) {
const weather = courseWeather.dates[selectedDate];
const row = document.createElement('tr');
row.innerHTML = `
<td class="py-2 px-4 border">${course.name}</td>
<td class="py-2 px-4 border">${course.location}</td>
<td class="py-2 px-4 border">${weather.morning}</td>
<td class="py-2 px-4 border">${weather.afternoon}</td>
<td class="py-2 px-4 border">${weather.evening}</td>
<td class="py-2 px-4 border">${weather.rain_probability}</td>
<td class="py-2 px-4 border">${weather.rain_amount}</td>
`;
tableBody.appendChild(row);
}
});
}
// Alustetaan kartta (Leaflet.js)
function initMap() {
const map = L.map('map').setView([62.0, 25.0], 6);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap'
}).addTo(map);
golfCourses.forEach(course => {
L.marker(course.coords)
.addTo(map)
.bindPopup(`<b>${course.name}</b><br>${course.location}`);
});
}
// Apufunktio: Seuraava päivämäärä
function getNextDate(date, daysToAdd) {
const currentDate = new Date(date);
currentDate.setDate(currentDate.getDate() + daysToAdd);
return currentDate.toISOString().split('T')[0];
}
// Suodatus päivämäärän mukaan
function filterByDate(date) {
document.getElementById('last-updated').textContent = date;
renderGolfCourses(date);
renderWeatherTable(date);
}
</script>
<!-- Leaflet.js kartalle -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</body>
</html>