✨ feat: add images, error_box & new message when no results are provided (#185)

public/static/error_box.js

@@ -0,0 +1,3 @@
+function toggleErrorBox() {
+
+}

public/static/themes/simple.css

@@ -70,6 +70,27 @@ body {
   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 footer and header */
 
 header {

public/templates/search.html

@@ -1,8 +1,8 @@
 {{>header this.style}}
 <main class="results">
-  {{>search_bar}}
+  {{>search_bar this}}
   <div class="results_aggregated">
-    {{#each results}}
+    {{#if results}} {{#each results}}
     <div class="result">
       <h1><a href="{{{this.visitingUrl}}}">{{{this.title}}}</a></h1>
       <small>{{{this.url}}}</small>
@@ -13,13 +13,27 @@
         {{/each}}
       </div>
     </div>
-    {{/each}}
+    {{/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_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

@@ -6,4 +6,20 @@
     placeholder="Type to search"
   />
   <button type="submit" onclick="searchWeb()">search</button>
+  <div class="error_box">
+    <button onclick="toggleErrorBox()" class="error_box_dropdown">
+      <img src="./images/info.svg" alt="Info icon for error box" />
+    </button>
+    {{#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}}}; width: 400px; height: 400px"
+        >lsl</span
+      >
+    </div>
+    {{/each}}
+  </div>
 </div>

src/results/aggregation_models.rs

@@ -116,10 +116,12 @@ impl RawSearchResult {
     }
 }
 
+///
 #[derive(Serialize, Deserialize)]
 pub struct EngineErrorInfo {
     pub error: String,
     pub engine: String,
+    pub severity_color: String,
 }
 
 impl EngineErrorInfo {
@@ -131,6 +133,11 @@ 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"),
+            },
         }
     }
 }