Update app.py

app.py

@@ -8,14 +8,16 @@ app = Flask(__name__)
 def init_db():
     conn = sqlite3.connect('markers.db')
     cursor = conn.cursor()
-    cursor.execute('''CREATE TABLE IF NOT EXISTS markers (
-                        id INTEGER PRIMARY KEY AUTOINCREMENT,
-                        name TEXT NOT NULL,
-                        description TEXT,
-                        telegram_link TEXT,
-                        latitude REAL NOT NULL,
-                        longitude REAL NOT NULL
-                      )''')
+    cursor.execute('''
+        CREATE TABLE IF NOT EXISTS markers (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            name TEXT NOT NULL,
+            description TEXT,
+            telegram_link TEXT,
+            latitude REAL NOT NULL,
+            longitude REAL NOT NULL
+        )
+    ''')
     conn.commit()
     conn.close()
 
@@ -32,7 +34,7 @@ def get_all_markers():
 def add_marker_to_db(name, description, telegram_link, latitude, longitude):
     conn = sqlite3.connect('markers.db')
     cursor = conn.cursor()
-    cursor.execute('INSERT INTO markers (name, description, telegram_link, latitude, longitude) VALUES (?, ?, ?, ?, ?)', 
+    cursor.execute('INSERT INTO markers (name, description, telegram_link, latitude, longitude) VALUES (?, ?, ?, ?, ?)',
                    (name, description, telegram_link, latitude, longitude))
     conn.commit()
     marker_id = cursor.lastrowid
@@ -47,43 +49,40 @@ def remove_marker_from_db(marker_id):
     conn.commit()
     conn.close()
 
-# Функция вычисления расстояния между двумя координатами (формула Haversine)
-def calculate_distance(lat1, lon1, lat2, lon2):
-    R = 6371  # радиус Земли в километрах
-    dlat = math.radians(lat2 - lat1)
-    dlon = math.radians(lon2 - lon1)
-    a = math.sin(dlat / 2) ** 2 + math.cos(math.radians(lat1)) * math.cos(math.radians(lat2)) * math.sin(dlon / 2) ** 2
-    c = 2 * math.atan2(math.sqrt(a), math.sqrt(1 - a))
-    return R * c
-
-# Поиск меток в радиусе и по названию/описанию
-def search_markers_within_radius(lat, lon, radius_km, search_term):
+# Функция для поиска маркеров по названию или описанию в радиусе
+def search_markers_within_radius(user_lat, user_lon, radius_km, search_term):
     conn = sqlite3.connect('markers.db')
     cursor = conn.cursor()
-    cursor.execute("SELECT id, name, description, telegram_link, latitude, longitude FROM markers")
-    markers = cursor.fetchall()
-    conn.close()
 
-    results = []
-    for marker in markers:
-        marker_lat = marker[4]
-        marker_lon = marker[5]
-        distance = calculate_distance(lat, lon, marker_lat, marker_lon)
-        if distance <= radius_km and (search_term.lower() in marker[1].lower() or search_term.lower() in marker[2].lower()):
-            results.append({
-                'id': marker[0],
-                'name': marker[1],
-                'description': marker[2],
-                'telegram_link': marker[3],
-                'latitude': marker[4],
-                'longitude': marker[5],
-                'distance': distance
-            })
+    # SQL-запрос для поиска маркеров с условием расстояния
+    query = """
+    SELECT id, name, description, telegram_link, latitude, longitude,
+           (6371 * acos(cos(radians(?)) * cos(radians(latitude)) * cos(radians(longitude) - radians(?)) + sin(radians(?)) * sin(radians(latitude)))) AS distance
+    FROM markers
+    WHERE (LOWER(name) LIKE ? OR LOWER(description) LIKE ?)
+    HAVING distance <= ?
+    ORDER BY distance ASC
+    """
+    search_term_lower = f'%{search_term.lower()}%'
+    cursor.execute(query, (user_lat, user_lon, user_lat, search_term_lower, search_term_lower, radius_km))
+    results = cursor.fetchall()
+
+    markers = [{
+        'id': row[0],
+        'name': row[1],
+        'description': row[2],
+        'telegram_link': row[3],
+        'latitude': row[4],
+        'longitude': row[5],
+        'distance': row[6]
+    } for row in results]
 
-    return results
+    conn.close()
+    return markers
 
 # HTML-шаблон с улучшенным дизайном
-html_template = '''<!DOCTYPE html>
+html_template = '''
+<!DOCTYPE html>
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
@@ -151,57 +150,63 @@ html_template = '''<!DOCTYPE html>
         .popup-form button:hover {
             background-color: #0056b3;
         }
-        #search-bar {
-            margin: 10px;
-            padding: 10px;
+        .search-container {
             display: flex;
             justify-content: center;
-            background-color: #f7f7f7;
+            margin: 20px 0;
         }
-        #search-input {
-            width: 300px;
+        .search-container input {
             padding: 8px;
-            border-radius: 5px;
             border: 1px solid #ccc;
+            border-radius: 5px;
+            width: 300px;
+            margin-right: 10px;
         }
-        #search-button {
-            padding: 8px 15px;
-            margin-left: 10px;
+        .search-container button {
+            padding: 8px 12px;
             background-color: #007BFF;
             color: white;
             border: none;
             border-radius: 5px;
             cursor: pointer;
         }
-        #search-button:hover {
+        .search-container button:hover {
             background-color: #0056b3;
         }
+        #results {
+            margin: 20px;
+            padding: 10px;
+            background: #fff;
+            border-radius: 5px;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+        }
     </style>
 </head>
 <body>
     <h1>GeoGram</h1>
-
-    <div id="search-bar">
-        <input id="search-input" type="text" placeholder="Введите название или описание" />
-        <button id="search-button" onclick="searchMarkers()">Поиск</button>
+    <div class="search-container">
+        <input type="text" id="searchTerm" placeholder="Поиск по названию или описанию">
+        <button onclick="searchMarkers()">Поиск</button>
     </div>
-
+    <div id="results"></div>
     <div id="map"></div>
-
+    
     <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
     <script>
-        const map = L.map('map').setView([55.75, 37.61], 13);  // Начальное местоположение по умолчанию
+        const map = L.map('map').setView([55.75, 37.61], 13); // Начальное местоположение по умолчанию
 
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: 19,
         }).addTo(map);
 
+        // Проверка поддержки геолокации и установка центра карты на текущее местоположение пользователя
         if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(function(position) {
                 const userLatitude = position.coords.latitude;
                 const userLongitude = position.coords.longitude;
                 map.setView([userLatitude, userLongitude], 13);
 
+                // Добавление маркера для местоположения пользователя
                 L.marker([userLatitude, userLongitude]).addTo(map)
                     .bindPopup('Вы находитесь здесь').openPopup();
             }, function() {
@@ -221,24 +226,7 @@ html_template = '''<!DOCTYPE html>
                 });
             });
 
-        function searchMarkers() {
-            const searchTerm = document.getElementById('search-input').value;
-
-            navigator.geolocation.getCurrentPosition(function(position) {
-                const userLatitude = position.coords.latitude;
-                const userLongitude = position.coords.longitude;
-
-                fetch(`/search?latitude=${userLatitude}&longitude=${userLongitude}&term=${encodeURIComponent(searchTerm)}`)
-                    .then(response => response.json())
-                    .then(data => {
-                        data.forEach(marker => {
-                            const markerObj = L.marker([marker.latitude, marker.longitude]).addTo(map);
-                            markerObj.bindPopup(`<b>${marker.name}</b><p>${marker.description}</p><a href="https://t.me/${marker.telegram_link}" target="_blank">Перейти в Telegram</a><br>Радиус: ${marker.distance.toFixed(2)} км`);
-                        });
-                    });
-            });
-        }
-
+        // Функция для добавления метки
         function addMarker(name, description, telegram_link, position) {
             fetch('/add_marker', {
                 method: 'POST',
@@ -254,52 +242,64 @@ html_template = '''<!DOCTYPE html>
             })
             .then(response => response.json())
             .then(data => {
-                const marker = L.marker([data.latitude, data.longitude]).addTo(map);
-                marker.bindPopup(`<b>${data.name}</b><p>${data.description}</p><a href="https://t.me/${data.telegram_link}" target="_blank">Перейти в Telegram</a><br><button onclick="removeMarker(${data.id})">Удалить</button>`);
+                const markerObj = L.marker([data.latitude, data.longitude]).addTo(map);
+                markerObj.bindPopup(`<b>${data.name}</b><p>${data.description}</p><a href="https://t.me/${data.telegram_link}" target="_blank">Перейти в Telegram</a><br><button onclick="removeMarker(${data.id})">Удалить</button>`);
             });
         }
 
+        // Событие клика по карте для добавления формы
         map.on('click', function(e) {
-            const popupContent = document.createElement('div');
-            popupContent.className = 'popup-form';
-
-            const inputName = document.createElement('input');
-            inputName.type = 'text';
-            inputName.placeholder = 'Название';
-
-            const inputDescription = document.createElement('textarea');
-            inputDescription.placeholder = 'Описание';
-
-            const inputTelegram = document.createElement('input');
-            inputTelegram.type = 'text';
-            inputTelegram.placeholder = 'Ссылка на Telegram';
-
-            const submitButton = document.createElement('button');
-            submitButton.innerHTML = 'Добавить';
-            submitButton.onclick = function() {
-                addMarker(inputName.value, inputDescription.value, inputTelegram.value, e.latlng);
-                map.closePopup();
-            };
+            const name = prompt('Введите название метки:');
+            const description = prompt('Введите описание метки:');
+            const telegram_link = prompt('Введите Telegram ссылку (без @):');
 
-            popupContent.appendChild(inputName);
-            popupContent.appendChild(inputDescription);
-            popupContent.appendChild(inputTelegram);
-            popupContent.appendChild(submitButton);
-
-            L.popup()
-                .setLatLng(e.latlng)
-                .setContent(popupContent)
-                .openOn(map);
+            if (name) {
+                addMarker(name, description, telegram_link, e.latlng);
+            }
         });
 
+        // Удаление метки
         function removeMarker(markerId) {
-            fetch(`/remove_marker/${markerId}`, { method: 'DELETE' })
-                .then(() => {
-                    map.eachLayer(function(layer) {
-                        if (layer instanceof L.Marker && layer.options.id === markerId) {
-                            map.removeLayer(layer);
-                        }
+            fetch('/remove_marker', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ id: markerId })
+            })
+            .then(response => {
+                if (response.ok) {
+                    alert('Метка удалена');
+                    location.reload(); // Перезагрузить страницу для обновления меток
+                }
+            });
+        }
+
+        // Поиск маркеров
+        function searchMarkers() {
+            const searchTerm = document.getElementById('searchTerm').value;
+
+            fetch(`/search_markers?term=${encodeURIComponent(searchTerm)}`)
+                .then(response => response.json())
+                .then(data => {
+                    const resultsDiv = document.getElementById('results');
+                    resultsDiv.innerHTML = '';
+                    if (data.length === 0) {
+                        resultsDiv.innerHTML = '<p>Нет результатов.</p>';
+                        return;
+                    }
+
+                    const list = document.createElement('ul');
+                    data.forEach(marker => {
+                        const listItem = document.createElement('li');
+                        listItem.textContent = `${marker.name}: ${marker.description}`;
+                        listItem.style.cursor = 'pointer';
+                        listItem.onclick = () => {
+                            map.setView([marker.latitude, marker.longitude], 13);
+                        };
+                        list.appendChild(listItem);
                     });
+                    resultsDiv.appendChild(list);
                 });
         }
     </script>
@@ -307,13 +307,11 @@ html_template = '''<!DOCTYPE html>
 </html>
 '''
 
-# Маршрут для главной страницы
 @app.route('/')
 def index():
     return render_template_string(html_template)
 
-# Маршрут для получения всех маркеров
-@app.route('/get_markers', methods=['GET'])
+@app.route('/get_markers')
 def get_markers():
     markers = get_all_markers()
     return jsonify([{
@@ -325,7 +323,6 @@ def get_markers():
         'longitude': marker[5]
     } for marker in markers])
 
-# Маршрут для добавления новой метки
 @app.route('/add_marker', methods=['POST'])
 def add_marker():
     data = request.json
@@ -343,23 +340,21 @@ def add_marker():
         'longitude': longitude
     })
 
-# Маршрут для удаления метки
-@app.route('/remove_marker/<int:marker_id>', methods=['DELETE'])
-def remove_marker(marker_id):
+@app.route('/remove_marker', methods=['POST'])
+def remove_marker():
+    data = request.json
+    marker_id = data['id']
     remove_marker_from_db(marker_id)
-    return '', 204
+    return jsonify(success=True)
 
-# Маршрут для поиска маркеров по названию или описанию в радиусе 10 км
-@app.route('/search', methods=['GET'])
+@app.route('/search_markers')
 def search_markers():
-    user_lat = float(request.args.get('latitude'))
-    user_lon = float(request.args.get('longitude'))
     search_term = request.args.get('term', '')
-    radius_km = 10  # Радиус поиска 10 км
-    results = search_markers_within_radius(user_lat, user_lon, radius_km, search_term)
-    return jsonify(results)
+    user_lat, user_lon = 55.75, 37.61  # Замените на значения по умолчанию или используйте геолокацию
+    radius_km = 10
+    markers = search_markers_within_radius(user_lat, user_lon, radius_km, search_term)
+    return jsonify(markers)
 
-# Инициализация базы данных при запуске приложения
 if __name__ == '__main__':
     init_db()
     app.run(debug=True, host='0.0.0.0', port=7860)