Some more initial changes

README.md

@@ -1,6 +1,20 @@
 Dependencies
  - flask
+ - flask-babel
  - pytest
  - coverage
  - libjs-htmx
  - libjs-material-design-lite
+ - xapp-gtk3-module
+
+
+## Development
+
+### Translations
+
+Upstream PyBabel documentation:
+https://python-babel.github.io/flask-babel/index.html#translating-applications
+
+in the ./daemon directory, run the following to regenerate the translations file:
+
+```pybabel extract -F babel.cfg -o messages.pot .```

src/applets/software/software.html

@@ -1,22 +1,15 @@
 {% extends "layout.html" %}
 {% block body %}
 
-<div style="width: 1000px; font-family: Noto Sans;">
-
 <p> <b> Would you like fries with that? </b></p>
 
 <br>
 
 <ul>
+<li>Would you like to participate in popcon?</li>
 <li>Desktop environment</li>
 <li>Server software</li>
 </ul>
-<br><br>
-
-<div class="columns">
-  <div class="column"><button class="button is-light">Back</button></div>
-  <a href="./summary"><div class="column"><button class="button is-link">Next</button></div></a>
-</div>
 
 </div>
 </div>

src/applets/summary/summary.html

@@ -1,19 +1,8 @@
 {% extends "layout.html" %}
 {% block body %}
 
-<div style="width: 1000px; height: 100%;">
-
 <p><b> Ready to install! Please review all changes.</b></p>
 
-<br>
-
-<br><br>
-
-<div class="columns">
-  <div class="column"><button class="button is-light">Back</button></div>
-  <a href="./install"><div class="column"><button class="button is-link">Start Install</button></div></a>
-</div>
-
 </div>
 </div>
 </div>

src/applets/users/users.html

@@ -1,8 +1,6 @@
 {% extends "layout.html" %}
 {% block body %}
 
-<div style="width: 1000px; font-family: Noto Sans;">
-
 <p><b> Let's set up an initial user. </b></p>
 
 <br>
@@ -46,16 +44,7 @@
 
 </div> <!-- style 180 -->
 
-<br><br>
-
-<div class="columns">
-	<div class="column"><button class="button is-light">Back</button> <button class="button is-light">Connect Active Directory</button> <button class="button is-light">Connect LDAP</button></div>
-  <a href="./disks"><div class="column"><button class="button is-link">Next</button></div></a>
 </div>
-
-</div>
-</div>
-
 </div>
 
 {% endblock %}

src/applets/welcome/routes.py

@@ -1,8 +1,12 @@
 from applets.welcome import bp
 from flask import Flask, request, session, redirect, \
      url_for, render_template, flash, Blueprint
+import gettext
 import dmm.lsblk as lsblk
 
+# Set up Gettext
+en_i18n = gettext.translation("welcome", './locales', fallback=True, languages=['af', 'en'])
+en_i18n.install()
 
 @bp.route('/welcome',methods=['GET', 'POST', 'PUT'])
 def welcome_index():
