From d44428fa90767eaf460e6c6a10b3b96d5a221e1e Mon Sep 17 00:00:00 2001 From: Kerollmops Date: Sat, 11 Jul 2020 11:48:27 +0200 Subject: [PATCH] Display more informations on the dashboard --- public/index.html | 260 +++++++++++++--------------------------------- public/script.js | 55 ++++++++++ public/style.css | 74 +++++++++++++ src/bin/serve.rs | 16 +++ 4 files changed, 218 insertions(+), 187 deletions(-) create mode 100644 public/script.js create mode 100644 public/style.css diff --git a/public/index.html b/public/index.html index ce7ef8408..8f73eb4f7 100644 --- a/public/index.html +++ b/public/index.html @@ -1,200 +1,86 @@ - - - - - - - The mega-mini-indexer - - - - -
-
-
-

- Welcome to the mega-mini-indexer also known as the MMI -

-

- This dashboard will help you check the search results with ease. -

-

Quoted query strings are available and forces the engine to search without typo tolerance or prefixes (e.g. big "black" boat).

-
-
-
- -
-
- - +
+
+
-
-
    - -
-
- + + + - - 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();