Spaces:

alamin655
/

spacex

Running

App Files Files Community

XFFXFF commited on Aug 24, 2023

Commit

7f371bf

•

2 Parent(s): 11ba09a 2f1fa00

Merge pull request #189 from neon-mmd/feat-error-box-for-engine-errors

Browse files

✨ Error box UI to show which engines failed with several UI improvements

Files changed (11) hide show

public/images/info.svg +1 -0
public/images/no_results.gif +0 -0
public/images/warning.svg +1 -0
public/static/error_box.js +7 -0
public/static/themes/simple.css +79 -9
public/templates/bar.html +3 -0
public/templates/header.html +5 -3
public/templates/index.html +2 -1
public/templates/search.html +18 -4
public/templates/search_bar.html +26 -8
src/results/aggregation_models.rs +7 -0

public/images/info.svg ADDED Viewed

public/images/no_results.gif ADDED Viewed

public/images/warning.svg ADDED Viewed

public/static/error_box.js ADDED Viewed

	@@ -0,0 +1,7 @@

+/**
+ * This function provides the ability for the button to toggle the dropdown error-box
+ * in the search page.
+ */
+function toggleErrorBox() {
+    document.querySelector('.dropdown_error_box').classList.toggle('show')
+}

public/static/themes/simple.css CHANGED Viewed

@@ -70,15 +70,90 @@ body {
   filter: brightness(1.2);
 }
-/* styles for the footer and header */
-header {
   background: var(--background-color);
-  width: 100%;
   display: flex;
-  justify-content: right;
   align-items: center;
   padding: 1rem;
 }
 header ul,
@@ -121,13 +196,8 @@ footer div {
 }
 footer {
-  background: var(--background-color);
-  width: 100%;
-  padding: 1rem;
-  display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
 }
 /* Styles for the search page */

   filter: brightness(1.2);
 }
+.result_not_found {
+  display: flex;
+  flex-direction: column;
+  font-size: 1.5rem;
+  color: var(--foreground-color);
+}
+.result_not_found p {
+  margin: 1rem 0;
+}
+.result_not_found ul {
+  margin: 1rem 0;
+}
+.result_not_found img {
+  width: 40rem;
+}
+/* styles for the error box */
+.error_box .error_box_toggle_button {
+  background: var(--foreground-color);
+}
+.error_box .dropdown_error_box {
+  position: absolute;
+  display: none;
+  flex-direction: column;
   background: var(--background-color);
+  border-radius: 0;
+  margin-left: 2rem;
+  min-height: 20rem;
+  min-width: 22rem;
+}
+.error_box .dropdown_error_box.show {
+  display: flex;
+}
+.error_box .dropdown_error_box .error_item,
+.error_box .dropdown_error_box .no_errors {
   display: flex;
   align-items: center;
+  color: var(--foreground-color);
+  letter-spacing: 0.1rem;
+  padding: 1rem;
+  font-size: 1.2rem;
+}
+.error_box .dropdown_error_box .error_item {
+  justify-content: space-between;
+}
+.error_box .dropdown_error_box .no_errors {
+  min-height: 18rem;
+  justify-content: center;
+}
+.error_box .dropdown_error_box .error_item:hover {
+  box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
+}
+.error_box .error_item .severity_color {
+  width: 1.2rem;
+  height: 1.2rem;
+}
+/* styles for the footer and header */
+header,
+footer {
+  width: 100%;
+  background: var(--background-color);
+  display: flex;
   padding: 1rem;
+  align-items: center;
+}
+header {
+  justify-content: space-between;
+}
+header h1 a {
+  text-transform: capitalize;
+  text-decoration: none;
+  color: var(--foreground-color);
+  letter-spacing: 0.1rem;
+  margin-left: 1rem;
 }
 header ul,
 }
 footer {
   flex-direction: column;
   justify-content: center;
 }
 /* Styles for the search page */

public/templates/bar.html ADDED Viewed

	@@ -0,0 +1,3 @@

+<div class="search_bar">
+    <input type="search" name="search-box" value="{{this.pageQuery}}" placeholder="Type to search" />
+    <button type="submit" onclick="searchWeb()">search</button>

public/templates/header.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -10,5 +10,7 @@
 </head>
 <body onload="getClientSettings()">
-    <header>{{>navbar}}</header>

+<!doctype html>
 <html lang="en">
 <head>
 </head>
 <body onload="getClientSettings()">
+    <header>
+        <h1><a href="/">Websurfx</a></h1>
+        {{>navbar}}
+    </header>

public/templates/index.html CHANGED Viewed

@@ -1,7 +1,8 @@
 {{>header this}}
 <main class="search-container">
     <img src="../images/websurfx_logo.png" alt="Websurfx meta-search engine logo" />
-    {{>search_bar}}
 </main>
 <script src="static/index.js"></script>
 {{>footer}}

 {{>header this}}
 <main class="search-container">
     <img src="../images/websurfx_logo.png" alt="Websurfx meta-search engine logo" />
+    {{>bar}}
+    </div>
 </main>
 <script src="static/index.js"></script>
 {{>footer}}

public/templates/search.html CHANGED Viewed

@@ -1,8 +1,8 @@
 {{>header this.style}}
 <main class="results">
-  {{>search_bar}}
   <div class="results_aggregated">
-    {{#each results}}
     <div class="result">
       <h1><a href="{{{this.url}}}">{{{this.title}}}</a></h1>
       <small>{{{this.url}}}</small>
@@ -13,13 +13,27 @@
         {{/each}}
       </div>
     </div>
-    {{/each}}
   </div>
   <div class="page_navigation">
-    <button type="button" onclick="navigate_backward()">&#8592; previous</button>
     <button type="button" onclick="navigate_forward()">next &#8594;</button>
   </div>
 </main>
 <script src="static/index.js"></script>
 <script src="static/pagination.js"></script>
 {{>footer}}

 {{>header this.style}}
 <main class="results">
+  {{>search_bar this}}
   <div class="results_aggregated">
+    {{#if results}} {{#each results}}
     <div class="result">
       <h1><a href="{{{this.url}}}">{{{this.title}}}</a></h1>
       <small>{{{this.url}}}</small>
         {{/each}}
       </div>
     </div>
+    {{/each}} {{else}}
+    <div class="result_not_found">
+      <p>Your search - {{{this.pageQuery}}} - did not match any documents.</p>
+      <p class="suggestions">Suggestions:</p>
+      <ul>
+        <li>Make sure that all words are spelled correctly.</li>
+        <li>Try different keywords.</li>
+        <li>Try more general keywords.</li>
+      </ul>
+      <img src="./images/no_results.gif" alt="Man fishing gif" />
+    </div>
+    {{/if}}
   </div>
   <div class="page_navigation">
+    <button type="button" onclick="navigate_backward()">
+      &#8592; previous
+    </button>
     <button type="button" onclick="navigate_forward()">next &#8594;</button>
   </div>
 </main>
 <script src="static/index.js"></script>
 <script src="static/pagination.js"></script>
+<script src="static/error_box.js"></script>
 {{>footer}}

public/templates/search_bar.html CHANGED Viewed

@@ -1,9 +1,27 @@
-<div class="search_bar">
-  <input
-    type="search"
-    name="search-box"
-    value="{{this.pageQuery}}"
-    placeholder="Type to search"
-  />
-  <button type="submit" onclick="searchWeb()">search</button>
 </div>

+{{>bar this}}
+    <div class="error_box">
+        {{#if engineErrorsInfo}}
+        <button onclick="toggleErrorBox()" class="error_box_toggle_button">
+            <img src="./images/warning.svg" alt="Info icon for error box" />
+        </button>
+        <div class="dropdown_error_box">
+            {{#each engineErrorsInfo}}
+            <div class="error_item">
+                <span class="engine_name">{{{this.engine}}}</span>
+                <span class="engine_name">{{{this.error}}}</span>
+                <span class="severity_color" style="background: {{{this.severity_color}}};"></span>
+            </div>
+            {{/each}}
+        </div>
+        {{else}}
+        <button onclick="toggleErrorBox()" class="error_box_toggle_button">
+            <img src="./images/info.svg" alt="Warning icon for error box" />
+        </button>
+        <div class="dropdown_error_box">
+            <div class="no_errors">
+                Everything looks good 🙂!!
+            </div>
+        </div>
+        {{/if}}
+    </div>
 </div>

src/results/aggregation_models.rs CHANGED Viewed

@@ -63,10 +63,12 @@ impl SearchResult {
     }
 }
 #[derive(Serialize, Deserialize)]
 pub struct EngineErrorInfo {
     pub error: String,
     pub engine: String,
 }
 impl EngineErrorInfo {
@@ -78,6 +80,11 @@ impl EngineErrorInfo {
                 EngineError::UnexpectedError => String::from("UnexpectedError"),
             },
             engine,
         }
     }
 }

     }
 }
+///
 #[derive(Serialize, Deserialize)]
 pub struct EngineErrorInfo {
     pub error: String,
     pub engine: String,
+    pub severity_color: String,
 }
 impl EngineErrorInfo {
                 EngineError::UnexpectedError => String::from("UnexpectedError"),
             },
             engine,
+            severity_color: match error {
+                EngineError::RequestError => String::from("green"),
+                EngineError::EmptyResultSet => String::from("blue"),
+                EngineError::UnexpectedError => String::from("red"),
+            },
         }
     }
 }