Skip to content

Commit v0.14

Jump to bottom
kwmccabe edited this page Apr 17, 2018 · 9 revisions

v0.14 - List Items (/admin/item/list) and View Item (/admin/item/view/int:id)

Files changed (6)

File web/app/item/models.py MODIFIED

  • Update string representation of object for debug output.
     def __repr__(self):
-        return '<Item %r>' % (self.id)
+        return '<ItemModel: id="%r", keyname="%r">' % (self.id, self.keyname)
+
+    def __str__(self):
+        return 'Item: "%r"' % (self.keyname)

File web/app/item/templates/item_list.html ADDED

  • New template for viewing a list of items.
  • Rows are in ascending order by item.id.
  • Columns are ordered by the ItemModel.
  • Each row is followed by an .item_edit link.
+{% extends "base.html" %}
+
+
+<!-- BLOCK: title -->
+{% block title %}{{super()}}Items{% endblock %}
+
+
+<!-- BLOCK: breadcrumb -->
+{% block breadcrumb %}
+{{super()}}
+{# <li><a href="{{ url_for('.item_list') }}">List Items</a></li> #}
+{% endblock %}
+
+
+<!-- BLOCK: content -->
+{% block content %}
+
+<div id="item_list_panel" class="panel panel-info">
+    <div class="panel-heading">
+
+<div class="table-responsive">
+<table class="table table-condensed table-borderless">
+<tr>
+<td>
+    Showing {{ rowcnt }} Items
+</td>
+<td class="text-right">
+    <span>Page 1 of 1</span>
+</td>
+</tr>
+</table>
+</div>
+
+    </div> <!-- end class="panel-heading" -->
+    <div class="panel-body">
+
+<div class="table-responsive">
+<table class="table table-condensed table-hover">
+<tr>
+{% for col in cols %}
+    <th>{{ col }}</th>
+{% endfor %}
+<th></th>
+</tr>
+
+{% for row in rows %}
+    <tr>
+    {% for col in cols %}
+        <td onclick="window.location='{{ url_for('.item_view', id=row.id) }}';">{{ row[col] }}</td>
+    {% endfor %}
+    <td>
+        <a href="{{ url_for('.item_edit', id=row.id) }}">edit</a>
+    </td>
+    </tr>
+{% endfor %}
+
+</table>
+</div>
+
+    </div> <!-- end class="panel-body" -->
+    <div class="panel-footer">
+        panel-footer
+    </div> <!-- end class="panel-footer" -->
+</div> <!-- end class="panel" -->
+
+{% endblock content %}
+
+
+<!-- BLOCK: templates -->
+{% block templates %}{{super()}} - item_list.html{% endblock %}
+
+{# end web/app/item/templates/item_list.html #}

File web/app/item/templates/item_view.html ADDED

  • New template for viewing individual items.
  • All values output in simple table of column names and column values.
+{% extends "base.html" %}
+
+
+<!-- BLOCK: title -->
+{% block title %}{{super()}}Item - {{ item.keyname }}{% endblock %}
+
+
+<!-- BLOCK: breadcrumb -->
+{% block breadcrumb %}
+{{super()}}
+<li><a href="{{ url_for('.item_view', id=item.id) }}">View Item</a></li>
+{% endblock %}
+
+
+<!-- BLOCK: content -->
+{% block content %}
+<div id="item_list_panel" class="panel panel-info">
+    <div class="panel-heading">
+        <h3 class="condensed">Item : {{ item.keyname }}</h3>
+    </div>
+    <div class="panel-body">
+
+<div class="table-responsive">
+<table class="table table-condensed table-hover">
+<tr>
+    <th>column</th>
+    <th>value</th>
+</tr>
+
+{% for col in cols %}
+    <tr>
+    <td>{{ col }}</td>
+    <td>{{ item[col] }}</td>
+    </tr>
+{% endfor %}
+
+</table>
+</div>
+
+    </div> <!-- end class="panel-body" -->
+</div> <!-- end class="panel" -->
+{% endblock %}
+
+
+<!-- BLOCK: templates -->
+{% block templates %}{{super()}} - item_view.html{% endblock %}
+
+{# end web/app/item/templates/item_view.html #}

File web/app/item/views.py MODIFIED

  • Create placeholder routes for Delete /admin/item/delete, Create /admin/item/create, and Edit /admin/item/edit.
  • Create View route /admin/item/view for template item_view.html.
  • Create List route /admin/item/list for template item_list.html.
+from flask import render_template
 
...
 
+@item.route('/admin/item/delete/<int:id>')
+def item_delete( id ):
+    return 'item_delete - id:%s' % (id)
+
+@item.route('/admin/item/create')
+def item_create():
+    return 'item_create'
+
+@item.route('/admin/item/edit/<int:id>')
+def item_edit( id ):
+    return 'item_edit - id:%s' % (id)
+
+
+@item.route('/admin/item/view/<int:id>')
+def item_view( id ):
+    item = ItemModel.query.get_or_404(id)
+    cols = ItemModel.__table__.columns.keys()
+    return render_template('item_view.html', cols=cols, item=item)
+
+
+@item.route('/admin/item/list')
+def item_list():
+    cols = ItemModel.__table__.columns.keys()
+
+    rows = db.session.query(ItemModel)
+    rows = rows.order_by(getattr( ItemModel, 'id' ).asc())
+    rows = rows.all()
+
+    rowcnt = len(rows)
+
+    logging.debug('item_list - %s' % (rowcnt))
+    return render_template('item_list.html', cols=cols,rows=rows,rowcnt=rowcnt)

File web/app/main/templates/base.html MODIFIED

  • Add block to display debug info onscreen.
  • The block templates is updated by each sub-template to show the hierarchy.
+    {% if config['DEBUG'] %}
+<div id="debuginfo"><pre>
+DEBUG:
+TEMPLATES: {% block templates %}base.html{% endblock %}
+</pre></div>
+    {% endif %}

File web/app/static/css/flaskapp.css MODIFIED

  • Make some adjustments for mixing bootstrap panels and tables.
  • Make the debuginfo div look pretty.
 #header_hr {
     margin-top: 0;
 }
+#footer_hr {
+    margin-bottom: 0;
+}
+
+
+/**
+ * generic element attributes
+ */
+h1.condensed, h2.condensed, h3.condensed, h4.condensed { margin: 10px 0 5px 0; }
+
+.table-borderless td,
+.table-borderless th {
+    border: none !important;
+}
+
+#debuginfo { padding: 15px;}

Commit-v0.13 | Commit-v0.14 | Commit-v0.15

Clone this wiki locally