S allius/issue395 (#399)

* add button for languages setting

* build a web module for the dashboard

- load all python module from local dir
- initialize Blueprint and Babel

* set a default key for secure cookies

* add translations to docker container

* improve translation build  

- clean target erases the *.pot
- don't modify the resurt of url_for() calls
- don't translate the language description

* translate connection table, fix icon

* build relative urls for HA ingress

* fix unit test, increase coverage

app/src/web/__init__.py

@@ -0,0 +1,32 @@
+'''Quart blueprint for the proxy webserver with the dashboard
+
+Usage:
+    app = Quart(__name__, ...)
+    Web(app)
+'''
+from quart import Quart, Blueprint
+from quart_babel import Babel
+from utils import load_modules
+
+web = Blueprint('web', __name__)
+
+load_modules(__loader__)
+
+
+class Web:
+    '''Helper Class to register the Blueprint at Quart and
+    initializing Babel'''
+    def __init__(self,
+                 app: Quart,
+                 translation_directories: str | list[str],
+                 rel_urls: bool):
+        web.build_relative_urls = rel_urls
+        app.register_blueprint(web)
+
+        from .i18n import get_locale, get_tz
+        global babel
+        babel = Babel(
+            app,
+            locale_selector=get_locale,
+            timezone_selector=get_tz,
+            default_translation_directories=translation_directories)

app/src/web/conn_table.py

@@ -1,4 +1,9 @@
 from inverter_base import InverterBase
+from quart import render_template
+from quart_babel import format_datetime, _
+from infos import Infos
+
+from . import web
 
 
 def _get_device_icon(client_mode: bool):
@@ -12,7 +17,7 @@ def _get_device_icon(client_mode: bool):
 def _get_cloud_icon(emu_mode: bool):
     '''returns the icon for the cloud conntection'''
     if emu_mode:
-        return 'fa-cloud-arrow-down-alt'
+        return 'fa-cloud-arrow-up-alt'
 
     return 'fa-cloud'
 
@@ -49,9 +54,9 @@ def get_table_data():
             "w3-hide-small w3-hide-medium", "w3-hide-large",
         ],
         "thead": [[
-            'Device-IP:Port', 'Device-IP',
-            "Serial-No",
-            "Cloud-IP:Port", "Cloud-IP"
+            _('Device-IP:Port'), _('Device-IP'),
+            _("Serial-No"),
+            _("Cloud-IP:Port"), _("Cloud-IP")
         ]],
         "tbody": []
     }
@@ -59,3 +64,19 @@ def get_table_data():
         table['tbody'].append(_get_row(inverter))
 
     return table
+
+
+@web.route('/data-fetch')
+async def data_fetch():
+    data = {
+        "update-time": format_datetime(format="medium"),
+        "server-cnt": f"<h3>{Infos.get_counter('ServerMode_Cnt')}</h3>",
+        "client-cnt": f"<h3>{Infos.get_counter('ClientMode_Cnt')}</h3>",
+        "proxy-cnt": f"<h3>{Infos.get_counter('ProxyMode_Cnt')}</h3>",
+        "emulation-cnt": f"<h3>{Infos.get_counter('EmuMode_Cnt')}</h3>",
+    }
+    data["conn-table"] = await render_template('conn_table.html.j2',
+                                               table=get_table_data())
+
+    data["notes-list"] = await render_template('notes_list.html.j2')
+    return data

app/src/web/favicon.py

@@ -0,0 +1,37 @@
+import os
+
+from quart import send_from_directory
+
+from . import web
+
+
+async def get_icon(file: str, mime: str = 'image/png'):
+    return await send_from_directory(
+        os.path.join(web.root_path, 'static/images'),
+        file,
+        mimetype=mime)
+
+
+@web.route('/favicon-96x96.png')
+async def favicon():
+    return await get_icon('favicon-96x96.png')
+
+
+@web.route('/favicon.ico')
+async def favicon_ico():
+    return await get_icon('favicon.ico', 'image/x-icon')
+
+
+@web.route('/favicon.svg')
+async def favicon_svg():
+    return await get_icon('favicon.svg', 'image/svg+xml')
+
+
+@web.route('/apple-touch-icon.png')
+async def apple_touch():
+    return await get_icon('apple-touch-icon.png')
+
+
+@web.route('/site.webmanifest')
+async def webmanifest():
+    return await get_icon('site.webmanifest', 'application/manifest+json')

app/src/web/i18n.py

@@ -0,0 +1,42 @@
+from quart import request, session, redirect, abort
+from quart_babel.locale import get_locale as babel_get_locale
+
+from . import web
+
+LANGUAGES = {
+    'en': 'English',
+    'de': 'Deutsch',
+    # 'fr': 'Français'
+}
+
+
+def get_locale():
+    try:
+        language = session['language']
+    except KeyError:
+        language = None
+    if language is not None:
+        return language
+
+    # check how to get the locale form for the add-on - hass.selectedLanguage
+    # logging.info("get_locale(%s)", request.accept_languages)
+    return request.accept_languages.best_match(LANGUAGES.keys())
+
+
+def get_tz():
+    return 'CET'
+
+
+@web.context_processor
+def utility_processor():
+    return dict(lang=babel_get_locale(),
+                lang_str=LANGUAGES.get(str(babel_get_locale()), "English"),
+                languages=LANGUAGES)
+
+
+@web.route('/language/<language>')
+async def set_language(language=None):
+    if language in LANGUAGES:
+        session['language'] = language
+        return redirect('../#')
+    return abort(404)

app/src/web/pages.py

@@ -0,0 +1,16 @@
+from quart import render_template
+from .wrapper import url_for
+
+from . import web
+
+
+@web.route('/')
+async def index():
+    return await render_template(
+        'index.html.j2',
+        fetch_url=url_for('web.data_fetch'))
+
+
+@web.route('/page')
+async def empty():
+    return await render_template('empty.html.j2')

app/src/web/routes.py

@@ -1,69 +0,0 @@
-from quart import Blueprint
-from quart import render_template, url_for
-from quart import send_from_directory
-from quart_babel import format_datetime
-from infos import Infos
-from web.conn_table import get_table_data
-import os
-
-web_routes = Blueprint('web_routes', __name__)
-
-
-async def get_icon(file: str, mime: str = 'image/png'):
-    return await send_from_directory(
-        os.path.join(web_routes.root_path, 'static/images'),
-        file,
-        mimetype=mime)
-
-
-@web_routes.route('/')
-async def index():
-    return await render_template(
-        'index.html.j2',
-        fetch_url='.'+url_for('web_routes.data_fetch'))
-
-
-@web_routes.route('/page')
-async def empty():
-    return await render_template('empty.html.j2')
-
-
-@web_routes.route('/data-fetch')
-async def data_fetch():
-    data = {
-        "update-time": format_datetime(format="medium"),
-        "server-cnt": f"<h3>{Infos.get_counter('ServerMode_Cnt')}</h3>",
-        "client-cnt": f"<h3>{Infos.get_counter('ClientMode_Cnt')}</h3>",
-        "proxy-cnt": f"<h3>{Infos.get_counter('ProxyMode_Cnt')}</h3>",
-        "emulation-cnt": f"<h3>{Infos.get_counter('EmuMode_Cnt')}</h3>",
-    }
-    data["conn-table"] = await render_template('conn_table.html.j2',
-                                               table=get_table_data())
-
-    data["notes-list"] = await render_template('notes_list.html.j2')
-    return data
-
-
-@web_routes.route('/favicon-96x96.png')
-async def favicon():
-    return await get_icon('favicon-96x96.png')
-
-
-@web_routes.route('/favicon.ico')
-async def favicon_ico():
-    return await get_icon('favicon.ico', 'image/x-icon')
-
-
-@web_routes.route('/favicon.svg')
-async def favicon_svg():
-    return await get_icon('favicon.svg', 'image/svg+xml')
-
-
-@web_routes.route('/apple-touch-icon.png')
-async def apple_touch():
-    return await get_icon('apple-touch-icon.png')
-
-
-@web_routes.route('/site.webmanifest')
-async def webmanifest():
-    return await get_icon('site.webmanifest', 'application/manifest+json')

app/src/web/templates/base.html.j2

@@ -4,8 +4,8 @@
     <title>{% block title %}{% endblock title %}</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href=".{{ url_for('static', filename= 'css/style.css') }}">
-    <link rel="stylesheet" href=".{{ url_for('static', filename= 'font-awesome/css/all.min.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename= 'font-awesome/css/all.min.css') }}">
     <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="shortcut icon" href="/favicon.ico" />
@@ -14,7 +14,7 @@
     <style>
         @font-face {
             font-family: Roboto;
-            src: url(".{{ url_for('static', filename= 'font/roboto-light.ttf') }}");
+            src: url("{{ url_for('static', filename= 'font/roboto-light.ttf') }}");
         }
         html,body,h1,h2,h3,h4,h5 {font-family: Roboto, sans-serif}
     </style>
@@ -22,20 +22,28 @@
   <body class="w3-light-grey">
   
     <!-- Top container -->
