Update app.py
Browse files
app.py
CHANGED
|
@@ -58,21 +58,24 @@ html_template = '''
|
|
| 58 |
<style>
|
| 59 |
body {
|
| 60 |
font-family: Arial, sans-serif;
|
| 61 |
-
background-color: #
|
| 62 |
margin: 0;
|
| 63 |
padding: 0;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 64 |
}
|
| 65 |
#map {
|
| 66 |
-
height:
|
| 67 |
width: 100%;
|
| 68 |
}
|
| 69 |
h1 {
|
| 70 |
-
text-align: center;
|
| 71 |
-
padding: 20px;
|
| 72 |
margin: 0;
|
| 73 |
-
|
| 74 |
-
color: white;
|
| 75 |
-
font-size: 24px;
|
| 76 |
}
|
| 77 |
.leaflet-popup-content-wrapper {
|
| 78 |
background-color: #fff;
|
|
@@ -96,10 +99,10 @@ html_template = '''
|
|
| 96 |
.popup-form {
|
| 97 |
display: flex;
|
| 98 |
flex-direction: column;
|
| 99 |
-
width:
|
| 100 |
}
|
| 101 |
.popup-form input, .popup-form textarea {
|
| 102 |
-
padding:
|
| 103 |
margin-bottom: 10px;
|
| 104 |
border: 1px solid #ccc;
|
| 105 |
border-radius: 5px;
|
|
@@ -109,19 +112,25 @@ html_template = '''
|
|
| 109 |
background-color: #007BFF;
|
| 110 |
color: white;
|
| 111 |
border: none;
|
| 112 |
-
padding:
|
| 113 |
border-radius: 5px;
|
| 114 |
cursor: pointer;
|
|
|
|
| 115 |
}
|
| 116 |
.popup-form button:hover {
|
| 117 |
background-color: #0056b3;
|
| 118 |
}
|
| 119 |
-
#search-
|
|
|
|
|
|
|
| 120 |
margin: 20px;
|
|
|
|
|
|
|
| 121 |
padding: 8px;
|
| 122 |
-
width:
|
| 123 |
border: 1px solid #ccc;
|
| 124 |
border-radius: 5px;
|
|
|
|
| 125 |
}
|
| 126 |
#search-button {
|
| 127 |
padding: 8px 12px;
|
|
@@ -130,18 +139,36 @@ html_template = '''
|
|
| 130 |
border: none;
|
| 131 |
border-radius: 5px;
|
| 132 |
cursor: pointer;
|
|
|
|
| 133 |
}
|
| 134 |
#search-button:hover {
|
| 135 |
background-color: #0056b3;
|
| 136 |
}
|
| 137 |
#search-results {
|
|
|
|
|
|
|
|
|
|
| 138 |
margin: 20px;
|
| 139 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 140 |
</style>
|
| 141 |
</head>
|
| 142 |
<body>
|
| 143 |
-
<
|
| 144 |
-
|
|
|
|
|
|
|
| 145 |
<input type="text" id="search-input" placeholder="Поиск по названию или описанию" />
|
| 146 |
<button id="search-button">Поиск</button>
|
| 147 |
</div>
|
|
@@ -237,28 +264,29 @@ html_template = '''
|
|
| 237 |
popupContent.appendChild(inputTelegram);
|
| 238 |
popupContent.appendChild(button);
|
| 239 |
|
| 240 |
-
|
| 241 |
.setLatLng(e.latlng)
|
| 242 |
.setContent(popupContent)
|
| 243 |
.openOn(map);
|
| 244 |
});
|
| 245 |
|
| 246 |
-
//
|
| 247 |
-
function removeMarker(
|
| 248 |
-
fetch(`/remove_marker/${
|
| 249 |
method: 'DELETE'
|
| 250 |
}).then(() => {
|
| 251 |
-
location.reload();
|
| 252 |
});
|
| 253 |
}
|
| 254 |
|
| 255 |
// Функция для поиска меток
|
| 256 |
function searchMarkers(query) {
|
| 257 |
-
fetch(`/search_markers?query=${
|
| 258 |
.then(response => response.json())
|
| 259 |
.then(data => {
|
| 260 |
const resultsDiv = document.getElementById('search-results');
|
| 261 |
-
resultsDiv.innerHTML = ''; //
|
|
|
|
| 262 |
if (data.length > 0) {
|
| 263 |
data.forEach(marker => {
|
| 264 |
const resultItem = document.createElement('div');
|
|
@@ -274,7 +302,7 @@ html_template = '''
|
|
| 274 |
// Обработчик события для кнопки поиска
|
| 275 |
document.getElementById('search-button').onclick = function() {
|
| 276 |
const query = document.getElementById('search-input').value;
|
| 277 |
-
searchMarkers(query);
|
| 278 |
};
|
| 279 |
|
| 280 |
// Функция для показа метки на карте
|
|
@@ -335,11 +363,11 @@ def remove_marker(marker_id):
|
|
| 335 |
|
| 336 |
@app.route('/search_markers', methods=['GET'])
|
| 337 |
def search_markers():
|
| 338 |
-
query = request.args.get('query', '')
|
| 339 |
conn = sqlite3.connect('markers.db')
|
| 340 |
cursor = conn.cursor()
|
| 341 |
cursor.execute('''SELECT id, name, description, telegram_link, latitude, longitude FROM markers
|
| 342 |
-
WHERE name LIKE ? OR description LIKE ?''',
|
| 343 |
(f'%{query}%', f'%{query}%'))
|
| 344 |
markers = cursor.fetchall()
|
| 345 |
conn.close()
|
|
|
|
| 58 |
<style>
|
| 59 |
body {
|
| 60 |
font-family: Arial, sans-serif;
|
| 61 |
+
background-color: #f0f0f0;
|
| 62 |
margin: 0;
|
| 63 |
padding: 0;
|
| 64 |
+
color: #333;
|
| 65 |
+
}
|
| 66 |
+
header {
|
| 67 |
+
background-color: #007BFF;
|
| 68 |
+
color: white;
|
| 69 |
+
padding: 15px;
|
| 70 |
+
text-align: center;
|
| 71 |
}
|
| 72 |
#map {
|
| 73 |
+
height: 70vh;
|
| 74 |
width: 100%;
|
| 75 |
}
|
| 76 |
h1 {
|
|
|
|
|
|
|
| 77 |
margin: 0;
|
| 78 |
+
font-size: 28px;
|
|
|
|
|
|
|
| 79 |
}
|
| 80 |
.leaflet-popup-content-wrapper {
|
| 81 |
background-color: #fff;
|
|
|
|
| 99 |
.popup-form {
|
| 100 |
display: flex;
|
| 101 |
flex-direction: column;
|
| 102 |
+
width: 250px;
|
| 103 |
}
|
| 104 |
.popup-form input, .popup-form textarea {
|
| 105 |
+
padding: 8px;
|
| 106 |
margin-bottom: 10px;
|
| 107 |
border: 1px solid #ccc;
|
| 108 |
border-radius: 5px;
|
|
|
|
| 112 |
background-color: #007BFF;
|
| 113 |
color: white;
|
| 114 |
border: none;
|
| 115 |
+
padding: 10px;
|
| 116 |
border-radius: 5px;
|
| 117 |
cursor: pointer;
|
| 118 |
+
font-size: 16px;
|
| 119 |
}
|
| 120 |
.popup-form button:hover {
|
| 121 |
background-color: #0056b3;
|
| 122 |
}
|
| 123 |
+
#search-container {
|
| 124 |
+
display: flex;
|
| 125 |
+
justify-content: center;
|
| 126 |
margin: 20px;
|
| 127 |
+
}
|
| 128 |
+
#search-input {
|
| 129 |
padding: 8px;
|
| 130 |
+
width: 300px;
|
| 131 |
border: 1px solid #ccc;
|
| 132 |
border-radius: 5px;
|
| 133 |
+
margin-right: 10px;
|
| 134 |
}
|
| 135 |
#search-button {
|
| 136 |
padding: 8px 12px;
|
|
|
|
| 139 |
border: none;
|
| 140 |
border-radius: 5px;
|
| 141 |
cursor: pointer;
|
| 142 |
+
font-size: 16px;
|
| 143 |
}
|
| 144 |
#search-button:hover {
|
| 145 |
background-color: #0056b3;
|
| 146 |
}
|
| 147 |
#search-results {
|
| 148 |
+
display: flex;
|
| 149 |
+
flex-direction: column;
|
| 150 |
+
align-items: center;
|
| 151 |
margin: 20px;
|
| 152 |
}
|
| 153 |
+
#search-results div {
|
| 154 |
+
background-color: white;
|
| 155 |
+
border: 1px solid #ccc;
|
| 156 |
+
border-radius: 5px;
|
| 157 |
+
padding: 10px;
|
| 158 |
+
width: 80%;
|
| 159 |
+
margin-bottom: 10px;
|
| 160 |
+
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
|
| 161 |
+
}
|
| 162 |
+
#search-results div b {
|
| 163 |
+
color: #007BFF;
|
| 164 |
+
}
|
| 165 |
</style>
|
| 166 |
</head>
|
| 167 |
<body>
|
| 168 |
+
<header>
|
| 169 |
+
<h1>GeoGram</h1>
|
| 170 |
+
</header>
|
| 171 |
+
<div id="search-container">
|
| 172 |
<input type="text" id="search-input" placeholder="Поиск по названию или описанию" />
|
| 173 |
<button id="search-button">Поиск</button>
|
| 174 |
</div>
|
|
|
|
| 264 |
popupContent.appendChild(inputTelegram);
|
| 265 |
popupContent.appendChild(button);
|
| 266 |
|
| 267 |
+
L.popup()
|
| 268 |
.setLatLng(e.latlng)
|
| 269 |
.setContent(popupContent)
|
| 270 |
.openOn(map);
|
| 271 |
});
|
| 272 |
|
| 273 |
+
// Функция для удаления метки
|
| 274 |
+
function removeMarker(markerId) {
|
| 275 |
+
fetch(`/remove_marker/${markerId}`, {
|
| 276 |
method: 'DELETE'
|
| 277 |
}).then(() => {
|
| 278 |
+
location.reload(); // Перезагрузить страницу, чтобы обновить маркеры
|
| 279 |
});
|
| 280 |
}
|
| 281 |
|
| 282 |
// Функция для поиска меток
|
| 283 |
function searchMarkers(query) {
|
| 284 |
+
fetch(`/search_markers?query=${query}`)
|
| 285 |
.then(response => response.json())
|
| 286 |
.then(data => {
|
| 287 |
const resultsDiv = document.getElementById('search-results');
|
| 288 |
+
resultsDiv.innerHTML = ''; // Очистка предыдущих результатов
|
| 289 |
+
|
| 290 |
if (data.length > 0) {
|
| 291 |
data.forEach(marker => {
|
| 292 |
const resultItem = document.createElement('div');
|
|
|
|
| 302 |
// Обработчик события для кнопки поиска
|
| 303 |
document.getElementById('search-button').onclick = function() {
|
| 304 |
const query = document.getElementById('search-input').value;
|
| 305 |
+
searchMarkers(query.toLowerCase()); // Приведение к нижнему регистру для поиска
|
| 306 |
};
|
| 307 |
|
| 308 |
// Функция для показа метки на карте
|
|
|
|
| 363 |
|
| 364 |
@app.route('/search_markers', methods=['GET'])
|
| 365 |
def search_markers():
|
| 366 |
+
query = request.args.get('query', '').lower() # Приведение к нижнему регистру для поиска
|
| 367 |
conn = sqlite3.connect('markers.db')
|
| 368 |
cursor = conn.cursor()
|
| 369 |
cursor.execute('''SELECT id, name, description, telegram_link, latitude, longitude FROM markers
|
| 370 |
+
WHERE LOWER(name) LIKE ? OR LOWER(description) LIKE ?''',
|
| 371 |
(f'%{query}%', f'%{query}%'))
|
| 372 |
markers = cursor.fetchall()
|
| 373 |
conn.close()
|