@@ -11,13 +15,19 @@ def welcome_index():
     this app in a browser.
     """
     blkid = lsblk.list_scsi_devices()
-    return render_template('welcome.html', blkid=blkid)
-    #return ("Welcome to System Installer Daemon POC <br />"
-    #        "This is the Welcome Index")
+    string_dict = build_stringlist()
+    return render_template('welcome.html', string_dict=string_dict)
 
 
-@bp.route('/welcome2')
-def welcome2_index():
-    return ("Changins some text in our htmx front-end")
-
+def build_stringlist():
+    """
+    Return all the strings that is used in this applet."
+    """
+    string_dict = {}
+    string_dict['welcome_text'] = _("Welcome! This setup program will install Debian on to your system.")
+    string_dict['confirm_text'] = _("Please confirm the following details:")
+    string_dict['language_text'] = _("Language:")
+    string_dict['keylayout_text'] = _("Keyboard Layout:")
+    string_dict['timezone_text'] = _("Time Zone:")
+    return string_dict
 

src/applets/welcome/welcome.html

@@ -1,16 +1,11 @@
 {% extends "layout.html" %}
 {% block body %}
 
-<div style="width: 1000px; height: 100%; font-family: Noto Sans;">
+<img style="top: 10px; width: 100%;" src="/static/applets/welcome/img/banner.png" alt="Debian Image banner" />
+<p><b> {{ string_dict['welcome_text'] }} </b></p>
+<p>{{ string_dict['confirm_text'] }} </p>
 
-<p><b>Welcome! This setup program will install Debian on to your system.</b></p>
-
-<br>
-
-<div class="columns" style="text-align: center;">
-
-<div class="column">
-<img src="/static/icons/keyboard.svg" style="fill: white;" width="180px" />
+<img src="/static/icons/keyboard.svg" /> {{ string_dict['language_text'] }} 
 <div class="control is-link" width="180px">
   <div class="select">
     <select style="width: 180px">
@@ -19,12 +14,10 @@
     </select>
   </div>
 </div>
-</div
 
 <br>
 
-<div class="column">
-<img src="/static/icons/keyboard.svg" width="180px" />
+<img src="/static/icons/keyboard.svg" /> {{ string_dict['keylayout_text'] }}
 <div class="control is-link">
   <div class="select">
     <select style="width: 180px">
@@ -33,12 +26,10 @@
     </select>
   </div>
 </div>
-</div>
 
-<br>
+<br />
 
-<div class="column">
-<img src="/static/icons/keyboard.svg" width="180px" />
+<img src="/static/icons/keyboard.svg" /> {{ string_dict['timezone_text'] }}
 <div class="control is-link">
   <div class="select">
     <select style="width: 180px">
@@ -47,16 +38,8 @@
     </select>
   </div>
 </div>
-</div>
 
-</div> <!-- end columns -->
 
-<br><br><br><br><br><br<br><br>
-
-<div class="columns">
-  <div class="column"><button class="button is-light">Quit</button></div>
-  <a href="./users"><div class="column"><button class="button is-link">Next</button></div></a>
-</div>
 
 </div>
 </div>

src/system-installer-daemon

@@ -12,6 +12,8 @@ import importlib
 
 # configuration
 VERSION = "0.00"
+BABEL_TRANSLATION_DIRECTORIES="translations"
+BABEL_DOMAIN="translations"
 SECRET_KEY = "exampls"
 DEV_MODE = True
 APPS = "main welcome users disks software summary"
@@ -25,6 +27,7 @@ if DEV_MODE:
 app = Flask(__name__)
 app.config.from_object(__name__)
 
+
 # Register blueprints here
 for APP in APPS.split(" "):
     print(f"Loading applet: {APP} ")
@@ -48,3 +51,4 @@ if __name__ == '__main__':
     port=8080,
     url_scheme='http',
     expose_tracebacks=DEV_MODE)
+

src/system-installer-daemon.py

@@ -1,50 +0,0 @@
-#!/usr/bin/env python3
-"""
-Welcome to SID - The System Installer Daemon!
-"""
-
-from flask import Flask, request, session, redirect, \
-     url_for, render_template, flash, Blueprint
-from waitress import serve
-import logging
-import dmm.lsblk as lsblk
-import importlib
-
-# configuration
-VERSION = "0.00"
-SECRET_KEY = "exampls"
-DEV_MODE = True
-APPS = "main welcome users disks software summary"
-
-if DEV_MODE:
-    print("Note: Starting in devmode!")
-    DEBUG = True
-    tracebacks = True
-
-# create our application in flask
-app = Flask(__name__)
-app.config.from_object(__name__)
-
-# Register blueprints here
-for APP in APPS.split(" "):
-    print(f"Loading applet: {APP} ")
-    # Dynamically import the blueprint module
-    module = importlib.import_module(f"applets.{APP}")
-    # Get the blueprint (bp) from the imported module
-    bp = getattr(module, "bp")
-    # Register the blueprint with the app
-    app.register_blueprint(bp)
-
-# configure logs
-# logging.basicConfig()
-logger = logging.getLogger('waitress')
-if DEV_MODE == "1":
-    logger.setLevel(logging.DEBUG)
-    logger.debug("logger set to DEBUG")
-
-if __name__ == '__main__':
-    serve(app,
-    host='0.0.0.0',
-    port=8080,
-    url_scheme='http',
-    expose_tracebacks=DEV_MODE)

src/system-installer-web-client

@@ -13,7 +13,7 @@ def on_closed():
 
 window = webview.create_window('System Installer', LOCATION,
                       transparent=True, easy_drag=False, frameless=True,
-                      width=1030, focus=True, zoomable=True,
+                      width=1050, focus=True, zoomable=True,
                       confirm_close=True)
 
 window.events.closed += on_closed

src/templates/header.html

@@ -1,5 +1,5 @@
 <!-- Header -->
-<div id="titlebar" class="pywebview-drag-region">
+<div id="titlebar" class="pywebview-drag-region" style="padding-bottom: 10px;">
 <span>
     <button class="button is-link"> ☰ </button>
     <a href="/welcome"><button class="button is-{% if request.path == "/welcome" %}info{% else %}dark{% endif %}">Welcome</button></a>
@@ -11,5 +11,4 @@
     <a href="/help"> <button class="button is-light" style="float: right; margin-right: 5px;"> <b> ? </b> </button></a>
 </span>
 </div> <!-- end pywebview-drag-region -->
-<br>
 <!-- End Header -->

src/templates/layout.html

@@ -4,16 +4,21 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="/static/bulma.css" rel="stylesheet">
-  <link href="/static/welcome.css" rel="stylesheet">
+  <link href="/static/system-installer.css" rel="stylesheet">
   <script src="/static/htmx.min.js" crossorigin="anonymous"></script>
 </head>
-<body>
+<body style="overflow: hidden; max-height: 450px;">
 
-<div style="border-radius: 10px; padding: 13px;" class="notification is-dark">
+<div style="width: 1050px; height: 600px; border-radius: 10px; padding: 13px; overflow: hidden;" class="notification is-dark">
 
 {% include "header.html" %}
+
+<div style="height: 450px; overflow-y: scroll">
 {% block body %}
 {% endblock %}
+</div>
+
+{% include "footer.html" %}
 
 </body>
 </html>