added date pickers, only admins can set starttime

This commit is contained in:
Feliciaan De Palmenaer 2015-03-30 00:01:07 +02:00
parent 6c0badfd55
commit c3d776a985
9 changed files with 496 additions and 86 deletions

View file

@ -12,8 +12,8 @@ __author__ = 'feliciaan'
class OrderForm(Form): class OrderForm(Form):
courrier_id = SelectField('Courrier', coerce=int) courrier_id = SelectField('Courrier', coerce=int)
location_id = SelectField('Location', coerce=int, validators=[validators.required()]) 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') submit_button = SubmitField('Submit')
def populate(self): def populate(self):

View file

@ -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;
}

File diff suppressed because one or more lines are too long

7
app/static/js/moment.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -1,9 +1,11 @@
{% extends "layout.html" %} {% extends "layout.html" %}
{% set active_page = "orders" -%} {% set active_page = "orders" -%}
{% import "utils.html" as util %}
{% block container %} {% block container %}
<div class="row"> <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 }} <h3>Order {{ order.id }}
{% if order.can_close(current_user.id) -%} {% if order.can_close(current_user.id) -%}
<a class="btn btn-danger" href="{{ url_for('.close_order', id=order.id) }}">Close</a><br/> <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 }} total price: {{ total_price|euro }}
</div> </div>
{% if form -%} {% 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> <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> </div>
{%- endif %} {%- endif %}
</div> </div>
@ -48,3 +67,15 @@
</div> </div>
</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" />
{% 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 %}

View file

@ -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 %}

View file

@ -13,11 +13,68 @@
{% endfor %} {% endfor %}
</div> </div>
{% if not current_user.is_anonymous() %} {% 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> <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> </div>
{% endif %} {% endif %}
</div> </div>
</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 %}

View file

@ -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 %}

View file

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