-    <div class="w3-bar w3-top w3-dark-grey w3-large" style="z-index:4">
-      <button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey" onclick="w3_open();"><i class="fa fa-bars"></i>  Menu</button>
+    <div class="w3-bar w3-dark-grey w3-large" style="z-index:4">
+      <button class="w3-bar-item w3-button w3-hide-large" onclick="w3_open();"><i class="fa fa-bars"></i>  Menu</button>
+      <div class="w3-dropdown-hover w3-right">
+        <button class="w3-button">{{lang_str}}</button>
+        <div class="w3-dropdown-content w3-bar-block w3-card-4" style="right:0">
+          {% for language in languages %}
+          <a href="{{url_for('web.set_language', language=language)}}" class="w3-bar-item w3-button">{{languages[language]}}</a>
+          {% endfor %}
+        </div>
+      </div>
+
       {% if fetch_url is defined %}
-      <button class="w3-bar-item w3-button w3-hover-none w3-hover-text-light-grey w3-right" onclick="fetch_data();"><span class="w3-hide-small">{{_('Updated:')}}  </span><span id="update-time"></span>  <i class="fa fa-rotate-right w3-medium"></i></button>
-      {% else %}
-      <span class="w3-bar-item w3-right">Logo</span>
+      <button class="w3-bar-item w3-button w3-right" onclick="fetch_data();"><span class="w3-hide-small">{{_('Updated:')}}  </span><span id="update-time"></span>  <i class="w3-hover fa fa-rotate-right w3-medium"></i></button>
       {% endif %}
+      <div class="w3-clear"></div>
     </div>
   
     <!-- Sidebar/menu -->
     <nav class="w3-sidebar w3-collapse w3-white" style="z-index:3;width:250px;" id="mySidebar"><br>
       <div class="w3-container w3-row">
         <div class="w3-col s4">
-          <img src=".{{ url_for('static', filename= 'images/favicon.svg') }}" alt="" class="w3-circle w3-margin-right" style="width:60px">
+          <img src="{{url_for('static', filename= 'images/favicon.svg') }}" alt="" class="w3-circle w3-margin-right" style="width:60px">
         </div>
         <div class="w3-col s8 w3-bar">
           <h3>TSUN-Proxy</h3><br>
@@ -47,9 +55,9 @@
       </div>
       <div class="w3-bar-block">
         <button href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu"><i class="fa fa-remove fa-fw"></i>  Close Menu</button>
-        <a href=".{{ url_for('web_routes.index')}}" class="w3-bar-item w3-button w3-padding {% block menu1_class %}{% endblock %}"><i class="fa fa-network-wired fa-fw"></i>  {{_('Connections')}}</a>
-        <a href=".{{ url_for('web_routes.empty')}}" class="w3-bar-item w3-button w3-padding {% block menu2_class %}{% endblock %}"><i class="fa fa-database fa-fw"></i>  MQTT</a>
-        <a href=".{{ url_for('web_routes.empty')}}" class="w3-bar-item w3-button w3-padding"><i class="fa fa-file-export fa-fw {% block menu3_class %}{% endblock %}"></i>  Downloads</a>
+        <a href="{{ url_for('web.index')}}" class="w3-bar-item w3-button w3-padding {% block menu1_class %}{% endblock %}"><i class="fa fa-network-wired fa-fw"></i>  {{_('Connections')}}</a>
+        <a href="{{ url_for('web.empty')}}" class="w3-bar-item w3-button w3-padding {% block menu2_class %}{% endblock %}"><i class="fa fa-database fa-fw"></i>  MQTT</a>
+        <a href="{{ url_for('web.empty')}}" class="w3-bar-item w3-button w3-padding"><i class="fa fa-file-export fa-fw {% block menu3_class %}{% endblock %}"></i>  Downloads</a>
       </div>
     </nav>
   

app/src/web/wrapper.py

@@ -0,0 +1,26 @@
+from quart import url_for as quart_url_for
+from . import web
+
+
+def url_for(*args, **kwargs):
+    """Return the url for a specific endpoint.
+
+    This wrapper optionally convert into a relative url.
+
+    This is most useful in templates and redirects to create a URL
+    that can be used in the browser.
+
+    Arguments:
+        endpoint: The endpoint to build a url for, if prefixed with
+            ``.`` it targets endpoint's in the current blueprint.
+        _anchor: Additional anchor text to append (i.e. #text).
+        _external: Return an absolute url for external (to app) usage.
+        _method: The method to consider alongside the endpoint.
+        _scheme: A specific scheme to use.
+        values: The values to build into the URL, as specified in
+            the endpoint rule.
+    """
+    url = quart_url_for(*args, **kwargs)
+    if '/' == url[0] and web.build_relative_urls:
+        url = '.' + url
+    return url