"horizintal navbar"

tetawebapp/static/styles/tetawebapp.css

@@ -41,7 +41,7 @@ main > section.inline > article.right {
   margin-left: 10px;
 }
 
-div.content > nav {
+div.content > nav.vertical {
   flex: 0 0 200px;
   background-color:  var(--clear-bg);
   border-right-color: var(--mid-bg);
@@ -49,12 +49,12 @@ div.content > nav {
   border-right-width: 1px;
 }
 
-div.content > nav {
+div.content > nav.vertical {
   order: -1;
   display: block;
 }
 
-div.content > nav > a {
+div.content > nav.vertical > a {
   display: block;
   background-color: var(--clear-bg);
   font-size: 20px;
@@ -63,13 +63,13 @@ div.content > nav > a {
   text-decoration: none;
 }
 
-div.content > nav > a:hover {
+div.content > nav.vertical > a:hover {
   background-color:  var(--coloured-bg);
   color: var(--white);
   cursor: pointer;
 }
 
-div.content > nav > a.selected {
+div.content > nav.vertical > a.selected {
   background-color:  var(--light-coloured-bg);
 }
 
@@ -79,6 +79,53 @@ main {
   width: 100%;
 }
 
+main > div.navbar_container {
+  text-align: center;
+  padding: 0;
+  margin: 0;
+}
+
+main > div.navbar_container > ul.horizontal {
+  display: inline-block;
+  list-style-type: none;
+  margin: 10px;
+  padding: 0;
+  overflow: hidden;
+  background-color: var(--clear-bg);
+  border-color: var(--coloured-bg);
+  border-style: solid;
+  border-width: 1px;
+  color: var(--text-color);
+  border-radius: 2px;
+}
+
+main > div.navbar_container > ul.horizontal > li {
+  float: left;
+}
+
+main > div.navbar_container > ul.horizontal > li > a {
+  display: block;
+  color: var(--text-color);
+  text-align: center;
+  padding: 5px;
+  text-decoration: none;
+}
+
+main > div.navbar_container > ul.horizontal > li > a:hover {
+  background-color: var(--coloured-bg);
+  color: var(--white);
+}
+
+main > div.navbar_container > ul.horizontal > li > a.right_border {
+  border-right-color: var(--coloured-bg);
+  border-right-style: solid;
+  border-right-width: 1px;
+}
+
+main > div.navbar_container > ul.horizontal > li > a.selected {
+  background-color: var(--light-coloured-bg);
+}
+
 main > article {
   padding: 10px;
   color: var(--text-color);

tetawebapp/templates/ajax.html

@@ -1,4 +1,5 @@
 {% extends "index.html" %}
+{% block title %}Ajax{% endblock %}
       {% block main %}
       <article class='left'>
         <h3>Get HTML response from AJAX</h3>

tetawebapp/templates/articles.html

@@ -1,64 +1,12 @@
 {% extends "index.html" %}
+{% block title %}Articles{% endblock %}
       {% block main %}
-      <article class='right'>
+      <article>
-        <h3>This is the title</h3>
+        <h3>Choose your article</h3>
-        <img src='/static/images/dummy_pic.png' alt='dummy pic' title='dummy pic'/>
         <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+          Please select your article
-          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-          officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-          sed do eiusmod tempor incididunt ut labore
-        </p>
-        <p>This <a href='/plop.html'>link</a> will lead to an error page</p>
-        <p>
-          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-          officia desers unt mollit anim id est laborum.
-        </p>
-        <ul>
-          <li>plop</li>
-          <li>plap</li>
-          <li>plip</li>
-        </ul>
-        <ol>
-          <li>plop</li>
-          <li>plap</li>
-          <li>plip</li>
-        </ol>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
-          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-          officia deserunt mollit anim id est laborum.
         </p>
       </article>
-      <article class='left'>
+      <article id='article_receiver'>
-        <h3>The title is back again and is angry</h3>
-        <img src='/static/images/dummy_pic.png' alt='dummy pic' title='dummy pic'/>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
-          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-          officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-          sed do eiusmod tempor incididunt ut labore
-        </p>
-        <p>
-          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-          officia deserunt mollit anim id est laborum.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
-          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-          officia deserunt mollit anim id est laborum.
-        </p>
       </article>
       {% endblock %}

tetawebapp/templates/articles_by_id.html

@@ -0,0 +1,65 @@
+{% extends "index.html" %}
+{% block title %}Articles{% endblock %}
+      {% block main %}
+      <article class='right'>
+        <h3>Article #{{ ID }}</h3>
+        <img src='/static/images/dummy_pic.png' alt='dummy pic' title='dummy pic'/>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+          officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+          sed do eiusmod tempor incididunt ut labore
+        </p>
+        <p>This <a href='/plop.html'>link</a> will lead to an error page</p>
+        <p>
+          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+          officia desers unt mollit anim id est laborum.
+        </p>
+        <ul>
+          <li>plop</li>
+          <li>plap</li>
+          <li>plip</li>
+        </ul>
+        <ol>
+          <li>plop</li>
+          <li>plap</li>
+          <li>plip</li>
+        </ol>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+          officia deserunt mollit anim id est laborum.
+        </p>
+      </article>
+      <article class='left'>
+        <h3>Another disposition</h3>
+        <img src='/static/images/dummy_pic.png' alt='dummy pic' title='dummy pic'/>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+          officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+          sed do eiusmod tempor incididunt ut labore
+        </p>
+        <p>
+          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+          officia deserunt mollit anim id est laborum.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+          officia deserunt mollit anim id est laborum.
+        </p>
+      </article>
+      {% endblock %}

tetawebapp/templates/basics.html

@@ -1,4 +1,5 @@
 {% extends "index.html" %}
+{% block title %}Basics{% endblock %}
       {% block main %}
       <article class='right'>
         <h3>Basics</h3>

tetawebapp/templates/database.html

@@ -1,4 +1,5 @@
 {% extends "index.html" %}
+{% block title %}Database{% endblock %}
       {% block main %}
       <article class='right'>
         <h3>Accessing database</h3>

tetawebapp/templates/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang='zxx'>
 <head>
-  <title>{% block title %}Accueil{% endblock %}</title>
+  <title>TetaWebApp - {% block title %}Accueil{% endblock %}</title>
   <meta name="viewport" content="initial-scale=1.0" />
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" type="text/css" href="/static/styles/colors.css" />
@@ -15,19 +15,34 @@
   <header>{% block banner %}TetaWebApp{% endblock %}</header>
   <div class='content'>
     {% block nav %}
-    <nav>
+    <nav class='vertical'>
       {% block menu %}
         {% for item in menu %}
+          {% for key in item[1] %}
             {% if item[2] == 1 %}
-            <a class='selected' href='{{ item[1] }}'>{{ item[0] }}</a>
+              <a class='selected' href='{{ key }}'>{{ item[0] }}</a>
             {% else %}
-            <a href='{{ item[1] }}'>{{ item[0] }}</a>
+              <a href='{{ key }}'>{{ item[0] }}</a>
             {% endif %}
           {% endfor %}
+        {% endfor %}
       {% endblock %}
     </nav>
     {% endblock%}
     <main>
+        {% if navbar %}
+          <div class='navbar_container'>
+            <ul class='horizontal'>
+            {% for item in navbar %}
+              {% set selected = ['', 'selected'] %}
+              {% set last = ['right_border', 'last'] %}
+              {% for url in item[1] %}
+                <li><a class='{{ last[item[3]] }} {{ selected[item[2]] }}' href='{{ url }}'>{{ item[0] }}</a></li>
+              {% endfor %}
+            {% endfor %}
+            </ul>
+          </div>
+        {% endif %}
       {% block main %}
       <article class='right'>
         <h3>TetaWebApp demo</h3>

tetawebapp/templates/inputs.html

@@ -1,4 +1,5 @@
 {% extends "index.html" %}
+{% block title %}Inputs{% endblock %}
       {% block main %}
       <article class='right'>
         <h3>The input collection</h3>

tetawebapp/templates/todo.html

@@ -1,4 +1,5 @@
 {% extends "index.html" %}
+{% block title %}TODO{% endblock %}
       {% block main %}
       <article class='right'>
         <h3>TODO list</h3>
@@ -9,7 +10,7 @@
           <li><strike>Basic Ajax support</strike></li>
           <li><strike>Session management</strike></li>
           <li>Basic documentation</li>
-          <li>Horizontal navbar</li>
+          <li><strike>Horizontal navbar</strike></li>
           <li><strike>License</strike></li>
         </ul>
       </article>

tetawebapp/tetawebapp.py

@@ -29,38 +29,56 @@ app.secret_key = 'ce1d1c9ff0ff388a838b3a1e3207dd27'
 db = SQLAlchemy(app)
 
 ########################################################################
-# Menu management:
+# Menu and navigation management
 ########################################################################
 
 def get_menu(page):
   """  The main menu is a list of lists in the followin format:
-          [string caption,  string URL endpoint, int 0]
+          [unicode caption,
-        - The URL end point MUST match the function called by the corresponding
+            {unicode URL endpoint: [unicode route, ...]},
-          route.
+            int 0]
+        - The URL end point is the URL where to point to (href)
+        - One of the routes MUST match the route called by request
         - The int 0 is used to determine which menu entry is actally called.
           The value MUST be 0."""
-  menu = [['Accueil', '/', 0],
+  menu = [[u'Home', {u'/': [u'/']}, 0],
-          ['Articles', '/articles', 0],
+          [u'Articles', {u'/articles': [u'/articles', u'/articles/<ID>']}, 0],
-          ['Basics', '/basics', 0],
+          [u'Basics', {u'/basics': [u'/basics']}, 0],
-          ['Inputs', '/inputs', 0],
+          [u'Inputs', {u'inputs': [u'/inputs']}, 0],
-          ['Ajax', '/ajax', 0],
+          [u'Ajax', {u'/ajax': [u'/ajax']}, 0],
-          ['Database', '/database', 0],
+          [u'Database', {u'/database': [u'/database']}, 0],
-          ['Todo', '/todo', 0],
+          [u'Todo', {u'/todo': [u'/todo']}, 0],
           ]
-  # This is index page
-  if page == 'index':
-    menu[0][2] = 1
-    return menu
-
-  # Let's look for the actual page
-  page = '/%s' % page
   for item in menu:
-    if item[1] == page:
+    for url in item[1]:
+      for route in item[1][url]:
+        if route == page:
           item[2] = 1
           return menu
   # This should never happen
   return menu
 
+def get_navbar(page, selected):
+  """  The horizontal navbar is a list of lists in the followin format:
+          [unicode caption, {unicode URL endpoint: [unicode route, ...]}, int 0]
+        - The URL end point is the URL where to point to (href)
+        - One of the routes MUST match the route called by request
+        - The int 0 is used to de """
+  navbars = [[u'First article', {u'/articles/1': [u'/articles', u'/articles/<ID>']}, 0, 0],
+            [u'Second article', {u'/articles/2': [u'/articles', u'/articles/<ID>']}, 0, 0],
+            [u'Third article', {u'/articles/3': [u'/articles', u'/articles/<ID>']}, 0, 0]
+            ]
+  navbar = []
+  for item in navbars:
+    for url in item[1]:
+      if url == selected:
+        item[2] = 1
+      for route in item[1][url]:
+        if route == page:
+          navbar.append(item)
+  navbar[len(navbar) - 1][3] = 1
+  return navbar
+
 ########################################################################
 # Session management
 ########################################################################
@@ -118,7 +136,7 @@ def login():
     token = gen_token()
     session['token'] = token
     # Return user to index page
-    page = 'index'
+    page = '/'
     menu = get_menu(page)
     response = app.make_response(render_template('index.html', menu=menu))
     # Push token to cookie
@@ -131,7 +149,7 @@ def login():
 @check_session
 def index():
   """ Index page """
-  page = inspect.currentframe().f_code.co_name
+  page = str(request.url_rule)
   menu = get_menu(page)
   return render_template('index.html', menu=menu)
 
@@ -139,15 +157,27 @@ def index():
 @check_session
 def articles():
   """ Arcticles page """
-  page = inspect.currentframe().f_code.co_name
+  page = str(request.url_rule)
   menu = get_menu(page)
-  return render_template('articles.html', menu=menu)
+  navbar = get_navbar(page, '')
+  return render_template('articles.html', menu=menu, navbar=navbar)
+
+@app.route("/articles/<ID>", methods=['GET', 'POST'])
+@check_session
+def articles_by_id(ID):
+  """ Arcticles page """
+  page = str(request.url_rule)
+  menu = get_menu(page)
+  selected = page.replace('<ID>', ID)
+  navbar = get_navbar(page, selected)
+  return render_template('articles_by_id.html', menu=menu, navbar=navbar, ID=ID)
+
 
 @app.route("/basics", methods=['GET', 'POST'])
 @check_session
 def basics():
   """ Basics page """
-  page = inspect.currentframe().f_code.co_name
+  page = str(request.url_rule)
   menu = get_menu(page)
   return render_template('basics.html', menu=menu)
 
@@ -156,7 +186,7 @@ def basics():
 @check_session
 def inputs():
   """ Show the input collection """
-  page = inspect.currentframe().f_code.co_name
+  page = str(request.url_rule)
   menu = get_menu(page)
   return render_template('inputs.html', menu=menu)
 
@@ -164,7 +194,7 @@ def inputs():
 @check_session
 def ajax():
   """ Propose various AJAX tests """
-  page = inspect.currentframe().f_code.co_name
+  page = str(request.url_rule)
   menu = get_menu(page)
   return render_template('ajax.html', menu=menu)
 
@@ -172,7 +202,7 @@ def ajax():
 @check_session
 def database():
   """ A blah on using databases """
-  page = inspect.currentframe().f_code.co_name
+  page = str(request.url_rule)
   menu = get_menu(page)
   return render_template('database.html', menu=menu)
 
@@ -180,7 +210,7 @@ def database():
 @check_session
 def todo():
   """ The famous TODO list """
-  page = inspect.currentframe().f_code.co_name
+  page = str(request.url_rule)
   menu = get_menu(page)
   return render_template('todo.html', menu=menu)