Changed static structure and wrapped searchsuggestions in function for compatibility

This commit is contained in:
david 2023-05-20 22:11:36 +02:00
parent b22a732d0e
commit 2ff71ac8da
13 changed files with 46 additions and 43 deletions

View File

@ -9,7 +9,7 @@
href="{% static 'plugins/fontawesome-free/css/all.min.css' %}"> href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">
<link rel="stylesheet" <link rel="stylesheet"
href="{% static 'plugins/icheck-bootstrap/icheck-bootstrap.min.css' %}"> href="{% static 'plugins/icheck-bootstrap/icheck-bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'dist/css/adminlte.css' %}"> <link rel="stylesheet" href="{% static 'css/adminlte.css' %}">
<link rel="stylesheet" <link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<style> <style>
@ -24,7 +24,7 @@
<nav class="main-header navbar navbar-expand-md navbar-light navbar-white"> <nav class="main-header navbar navbar-expand-md navbar-light navbar-white">
<div class="container"> <div class="container">
<a href="/" class="navbar-brand"> <a href="/" class="navbar-brand">
<img src="{% static 'dist/img/ragnarok.jpg' %}" <img src="{% static 'img/ragnarok.jpg' %}"
alt="Ragnarok" alt="Ragnarok"
class="brand-image img-circle elevation-3" class="brand-image img-circle elevation-3"
style="opacity: .8"> style="opacity: .8">
@ -107,7 +107,7 @@
max-height: 720px"> max-height: 720px">
{% else %} {% else %}
<img class="card-img" <img class="card-img"
src="{% static 'dist/img/default.png' %}" src="{% static 'img/default.png' %}"
alt="Dist Photo 1"> alt="Dist Photo 1">
{% endif %} {% endif %}
<div class="card-img-overlay d-flex flex-column justify-content-end" <div class="card-img-overlay d-flex flex-column justify-content-end"
@ -133,7 +133,7 @@
</div> </div>
<script src="{% static 'plugins/jquery/jquery.min.js' %}"></script> <script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script> <script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'dist/js/adminlte.min.js' %}"></script> <script src="{% static 'js/adminlte.min.js' %}"></script>
<script src="{% static 'dist/js/searchsuggestions.js' %}"></script> <script src="{% static 'js/searchsuggestions.js' %}"></script>
</body> </body>
</html> </html>

View File

@ -1,38 +0,0 @@
const searchinput = document.querySelector("#search");
const searchsuggestions = document.querySelector("#searchdropdown");
const li = (c) => document.createElement("li").appendChild(c);
searchinput.addEventListener("input", (e) => {
q(e.target.value).then((d) => {
if (d.length < 1) searchsuggestions.replaceChildren(nothing());
else searchsuggestions.replaceChildren(...suggestions(d));
})
});
async function q(s) {
if (s.length > 0) {
try {
const response = await fetch("/api/search/?q=" + s);
const result = await response.json();
return result;
} catch(error) {
console.log("Error: " + error);
}
}
return [];
}
function nothing() {
const span = document.createElement("span");
span.setAttribute("class", "dropdown-item-text");
span.insertAdjacentText("afterbegin", "Nothing");
return li(span);
}
function suggestions(d) {
const items = [];
for (const vid of d) {
const a = document.createElement("a");
a.setAttribute("class", "dropdown-item")
a.setAttribute("href", "/view/" + vid.id);
a.insertAdjacentText("afterbegin", vid.name + " " + vid.id);
items.push(li(a));
}
return items;
}

BIN
static/img/default.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 748 KiB

View File

Before

Width:  |  Height:  |  Size: 87 KiB

After

Width:  |  Height:  |  Size: 87 KiB

View File

@ -0,0 +1,41 @@
function searchsuggestions() {
const searchinput = document.querySelector("#search");
const searchsuggestions = document.querySelector("#searchdropdown");
const li = (c) => document.createElement("li").appendChild(c);
searchinput.addEventListener("input", (e) => {
q(e.target.value).then((d) => {
if (d.length < 1) searchsuggestions.replaceChildren(nothing());
else searchsuggestions.replaceChildren(...suggestions(d));
})
});
async function q(s) {
if (s.length > 0) {
try {
const response = await fetch("/api/search/?q=" + s);
const result = await response.json();
return result;
} catch(error) {
console.log("Error: " + error);
}
}
return [];
}
function nothing() {
const span = document.createElement("span");
span.setAttribute("class", "dropdown-item-text");
span.insertAdjacentText("afterbegin", "Nothing");
return li(span);
}
function suggestions(d) {
const items = [];
for (const vid of d) {
const a = document.createElement("a");
a.setAttribute("class", "dropdown-item")
a.setAttribute("href", "/view/" + vid.id);
a.insertAdjacentText("afterbegin", vid.name + " " + vid.id);
items.push(li(a));
}
return items;
}
}
searchsuggestions();