Neotaste_Scrapper/history.html at main · masterries/Neotaste_Scrapper · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vienna Restaurant Deals</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
    <style>
        #map { height: 400px; }
        .modal-body img { max-width: 100%; }
    </style>
</head>
<body>
<div class="container">
    <h1>Vienna Restaurant Deals</h1>
    <div id="map"></div>
    <table class="table table-striped mt-4">
        <thead>
            <tr>
                <th>Name</th>
                <th>Rating</th>
                <th>Review Count</th>
                <th>Average Price</th>
                <th>Deal</th>
                <th>Details</th>
            </tr>
        </thead>
        <tbody id="restaurant-list"></tbody>
    </table>
</div>

<!-- Modal for Restaurant Details -->
<div class="modal fade" id="restaurantModal" tabindex="-1" aria-labelledby="restaurantModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="restaurantModalLabel">Restaurant Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Details will be filled by JavaScript -->
            </div>
        </div>
    </div>
</div>

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var map = L.map('map').setView([48.2081743, 16.3738189], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18
        }).addTo(map);

        // Fetch the JSON data and initialize the map and list
        fetch('data/vienna/processed_thefork_data_2024-08-27.json')
            .then(response => response.json())
            .then(restaurants => {
                // Calculate and add estimated savings to each restaurant object
                restaurants.forEach(restaurant => {
                    restaurant.estimatedSavings = restaurant.averagePrice * (restaurant.marketingOffer.discountPercentage / 100);
                });

                // Sort restaurants by estimated savings in descending order
                restaurants.sort((a, b) => b.estimatedSavings - a.estimatedSavings);

                // Display sorted restaurants on map and list
                restaurants.forEach(restaurant => {
                    L.marker([restaurant.geolocation.latitude, restaurant.geolocation.longitude])
                        .addTo(map)
                        .bindPopup(`<strong>${restaurant.name}</strong><br>${restaurant.address.street}`);

                    const row = `<tr>
                        <td>${restaurant.name}</td>
                        <td>${restaurant.rating}</td>
                        <td>${restaurant.reviewCount}</td>
                        <td>${restaurant.averagePrice}€</td>
                        <td>${restaurant.marketingOffer.label} (${restaurant.marketingOffer.discountPercentage}%)</td>
                        <td>${restaurant.estimatedSavings.toFixed(2)}€</td>
                        <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#restaurantModal" onclick="showDetails('${restaurant.id}')">View Details</button></td>
                    </tr>`;
                    document.getElementById('restaurant-list').innerHTML += row;
                });

                window.showDetails = function(id) {
                    const restaurant = restaurants.find(r => r.id === id);
                    const modalBody = document.querySelector('.modal-body');
                    modalBody.innerHTML = `
                        <h4>${restaurant.name}</h4>
                        <p>${restaurant.address.street}, ${restaurant.address.zipCode} ${restaurant.address.locality}</p>
                        <p><strong>Rating:</strong> ${restaurant.rating} (${restaurant.reviewCount} reviews)</p>
                        <p><strong>Average Price:</strong> ${restaurant.averagePrice}€</p>
                        <p><strong>Cuisine:</strong> ${restaurant.cuisine}</p>
                        <p><strong>Offer:</strong> ${restaurant.marketingOffer.title}</p>
                        <div>${restaurant.photos.map(photo => `<img src="${photo}" alt="${restaurant.name} photo">`).join('')}</div>
                    `;
                };
            })
            .catch(error => console.error('Error loading the data:', error));
    });
    </script>
</body>
</html>