From 7d6ca9c12556d555f70735e5539cc9b736af76a0 Mon Sep 17 00:00:00 2001
From: Jacek Lebioda <jacek.lebioda.001@student.uni.lu>
Date: Thu, 16 Feb 2017 15:11:31 +0100
Subject: [PATCH] Introducing bootstrap's dateTimePickers
---
smash/web/forms.py | 15 +++++++++++++--
smash/web/templates/appointments/add.html | 4 ++++
smash/web/templates/appointments/details.html | 11 ++++++++---
smash/web/templates/appointments/edit.html | 4 ++++
.../templates/includes/datetimepicker.css.html | 3 +++
.../web/templates/includes/datetimepicker.js.html | 10 ++++++++++
todos.txt | 3 +++
7 files changed, 45 insertions(+), 5 deletions(-)
create mode 100644 smash/web/templates/includes/datetimepicker.css.html
create mode 100644 smash/web/templates/includes/datetimepicker.js.html
diff --git a/smash/web/forms.py b/smash/web/forms.py
index 4a3b4c64..ee7d1257 100644
--- a/smash/web/forms.py
+++ b/smash/web/forms.py
@@ -15,6 +15,10 @@ DATEPICKER_DATE_ATTRS = {
'data-date-format':'yyyy-mm-dd',
'data-date-orientation': 'bottom'
}
+DATETIMEPICKER_DATE_ATTRS = {
+ 'class':'datetimepicker',
+ 'data-date-format':'Y-MM-DD HH:mm',
+}
def validate_subject_nd_number(self):
subject = self.cleaned_data
@@ -119,20 +123,27 @@ class AppointmentDetailForm(ModelForm):
model = Appointment
fields = '__all__'
+ datetime_when = forms.DateTimeField(label='Appointment on (YYYY-MM-DD HH:MM)',
+ widget=forms.DateTimeInput(DATETIMEPICKER_DATE_ATTRS)
+ )
class AppointmentEditForm(ModelForm):
class Meta:
model = Appointment
fields = '__all__'
- datetime_when = forms.DateTimeField(label='Appointment on (YYYY-MM-DD HH:MM:SS)')
+ datetime_when = forms.DateTimeField(label='Appointment on (YYYY-MM-DD HH:MM)',
+ widget=forms.DateTimeInput(DATETIMEPICKER_DATE_ATTRS)
+ )
class AppointmentAddForm(ModelForm):
class Meta:
model = Appointment
exclude = ['is_finished']
- datetime_when = forms.DateTimeField(label='Appointment on (YYYY-MM-DD HH:MM:SS)')
+ datetime_when = forms.DateTimeField(label='Appointment on (YYYY-MM-DD HH:MM)',
+ widget=forms.DateTimeInput(DATETIMEPICKER_DATE_ATTRS)
+ )
class VisitDetailForm(ModelForm):
datetime_begin = forms.DateField(label="Visit begins on",
diff --git a/smash/web/templates/appointments/add.html b/smash/web/templates/appointments/add.html
index ac6a5371..cbfab413 100644
--- a/smash/web/templates/appointments/add.html
+++ b/smash/web/templates/appointments/add.html
@@ -6,6 +6,8 @@
{{ block.super }}
<!-- DataTables -->
<link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.css' %}">
+
+ {% include "includes/datetimepicker.css.html" %}
{% endblock styles %}
{% block ui_active_tab %}'appointments'{% endblock ui_active_tab %}
@@ -88,4 +90,6 @@
});
});
</script>
+
+ {% include "includes/datetimepicker.js.html" %}
{% endblock scripts %}
diff --git a/smash/web/templates/appointments/details.html b/smash/web/templates/appointments/details.html
index b08c51d0..28d1ef3b 100644
--- a/smash/web/templates/appointments/details.html
+++ b/smash/web/templates/appointments/details.html
@@ -1,10 +1,13 @@
{% extends "_base.html" %}
{% load static %}
+{% load filters %}
{% block styles %}
{{ block.super }}
<!-- DataTables -->
<link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.css' %}">
+
+ {% include "includes/datetimepicker.css.html" %}
{% endblock styles %}
{% block ui_active_tab %}'appointments'{% endblock ui_active_tab %}
@@ -35,12 +38,12 @@
<div class="box-body">
{% for field in form %}
<div class="form-group">
- <label for="{# TODO #}" class="col-sm-2 control-label">
+ <label class="col-sm-3 control-label">
{{ field.label }}
</label>
- <div class="col-sm-10">
- {{ field }}
+ <div class="col-sm-9">
+ {{ field|add_class:'form-control' }}
</div>
{% if field.help_text %}
@@ -81,4 +84,6 @@
});
});
</script>
+
+ {% include "includes/datetimepicker.js.html" %}
{% endblock scripts %}
diff --git a/smash/web/templates/appointments/edit.html b/smash/web/templates/appointments/edit.html
index 21805183..0b53364f 100644
--- a/smash/web/templates/appointments/edit.html
+++ b/smash/web/templates/appointments/edit.html
@@ -6,6 +6,8 @@
{{ block.super }}
<!-- DataTables -->
<link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.css' %}">
+
+ {% include "includes/datetimepicker.css.html" %}
{% endblock styles %}
{% block ui_active_tab %}'appointments'{% endblock ui_active_tab %}
@@ -87,4 +89,6 @@
});
});
</script>
+
+ {% include "includes/datetimepicker.js.html" %}
{% endblock scripts %}
diff --git a/smash/web/templates/includes/datetimepicker.css.html b/smash/web/templates/includes/datetimepicker.css.html
new file mode 100644
index 00000000..0a341525
--- /dev/null
+++ b/smash/web/templates/includes/datetimepicker.css.html
@@ -0,0 +1,3 @@
+{% load static %}
+<!-- Bootstrap datepicker -->
+<link rel="stylesheet" href="{% static 'AdminLTE/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css' %}">
diff --git a/smash/web/templates/includes/datetimepicker.js.html b/smash/web/templates/includes/datetimepicker.js.html
new file mode 100644
index 00000000..f6b5f8a7
--- /dev/null
+++ b/smash/web/templates/includes/datetimepicker.js.html
@@ -0,0 +1,10 @@
+{% load static %}
+<script src="{% static 'AdminLTE/plugins/moment.js/moment.min.js' %}"></script>
+<script src="{% static 'AdminLTE/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script>
+<script>
+ $(document).ready(function () {
+ $(".datetimepicker").datetimepicker({
+ 'sideBySide': true
+ });
+ });
+</script>
diff --git a/todos.txt b/todos.txt
index b3492bba..261e8d71 100644
--- a/todos.txt
+++ b/todos.txt
@@ -1,5 +1,8 @@
* TODO List
+** Notice
+Moved all the important stuff to gitlab issues
+
** Important
- label for's => give them correct html id's (all html forms).
Currently it works, but it's not valid HTML, as the ID (for labels) are all the same.
--
GitLab