From 3f363b017520ed91dca8fe6ab56504687090ffe9 Mon Sep 17 00:00:00 2001
From: Ben Busby <contact@benbusby.com>
Date: Mon, 1 Aug 2022 14:32:24 -0600
Subject: [PATCH] Allow temp region selection from result view

This adds a new "temporary" config section of the results view, where a
user can now change the country that their results come from without
changing their default config settings.

Closes #322
---
 app/routes.py                         |  3 +++
 app/static/css/dark-theme.css         |  2 +-
 app/static/css/header.css             |  7 ++++++-
 app/static/css/light-theme.css        |  2 +-
 app/static/js/header.js               | 11 +++++++++++
 app/static/settings/translations.json |  2 +-
 app/templates/header.html             | 20 ++++++++++++++++++++
 7 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/app/routes.py b/app/routes.py
index 94c7076..5ce1101 100644
--- a/app/routes.py
+++ b/app/routes.py
@@ -406,6 +406,9 @@ def search():
         search_header=render_template(
             'header.html',
             config=g.user_config,
+            translation=translation,
+            languages=app.config['LANGUAGES'],
+            countries=app.config['COUNTRIES'],
             logo=render_template('logo.html', dark=g.user_config.dark),
             query=urlparse.unquote(query),
             search_type=search_util.search_type,
diff --git a/app/static/css/dark-theme.css b/app/static/css/dark-theme.css
index f1f51cc..758cef1 100644
--- a/app/static/css/dark-theme.css
+++ b/app/static/css/dark-theme.css
@@ -143,7 +143,7 @@ select {
     color: var(--whoogle-dark-contrast-text) !important;
 }
 
-.content {
+.content, .result-config {
     background-color: var(--whoogle-dark-element-bg) !important;
     color: var(--whoogle-contrast-text) !important;
 }
diff --git a/app/static/css/header.css b/app/static/css/header.css
index 1724097..8dabf75 100644
--- a/app/static/css/header.css
+++ b/app/static/css/header.css
@@ -13,6 +13,12 @@ header {
     border-radius: 2px 0 0 0;
 }
 
+.result-config {
+    margin: 10px 0 10px 0;
+    padding: 10px;
+    border-radius: 8px;
+}
+
 .mobile-logo {
     font: 22px/36px Futura, Arial, sans-serif;
     padding-left: 5px;
@@ -121,7 +127,6 @@ a {
 .header-tab-div {
     border-radius: 0 0 8px 8px;
     box-shadow: 0 2px 3px rgba(32, 33, 36, 0.18);
-    margin-bottom: 20px;
     overflow: hidden;
 }
 
diff --git a/app/static/css/light-theme.css b/app/static/css/light-theme.css
index 659d406..83c1226 100644
--- a/app/static/css/light-theme.css
+++ b/app/static/css/light-theme.css
@@ -129,7 +129,7 @@ input {
     color: var(--whoogle-contrast-text) !important;
 }
 
-.content {
+.content, .result-config {
     background-color: var(--whoogle-element-bg) !important;
     color: var(--whoogle-contrast-text) !important;
 }
diff --git a/app/static/js/header.js b/app/static/js/header.js
index 5d602cb..8d16f1c 100644
--- a/app/static/js/header.js
+++ b/app/static/js/header.js
@@ -1,8 +1,19 @@
 document.addEventListener("DOMContentLoaded", () => {
     const searchBar = document.getElementById("search-bar");
+    const countrySelect = document.getElementById("result-country");
     const arrowKeys = [37, 38, 39, 40];
     let searchValue = searchBar.value;
 
+    countrySelect.onchange = () => {
+        let str = window.location.href;
+        n = str.lastIndexOf("search");
+        if (n > 0) {
+            str = str.substring(0, n) +
+                `search?q=${searchBar.value}&country=${countrySelect.value}`;
+            window.location.href = str;
+        }
+    }
+
     searchBar.addEventListener("keyup", function(event) {
         if (event.keyCode === 13) {
             document.getElementById("search-form").submit();
diff --git a/app/static/settings/translations.json b/app/static/settings/translations.json
index 9674d7e..9199414 100644
--- a/app/static/settings/translations.json
+++ b/app/static/settings/translations.json
@@ -2,7 +2,7 @@
     "lang_en": {
         "search": "Search",
         "config": "Configuration",
-        "config-country": "Set Country",
+        "config-country": "Country",
         "config-lang": "Interface Language",
         "config-lang-search": "Search Language",
         "config-near": "Near",
diff --git a/app/templates/header.html b/app/templates/header.html
index 31d0f24..6ace2fb 100644
--- a/app/templates/header.html
+++ b/app/templates/header.html
@@ -25,6 +25,7 @@
                                 dir="auto">
                         <input id="search-reset" type="reset" value="x">
                         <input name="tbm" value="{{ search_type }}" style="display: none">
+                        <input name="country" value="{{ config.country }}" style="display: none;">
                         <input type="submit" style="display: none;">
                         <div class="sc"></div>
                     </div>
@@ -79,6 +80,7 @@
                                 value="{{ clean_query(query) }}"
                                 dir="auto">
                         <input name="tbm" value="{{ search_type }}" style="display: none">
+                        <input name="country" value="{{ config.country }}" style="display: none;">
                         <input type="submit" style="display: none;">
                         <div class="sc"></div>
                     </div>
@@ -103,6 +105,24 @@
               </div>
           </div>
       </div>
+
+      <div class="result-config">
+          <label for="config-country">{{ translation['config-country'] }}: </label>
+          <select name="country" id="result-country">
+              {% for country in countries %}
+                  <option value="{{ country.value }}"
+                          {% if (
+                              config.country != '' and config.country in country.value
+                          ) or (
+                              config.country == '' and country.value == '')
+                          %}
+                          selected
+                          {% endif %}>
+                      {{ country.name }}
+                  </option>
+              {% endfor %}
+          </select>
+      </div>
       <div class="" id="s">
   </div>
 {% endif %}