Some more UI work

src/applets/hardware/__init__.py

@@ -0,0 +1,7 @@
+from flask import Blueprint
+
+bp = Blueprint('hardware', __name__,
+               template_folder='')
+
+from applets.hardware import routes
+

src/applets/hardware/hardware.html

@@ -0,0 +1,41 @@
+{% extends "layout.html" %}
+{% block body %}
+
+<p> <b> Would you like fries with that? </b></p>
+
+<br>
+
+<div style="background-color: gray; padding: 4px 6px 7px 6px;
+            border-radius: 10px; margin-bottom: 20px;">
+<span style="width: 100%; border-radius: 8px 8px 0 0;"
+      class="tag is-black">
+Real-time Clock
+</span>
+<div style="padding-left: 15px; padding-right: 15px; background-color: #fff;
+            color: #000;">
+<p>Date / time. / timezone</p> <br>
+<input style="background-color: #777777;" type="checkbox" id="popcon"
+     name="popcon" hx-post="/software/settings"  hx-trigger="change"
+{% if popcon %} checked {% endif %}>
+<label for="popcon"> Participate in PopCon </label><br>
+</div>
+</div>
+
+<div style="background-color: gray; padding: 4px 6px 7px 6px;
+            border-radius: 10px; margin-bottom: 20px;">
+<span style="width: 100%; border-radius: 8px 8px 0 0;"
+      class="tag is-black">
+Firmware
+</span>
+<div style="padding-left: 15px; padding-right: 15px; background-color: #fff;
+            color: #000;">
+<p>Install additional firmware.</p> <br>
+<input style="background-color: #777777;" type="checkbox" id="popcon"
+     name="popcon" hx-post="/software/settings"  hx-trigger="change"
+{% if popcon %} checked {% endif %}>
+<label for="popcon"> Participate in PopCon </label><br>
+</div>
+</div>
+
+
+{% endblock %}

src/applets/hardware/routes.py

@@ -0,0 +1,65 @@
+from applets.hardware import bp
+from flask import Flask, request, session, redirect, \
+     url_for, render_template, flash, Blueprint
+from flask import current_app
+
+@bp.route('/hardware')
+def webui_hardware():
+    """
+    Hardware screen for the webui.
+    """
+    menu = current_app.config['CONFIG']['settings']['menu_order'].split(" ")
+    next_step_url = menu[menu.index("hardware")+1]
+    if menu[menu.index("hardware")] == 1:
+        previous_step_url = False
+    else:
+        previous_step_url = menu[menu.index("hardware")-1]
+
+    sources_button = '&nbsp; <button class="button iis-info"> <i class="fa fa-cloud-download" aria-hidden="true"></i> &nbsp; Configure Network </button>'
+    blends_button = '&nbsp; <button class="button iis-info"> <i class="fa fa-download" aria-hidden="true"></i> &nbsp; Install a Blend  </button>'
+    bottom_menu = sources_button + blends_button
+    build_summary()
+
+    return render_template('hardware.html',
+        menu=current_app.config['CONFIG']['settings']['menu'],
+	menu_order=current_app.config['CONFIG']['settings']['menu_order'].split(),
+	previous_step = previous_step_url,
+	next_step = next_step_url,
+	bottom_menu = bottom_menu,
+	popcon=current_app.config['CONFIG']['recipe']['popcon']['enable_popcon'])
+
+
+@bp.route('/hardware/settings', methods=['GET', 'POST'])
+def hardware_settings():
+    """
+    Receive settings for the hardware applet.
+    """
+    if request.method == 'POST':
+        popcon = "popcon" in request.form
+        current_app.config['CONFIG']['recipe']['popcon']['enable_popcon'] = popcon
+        print(current_app.config['CONFIG']['recipe']['popcon']['enable_popcon'])
+        build_summary()
+        return ('', 204)
+
+
+def build_menu():
+    """
+    Define menu items and paths.
+    """
+    # proper one once translations are done:
+    #current_app.config['CONFIG']['settings']['menu']['welcome'] = (build_stringlist()['menu_item'], "/welcome", 10)
+    current_app.config['CONFIG']['settings']['menu']['hardware'] = ("Hardware", "/hardware", 40)
+
+
+def build_summary():
+    """
+    Write up a summary of what this module will do.
+    """
+    current_app.config['CONFIG']['Summary']['hardware'] = {}
+    current_app.config['CONFIG']['Summary']['hardware']['heading'] = "Hardware"
+    current_app.config['CONFIG']['Summary']['hardware']['bleh'] = current_app.config['CONFIG']['recipe']['popcon']['enable_popcon']
+    current_app.config['CONFIG']['Summary']['hardware']['text'] = "Participate in Popularity Contest: " + str(current_app.config['CONFIG']['recipe']['popcon']['enable_popcon']) + "<br/>No desktop environment selected."
+    return("ok?")
+
+
+build_menu()

src/applets/main/help.html

@@ -4,16 +4,13 @@
 
     <div style="background-color: #424242; padding: 15px; border-radius: 15px; boders: none; color: white;">
     <h1 class="is-size-4"> Help </h1>
-    <p class="title is-6"><span class="tag is-black">The help system is not yet implemented.</span>
+    <br/><p class="title is-6"><span class="tag is-danger">The help system is not yet implemented.</span>
 
 
 
 
 
     <div class="columns">
-      <a href="/welcome">
-           <div class="column"><button class="button is-light">Cancel</button></div>
-      </a>
       <a href="/welcome"><div class="column"><button class="button is-link">Continue</button></div></a>
     </div>
   </div>

src/applets/main/quit.html

@@ -4,13 +4,14 @@
 
     <div style="background-color: #424242; padding: 15px; border-radius: 15px; boders: none; color: white;">
     <h1 class="is-size-4"> Exit system installer </h1>
-    <p class="title is-6"><span class="tag is-black">Quitting is not yet implemented.</span>
+    <br /><p class="title is-6"><span class="tag is-danger">Quitting is not yet implemented.</span>
 
+    <br />
 
+    <p> ALT+F4 will bring up a dialog that works though. </p>
+
+    <br />
     <div class="columns">
-      <a href="/welcome">
-           <div class="column"><button class="button is-light">Cancel</button></div>
-      </a>
       <a href="/welcome"><div class="column"><button class="button is-link">Continue</button></div></a>
     </div>
   </div>

src/applets/users/routes.py

@@ -33,7 +33,7 @@ def users_root():
     else:
         previous_step_url = menu[menu.index("users")-1]
 
-    root_button = '&nbsp; <button class="button is-light"> <i class="fa fa-user" aria-hidden="true"></i> &nbsp; Setup root user </button>'
+    root_button = '&nbsp; <button class="button not-allowed is-light"> <i class="fa fa-user" aria-hidden="true"></i> &nbsp; Setup root user </button>'
     ldap_button = '&nbsp; <button class="button is-light"> <i class="fa fa-address-card" aria-hidden="true"></i> &nbsp; Connect LDAP </button>'
     ad_button = '&nbsp; <button class="button is-light"> <i class="fa fa-address-card" aria-hidden="true"></i> &nbsp; Connect AD </button>'
     csv_button = '&nbsp; <button class="button is-light"> <i class="fa fa-users" aria-hidden="true"></i> &nbsp; Import CSV </button>'

src/applets/welcome/routes.py

@@ -5,6 +5,7 @@ from flask import Flask, request, session, redirect, \
 from flask import current_app
 import gettext
 import dmm.lsblk as lsblk
+import dmm.timezone as timezone
 
 # Set up Gettext
 def set_language(LANG):
@@ -60,6 +61,7 @@ def welcome_index():
                            string_dict=string_dict, selected_lang=lang,
                            menu=current_app.config['CONFIG']['settings']['menu'],
                            menu_order=current_app.config['CONFIG']['settings']['menu_order'].split(),
+                           timezones=timezone.list_timezones()[1].split("\n"),
                            previous_step=previous_step_url,
                            next_step=next_step_url,
                            bottom_menu=bottom_menu)

src/applets/welcome/welcome.html

@@ -8,11 +8,12 @@
 <p><b> {{ string_dict['welcome_text'] }} </b></p>
 <p>{{ string_dict['confirm_text'] }} </p> <br />
 
-<div style="padding-left: 15px;">
+<div style="padding-left: 15px; align: center;">
 
+<div style="float: left; padding-left: 100px;">
+<button>
 <form action="/welcome" method="POST">
-<i class="fa fa-language-o" aria-hidden="true"></i>
-{{ string_dict['language_text'] }}
+<img src="/static/icons/language.jpg" width="96px" alt="{{ string_dict['language_text'] }}" />
 <div class="control is-link" width="180px">
   <div class="select">
     <select hx-post="/welcome" hx-target="body" name="lang" style="width: 220px">
@@ -23,34 +24,27 @@
   </div>
 </div>
 </form>
+</button>
+</div>
+
 <br>
 
+<div style="float: left; position: relative; top: -10px; padding-left: 100px;"
+<button>
 <form>
-<i class="fa fa-keyboard-o" aria-hidden="true"></i> {{ string_dict['keylayout_text'] }}
+<img src="/static/icons/keyboard.png" width="90px" />
 <div class="control is-link">
   <div class="select">
     <select hx-post="/welcome" hx-target="body" name="keyboard" style="width: 220px">
         <option>en-us</option>
-      <option>en-uk</option>
+        <option>en-za</option>
     </select>
   </div>
 </div>
 </form>
-<br />
-
-<form>
-<i class="fa fa-clock-o" aria-hidden="true"></i> {{ string_dict['timezone_text'] }}
-<div class="control is-link">
-  <div class="select">
-    <select hx-post="/welcome" hx-target="body" name="timezone" style="width: 220px">
-      <option>Africa/Johannesburg</option>
-      <option>UTC</option>
-    </select>
+</button>
 </div>
 </div>
-</form>
-
-</div>
 
 </div>
 </div>

src/templates/footer.html

@@ -3,28 +3,34 @@
 
 {% if previous_step %}
     <!-- Why two of these? So that we can use two different keyboard shortcuts for back. -->
-<a href="/{{ previous_step }}"><button hx-get="/{{ previous_step }}" hx-target="body" hx-trigger="click, keyup[ctrlKey&&code=='PageUp'] from:body" class="button is-light">Back</button></a>
-<a href="/{{ previous_step }}"><button hx-get="/{{ previous_step }}" hx-target="body" hx-trigger="click, keyup[altKey&&key=='b'] from:body" class=""></button></a>
+    <button style="display: none;" hx-get="/{{ previous_step }}" hx-target="body"
+       hx-trigger="click, keydown[altKey&&key=='b'] from:body"></button>
+    <a href="/{{ previous_step }}"><button hx-get="/{{ previous_step }}" hx-target="body"
+       hx-trigger="click, keydown[ctrlKey&&code=='PageUp'] from:body" class="button is-light">Back</button></a>
 {% endif %}
 
 {% if bottom_menu %}
    {{ bottom_menu | safe }}
 {% endif %}
 
-</div>
+</div> <!-- end buttons on the left  -->
 
 
 <!-- Buttons on the right -->
 <div style="position: absolute; bottom: 15px; right: 15px;">
+
 {% if next_step %}
+
     {% if next_step == "install" %}
-<a href="/{{ next_step }}"><button hx-get="/{{ next_step }}" hx-target="body" hx-trigger="click, keyup[altKey&&key=='i'] from:body" class="button is-link">Install</button></a>
+        <a href="/{{ next_step }}"><button hx-get="/{{ next_step }}" hx-target="body"
+	hx-trigger="click, keyup[altKey&&key=='i'] from:body" class="button is-link">Install</button></a>
     {% else %}
-
     <!-- Why two of these? So that we can use two different keyboard shortcuts for next. -->
-<a href="/{{ next_step }}"<button hx-get="/{{ next_step }}" hx-target="body" hx-trigger="click, keyup[ctrlKey&&code=='PageDown'] from:body" class=""></button></a>
-<a href="/{{ next_step }}"<button hx-get="/{{ next_step }}" hx-target="body" hx-trigger="click, keyup[altKey&&key=='n'] from:body" class="button is-link">Next</button></a>
+    <a href="/{{ next_step }}"<button hx-get="/{{ next_step }}" hx-target="body"
+       hx-trigger="click, keydown[ctrlKey&&code=='PageDown'] from:body" class=""></button></a>
+    <a href="/{{ next_step }}"<button hx-get="/{{ next_step }}" hx-target="body"
+       hx-trigger="click, keydown[altKey&&key=='n'] from:body" class="button is-link">Next</button></a>
+    {% endif %}
+    {% endif %}
 
-{% endif %}
-{% endif %}
-</div>
+</div> <!-- end buttons on the right -->

src/templates/header.html

@@ -2,7 +2,7 @@
 <div id="titlebar" style="padding: 15px; margin: -15px; padding-bottom: 30px;"> 
 
 <!-- drag region class: -->
-<!-- <div id="titlebar" class="pywebview-drag-region" style="padding: 15px; margin: -15px; padding-bottom: 30px;"> -->
+<div id="titlebar" class="pywebview-drag-region" style="padding: 15px; margin: -15px; padding-bottom: 30px;">
 
 <a hx-get="/main/menu" hx-swap="outerHTML"/> <button class="button is-link"> ☰ </button </a>
 
@@ -13,7 +13,6 @@
 
 <div style="position: absolute; top: 15px; right: 15px;">
     <a hx-get="/main/help" hx-swap="outerHTML"/> <button class="button is-light"> <b> ? </b> </button></a>
-
     <a hx-get="/main/quit" hx-swap="outerHTML"/><button onclick="closeApp()" class="button is-danger" >  🗙 </button></a>
 </div>