+
-
- for (element of httpResults.data) {
- const elem = document.createElement('li');
- elem.classList.add("document");
-
- const ol = document.createElement('ol');
-
- for (const prop in element) {
- const field = document.createElement('li');
- field.classList.add("field");
-
- const attribute = document.createElement('div');
- attribute.classList.add("attribute");
- attribute.innerHTML = prop;
-
- const content = document.createElement('div');
- content.classList.add("content");
- content.innerHTML = element[prop];
-
- field.appendChild(attribute);
- field.appendChild(content);
-
- ol.appendChild(field);
- }
-
- elem.appendChild(ol);
- results.appendChild(elem)
- }
-
- },
- beforeSend: function () {
- if (request !== null) {
- request.abort();
- }
- },
- });
- });
-
diff --git a/public/script.js b/public/script.js
new file mode 100644
index 000000000..119d05634
--- /dev/null
+++ b/public/script.js
@@ -0,0 +1,55 @@
+var request = null;
+
+$('#search').on('input', function () {
+ var query = $(this).val();
+ request = $.ajax({
+ type: "POST",
+ url: "query",
+ contentType: 'application/json',
+ data: JSON.stringify({ 'query': query }),
+ contentType: 'application/json',
+ success: function (data, textStatus, request) {
+ let httpResults = Papa.parse(data, { header: true, skipEmptyLines: true });
+ results.innerHTML = '';
+
+ let timeSpent = request.getResponseHeader('Time-Ms');
+ let numberOfDocuments = httpResults.data.length;
+ count.innerHTML = `${numberOfDocuments}`;
+ time.innerHTML = `${timeSpent}ms`;
+
+ for (element of httpResults.data) {
+ const elem = document.createElement('li');
+ elem.classList.add("document");
+
+ const ol = document.createElement('ol');
+
+ for (const prop in element) {
+ const field = document.createElement('li');
+ field.classList.add("field");
+
+ const attribute = document.createElement('div');
+ attribute.classList.add("attribute");
+ attribute.innerHTML = prop;
+
+ const content = document.createElement('div');
+ content.classList.add("content");
+ content.innerHTML = element[prop];
+
+ field.appendChild(attribute);
+ field.appendChild(content);
+
+ ol.appendChild(field);
+ }
+
+ elem.appendChild(ol);
+ results.appendChild(elem)
+ }
+
+ },
+ beforeSend: function () {
+ if (request !== null) {
+ request.abort();
+ }
+ },
+ });
+});
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 000000000..310b8dac6
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,74 @@
+em {
+ color: hsl(204, 86%, 25%);
+ font-style: inherit;
+ background-color: hsl(204, 86%, 88%);
+}
+
+#results {
+ max-width: 900px;
+ margin: 20px auto 0 auto;
+ padding: 0;
+}
+
+.notification {
+ display: flex;
+ justify-content: center;
+}
+
+.level-left {
+ margin-right: 50px;
+}
+
+.document {
+ padding: 20px 20px;
+ background-color: #f5f5f5;
+ border-radius: 4px;
+ margin-bottom: 20px;
+ display: flex;
+}
+
+.document ol {
+ flex: 0 0 75%;
+ max-width: 75%;
+ padding: 0;
+ margin: 0;
+}
+
+.document .image {
+ max-width: 25%;
+ flex: 0 0 25%;
+ padding-left: 30px;
+ box-sizing: border-box;
+}
+
+.document .image img {
+ width: 100%;
+}
+
+.field {
+ list-style-type: none;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.field:not(:last-child) {
+ margin-bottom: 7px;
+}
+
+.attribute {
+ flex: 0 0 35%;
+ max-width: 35%;
+ text-align: right;
+ padding-right: 10px;
+ box-sizing: border-box;
+ text-transform: uppercase;
+ color: rgba(0,0,0,.7);
+}
+
+.content {
+ max-width: 65%;
+ flex: 0 0 65%;
+ box-sizing: border-box;
+ padding-left: 10px;
+ color: rgba(0,0,0,.9);
+}
diff --git a/src/bin/serve.rs b/src/bin/serve.rs
index 28e5dff71..0a103a29e 100644
--- a/src/bin/serve.rs
+++ b/src/bin/serve.rs
@@ -58,6 +58,13 @@ async fn main() -> anyhow::Result<()> {
.body(include_str!("../../public/bulma.min.css"))
);
+ let dash_style_route = warp::filters::method::get()
+ .and(warp::path!("style.css"))
+ .map(|| Response::builder()
+ .header("content-type", "text/css; charset=utf-8")
+ .body(include_str!("../../public/style.css"))
+ );
+
let dash_jquery_route = warp::filters::method::get()
.and(warp::path!("jquery-3.4.1.min.js"))
.map(|| Response::builder()
@@ -72,6 +79,13 @@ async fn main() -> anyhow::Result<()> {
.body(include_str!("../../public/papaparse.min.js"))
);
+ let dash_script_route = warp::filters::method::get()
+ .and(warp::path!("script.js"))
+ .map(|| Response::builder()
+ .header("content-type", "application/javascript; charset=utf-8")
+ .body(include_str!("../../public/script.js"))
+ );
+
#[derive(Deserialize)]
struct QueryBody {
query: String,
@@ -107,8 +121,10 @@ async fn main() -> anyhow::Result<()> {
let routes = dash_html_route
.or(dash_bulma_route)
+ .or(dash_style_route)
.or(dash_jquery_route)
.or(dash_papaparse_route)
+ .or(dash_script_route)
.or(query_route);
let addr = SocketAddr::from_str(&opt.http_listen_addr).unwrap();