From 2d9f7e7fc517a2019b656454ebef5d6cc7d499e1 Mon Sep 17 00:00:00 2001
From: mcbloch <alazeo@live.be>
Date: Wed, 29 May 2019 20:12:19 +0200
Subject: [PATCH] add extra order items screen, clickable div with shadow

---
 app/static/css/main.css        | 31 +++++++++++++++++++++++++
 app/templates/order.html       |  3 ++-
 app/templates/order_items.html | 42 ++++++++++++++++++++++++++++++++++
 app/views/order.py             |  9 ++++++++
 4 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 app/templates/order_items.html

diff --git a/app/static/css/main.css b/app/static/css/main.css
index 451f630..757c6be 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -21,4 +21,35 @@ body {
 
 .product .extras {
     padding-left: 20px;
+}
+
+.showcase .product {
+    font-size: 16px;
+}
+
+/* Add clickable box */
+div.box:hover {
+    cursor: hand;
+    cursor: pointer;
+    opacity: .9;
+    /*border-bottom: #f44346 1px solid !important;*/
+    box-shadow: -5px 5px 5px #888888;
+}
+
+a.divLink {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    text-decoration: none;
+    /* Makes sure the link doesn't get underlined */
+    z-index: 10;
+    /* raises anchor tag above everything else in div */
+    background-color: white;
+    /*workaround to make clickable in IE */
+    opacity: 0;
+    /*workaround to make clickable in IE */
+    filter: alpha(opacity=0);
+    /*workaround to make clickable in IE */
 }
\ No newline at end of file
diff --git a/app/templates/order.html b/app/templates/order.html
index 13eaa1c..f217afe 100644
--- a/app/templates/order.html
+++ b/app/templates/order.html
@@ -83,8 +83,9 @@
             </tbody>
         </table>
     </div>
-    <div class="col-md-push-2 col-md-4 darker" id="items-ordered">
+    <div class="col-md-push-2 col-md-4 darker box" id="items-ordered">
         <h3>Ordered products: {{ order.items.count() }}</h3>
+        <a class="divLink" href="{{ url_for('.items_showcase', id=order.id) }}"></a>
         {% for key, value in order.group_by_product().items() -%}
             <div class="product">
                 {{ key }}: {{ value["count"] }}
diff --git a/app/templates/order_items.html b/app/templates/order_items.html
new file mode 100644
index 0000000..a26fa5b
--- /dev/null
+++ b/app/templates/order_items.html
@@ -0,0 +1,42 @@
+{% extends "bootstrap/base.html" %}
+{% import "bootstrap/utils.html" as utils %}
+
+{% block title %}
+Haldis - Order {{ order.id }}
+{% endblock %}
+
+{% block styles %}
+    {{ super() }}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" media="screen">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/print.css') }}" media="print">
+{% endblock %}
+
+{% block scripts %}
+    {{ super() }}
+    <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
+{% endblock %}
+
+{% block content -%}
+    {{ utils.flashed_messages(container=True) }}
+
+    <div class="row">
+        <div class="col-sm-6 col-sm-offset-3 darker showcase" id="items-ordered">
+            <h3 class="text-center">Ordered products: {{ order.items.count() }}</h3>
+        {% for key, value in order.group_by_product().items() -%}
+            <div class="product text-center">
+                <p>
+                    {{ key }}: {{ value["count"] }}
+                    {% if value["extras"] -%}
+                        <div class="extras">
+                        {% for extra in value["extras"] -%}
+                            <div>{{ extra }}</div>
+                        {% endfor %}
+                        </div>
+                    {%- endif %}
+                </p>
+            </div>
+        {%- endfor %}
+        </div>
+    </div>
+
+{%- endblock %}
\ No newline at end of file
diff --git a/app/views/order.py b/app/views/order.py
index 28fcfbc..28308f8 100644
--- a/app/views/order.py
+++ b/app/views/order.py
@@ -53,6 +53,15 @@ def order(id, form=None):
     debts = sum([o.product.price for o in order.items if not o.paid])
     return render_template('order.html', order=order, form=form, total_price=total_price, debts=debts)
 
+@order_bp.route('/<id>/items')
+def items_showcase(id, form=None):
+    order = Order.query.filter(Order.id == id).first()
+    if order is None:
+        abort(404)
+    if current_user.is_anonymous() and not order.public:
+        flash('Please login to see this order.', 'info')
+        abort(401)
+    return render_template('order_items.html', order=order)
 
 @order_bp.route('/<id>/edit', methods=['GET', 'POST'])
 @login_required