Telemap-readysearchsystem

Sleeping

App Files Files Community

Aleksmorshen commited on Oct 24, 2024

Commit

d3791e9

verified ·

1 Parent(s): f8d1e08

Update app.py

Browse files

Files changed (1) hide show

app.py +113 -116

app.py CHANGED Viewed

@@ -1,6 +1,5 @@
 from flask import Flask, render_template_string, jsonify, request
 import sqlite3
-import math
 app = Flask(__name__)
@@ -8,16 +7,14 @@ 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
-        )
-    ''')
     conn.commit()
     conn.close()
@@ -49,37 +46,6 @@ def remove_marker_from_db(marker_id):
     conn.commit()
     conn.close()
-# Функция для поиска маркеров по названию или описанию в радиусе
-def search_markers_within_radius(user_lat, user_lon, radius_km, search_term):
-    conn = sqlite3.connect('markers.db')
-    cursor = conn.cursor()
-    # 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]
-    conn.close()
-    return markers
 # HTML-шаблон с улучшенным дизайном
 html_template = '''
 <!DOCTYPE html>
@@ -150,19 +116,14 @@ html_template = '''
         .popup-form button:hover {
             background-color: #0056b3;
         }
-        .search-container {
-            display: flex;
-            justify-content: center;
-            margin: 20px 0;
-        }
-        .search-container input {
             padding: 8px;
             border: 1px solid #ccc;
             border-radius: 5px;
-            width: 300px;
-            margin-right: 10px;
         }
-        .search-container button {
             padding: 8px 12px;
             background-color: #007BFF;
             color: white;
@@ -170,30 +131,26 @@ html_template = '''
             border-radius: 5px;
             cursor: pointer;
         }
-        .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 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); // Начальное местоположение по умолчанию
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: 19,
@@ -249,57 +206,88 @@ html_template = '''
         // Событие клика по карте для добавления формы
         map.on('click', function(e) {
-            const name = prompt('Введите название метки:');
-            const description = prompt('Введите описание метки:');
-            const telegram_link = prompt('Введите Telegram ссылку (без @):');
-            if (name) {
-                addMarker(name, description, telegram_link, e.latlng);
-            }
         });
         // Удаление метки
-        function removeMarker(markerId) {
-            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>
@@ -311,7 +299,7 @@ html_template = '''
 def index():
     return render_template_string(html_template)
-@app.route('/get_markers')
 def get_markers():
     markers = get_all_markers()
     return jsonify([{
@@ -340,21 +328,30 @@ def add_marker():
         'longitude': longitude
     })
-@app.route('/remove_marker', methods=['POST'])
-def remove_marker():
-    data = request.json
-    marker_id = data['id']
     remove_marker_from_db(marker_id)
-    return jsonify(success=True)
-@app.route('/search_markers')
 def search_markers():
-    search_term = request.args.get('term', '')
-    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)

 from flask import Flask, render_template_string, jsonify, request
 import sqlite3
 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
+                      )''')
     conn.commit()
     conn.close()
     conn.commit()
     conn.close()
 # HTML-шаблон с улучшенным дизайном
 html_template = '''
 <!DOCTYPE html>
         .popup-form button:hover {
             background-color: #0056b3;
         }
+        #search-input {
+            margin: 20px;
             padding: 8px;
+            width: calc(100% - 40px);
             border: 1px solid #ccc;
             border-radius: 5px;
         }
+        #search-button {
             padding: 8px 12px;
             background-color: #007BFF;
             color: white;
             border-radius: 5px;
             cursor: pointer;
         }
+        #search-button:hover {
             background-color: #0056b3;
         }
+        #search-results {
             margin: 20px;
         }
     </style>
 </head>
 <body>
     <h1>GeoGram</h1>
+    <div>
+        <input type="text" id="search-input" placeholder="Поиск по названию или описанию" />
+        <button id="search-button">Поиск</button>
     </div>
