added date pickers, only admins can set starttime

app/forms.py

@@ -12,8 +12,8 @@ __author__ = 'feliciaan'
 class OrderForm(Form):
     courrier_id = SelectField('Courrier', coerce=int)
     location_id = SelectField('Location', coerce=int, validators=[validators.required()])
-    starttime = DateTimeField('Starttime', default=datetime.now)
+    starttime = DateTimeField('Starttime', default=datetime.now, format='%d-%m-%Y %H:%M')
-    stoptime = DateTimeField('Stoptime')
+    stoptime = DateTimeField('Stoptime', format='%d-%m-%Y %H:%M')
     submit_button = SubmitField('Submit')
 
     def populate(self):

app/static/css/bootstrap-datetimepicker.min.css

@@ -0,0 +1,366 @@
+/*!
+ * Datetimepicker for Bootstrap 3
+ * ! version : 4.7.14
+ * https://github.com/Eonasdan/bootstrap-datetimepicker/
+ */
+.bootstrap-datetimepicker-widget {
+  list-style: none;
+}
+.bootstrap-datetimepicker-widget.dropdown-menu {
+  margin: 2px 0;
+  padding: 4px;
+  width: 19em;
+}
+@media (min-width: 768px) {
+  .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
+    width: 38em;
+  }
+}
+@media (min-width: 992px) {
+  .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
+    width: 38em;
+  }
+}
+@media (min-width: 1200px) {
+  .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
+    width: 38em;
+  }
+}
+.bootstrap-datetimepicker-widget.dropdown-menu:before,
+.bootstrap-datetimepicker-widget.dropdown-menu:after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+}
+.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #cccccc;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  top: -7px;
+  left: 7px;
+}
+.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid white;
+  top: -6px;
+  left: 8px;
+}
+.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-top: 7px solid #cccccc;
+  border-top-color: rgba(0, 0, 0, 0.2);
+  bottom: -7px;
+  left: 6px;
+}
+.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid white;
+  bottom: -6px;
+  left: 7px;
+}
+.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
+  left: auto;
+  right: 6px;
+}
+.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
+  left: auto;
+  right: 7px;
+}
+.bootstrap-datetimepicker-widget .list-unstyled {
+  margin: 0;
+}
+.bootstrap-datetimepicker-widget a[data-action] {
+  padding: 6px 0;
+}
+.bootstrap-datetimepicker-widget a[data-action]:active {
+  box-shadow: none;
+}
+.bootstrap-datetimepicker-widget .timepicker-hour,
+.bootstrap-datetimepicker-widget .timepicker-minute,
+.bootstrap-datetimepicker-widget .timepicker-second {
+  width: 54px;
+  font-weight: bold;
+  font-size: 1.2em;
+  margin: 0;
+}
+.bootstrap-datetimepicker-widget button[data-action] {
+  padding: 6px;
+}
+.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  content: "Increment Hours";
+}
+.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  content: "Increment Minutes";
+}
+.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  content: "Decrement Hours";
+}
+.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  content: "Decrement Minutes";
+}
+.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  content: "Show Hours";
+}
+.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  content: "Show Minutes";
+}
+.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  content: "Toggle AM/PM";
+}
+.bootstrap-datetimepicker-widget .btn[data-action="clear"]::after {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  content: "Clear the picker";
+}
+.bootstrap-datetimepicker-widget .btn[data-action="today"]::after {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  content: "Set the date to today";
+}
+.bootstrap-datetimepicker-widget .picker-switch {
+  text-align: center;
+}
+.bootstrap-datetimepicker-widget .picker-switch::after {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  content: "Toggle Date and Time Screens";
+}
+.bootstrap-datetimepicker-widget .picker-switch td {
+  padding: 0;
+  margin: 0;
+  height: auto;
+  width: auto;
+  line-height: inherit;
+}
+.bootstrap-datetimepicker-widget .picker-switch td span {
+  line-height: 2.5;
+  height: 2.5em;
+  width: 100%;
+}
+.bootstrap-datetimepicker-widget table {
+  width: 100%;
+  margin: 0;
+}
+.bootstrap-datetimepicker-widget table td,
+.bootstrap-datetimepicker-widget table th {
+  text-align: center;
+  border-radius: 4px;
+}
+.bootstrap-datetimepicker-widget table th {
+  height: 20px;
+  line-height: 20px;
+  width: 20px;
+}
+.bootstrap-datetimepicker-widget table th.picker-switch {
+  width: 145px;
+}
+.bootstrap-datetimepicker-widget table th.disabled,
+.bootstrap-datetimepicker-widget table th.disabled:hover {
+  background: none;
+  color: #777777;
+  cursor: not-allowed;
+}
+.bootstrap-datetimepicker-widget table th.prev::after {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  content: "Previous Month";
+}
+.bootstrap-datetimepicker-widget table th.next::after {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  content: "Next Month";
+}
+.bootstrap-datetimepicker-widget table thead tr:first-child th {
+  cursor: pointer;
+}
+.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
+  background: #eeeeee;
+}
+.bootstrap-datetimepicker-widget table td {
+  height: 54px;
+  line-height: 54px;
+  width: 54px;
+}
+.bootstrap-datetimepicker-widget table td.cw {
+  font-size: .8em;
+  height: 20px;
+  line-height: 20px;
+  color: #777777;
+}
+.bootstrap-datetimepicker-widget table td.day {
+  height: 20px;
+  line-height: 20px;
+  width: 20px;
+}
+.bootstrap-datetimepicker-widget table td.day:hover,
+.bootstrap-datetimepicker-widget table td.hour:hover,
+.bootstrap-datetimepicker-widget table td.minute:hover,
+.bootstrap-datetimepicker-widget table td.second:hover {
+  background: #eeeeee;
+  cursor: pointer;
+}
+.bootstrap-datetimepicker-widget table td.old,
+.bootstrap-datetimepicker-widget table td.new {
+  color: #777777;
+}
+.bootstrap-datetimepicker-widget table td.today {
+  position: relative;
+}
+.bootstrap-datetimepicker-widget table td.today:before {
+  content: '';
+  display: inline-block;
+  border: 0 0 7px 7px solid transparent;
+  border-bottom-color: #337ab7;
+  border-top-color: rgba(0, 0, 0, 0.2);
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+}
+.bootstrap-datetimepicker-widget table td.active,
+.bootstrap-datetimepicker-widget table td.active:hover {
+  background-color: #337ab7;
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.bootstrap-datetimepicker-widget table td.active.today:before {
+  border-bottom-color: #fff;
+}
+.bootstrap-datetimepicker-widget table td.disabled,
+.bootstrap-datetimepicker-widget table td.disabled:hover {
+  background: none;
+  color: #777777;
+  cursor: not-allowed;
+}
+.bootstrap-datetimepicker-widget table td span {
+  display: inline-block;
+  width: 54px;
+  height: 54px;
+  line-height: 54px;
+  margin: 2px 1.5px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.bootstrap-datetimepicker-widget table td span:hover {
+  background: #eeeeee;
+}
+.bootstrap-datetimepicker-widget table td span.active {
+  background-color: #337ab7;
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.bootstrap-datetimepicker-widget table td span.old {
+  color: #777777;
+}
+.bootstrap-datetimepicker-widget table td span.disabled,
+.bootstrap-datetimepicker-widget table td span.disabled:hover {
+  background: none;
+  color: #777777;
+  cursor: not-allowed;
+}
+.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
+  height: 27px;
+  line-height: 27px;
+}
+.input-group.date .input-group-addon {
+  cursor: pointer;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}

app/templates/order.html

@@ -1,9 +1,11 @@
 {% extends "layout.html" %}
 {% set active_page = "orders" -%}
 
+{% import "utils.html" as util %}
+
 {% block container %}
 <div class="row">
-    <div class="col-md-push-1 col-md-4 darker"><!-- Shitty html-->
+    <div class="col-md-push-1 col-md-10 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/>
@@ -18,9 +20,26 @@
         total price: {{ total_price|euro }}
     </div>
     {% if form -%}
-    <div class="col-md-push-3 col-md-4 darker">
+    <div class="col-md-push-1 col-md-10 darker">
         <h4>Order:</h4>
-        {% include "order_form.html" with context %}
+        <form method="post" action="{{ url_for('.order_item_create', id=order.id) }}">
+            {{ form.csrf_token }}
+            <div class="form-group {{ 'has-errors' if form.product_id.errors else ''}}">
+                {{ form.product_id.label(class='control-label') }}
+                {{ form.product_id(class='form-control select') }}
+                {{ util.render_form_field_errors(form.product_id) }}
+            </div>
+            {% if current_user.is_anonymous() %}
+                <div class="form-group{{ ' has-error' if form.name.errors }}{{ ' required' if form.name.flags.required }}">
+                    {{ form.name.label(class='control-label') }}
+                    {{ form.name(class='form-control') }}
+                    {{ util.render_form_field_errors(form.name) }}
+                </div>
+            {% endif %}
+            <div class="form-group">
+                 {{ form.submit_button(class='btn btn-primary') }}
+            </div>
+        </form>
     </div>
     {%- endif %}
 </div>
@@ -47,4 +66,16 @@
             {% endfor %}
     </div>
 </div>
+{% endblock %}
+
+{% block styles %}
+    {{ super() }}
+    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.min.css" rel="stylesheet" />
+{% endblock %}
+{% block scripts %}
+    {{ super() }}
+    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>
+    <script type="text/javascript">
+        $('.select').select2();
+    </script>
 {% endblock %}

app/templates/order_form.html

@@ -1,41 +0,0 @@
-{% extends "layout.html" %}
-{% set active_page = "orders" -%}
-
-{% import "utils.html" as util %}
-
-{% block content %}
-<div class="row">
-    <div class="col-md-12">
-        <form method="post" action="{{ url_for('.order_item_create', id=order.id) }}">
-            {{ form.csrf_token }}
-            <div class="form-group {{ 'has-errors' if form.product_id.errors else ''}}">
-                {{ form.product_id.label(class='control-label') }}
-                {{ form.product_id(class='form-control select') }}
-                {{ util.render_form_field_errors(form.product_id) }}
-            </div>
-            {% if current_user.is_anonymous() %}
-                <div class="form-group{{ ' has-error' if form.name.errors }}{{ ' required' if form.name.flags.required }}">
-                    {{ form.name.label(class='control-label') }}
-                    {{ form.name(class='form-control') }}
-                    {{ util.render_form_field_errors(form.name) }}
-                </div>
-            {% endif %}
-            <div class="form-group">
-                 {{ form.submit_button(class='btn btn-primary') }}
-            </div>
-        </form>
-    </div>
-</div>
-{% endblock %}
-
-{% block styles %}
-    {{ super() }}
-    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.min.css" rel="stylesheet" />
-{% endblock %}
-{% block scripts %}
-    {{ super() }}
-    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>
-    <script type="text/javascript">
-        $('.select').select2();
-    </script>
-{% endblock %}

app/templates/orders.html

@@ -13,11 +13,68 @@
             {% endfor %}
         </div>
     {% if not current_user.is_anonymous() %}
-        <div class="col-md-push-1 col-md-6">
+        <div class="col-md-push-1 col-md-6 darker">
             <h3>Create new order:</h3>
-            {{ wtf.quick_form(form, action=url_for('.order_create'), button_map={'submit_button': 'primary'}, form_type='horizontal') }}
+            <form method="post" action="{{ url_for('.order_create') }}">
+                {{ form.csrf_token }}
+                <div class="form-group {{ 'has-errors' if form.courrier_id.errors else ''}}">
+                    {{ form.courrier_id.label(class='control-label') }}
+                    {{ form.courrier_id(class='form-control select') }}
+                    {{ util.render_form_field_errors(form.courrier_id) }}
+                </div>
+                <div class="form-group {{ 'has-errors' if form.location_id.errors else ''}}{{ ' required' if form.location_id.flags.required }}">
+                    {{ form.location_id.label(class='control-label') }}
+                    {{ form.location_id(class='form-control select') }}
+                    {{ util.render_form_field_errors(form.location_id) }}
+                </div>
+                {% if current_user.is_admin() %}
+                    <div class="form-group{{ ' has-error' if form.starttime.errors }}{{ ' required' if form.starttime.flags.required }}{{ ' hidden' if not current_user.is_admin() }}">
+                        {{ form.starttime.label(class='control-label') }}
+                        <div class='input-group date' class='datetimepicker'>
+                            {{ form.starttime(class='form-control datetimepicker') }}
+                            <span class="input-group-addon">
+                                <span class="glyphicon glyphicon-calendar"></span>
+                            </span>
+                        </div>
+                        {{ util.render_form_field_errors(form.starttime) }}
+                    </div>
+                {% endif %}
+                <div class="form-group{{ ' has-error' if form.stoptime.errors }}{{ ' required' if form.stoptime.flags.required }}{{ ' hidden' if not current_user.is_admin() }}">
+                    {{ form.stoptime.label(class='control-label') }}
+                    <div class='input-group date' class='datetimepicker'>
+                        {{ form.stoptime(class='form-control datetimepicker') }}
+                        <span class="input-group-addon">
+                            <span class="glyphicon glyphicon-calendar"></span>
+                        </span>
+                    </div>
+                    {{ util.render_form_field_errors(form.stoptime) }}
+                </div>
+                <div class="form-group">
+                     {{ form.submit_button(class='btn btn-primary') }}
+                </div>
+            </form>
         </div>
     {% endif %}
         </div>
     </div>
-{% endblock %}
+{% endblock %}
+
+{% block styles -%}
+    {{ super() }}
+    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-datetimepicker.min.css') }}">
+{%- endblock %}
+{% block scripts -%}
+    {{ super() }}
+    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>
+    <script src="{{ url_for('static', filename='js/moment.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/bootstrap-datetimepicker.min.js') }}"></script>
+    <script type="text/javascript">
+        $.ready(function(){
+            $('.select').select2();
+            $('.datetimepicker').datetimepicker({
+                format: 'DD-MM-YYYY HH:mm'
+            });
+        }());
+    </script>
+{%- endblock %}

app/templates/orders_form.html

@@ -1,9 +0,0 @@
-{% extends "layout.html" %}
-{% set active_page = "orders" -%}
-
-{% import "bootstrap/wtf.html" as wtf %}
-{% block container %}
-<div class="row">
-    {{ wtf.quick_form(form, action=url, button_map={'submit_button': 'primary'}) }}
-</div>
-{% endblock %}

app/views/order.py

@@ -11,15 +11,14 @@ from forms import OrderItemForm, OrderForm, AnonOrderItemForm
 order_bp = Blueprint('order_bp', 'order')
 
 @order_bp.route('/')
-def orders():
+def orders(form=None):
-    orderForm = None
+    if form is None and not current_user.is_anonymous():
-    if not current_user.is_anonymous():
+        form = OrderForm()
-        orderForm = OrderForm()
+        form.populate()
-        orderForm.populate()
+    return render_template('orders.html', orders=get_orders(), form=form)
-    return render_template('orders.html', orders=get_orders(), form=orderForm)
 
 
-@order_bp.route('/create', methods=['GET', 'POST'])
+@order_bp.route('/create', methods=['POST'])
 @login_required
 def order_create():
     orderForm = OrderForm()
@@ -30,40 +29,32 @@ def order_create():
         db.session.add(order)
         db.session.commit()
         return redirect(url_for('.order', id=order.id))
-
+    return orders(form=orderForm)
-    return render_template('orders_form.html', form=orderForm, url=url_for(".order_create"))
 
 
 @order_bp.route('/<id>')
-def order(id):
+def order(id, form=None):
     order = Order.query.filter(Order.id == id).first()
     if order is None:
         abort(404)
-    form = None
+    if form is None:
-    if not current_user.is_anonymous():
+        form = AnonOrderItemForm() if current_user.is_anonymous() else OrderItemForm()
-        form = OrderItemForm()
+        form.populate(order.location)
-    else:
-        form = AnonOrderItemForm()
-    form.populate(order.location)
     if order.stoptime and order.stoptime < datetime.now():
         form = None
     total_price = sum([o.product.price for o in order.items])
     return render_template('order.html', order=order, form=form, total_price=total_price)
 
 
-@order_bp.route('/<id>/create', methods=['GET', 'POST'])
+@order_bp.route('/<id>/create', methods=['POST'])
 def order_item_create(id):
-    order = Order.query.filter(Order.id == id).first()
+    current_order = Order.query.filter(Order.id == id).first()
-    if order is None:
+    if current_order is None:
         abort(404)
-    if order.stoptime and order.stoptime < datetime.now():
+    if current_order.stoptime and current_order.stoptime < datetime.now():
         abort(404)
-    form = None
+    form = AnonOrderItemForm() if current_user.is_anonymous() else OrderItemForm()
-    if not current_user.is_anonymous():
+    form.populate(current_order.location)
-        form = OrderItemForm()
-    else:
-        form = AnonOrderItemForm()
-    form.populate(order.location)
     if form.validate_on_submit():
         item = OrderItem()
         form.populate_obj(item)
@@ -76,7 +67,7 @@ def order_item_create(id):
         db.session.commit()
         flash('Ordered %s' % (item.product.name), 'info')
         return redirect(url_for('.order', id=id))
-    return render_template('order_form.html', form=form, order=order)
+    return order(id, form=form)
 
 @order_bp.route('/<order_id>/<item_id>/delete')
 def delete_item(order_id, item_id):
@@ -148,7 +139,7 @@ def select_user(items):
 def get_orders(expression=None):
     orders = []
     if expression is None:
-        expression = (Order.stoptime > datetime.now()) | (Order.stoptime == None)
+        expression = ((datetime.now() > Order.starttime) & (Order.stoptime > datetime.now()) | (Order.stoptime == None))
     if not current_user.is_anonymous():
         orders = Order.query.filter(expression).all()
     else: