Added the HTML framework for showing the content.

vasl_templates/webapp/generate.py

@@ -1,15 +1,3 @@
 """ Webapp handlers. """
 
-from flask import request
-
-from vasl_templates.webapp import app
-
 # ---------------------------------------------------------------------
-
-@app.route( "/generate", methods=["POST"] )
-def generate_html():
-    """Generate a response"""
-    val = request.form.get( "val" )
-    if val:
-        val = val.strip()
-    return "You said: {}".format( '"{}"'.format(val) if val else "nothing!" )

vasl_templates/webapp/static/css/main.css

@@ -1 +1,58 @@
 * { margin: 0 ; padding: 0 }
+html { height: 100% ; }
+body { height: 100% ; }
+
+/* -------------------------------------------------------------------- */
+
+#tabs { position: absolute ; top: 5px ; bottom: 5px ; left: 5px ; right: 5px ; }
+
+#tabs-scenario {
+    display: grid ; display: -ms-grid ;
+    grid-template-rows: 2fr 3fr ; -ms-grid-rows: 2fr 3fr ;
+    grid-template-columns: 25em 1fr ; -ms-grid-columns: 25em 1fr ;
+}
+#panel-scenario {
+    height: 100% ;
+    grid-row-start: 1 ; -ms-grid-row: 1 ;
+    grid-row-end: 3 ; -ms-grid-row-span: 2 ;
+}
+#panel-vc {
+    -ms-grid-row: 1 ; -ms-grid-column: 2 ;
+}
+#panel-ssr {
+    height: 100% ;
+    -ms-grid-row: 2 ; -ms-grid-column: 2 ;
+}
+
+#tabs-ob1, #tabs-ob2 {
+    display: grid ; display: -ms-grid ;
+    grid-template-rows: 10em 1fr ; -ms-grid-rows: 10em 1fr ;
+    grid-template-columns: 1fr 1fr ; -ms-grid-columns: 1fr 1fr ;
+}
+#panel-obsetup1, #panel-obsetup2 {
+    grid-row-start: 1 ; -ms-grid-row: 1 ;
+    grid-column-start: 1 ; -ms-grid-row: 1 ;
+}
+#panel-obvehicles1, #panel-obvehicles2 {
+    height: 100% ;
+    grid-row-start: 1 ; -ms-grid-row: 1 ;
+    grid-row-end: 3 ; -ms-grid-row-span: 2 ;
+    -ms-grid-column: 2 ;
+}
+#panel-obordnance1, #panel-obordnance2 {
+    height: 100% ;
+    -ms-grid-row: 2 ; -ms-grid-column: 1 ;
+}
+
+#tabs-other {
+    display: grid ; display: -ms-grid ;
+    grid-template-rows: 1fr ; -ms-grid-rows: 1fr ;
+    grid-template-columns: 1fr ; -ms-grid-columns: 1fr ;
+}
+#panel-other {
+    height: 100% ;
+}
+
+fieldset { height: calc(100% - 10px) ; margin: 0 5px 5px 5px ; }
+#tabs-other fieldset { border: none ; }
+fieldset legend { padding: 0 0.2em 0 0.2em ; }

vasl_templates/webapp/static/main.js

@@ -2,18 +2,27 @@
 // --------------------------------------------------------------------
 
 $(document).ready( function () {
-    $("form").submit( function( evt ) {
-        evt.preventDefault() ;
-        var data = { val: $("form input[name='val']").val() } ;
-        $.post( {
-            url: gGenerateURL,
-            data: data,
-            success: function( data ) {
-                $("#response").text( data ) ;
-            },
-            error: function( xhr, status, errorMsg ) {
-                $("#response").text( "ERROR: "+errorMsg ) ;
-            },
+
+    // initialize
+    $("#tabs").tabs( {
+        heightStyle: "fill",
+    } ) ;
+    var navHeight = $("#tabs .ui-tabs-nav").height() ;
+
+    // FUDGE! CSS grids don't seem to update their layout vertically when
+    // inside a jQuery tab control - we do it manually :-/
+    var prevHeight = [] ;
+    $(window).resize( function() {
+        $(".ui-tabs-panel").each( function() {
+            $(this).css( "padding", "5px" ) ; // FUDGE! doesn't work when set in the CSS :-/
+            var id = $(this).attr( "id" ) ;
+            var h = $(this).parent().innerHeight() - navHeight - 20 ;
+            if ( h !== prevHeight[id] )
+            {
+                $(this).css( "height", h+"px" ) ;
+                prevHeight[id] = h ;
+            }
         } ) ;
     } ) ;
+    $(window).trigger( "resize" ) ;
 } ) ;

vasl_templates/webapp/templates/main.html

@@ -5,25 +5,77 @@
 <meta charset="utf-8">
 <title> {{APP_NAME}} </title>
 <link rel="shortcut icon" href="{{url_for('static', filename='images/favicon.ico')}}">
+<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='jquery-ui/jquery-ui.min.css')}}" />
 <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/main.css')}}" />
 </head>
 
 <body>
+<div id="tabs">
 
-<form action="/generate">
-Say something:
-<input type="text" name="val" size="20">
-<input type="submit" value="GO">
-</form>
+<ul>
+    <li> <a href="#tabs-scenario">Scenario</a>
+    <li> <a href="#tabs-ob1">Player 1 OB</a>
+    <li> <a href="#tabs-ob2">Player 2 OB</a>
+    <li> <a href="#tabs-other">Other</a>
+</ul>
 
-<div id="response"> </div>
+<div id="tabs-scenario">
+    <div id="panel-scenario">
+        <fieldset> <legend>Scenario</legend>
+        </fieldset>
+    </div>
+    <div id="panel-vc">
+        <fieldset> <legend>VC</legend>
+        </fieldset>
+    </div>
+    <div id="panel-ssr">
+        <fieldset> <legend>SSR</legend>
+        </fieldset>
+    </div>
+</div>
 
+<div id="tabs-ob1">
+    <div id="panel-obsetup1">
+        <fieldset> <legend>OB setup</legend>
+        </fieldset>
+    </div>
+    <div id="panel-obvehicles1">
+        <fieldset> <legend>Vehicles</legend>
+        </fieldset>
+    </div>
+    <div id="panel-obordnance1">
+        <fieldset> <legend>Ordnance</legend>
+        </fieldset>
+    </div>
+</div>
+
+<div id="tabs-ob2">
+    <div id="panel-obsetup2">
+        <fieldset> <legend>OB setup</legend>
+        </fieldset>
+    </div>
+    <div id="panel-obvehicles2">
+        <fieldset> <legend>Vehicles</legend>
+        </fieldset>
+    </div>
+    <div id="panel-obordnance2">
+        <fieldset> <legend>Ordnance</legend>
+        </fieldset>
+    </div>
+</div>
+
+<div id="tabs-other">
+    <div id="panel-other">
+        <fieldset>
+        </fieldset>
+    </div>
+</div>
+
+</div>
 </body>
 
 <script src="{{url_for('static',filename='jquery/jquery-3.3.1.min.js')}}"></script>
-<script>
-gGenerateURL = "{{url_for('generate_html')}}" ;
-</script>
+<script src="{{url_for('static',filename='jquery-ui/jquery-ui.min.js')}}"></script>
 <script src="{{url_for('static',filename='main.js')}}"></script>
 
 </html>

vasl_templates/webapp/tests/test_generate.py

@@ -1,37 +1,3 @@
 """ Test response generation. """
 
-from vasl_templates.webapp.tests.utils import find_child
-
 # ---------------------------------------------------------------------
-
-def test_generate( webapp, webdriver ):
-    """Test response generation."""
-
-    # initialize
-    webdriver.get( webapp.url_for( "main" ) )
-
-    # try saying something
-    textbox = find_child( webdriver, "input[type='text']" )
-    textbox.clear()
-    textbox.send_keys( "Hi, there!" )
-    submit = find_child( webdriver, "input[type='submit']" )
-    submit.click()
-    response = find_child( webdriver, "#response" )
-    assert response.text == 'You said: "Hi, there!"'
-
-    # try saying something else
-    textbox = find_child( webdriver, "input[type='text']" )
-    textbox.clear()
-    textbox.send_keys( "Yo mama so big..." )
-    submit = find_child( webdriver, "input[type='submit']" )
-    submit.click()
-    response = find_child( webdriver, "#response" )
-    assert response.text == 'You said: "Yo mama so big..."'
-
-    # try saying nothing
-    textbox = find_child( webdriver, "input[type='text']" )
-    textbox.clear()
-    submit = find_child( webdriver, "input[type='submit']" )
-    submit.click()
-    response = find_child( webdriver, "#response" )
-    assert response.text == "You said: nothing!"