From fe2390d0a25c055f318c2c9121468c743fcfd3b7 Mon Sep 17 00:00:00 2001 From: HeNine <> Date: Wed, 6 Oct 2021 09:11:47 +0200 Subject: [PATCH] Search site --- buscribe-web/index.html | 35 ++++++++++++++++++ buscribe-web/script.js | 56 +++++++++++++++++++++++++++++ buscribe-web/style.less | 79 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 170 insertions(+) create mode 100644 buscribe-web/index.html create mode 100644 buscribe-web/script.js create mode 100644 buscribe-web/style.less diff --git a/buscribe-web/index.html b/buscribe-web/index.html new file mode 100644 index 0000000..07f4057 --- /dev/null +++ b/buscribe-web/index.html @@ -0,0 +1,35 @@ + + + + + Buscribe -- Search + + + + + +
+
+ +
+ + + +
+
+
+ +
+ +
+ +
+
+

Start time and end time specify the time range.

+

Text search supports quotes ("word1 and word2") to search phrases with those words in order. The word "or" works + as an or operator. Dash "-" works as a not operator.

+
+
+ + + \ No newline at end of file diff --git a/buscribe-web/script.js b/buscribe-web/script.js new file mode 100644 index 0000000..a3cf54c --- /dev/null +++ b/buscribe-web/script.js @@ -0,0 +1,56 @@ +function onSiteLoad(e) { + + document.getElementById("search_tools").addEventListener("keydown", + function (event) { + if (event.key === 'Enter') doSearch() + }); +} + +function query(text, start_time, end_time) { + let query_string = "" + + if (start_time !== "") { + query_string += `start_time=${start_time}`; + } + if (end_time !== "") { + query_string += `&end_time=${end_time}`; + } + if (text !== "") { + query_string += `&query=${text}` + } + + fetch(`http://localhost:8005/buscribe/json?${query_string}`) + .then(response => response.json()) + // .then(response => console.log(response.error())) + .then(fillResults) + +} + +function doSearch() { + query( + document.getElementById("search_text").value, + document.getElementById("start_time").value, + document.getElementById("end_time").value + ) +} + +function fillResults(results) { + const results_element = document.getElementById("results") + results_element.innerHTML = "" + + for (const line of results) { + const line_div = document.createElement("div"); + + line_div.classList.add("line"); + + line_div.innerHTML = ` +
+
${line.start_bus_time}
+
${line.start_time}
+
+
${line.text}
+ `; + + results_element.append(line_div) + } +} \ No newline at end of file diff --git a/buscribe-web/style.less b/buscribe-web/style.less new file mode 100644 index 0000000..f145016 --- /dev/null +++ b/buscribe-web/style.less @@ -0,0 +1,79 @@ +body { + color: aliceblue; + background: dimgray; +} + +label { + display: inline-block; + font-family: sans-serif; + width: 5em; + text-align: right; +} + +input[type=datetime-local] { + width: 13em; +} + +button { + padding: 0.25em; +} + +#search_text { + width: 50em; +} + +#help_box { + display: none; + position: fixed; + top: 1em; + right: 1em; + width: 20em; + float: right; + background: #fff; + padding: 1em; + color: #000; +} + +.line { + display: flex; + flex-direction: row; + + margin-bottom: 0.5em; + padding: 0.1em; + max-width: 50em; + + .line_time { + + text-align: right; + + display: flex; + flex-direction: column; + + flex-shrink: 0; + + //padding-top: 0.15em; + + .line_start_time { + color: lightgray; + font-family: monospace; + font-size: smaller; + } + + .line_start_bus_time { + font-family: sans-serif; + font-size: small; + + display: flex; + flex-direction: column; + margin-bottom: 0.2em; + height: 1.36em; // try to align the baselines + justify-content: flex-end; + align-content: flex-end; + } + } + + .line_text { + display: flex; + margin-left: 0.5em; + } +} \ No newline at end of file