Search site

3 years ago · fe2390d0a2
parent 27ea40e737
commit fe2390d0a2
3 changed files with 170 additions and 0 deletions
--- a/buscribe-web/index.html
+++ b/buscribe-web/index.html
@ -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>
--- a/buscribe-web/script.js
+++ 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 = `
+        <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)
+    }
+}
--- a/buscribe-web/style.less
+++ 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;
+  }
+}