+    <div id="search-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);  // Начальное местоположение по умолчанию
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: 19,
         // Событие клика по карте для добавления формы
         map.on('click', function(e) {
+            const popupContent = document.createElement('div');
+            popupContent.classList.add('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 (без https://t.me/)';
+            const button = document.createElement('button');
+            button.textContent = 'Добавить метку';
+            button.onclick = function() {
+                const markerName = inputName.value;
+                const markerDescription = inputDescription.value;
+                const markerTelegram = inputTelegram.value;
+                if (markerName && markerTelegram) {
+                    addMarker(markerName, markerDescription, markerTelegram, e.latlng);
+                    map.closePopup();
+                }
+            };
+            popupContent.appendChild(inputName);
+            popupContent.appendChild(inputDescription);
+            popupContent.appendChild(inputTelegram);
+            popupContent.appendChild(button);
+            const popup = L.popup()
+                .setLatLng(e.latlng)
+                .setContent(popupContent)
+                .openOn(map);
         });
         // Удаление метки
+        function removeMarker(id) {
+            fetch(`/remove_marker/${id}`, {
+                method: 'DELETE'
+            }).then(() => {
+                location.reload();
             });
         }
+        // Функция для поиска меток
+        function searchMarkers(query) {
+            fetch(`/search_markers?query=${encodeURIComponent(query)}`)
                 .then(response => response.json())
                 .then(data => {
+                    const resultsDiv = document.getElementById('search-results');
+                    resultsDiv.innerHTML = '';  // Очистить предыдущие результаты
+                    if (data.length > 0) {
+                        data.forEach(marker => {
+                            const resultItem = document.createElement('div');
+                            resultItem.innerHTML = `<b>${marker.name}</b>: ${marker.description} <button onclick="showMarker(${marker.id})">Показать на карте</button>`;
+                            resultsDiv.appendChild(resultItem);
+                        });
+                    } else {
+                        resultsDiv.innerHTML = '<p>Нет результатов</p>';
                     }
+                });
+        }
+        // Обработчик события для кнопки поиска
+        document.getElementById('search-button').onclick = function() {
+            const query = document.getElementById('search-input').value;
+            searchMarkers(query);
+        };
+        // Функция для показа метки на карте
+        function showMarker(markerId) {
+            fetch(`/get_markers`)
+                .then(response => response.json())
+                .then(data => {
+                    const marker = data.find(m => m.id === markerId);
+                    if (marker) {
+                        map.setView([marker.latitude, marker.longitude], 13);
+                        L.marker([marker.latitude, marker.longitude]).addTo(map)
+                            .bindPopup(`<b>${marker.name}</b><p>${marker.description}</p><a href="https://t.me/${marker.telegram_link}" target="_blank">Перейти в Telegram</a>`);
+                    }
                 });
         }
     </script>
 def index():
     return render_template_string(html_template)
+@app.route('/get_markers', methods=['GET'])
 def get_markers():
     markers = get_all_markers()
     return jsonify([{
         'longitude': longitude
     })
+@app.route('/remove_marker/<int:marker_id>', methods=['DELETE'])
+def remove_marker(marker_id):
     remove_marker_from_db(marker_id)
+    return '', 204
+@app.route('/search_markers', methods=['GET'])
 def search_markers():
+    query = request.args.get('query', '')
+    conn = sqlite3.connect('markers.db')
+    cursor = conn.cursor()
+    cursor.execute('''SELECT id, name, description, telegram_link, latitude, longitude FROM markers
+                      WHERE name LIKE ? OR description LIKE ?''',
+                   (f'%{query}%', f'%{query}%'))
+    markers = cursor.fetchall()
+    conn.close()
+    return jsonify([{
+        'id': marker[0],
+        'name': marker[1],
+        'description': marker[2],
+        'telegram_link': marker[3],
+        'latitude': marker[4],
+        'longitude': marker[5]
+    } for marker in markers])
 if __name__ == '__main__':
     init_db()
+    app.run(debug=True)