Telemap-readysearchsystem

Sleeping

App Files Files Community

Aleksmorshen commited on Oct 24, 2024

Commit

de03262

verified ·

1 Parent(s): 156af44

Update app.py

Browse files

Files changed (1) hide show

app.py +46 -104

app.py CHANGED Viewed

@@ -58,24 +58,21 @@ html_template = '''
     <style>
         body {
             font-family: Arial, sans-serif;
-            background-color: #f0f0f0;
             margin: 0;
             padding: 0;
-            color: #333;
-        }
-        header {
-            background-color: #007BFF;
-            color: white;
-            padding: 15px;
-            text-align: center;
         }
         #map {
-            height: 70vh;
             width: 100%;
         }
         h1 {
             margin: 0;
-            font-size: 28px;
         }
         .leaflet-popup-content-wrapper {
             background-color: #fff;
@@ -99,10 +96,10 @@ html_template = '''
         .popup-form {
             display: flex;
             flex-direction: column;
-            width: 250px;
         }
         .popup-form input, .popup-form textarea {
-            padding: 8px;
             margin-bottom: 10px;
             border: 1px solid #ccc;
             border-radius: 5px;
@@ -112,25 +109,19 @@ html_template = '''
             background-color: #007BFF;
             color: white;
             border: none;
-            padding: 10px;
             border-radius: 5px;
             cursor: pointer;
-            font-size: 16px;
         }
         .popup-form button:hover {
             background-color: #0056b3;
         }
-        #search-container {
-            display: flex;
-            justify-content: center;
-            margin: 20px;
-        }
         #search-input {
             padding: 8px;
-            width: 300px;
             border: 1px solid #ccc;
             border-radius: 5px;
-            margin-right: 10px;
         }
         #search-button {
             padding: 8px 12px;
@@ -139,36 +130,18 @@ html_template = '''
             border: none;
             border-radius: 5px;
             cursor: pointer;
-            font-size: 16px;
         }
         #search-button:hover {
             background-color: #0056b3;
         }
         #search-results {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
             margin: 20px;
         }
-        #search-results div {
-            background-color: white;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            padding: 10px;
-            width: 80%;
-            margin-bottom: 10px;
-            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
-        }
-        #search-results div b {
-            color: #007BFF;
-        }
     </style>
 </head>
 <body>
-    <header>
-        <h1>GeoGram</h1>
-    </header>
-    <div id="search-container">
         <input type="text" id="search-input" placeholder="Поиск по названию или описанию" />
         <button id="search-button">Поиск</button>
     </div>
@@ -237,91 +210,59 @@ html_template = '''
             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 ссылка (без @)';
-            const button = document.createElement('button');
-            button.innerText = 'Добавить метку';
-            button.onclick = function() {
-                if (inputName.value && inputDescription.value && inputTelegram.value) {
-                    addMarker(inputName.value, inputDescription.value, inputTelegram.value, e.latlng);
-                    map.closePopup();  // Закрыть всплывающее окно после добавления
-                } else {
-                    alert('Пожалуйста, заполните все обязательные поля.');
-                }
             };
             popupContent.appendChild(inputName);
             popupContent.appendChild(inputDescription);
             popupContent.appendChild(inputTelegram);
-            popupContent.appendChild(button);
-            L.popup()
-                .setLatLng(e.latlng)
-                .setContent(popupContent)
-                .openOn(map);
         });
         // Функция для удаления метки
         function removeMarker(markerId) {
-            fetch(`/remove_marker/${markerId}`, {
-                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)
@@ -340,11 +281,12 @@ def get_markers():
 @app.route('/add_marker', methods=['POST'])
 def add_marker():
-    data = request.json
     name = data['name']
     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,
@@ -366,7 +308,7 @@ def search_markers():
     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()

     <style>
         body {
             font-family: Arial, sans-serif;
+            background-color: #f7f7f7;
             margin: 0;
             padding: 0;
         }
         #map {
+            height: 80vh;
             width: 100%;
         }
         h1 {
+            text-align: center;
+            padding: 20px;
             margin: 0;
+            background-color: #007BFF;
+            color: white;
+            font-size: 24px;
         }
         .leaflet-popup-content-wrapper {
             background-color: #fff;
         .popup-form {
             display: flex;
             flex-direction: column;
+            width: 200px;
         }
         .popup-form input, .popup-form textarea {
+            padding: 5px;
             margin-bottom: 10px;
             border: 1px solid #ccc;
             border-radius: 5px;
             background-color: #007BFF;
             color: white;
             border: none;
+            padding: 8px 12px;
             border-radius: 5px;
             cursor: pointer;
         }
         .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;
             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>
             popupContent.classList.add('popup-form');
             const inputName = document.createElement('input');
+            inputName.placeholder = 'Название';
             const inputDescription = document.createElement('textarea');
+            inputDescription.placeholder = 'Описание';
             const inputTelegram = document.createElement('input');
+            inputTelegram.placeholder = 'Telegram ссылка';
+            const submitButton = document.createElement('button');
+            submitButton.innerText = 'Добавить метку';
+            submitButton.onclick = function() {
+                const name = inputName.value;
+                const description = inputDescription.value;
+                const telegramLink = inputTelegram.value;
+                addMarker(name, description, telegramLink, e.latlng);
+                map.closePopup();
             };
             popupContent.appendChild(inputName);
             popupContent.appendChild(inputDescription);
             popupContent.appendChild(inputTelegram);
+            popupContent.appendChild(submitButton);
+            L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(map);
         });
         // Функция для удаления метки
         function removeMarker(markerId) {
+            fetch(`/remove_marker/${markerId}`, { method: 'DELETE' })
+                .then(() => {
+                    location.reload();  // Перезагрузка страницы для обновления меток
                 });
         }
+        // Обработка поиска меток
+        document.getElementById('search-button').addEventListener('click', function() {
             const query = document.getElementById('search-input').value;
+            fetch(`/search_markers?query=${query}`)
                 .then(response => response.json())
                 .then(data => {
+                    const searchResultsDiv = document.getElementById('search-results');
+                    searchResultsDiv.innerHTML = '';  // Очистка предыдущих результатов
+                    data.forEach(marker => {
+                        const resultItem = document.createElement('div');
+                        resultItem.innerHTML = `<b>${marker.name}</b> - ${marker.description} <a href="https://t.me/${marker.telegram_link}" target="_blank">Перейти в Telegram</a>`;
+                        searchResultsDiv.appendChild(resultItem);
+                    });
                 });
+        });
     </script>
 </body>
 </html>
 '''
+# Определение маршрутов
 @app.route('/')
 def index():
     return render_template_string(html_template)
 @app.route('/add_marker', methods=['POST'])
 def add_marker():
+    data = request.get_json()
     name = data['name']
     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,
     conn = sqlite3.connect('markers.db')
     cursor = conn.cursor()
     cursor.execute('''SELECT id, name, description, telegram_link, latitude, longitude FROM markers
+                      WHERE LOWER(name) LIKE ? OR LOWER(description) LIKE ?''',
                    (f'%{query}%', f'%{query}%'))
     markers = cursor.fetchall()
     conn.close()