♻️ refactor(maud): rewrite the frontend code with maud html framework (#302)

2023-11-17 22:10:06 +03:00 · 2023-11-17 22:10:06 +03:00 · 0ec89146c8
commit 0ec89146c8
parent beb5e6012a
32 changed files with 527 additions and 317 deletions
--- a/src/templates/partials/bar.rs
+++ b/src/templates/partials/bar.rs
@ -0,0 +1,12 @@
+//!
+
+use maud::{html, Markup,PreEscaped};
+
+///
+pub fn bar(query: &str) -> Markup {
+    html!(
+        (PreEscaped("<div class=\"search_bar\">"))
+            input type="search" name="search-box" value=(query) placeholder="Type to search";
+            button type="submit" onclick="searchWeb()"{"search"}
+    )
+}
--- a/src/templates/partials/footer.rs
+++ b/src/templates/partials/footer.rs
@ -0,0 +1,24 @@
+//!
+
+use maud::{html, Markup, PreEscaped};
+
+///
+pub fn footer() -> Markup {
+    html!(
+        footer{
+           div{
+              span{"Powered By "b{"Websurfx"}}span{"-"}span{"a lightening fast, privacy respecting, secure meta
+                  search engine"}
+           }
+           div{
+              ul{
+                  li{a href="https://github.com/neon-mmd/websurfx"{"Source Code"}}
+                  li{a href="https://github.com/neon-mmd/websurfx/issues"{"Issues/Bugs"}}
+              }
+           }
+        }
+        script src="static/settings.js"{}
+        (PreEscaped("</body>"))
+        (PreEscaped("</html>"))
+    )
+}
--- a/src/templates/partials/header.rs
+++ b/src/templates/partials/header.rs
@ -0,0 +1,26 @@
+//!
+
+use crate::templates::partials::navbar::navbar;
+use maud::{html, Markup, PreEscaped, DOCTYPE};
+
+///
+pub fn header(colorscheme: &str, theme: &str) -> Markup {
+    html!(
+        (DOCTYPE)
+        html lang="en"
+
+        head{
+            title{"Websurfx"}
+            meta charset="UTF-8";
+            meta name="viewport" content="width=device-width, initial-scale=1";
+            link href=(format!("static/colorschemes/{colorscheme}.css")) rel="stylesheet" type="text/css";
+            link href=(format!("static/themes/{theme}.css")) rel="stylesheet" type="text/css";
+        }
+
+        (PreEscaped("<body onload=\"getClientSettings()\">"))
+            header{
+                h1{a href="/"{"Websurfx"}}
+                (navbar())
+            }
+    )
+}
--- a/src/templates/partials/mod.rs
+++ b/src/templates/partials/mod.rs
@ -0,0 +1,8 @@
+//!
+
+pub mod footer;
+pub mod header;
+pub mod navbar;
+pub mod bar;
+pub mod settings_tabs;
+pub mod search_bar;
--- a/src/templates/partials/navbar.rs
+++ b/src/templates/partials/navbar.rs
@ -0,0 +1,15 @@
+//!
+
+use maud::{html, Markup};
+
+///
+pub fn navbar() -> Markup {
+    html!(
+        nav{
+            ul{
+               li{a href="about"{"about"}}
+               li{a href="settings"{"settings"}}
+            }
+        }
+    )
+}
--- a/src/templates/partials/search_bar.rs
+++ b/src/templates/partials/search_bar.rs
@ -0,0 +1,64 @@
+//!
+
+use maud::{html, Markup, PreEscaped};
+
+use crate::{models::aggregation_models::EngineErrorInfo, templates::partials::bar::bar};
+
+const SAFE_SEARCH_LEVELS_NAME: [&str; 3] = ["None", "Low", "Moderate"];
+
+///
+pub fn search_bar(
+    engine_errors_info: &[EngineErrorInfo],
+    safe_search_level: u8,
+    query: &str,
+) -> Markup {
+    html!(
+        .search_area{
+            (bar(query))
+                .error_box {
+                   @if !engine_errors_info.is_empty(){
+                      button onclick="toggleErrorBox()" class="error_box_toggle_button"{
+                         img src="./images/warning.svg" alt="Info icon for error box";
+                      }
+                      .dropdown_error_box{
+                         @for errors in engine_errors_info{
+                            .error_item{
+                               span class="engine_name"{(errors.engine)}
+                               span class="engine_name"{(errors.error)}
+                               span class="severity_color" style="background: {{{this.severity_color}}};"{}
+                            }
+                         }
+                      }
+                   }
+                   @else {
+                      button onclick="toggleErrorBox()" class="error_box_toggle_button"{
+                         img src="./images/info.svg" alt="Warning icon for error box";
+                      }
+                      .dropdown_error_box {
+                         .no_errors{
+                            "Everything looks good 🙂!!"
+                         }
+                      }
+                  }
+                }
+            (PreEscaped("</div>"))
+            .search_options {
+               @if safe_search_level >= 3 {
+                   (PreEscaped("<select name=\"safe_search_levels\" disabled>"))
+               }
+               @else{
+                   (PreEscaped("<select name=\"safe_search_levels\">"))
+               }
+               @for (idx, name) in SAFE_SEARCH_LEVELS_NAME.iter().enumerate() {
+                   @if (safe_search_level as usize) == idx {
+                       option value=(idx) selected {(format!("SafeSearch: {name}"))}
+                   }
+                   @else{
+                       option value=(idx) {(format!("SafeSearch: {name}"))}
+                   }
+               }
+               (PreEscaped("</select>"))
+            }
+        }
+    )
+}
--- a/src/templates/partials/settings_tabs/cookies.rs
+++ b/src/templates/partials/settings_tabs/cookies.rs
@ -0,0 +1,21 @@
+//!
+
+use maud::{html, Markup};
+
+///
+pub fn cookies() -> Markup {
+    html!(
+        div class="cookies tab"{
+           h1{"Cookies"}
+           p class="description"{
+               "This is the cookies are saved on your system and it contains the preferences
+               you chose in the settings page"
+           }
+           input type="text" name="cookie_field" value="" readonly;
+           p class="description"{
+               "The cookies stored are not used by us for any malicious intend or for
+               tracking you in any way."
+           }
+        }
+    )
+}
--- a/src/templates/partials/settings_tabs/engines.rs
+++ b/src/templates/partials/settings_tabs/engines.rs
@ -0,0 +1,35 @@
+//!
+
+use maud::{html, Markup};
+
+///
+pub fn engines(engine_names: &[&String]) -> Markup {
+    html!(
+        div class="engines tab"{
+           h1{"Engines"}
+           h3{"select search engines"}
+           p class="description"{
+              "Select the search engines from the list of engines that you want results from"
+           }
+           .engine_selection{
+               .toggle_btn{
+                  label class="switch"{
+                     input type="checkbox" class="select_all" onchange="toggleAllSelection()";
+                     span class="slider round"{}
+                  }
+                  "Select All"
+               }
+               hr;
+               @for engine_name in engine_names{
+                   .toggle_btn{
+                       label class="switch"{
+                          input type="checkbox" class="engine";
+                          span class="slider round"{}
+                       }
+                       (format!("{}{}",engine_name[..1].to_uppercase().to_owned(), engine_name[1..].to_owned()))
+                   }
+               }
+           }
+        }
+    )
+}
--- a/src/templates/partials/settings_tabs/general.rs
+++ b/src/templates/partials/settings_tabs/general.rs
@ -0,0 +1,23 @@
+//!
+
+use maud::{html, Markup};
+
+const SAFE_SEARCH_LEVELS: [(u8, &'static str); 3] = [(0, "None"), (1, "Low"), (2, "Moderate")];
+
+///
+pub fn general() -> Markup {
+    html!(
+        div class="general tab active"{
+           h1{"General"}
+           h3{"Select a safe search level"}
+           p class="description"{
+               "Select a safe search level from the menu below to filter content based on the level."
+           }
+           select name="safe_search_levels"{
+               @for (k,v) in SAFE_SEARCH_LEVELS{
+                 option value=(k){(v)}
+               }
+           }
+        }
+    )
+}
--- a/src/templates/partials/settings_tabs/mod.rs
+++ b/src/templates/partials/settings_tabs/mod.rs
@ -0,0 +1,6 @@
+//!
+
+pub mod general;
+pub mod engines;
+pub mod cookies;
+pub mod user_interface;
--- a/src/templates/partials/settings_tabs/user_interface.rs
+++ b/src/templates/partials/settings_tabs/user_interface.rs
@ -0,0 +1,48 @@
+//!
+
+use crate::handler::paths::{file_path, FileType};
+use maud::{html, Markup};
+use std::fs::read_dir;
+
+fn style_option_list(
+    style_type: &str,
+) -> Result<Vec<(String, String)>, Box<dyn std::error::Error + '_>> {
+    let mut style_option_names: Vec<(String, String)> = Vec::new();
+    for file in read_dir(format!(
+        "{}static/{}/",
+        file_path(FileType::Theme)?,
+        style_type,
+    ))? {
+        let style_name = file?.file_name().to_str().unwrap().replace(".css", "");
+        style_option_names.push((style_name.clone(), style_name.replace("-", " ")));
+    }
+
+    Ok(style_option_names)
+}
+
+///
+pub fn user_interface() -> Result<Markup, Box<dyn std::error::Error>> {
+    Ok(html!(
+        div class="user_interface tab"{
+           h1{"User Interface"}
+           h3{"select theme"}
+           p class="description"{
+               "Select the theme from the available themes to be used in user interface"
+           }
+           select name="themes"{
+               @for (k,v) in style_option_list("themes")?{
+                   option value=(k){(v)}
+               }
+           }
+           h3{"select color scheme"}
+           p class="description"{
+               "Select the color scheme for your theme to be used in user interface"
+           }
+           select name="colorschemes"{
+               @for (k,v) in style_option_list("colorschemes")?{
+                   option value=(k){(v)}
+               }
+           }
+        }
+    ))
+}