Search site
HeNine
3 years ago
parent
27ea40e737
commit
fe2390d0a2
@ -0,0 +1,35 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Buscribe -- Search</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<script type="application/javascript" src="script.js"></script>
|
||||||
|
</head>
|
||||||
|
<body onload="onSiteLoad()">
|
||||||
|
|
||||||
|
<div id="search_tools">
|
||||||
|
<form>
|
||||||
|
<label for="search_text">Search</label> <input id="search_text" oninput="doSearch()" placeholder="Supports quotes, 'or' and -.">
|
||||||
|
<hr>
|
||||||
|
<label for="start_time">Start time</label> <input id="start_time" type="datetime-local">
|
||||||
|
<label for="end_time">End time</label> <input id="end_time" type="datetime-local">
|
||||||
|
<button id="search_button" onclick="doSearch()" type="button">Search</button>
|
||||||
|
<hr>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="results">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="help_box">
|
||||||
|
<hr>
|
||||||
|
<p>Start time and end time specify the time range.</p>
|
||||||
|
<p>Text search supports quotes ("word1 and word2") to search phrases with those words in order. The word "or" works
|
||||||
|
as an <em>or</em> operator. Dash "-" works as a <em>not</em> operator.</p>
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -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 = `
|
||||||
|
<div class="line_time">
|
||||||
|
<div class="line_start_bus_time">${line.start_bus_time}</div>
|
||||||
|
<div class="line_start_time">${line.start_time}</div>
|
||||||
|
</div>
|
||||||
|
<div class="line_text">${line.text}</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
results_element.append(line_div)
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue