add navigation bar to web UI

author: Wojtek Kosior <koszko@koszko.org> 2022-08-23 11:16:33 +0200
committer: Wojtek Kosior <koszko@koszko.org> 2022-09-28 12:54:52 +0200
commit: 1864fc0aaf7d6dba2e730cf74a5e154df4e6d18d (patch)
tree: 4f51635b51c4f83f48e0aa45a9d8e56fd21e9c81
parent: 5fefb11ffd50dcda826cd5a256c8b3f650221050 (diff)
download: haketilo-hydrilla-1864fc0aaf7d6dba2e730cf74a5e154df4e6d18d.tar.gz
haketilo-hydrilla-1864fc0aaf7d6dba2e730cf74a5e154df4e6d18d.zip
5 files changed, 111 insertions, 47 deletions
diff --git a/src/hydrilla/proxy/web_ui/packages.py b/src/hydrilla/proxy/web_ui/packages.py
index d4146a5..336c2ce 100644
--- a/src/hydrilla/proxy/web_ui/packages.py
+++ b/src/hydrilla/proxy/web_ui/packages.py
@@ -51,10 +51,10 @@ class InvalidUploadedMalcontent(HaketiloException):
         super().__init__(_('err.proxy.uploaded_malcontent_invalid'))
 
 
-bp = flask.Blueprint('load_packages', __package__)
+bp = flask.Blueprint('packages', __package__)
 
 @bp.route('/packages/load_from_disk', methods=['GET'])
-def load_from_disk_get() -> werkzeug.Response:
+def load_from_disk() -> werkzeug.Response:
     html = flask.render_template('packages__load_from_disk.html.jinja')
     return flask.make_response(html, 200)
 
@@ -62,7 +62,7 @@ def load_from_disk_get() -> werkzeug.Response:
 def load_from_disk_post() -> werkzeug.Response:
     zip_file_storage = flask.request.files.get('packages_zipfile')
     if zip_file_storage is None:
-        return load_from_disk_get()
+        return load_from_disk()
 
     with tempfile.TemporaryDirectory() as tmpdir_str:
         tmpdir = Path(tmpdir_str)
diff --git a/src/hydrilla/proxy/web_ui/root.py b/src/hydrilla/proxy/web_ui/root.py
index 67cf6ba..1fcba9f 100644
--- a/src/hydrilla/proxy/web_ui/root.py
+++ b/src/hydrilla/proxy/web_ui/root.py
@@ -60,6 +60,12 @@ def authenticate_by_referrer() -> t.Optional[werkzeug.Response]:
     flask.abort(403)
 
 
+def get_current_endpoint() -> t.Optional[str]:
+    endpoint = flask.request.endpoint
+    assert endpoint is not None
+    return endpoint
+
+
 class WebUIAppImpl(_app.WebUIApp):
     def __init__(self):
         super().__init__(__name__)
@@ -74,7 +80,8 @@ class WebUIAppImpl(_app.WebUIApp):
             ]
         }
 
-        self.jinja_env.globals['versions'] = versions
+        self.jinja_env.globals['versions']             = versions
+        self.jinja_env.globals['get_current_endpoint'] = get_current_endpoint
 
         self.before_request(authenticate_by_referrer)
 
@@ -89,7 +96,7 @@ app_lock = Lock()
 
 
 @app.route('/')
-def respond() -> str:
+def home() -> str:
     return flask.render_template('root.html.jinja')
 
 
diff --git a/src/hydrilla/proxy/web_ui/templates/base.html.jinja b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
index c7a0c15..eb9680f 100644
--- a/src/hydrilla/proxy/web_ui/templates/base.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
@@ -18,47 +18,104 @@ You can choose to use either of these licenses or both.
 I, Wojtek Kosior, thereby promise not to sue for violation of this
 file's licenses. Although I request that you do not make use this code
 in a proprietary work, I am not going to enforce this in court.
-#}
+-#}
 <!DOCTYPE html>
 <html>
   <head>
-    {% block head %}
-    <title>{% block title required %}{% endblock %} - Haketilo proxy</title>
-    <style>
-        {% block style %}
-        body {
-	    color: #444;
-        }
-
-        #main {
-	    max-width: 750px;
-	    margin: auto;
-        }
-
-        a {
-	    text-decoration: inherit;
-	    color: inherit;
-        }
-
-        .small-print {
-	    font-size: 80%;
-	    color: #555;
-        }
-
-	.error-note {
-	    display: block;
-	    border-left: 5px solid #a33;
-	    background-color: #fcc;
-	}
-
-        .hide {
-	    display: none !important;
-        }
-        {% endblock %}
+    {%- block head %}
+      <title>
+	{% block title required %}{% endblock %}
+	-
+	_('web_ui.base.title.haketilo_proxy')
+      </title>
+      <style>
+        {%- block style %}
+          body {
+	      color: #444;
+	      margin: 0;
+          }
+
+          #main {
+	      max-width: 750px;
+	      margin: auto;
+          }
+
+          a {
+	      text-decoration: inherit;
+	      color: inherit;
+          }
+
+          .small-print {
+	      font-size: 80%;
+	      color: #555;
+          }
+
+	  .error-note {
+	      display: block;
+	      border-left: 5px solid #a33;
+	      background-color: #fcc;
+	  }
+
+          .hide {
+	      display: none !important;
+          }
+
+	  ul#nav {
+	      -moz-user-select: none;
+	      user-select: none;
+	      background-color: #e0e0e0;
+	      margin: 0;
+	      border-bottom: 2px solid #444;
+	  }
+
+	  ul#nav > li {
+	      list-style-type: none;
+	      background-color: #70AF70;
+	      font-size: 115%;
+	      padding: 10px;
+	      display: inline-block;
+	      cursor: pointer;
+	      margin: 5px 0 0 0;
+	  }
+
+	  ul#nav > li:hover {
+	      box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+	  }
+
+	  ul#nav > li.nav-active {
+	      background-color: #65A065;
+	      color: #222;
+	      box-shadow: none;
+	      cursor: default;
+	  }
+
+	  ul#item_list > li > a:only-child {
+	      display: block;
+	  }
+        {%- endblock %}
     </style>
-    {% endblock %}
+    {%- endblock %}
   </head>
   <body>
+    {%- set active_endpoint = get_current_endpoint() %}
+    {%-
+      set navigation_bar = [
+          ('home',                    _('web_ui.base.nav.home')),
+          ('packages.packages',       _('web_ui.base.nav.packages')),
+          ('repos.repos',             _('web_ui.base.nav.repos')),
+          ('packages.load_from_disk', _('web_ui.base.nav.load'))
+      ]
+    -%}
+    <ul id="nav">
+      {%- for endpoint, label in navigation_bar %}
+	{%- if endpoint == active_endpoint %}
+	  <li class="nav-active">{{ label }}</li>
+	{%- else %}
+	  <li><a href="{{ url_for(endpoint) }}">{{ label }}</a></li>
+	{%- endif %}
+	</li>
+      {%- endfor %}
+    </ul>
     <div id="main">{% block main required %}{% endblock %}</div>
   </body>
 </html>
diff --git a/src/hydrilla/proxy/web_ui/templates/packages__load_from_disk.html.jinja b/src/hydrilla/proxy/web_ui/templates/packages__load_from_disk.html.jinja
index 33a99f4..0eb5149 100644
--- a/src/hydrilla/proxy/web_ui/templates/packages__load_from_disk.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/packages__load_from_disk.html.jinja
@@ -19,13 +19,13 @@ I, Wojtek Kosior, thereby promise not to sue for violation of this
 file's licenses. Although I request that you do not make use this code
 in a proprietary work, I am not going to enforce this in court.
 #}
-{% extends "base.html.jinja" %}
+{%- extends "base.html.jinja" %}
 {% block title %} {{ _('web_ui.packages.load_from_disk.title') }} {% endblock %}
 {% block main %}
   <form method="POST" enctype="multipart/form-data">
     <div>
       <label for="packages_zipfile">
-	Select a ZIP file with packages&apos; &quot;malcontent&quot; directory.
+	{{ _('web_ui.packages.load_from_disk.select_malcontent_zipfile') }}
       </label>
     </div>
     <div>
@@ -33,7 +33,7 @@ in a proprietary work, I am not going to enforce this in court.
 	     required="">
     </div>
     <div>
-      <button>Install packages</button>
+      <button>{{ _('web_ui.packages.load_from_disk.install_button') }}</button>
     </div>
   </form>
-{% endblock %}
+{%- endblock %}
diff --git a/src/hydrilla/proxy/web_ui/templates/root.html.jinja b/src/hydrilla/proxy/web_ui/templates/root.html.jinja
index f1e3500..62c2b45 100644
--- a/src/hydrilla/proxy/web_ui/templates/root.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/root.html.jinja
@@ -19,8 +19,8 @@ I, Wojtek Kosior, thereby promise not to sue for violation of this
 file's licenses. Although I request that you do not make use this code
 in a proprietary work, I am not going to enforce this in court.
 #}
-{% extends "base.html.jinja" %}
-{% block title %}Home{% endblock %}
+{%- extends "base.html.jinja" %}
+{% block title %} {{ _('web_ui.home.title') }} {% endblock %}
 {% block main %}
-  <a href="/packages/load_from_disk">load packages from disk</a>
+  {{ _('web_ui.home.welcome_to_haketilo') }}
 {% endblock %}
author	Wojtek Kosior <koszko@koszko.org>	2022-08-23 11:16:33 +0200
committer	Wojtek Kosior <koszko@koszko.org>	2022-09-28 12:54:52 +0200
commit	1864fc0aaf7d6dba2e730cf74a5e154df4e6d18d (patch)
tree	4f51635b51c4f83f48e0aa45a9d8e56fd21e9c81
parent	5fefb11ffd50dcda826cd5a256c8b3f650221050 (diff)
download	haketilo-hydrilla-1864fc0aaf7d6dba2e730cf74a5e154df4e6d18d.tar.gz haketilo-hydrilla-1864fc0aaf7d6dba2e730cf74a5e154df4e6d18d.zip