-
-
Notifications
You must be signed in to change notification settings - Fork 11
/
query-browse-search.html
74 lines (70 loc) · 2.8 KB
/
query-browse-search.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Niche Museums: {{ q }}</title>
<link rel="stylesheet" href="/static/museums.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-153631302-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-153631302-1');
</script>
</head>
<body class="search-results">
<nav class="navbar is-black" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<strong>Niche Museums</strong>
</a>
<a class="navbar-item" href="/about">
<span class="button is-small is-outlined is-white">About</span>
</a>
</div>
</nav>
<section class="section smaller-padding-bottom">
<div class="box content">
<h3 class="title is-3">{{ rows.__len__() }} result{% if rows.__len__() != 1 %}s{% endif %}</h3>
<form action="/browse/search">
<div class="field has-addons">
<div class="control" style="width: 80%">
<input placeholder="Search" type="text" class="input" name="q" value="{{ q }}">
</div>
<div class="control">
<input type="submit" value="🔍" class="button is-info"> </div>
</div>
</div>
</form>
</div>
</section>
<section class="section" id="cards">
{% set show_links = 1 %}
{% for row in rows %}
{% set museum = row %}
{% include "_museum_card.html" %}
{% endfor %}
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
let input = document.getElementsByName("q")[0];
let q = input.value;
if (q) {
let geocodeUrl = `https://nominatim.openstreetmap.org/search?format=jsonv2&q=${encodeURIComponent(q)}`;
fetch(geocodeUrl).then(r => r.json()).then(o => {
let displayName = o[0].display_name;
let latitude = parseFloat(o[0].lat);
let longitude = parseFloat(o[0].lon);
let p = document.createElement('p');
p.style.marginTop = '1em';
p.innerHTML = `Or <a href="/?latitude=${latitude.toFixed(3)}&longitude=${longitude.toFixed(3)}">view museums near ${displayName}</a>`;
input.parentNode.parentNode.parentNode.appendChild(p);
});
}
});
</script>
</body>
</html>