Telemap-readysearchsystem

Sleeping

App Files Files Community

Aleksmorshen commited on Oct 24, 2024

Commit

7f3a24b

verified ·

1 Parent(s): 1d6508e

Update app.py

Browse files

Files changed (1) hide show

app.py +61 -62

app.py CHANGED Viewed

@@ -116,12 +116,19 @@ html_template = '''
         .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;
@@ -130,18 +137,31 @@ html_template = '''
             border: none;
             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>
@@ -244,62 +264,55 @@ html_template = '''
         });
         // Удаление метки
-        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>
 </body>
 </html>
 '''
 @app.route('/')
 def index():
     return render_template_string(html_template)
-@app.route('/get_markers', methods=['GET'])
 def get_markers():
     markers = get_all_markers()
     return jsonify([{
@@ -311,6 +324,7 @@ def get_markers():
         'longitude': marker[5]
     } for marker in markers])
 @app.route('/add_marker', methods=['POST'])
 def add_marker():
     data = request.json
@@ -318,6 +332,7 @@ def add_marker():
     description = data['description']
     telegram_link = data['telegram_link']
     latitude, longitude = data['position']
     marker_id = add_marker_to_db(name, description, telegram_link, latitude, longitude)
     return jsonify({
         'id': marker_id,
@@ -328,29 +343,13 @@ def add_marker():
         '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()

         .popup-form button:hover {
             background-color: #0056b3;
         }
+        #search-container {
             margin: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        #search-input {
             padding: 8px;
+            width: 300px;
             border: 1px solid #ccc;
             border-radius: 5px;
+            margin-right: 10px;
+            font-size: 14px;
         }
         #search-button {
             padding: 8px 12px;
             border: none;
             border-radius: 5px;
             cursor: pointer;
+            font-size: 14px;
         }
         #search-button:hover {
             background-color: #0056b3;
         }
         #search-results {
             margin: 20px;
+            text-align: center;
+        }
+        .result-item {
+            background: #fff;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            margin: 10px;
+            padding: 10px;
+            transition: background 0.3s;
+        }
+        .result-item:hover {
+            background: #f0f0f0;
         }
     </style>
 </head>
 <body>
     <h1>GeoGram</h1>
+    <div id="search-container">
         <input type="text" id="search-input" placeholder="Поиск по названию или описанию" />
         <button id="search-button">Поиск</button>
     </div>
         });
         // Удаление метки
+        function removeMarker(markerId) {
+            fetch('/remove_marker', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ id: markerId })
             }).then(() => {
+                location.reload();  // Обновление страницы для обновления маркеров
             });
         }
+        // Поиск по меткам
+        document.getElementById('search-button').addEventListener('click', function() {
+            const searchTerm = document.getElementById('search-input').value.toLowerCase();
+            fetch('/get_markers')
                 .then(response => response.json())
                 .then(data => {
+                    const resultsContainer = document.getElementById('search-results');
+                    resultsContainer.innerHTML = '';
+                    const results = data.filter(marker =>
+                        marker.name.toLowerCase().includes(searchTerm) ||
+                        marker.description.toLowerCase().includes(searchTerm)
+                    );
+                    results.forEach(marker => {
+                        const resultItem = document.createElement('div');
+                        resultItem.classList.add('result-item');
+                        resultItem.innerHTML = `<b>${marker.name}</b><p>${marker.description}</p><a href="https://t.me/${marker.telegram_link}" target="_blank">Перейти в Telegram</a>`;
+                        resultsContainer.appendChild(resultItem);
+                    });
+                    if (results.length === 0) {
+                        resultsContainer.innerHTML = '<p>Нет результатов</p>';
                     }
                 });
+        });
     </script>
 </body>
 </html>
 '''
+# Маршрут для главной страницы
 @app.route('/')
 def index():
     return render_template_string(html_template)
+# Маршрут для получения всех меток
+@app.route('/get_markers')
 def get_markers():
     markers = get_all_markers()
     return jsonify([{
         'longitude': marker[5]
     } for marker in markers])
+# Маршрут для добавления метки
 @app.route('/add_marker', methods=['POST'])
 def add_marker():
     data = request.json
     description = data['description']
     telegram_link = data['telegram_link']
     latitude, longitude = data['position']
     marker_id = add_marker_to_db(name, description, telegram_link, latitude, longitude)
     return jsonify({
         'id': marker_id,
         '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})
 if __name__ == '__main__':
     init_db()