diff --git a/site/index.html b/site/index.html
index 51356fe..927bccd 100644
--- a/site/index.html
+++ b/site/index.html
@@ -14,9 +14,14 @@
Heisse Preise
-
-
-
+
+
+
+
+
+
+
+
diff --git a/site/main.js b/site/main.js
index e58b80d..b586f64 100644
--- a/site/main.js
+++ b/site/main.js
@@ -2,13 +2,16 @@ let items = null;
async function load() {
let response = await fetch("api/index")
- items = await response.json();
+ items = await response.json();
+ let units = {};
for (item of items) {
item.search = item.name + " " + item.unit;
- item.search = item.search.toLowerCase();
+ item.search = item.search.toLowerCase();
+ units[item.unit] = item.unit;
}
- console.log(items.length);
+ console.log(Object.keys(units));
+
setupUI();
}
@@ -18,7 +21,7 @@ function dom(el, html) {
return element;
}
-function searchItems(query) {
+function searchItems(query, exact) {
if (query.length < 3) return [];
const tokens = query.split(/\s+/).map(token => token.toLowerCase());
@@ -27,10 +30,22 @@ function searchItems(query) {
for (item of items) {
let allFound = true;
for (token of tokens) {
- if (item.search.indexOf(token) < 0) {
+ if (token.length == 0) continue;
+ const index = item.search.indexOf(token);
+ if (index < 0) {
allFound = false;
break;
}
+ if (exact) {
+ if (index > 0 && (item.search.charAt(index - 1) != " " && item.search.charAt(index - 1) != "-")) {
+ allFound = false;
+ break;
+ }
+ if (index + token.length < item.search.length && item.search.charAt(index + token.length) != " ") {
+ allFound = false;
+ break;
+ }
+ }
}
if (allFound)
hits.push({ doc: item });
@@ -38,12 +53,23 @@ function searchItems(query) {
return hits;
}
+function toNumber(value, defaultValue) {
+ try {
+ return Number.parseFloat(value);
+ } catch(e) {
+ return defaultValue;
+ }
+}
+
function search(query) {
- const hits = searchItems(query);
+ const exact = document.querySelector("#exact").checked;
+ const hits = searchItems(query, exact);
const table = document.querySelector("#result");
const eigenmarken = document.querySelector("#eigenmarken").checked;
const billa = document.querySelector("#billa").checked;
- const spar = document.querySelector("#spar").checked;
+ const spar = document.querySelector("#spar").checked;
+ const minPrice = toNumber(document.querySelector("#minprice").value, 0);
+ const maxPrice = toNumber(document.querySelector("#maxprice").value, 100);
table.innerHTML = "";
if (hits.length == 0) return;
@@ -60,6 +86,8 @@ function search(query) {
const name = hit.doc.name.toLowerCase();
if (hit.doc.store == "billa" && !billa) continue;
if (hit.doc.store == "spar" && !spar) continue;
+ if (hit.doc.price < minPrice) continue;
+ if (hit.doc.price > maxPrice) continue;
if (eigenmarken && !(name.indexOf("clever") == 0 || name.indexOf("s-budget") == 0))
continue;
@@ -73,13 +101,20 @@ function search(query) {
}
function setupUI() {
- const searchInput = document.querySelector("#search");
+ let searchInput = document.querySelector("#search");
searchInput.addEventListener("input", (event) => {
+ if (searchInput.value.length == 0) {
+ document.querySelector("#minprice").value = 0;
+ document.querySelector("#maxprice").value = 100;
+ }
search(searchInput.value);
});
document.querySelector("#eigenmarken").addEventListener("change", () => search(searchInput.value));
document.querySelector("#billa").addEventListener("change", () => search(searchInput.value));
document.querySelector("#spar").addEventListener("change", () => search(searchInput.value));
+ document.querySelector("#exact").addEventListener("change", () => search(searchInput.value));
+ document.querySelector("#minprice").addEventListener("change", () => search(searchInput.value));
+ document.querySelector("#maxprice").addEventListener("change", () => search(searchInput.value));
}
load();
\ No newline at end of file
diff --git a/site/style.css b/site/style.css
index ba3eab4..a53e9d7 100644
--- a/site/style.css
+++ b/site/style.css
@@ -23,6 +23,10 @@ body {
margin-bottom: 1em;
}
+input[type="number"] {
+ max-width: 3em;
+}
+
.results {
display: flex;
flex-direction: row;
@@ -31,6 +35,23 @@ body {
table {
width: 100%;
+ border-collapse: collapse;
+ border: 1px solid;
+}
+
+th {
+ border: 1px solid;
+ padding: 0.2em;
+ background: #aaa;
+}
+
+tr {
+ border-collapse: collapse;
+ border: 1px solid #ddd;
+}
+
+td {
+ padding: 0.2em;
}
th {