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):
courrier_id = SelectField('Courrier', coerce=int)
location_id = SelectField('Location', coerce=int, validators=[validators.required()])
starttime = DateTimeField('Starttime', default=datetime.now)
stoptime = DateTimeField('Stoptime')
starttime = DateTimeField('Starttime', default=datetime.now, format='%d-%m-%Y %H:%M')
stoptime = DateTimeField('Stoptime', format='%d-%m-%Y %H:%M')
submit_button = SubmitField('Submit')
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" %}
{% 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 %}

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

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.route('/')
def orders():
orderForm = None
if not current_user.is_anonymous():
orderForm = OrderForm()
orderForm.populate()
return render_template('orders.html', orders=get_orders(), form=orderForm)
def orders(form=None):
if form is None and not current_user.is_anonymous():
form = OrderForm()
form.populate()
return render_template('orders.html', orders=get_orders(), form=form)
@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 render_template('orders_form.html', form=orderForm, url=url_for(".order_create"))
return orders(form=orderForm)
@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 not current_user.is_anonymous():
form = OrderItemForm()
else:
form = AnonOrderItemForm()
form.populate(order.location)
if form is None:
form = AnonOrderItemForm() if current_user.is_anonymous() else OrderItemForm()
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()
if order is None:
current_order = Order.query.filter(Order.id == id).first()
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
if not current_user.is_anonymous():
form = OrderItemForm()
else:
form = AnonOrderItemForm()
form.populate(order.location)
form = AnonOrderItemForm() if current_user.is_anonymous() else OrderItemForm()
form.populate(current_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: