Added some layouting

app/models.py

@@ -104,6 +104,12 @@ class Order(db.Model):
             group[item.get_name()] += item.product.price
         return group
 
+    def group_by_product(self):
+        group = defaultdict(int)
+        for item in self.items:
+            group[item.product.name] += 1
+        return group
+
     def can_close(self, user_id):
         if self.stoptime and self.stoptime < datetime.now():
             return False

app/static/css/main.css

@@ -2,3 +2,19 @@
 body {
   padding-top: 70px;
 }
+
+.darker {
+   background-color: #fafafa;
+   margin-top: 10px;
+   padding-bottom: 5px;
+}
+
+@media (min-width: 992px) {
+    .align-bottom {
+        margin-top: 2.5em;
+    }
+}
+
+.full-width {
+    width: 100%;
+}

app/templates/home.html

@@ -1,5 +1,8 @@
 {% extends "layout.html" -%}
 {% set active_page = "home" -%}
+
+{% import "utils.html" as util -%}
+
 {% block container %}
   <div class="jumbotron">
     <h2>Welcome to FoodBot</h2>
@@ -8,17 +11,14 @@
   <div class="row">
     <div class="col-md-4">
         <h3>Open orders:</h3>
-        <ul>
         {% for order in orders %}
-                <li><a href="{{ url_for('order_bp.order', id=order.id) }}">{{ order.location.name }}-{{ order.stoptime }}</a></li>
+            {{ util.render_order(order) }}
         {% endfor %}
-        </ul>
     </div>
     <div class="col-md-4 col-md-push-4">
         <h3>Recently closed orders:</h3>
-        <ul>
        {% for order in recently_closed %}
-                <li><a href="{{ url_for('order_bp.order', id=order.id) }}">{{ order.location.name }}-{{ order.stoptime }}</a></li>
+            {{ util.render_order(order) }}
        {% endfor %}
         </ul>
     </div>

app/templates/order.html

@@ -4,35 +4,49 @@
 {% import "bootstrap/wtf.html" as wtf %}
 {% block container %}
 <div class="row">
-    <div class="col-md-7"><!-- Shitty html-->
+    <div class="col-md-push-1 col-md-4 darker"><!-- Shitty html-->
         <h3>Order {{ order.id }}
             {% if order.can_close(current_user.id) -%}
             <a class="btn btn-danger" href="{{ url_for('.close_order', id=order.id) }}">Close</a><br/>
         {%- endif %}</h3>
         Courrier: {{ order.courrier.username }}
         {% if order.courrier == None and not current_user.is_anonymous() %}
-            <a href="{{ url_for('.volunteer', id=order.id) }}" class="btn btn-primary">Volunteer</a>
+            <a href="{{ url_for('.volunteer', id=order.id) }}" class="btn btn-primary btn-sm">Volunteer</a>
         {% endif %}
         <br/>
         Location: <a href="{{ order.location.website }}">{{ order.location.name }}</a><br/>
         Starttime: {{ order.starttime }}<br/>
         Stoptime: {{  order.stoptime }}<br/>
         Total price: {{ total_price|euro }}
-        <h3>Orders</h3>
-        {% for item in order.items %}
-            {{ item.get_name() }} - {{ item.product.name }} - {{ item.product.price|euro }}
-            {% if item.can_delete(order.id, current_user.id, session.get('anon_name', '')) -%}<a href="{{ url_for('.delete_item', order_id=order.id, item_id=item.id) }}"><span class="glyphicon glyphicon-remove"></span></a>{%- endif %}<br/>
-        {% endfor %}
-        <h3>Debts</h3>
-        {% for key, value in total_payments.items() %}
-            {{ key }} - {{ value|euro }}<br/>
-        {% endfor %}
     </div>
     {% if form -%}
-    <div class="col-md-push-1 col-md-4">
+    <div class="col-md-push-3 col-md-4 darker">
         <h4>Order:</h4>
         {{ wtf.quick_form(form, action=url_for('.order_item_create', id=order.id), button_map={'submit_button': 'primary'}, form_type='horizontal') }}
     </div>
     {%- endif %}
 </div>
+<div class="row">
+    <div class="col-md-push-1 col-md-4 darker">
+            <h3>Orders</h3>
+            {% for item in order.items %}
+                {{ item.get_name() }} - {{ item.product.name }} - {{ item.product.price|euro }}
+                {% if item.can_delete(order.id, current_user.id, session.get('anon_name', '')) -%}<a href="{{ url_for('.delete_item', order_id=order.id, item_id=item.id) }}"><span class="glyphicon glyphicon-remove"></span></a>{%- endif %}<br/>
+            {% endfor %}
+    </div>
+    <div class="col-md-push-3 col-md-4 darker">
+        <h3>Ordered products:</h3>
+        {% for key, value in order.group_by_product().items() %}
+            {{ key }} - {{ value }}<br/>
+        {% endfor %}
+    </div>
+</div>
+<div class="row">
+    <div class="col-md-push-1 col-md-4 darker">
+            <h3>Debts</h3>
+            {% for key, value in order.group_by_user_pay().items() %}
+                {{ key }} - {{ value|euro }}<br/>
+            {% endfor %}
+    </div>
+</div>
 {% endblock %}

app/templates/orders.html

@@ -2,18 +2,19 @@
 {% set active_page = "orders" -%}
 
 {% import "bootstrap/wtf.html" as wtf %}
+{% import "utils.html" as util -%}
+
 {% block container %}
     <div class="row">
         <div class="col-md-5">
             <h3>Open orders:</h3>
-            <ul>
             {% for order in orders %}
-                    <li><a href="{{ url_for('.order', id=order.id) }}">{{ order.location.name }}-{{ order.stoptime }}</a></li>
+                {{ util.render_order(order) }}
             {% endfor %}
-            </ul>
         </div>
     {% if not current_user.is_anonymous() %}
         <div class="col-md-push-1 col-md-6">
+            <h3>Create new order:</h3>
             {{ wtf.quick_form(form, action=url_for('.order_create'), button_map={'submit_button': 'primary'}, form_type='horizontal') }}
         </div>
     {% endif %}

app/templates/utils.html

@@ -0,0 +1,12 @@
+{% macro render_order(order) -%}
+<div class="row darker">
+    <div class="col-md-9">
+        <h5>{{ order.location.name }}</h5>
+        <p><b>Status:</b> {{ order.stoptime|countdown }}<br/>
+        <b>Orders:</b> {{ order.items.count() }}</p>
+    </div>
+    <div class="col-md-3">
+        <a class="btn btn-primary align-bottom full-width" href="{{ url_for('order_bp.order', id=order.id) }}">Open</a>
+    </div>
+</div>
+{%- endmacro %}

app/utils.py

@@ -1,3 +1,4 @@
+from datetime import datetime
 from flask import render_template
 
 from app import app
@@ -10,6 +11,15 @@ def euro(value):
     result = '€' + str(value/100)
     return result
 
+@app.template_filter('countdown')
+def countdown(value):
+    delta = value - datetime.now()
+    if delta.total_seconds() < 0:
+        return "closed"
+    hours, remainder = divmod(delta.seconds, 3600)
+    minutes, seconds = divmod(remainder, 60)
+    return 'closes in %02d:%02d:%02d' % (hours, minutes, seconds)
+
 @app.errorhandler(404)
 def handle404(e):
     return render_template('errors/404.html'), 404

app/views/order.py

@@ -48,8 +48,7 @@ def order(id):
     if order.stoptime and order.stoptime < datetime.now():
         form = None
     total_price = sum([o.product.price for o in order.items])
-    total_payments = order.group_by_user_pay()
-    return render_template('order.html', order=order, form=form, total_price=total_price, total_payments=total_payments)
+    return render_template('order.html', order=order, form=form, total_price=total_price)
 
 
 @order_bp.route('/<id>/create', methods=['GET', 'POST'])
@@ -143,8 +142,10 @@ def select_user(items):
 
     return user
 
-def get_orders(expression=(Order.stoptime > datetime.now()) | (Order.stoptime == None)):
+def get_orders(expression=None):
     orders = []
+    if expression is None:
+        expression = (Order.stoptime > datetime.now()) | (Order.stoptime == None)
     if not current_user.is_anonymous():
         orders = Order.query.filter(expression).all()
     else: