a mini social media app for small communities
emmeline.girlkisser.top
1@include 'partial/header.html'
2
3<script src="/static/js/user_utils.js"></script>
4<script src="/static/js/search.js"></script>
5
6<h1>search</h1>
7
8<div>
9 <input type="text" name="query" id="query">
10 <div>
11 <p>search for:</p>
12 <input type="radio" name="search-for" id="search-for-posts" value="posts" checked aria-checked>
13 <label for="search-for-posts">posts</label>
14 <input type="radio" name="search-for" id="search-for-users" value="users">
15 <label for="search-for-users">users</label>
16 </div>
17 <br>
18 <button id="search">search</button>
19</div>
20
21<br>
22
23<div id="pages">
24</div>
25
26<div id="results">
27</div>
28
29<script>
30 const params = new URLSearchParams(window.location.search)
31
32 const pages = document.getElementById('pages')
33 const results = document.getElementById('results')
34
35 const query = document.getElementById('query')
36 if (query.value == '' && params.get('q')) {
37 query.value = params.get('q')
38 }
39
40 let limit = params.get('limit')
41 if (!limit) {
42 limit = 10
43 }
44
45 let offset = params.get('offset')
46 if (!limit) {
47 offset = 0
48 }
49
50 const add_post_result = result => {
51 // same as components/post_mini.html except js
52 const element = document.createElement('div')
53 element.classList.add('post', 'post-mini')
54 const p = document.createElement('p')
55
56 const user_link = document.createElement('a')
57 user_link.href = '/user/' + result.author.username
58 const user_text = document.createElement('strong')
59 user_text.innerText = get_display_name(result.author)
60 user_link.appendChild(user_text)
61 p.appendChild(user_link)
62
63 p.innerHTML += ': '
64
65 const post_link = document.createElement('a')
66 post_link.href = '/post/' + result.post.id
67 post_link.innerText = result.post.title
68 p.appendChild(post_link)
69
70 element.appendChild(p)
71 results.appendChild(element)
72 }
73
74 const add_user_result = user => {
75 const element = document.createElement('div')
76 const p = document.createElement('p')
77 const user_link = document.createElement('a')
78 user_link.href = '/user/' + user.username
79 user_link.innerText = get_display_name(user)
80 p.appendChild(user_link)
81 element.appendChild(p)
82 results.appendChild(element)
83 }
84
85 const add_pages = () => {
86 // creates a separator
87 const sep = () => {
88 const span = document.createElement('span')
89 span.innerText = ' - '
90 pages.appendChild(span)
91 }
92
93 const first_link = document.createElement('a')
94 // we escape the $ here because otherwise V will try to perform replacements at compile-time.
95 //todo: report this, this behaviour should be changed or at least looked into further.
96 first_link.href = '/search?q=' + query.value + '&limit=' + limit + '&offset=0'
97 first_link.innerText = '0'
98 pages.appendChild(first_link)
99
100 sep()
101
102 const back_link = document.createElement('a')
103 back_link.href = '/search?q=' + query.value + '&limit=' + limit + '&offset=' + Math.min(0, offset - 10)
104 back_link.innerText = '<'
105 pages.appendChild(back_link)
106
107 sep()
108
109 const next_link = document.createElement('a')
110 next_link.href = '/search?q=' + query.value + '&limit=' + limit + '&offset=' + (offset + 10)
111 next_link.innerText = '>'
112 pages.appendChild(next_link)
113 }
114
115 document.getElementById('search').addEventListener('click', async () => {
116 results.innerHTML = '' // yeet the children!
117 pages.innerHTML = '' // yeet more children!
118
119 var search_for
120 for (const radio of document.getElementsByName('search-for')) {
121 if (radio.checked) {
122 search_for = radio.value
123 break
124 }
125 }
126 if (search_for == undefined) {
127 alert('please select either "users" or "posts" to search for.')
128 return
129 }
130
131 console.log('search: ', query.value, limit, offset)
132
133 var search_results
134 if (search_for == 'users') {
135 search_results = await search_users(query.value, limit, offset)
136 } else if (search_for == 'posts') {
137 search_results = await search_posts(query.value, limit, offset)
138 } else {
139 // this should never happen
140 alert('something wrong occured while searching, please report this (01)')
141 return
142 }
143
144 console.log(search_results)
145
146 if (search_results.length >= 0) {
147 // i iterate inside the if statements so that i do not have to perform a redundant
148 // string comparison for every single result.
149 if (search_for == 'users') {
150 for (result of search_results) {
151 add_user_result(result)
152 }
153 } else if (search_for == 'posts') {
154 for (result of search_results) {
155 add_post_result(result)
156 }
157 } else {
158 // this should never happen
159 alert('something wrong occured while searching, please report this (02)')
160 return
161 }
162
163 // set up pagination, but only if we actually have pages to display
164 if (offset > 0) {
165 add_pages()
166 }
167 } else {
168 results.innerText = 'no results!'
169 }
170 })
171</script>
172
173@include 'partial/footer.html'