[contests]Enable crispy forms, datepicker; cleanup

Author: Alexandre Pinto

oshc/main/forms.py

@@ -0,0 +1,18 @@
+from django import forms
+from crispy_forms.helper import FormHelper
+from .models import Contest
+
+
+class ContestForm(forms.ModelForm):
+    def __init__(self, *args, **kwargs):
+        super(ContestForm, self).__init__(*args, **kwargs)
+        self.helper = FormHelper()
+        self.helper.form_tag = False
+        self.helper.label_class = 'col-lg-2'
+        self.helper.field_class = 'col-lg-8'
+        self.fields['start_date'].widget.attrs['class'] = 'datepicker'
+        self.fields['end_date'].widget.attrs['class'] = 'datepicker'
+
+    class Meta:
+        model = Contest
+        fields = ['name', 'link', 'description', 'start_date', 'end_date']

oshc/main/static/main/css/bootstrap-datetimepicker.min.css

@@ -1,50 +1,36 @@
 {% extends 'base.html' %}
+{% load static %}
+{% load crispy_forms_tags %}
 
 {% block content %}
-
-    <form name="newContest" method="POST" class="form-horizontal" action = "{% url 'add_contest' %}">
-        {% csrf_token %}
-        <div class="form-group">
-            <label style="margin-top:70px;" for="name" class="control-label col-xs-2">Name:</label>
-            <div class="col-xs-3">
-                <input type="text" style="margin-top:70px;" class="form-control" id="name" pattern="([A-Za-z\s-])\w+" name="name" placeholder="Contest Name" required>
-            </div>
-        </div>
-
-        <div class="form-group">
-            <label for="link" class="control-label col-xs-2">Contest's Website:</label>
-            <div class="col-xs-3">
-                <input type="url" class="form-control" id="link" name="link" placeholder="https://www.testweb.com" required>
-            </div>
-        </div>
-
-        <div class="form-group">
-            <label for="start_date" class="control-label col-xs-2">Start Date:</label>
-            <div class="col-xs-3">
-                <input type="start_date" class="form-control" id="start_date" name="start_date" placeholder="YYYY-MM-DD" pattern="(?:20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))" required>
-            </div>
-        </div>
-
-        <div class="form-group">
-            <label for="end_date" class="control-label col-xs-2">End Date:</label>
-            <div class="col-xs-3">
-                <input type="end_date" class="form-control" id="end_date" name="end_date" placeholder="YYYY-MM-DD" pattern="(?:20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))" required>
-            </div>
-        </div>
-
+    <link href="{% static 'main/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="{% static 'main/js/moment.min.js' %}"></script>
+    <script src="{% static 'main/js/bootstrap-datetimepicker.min.js' %}"></script>
+    <form name="newContest" method="POST" style="margin-top:70px;" class="form-horizontal"
+          action="{% url 'add_contest' %}">
+        {% crispy form %}
         <div class="form-group">
-            <label for="desc" class="control-label col-xs-2">Description:</label>
-            <div class="col-xs-3">
-                <textarea class="form-control" id="desc" name="desc" placeholder="Tell something about it.." rows="3"></textarea>
-            </div>
-        </div>
-
-        <div class="form-group">
-            <div class="col-xs-offset-3 col-xs-8">
+            <div style="margin-bottom: 10px;" class="col-xs-offset-5 col-xs-8">
                 <button type="submit" class="save btn btn-default">SUBMIT</button>
             </div>
         </div>
-
     </form>
 
-{% endblock %}
+    <script type="text/javascript">
+    jQuery(document).ready(function ($) {
+        $(function () {
+            $('.datepicker').datetimepicker(
+                {
+                    format: 'YYYY-MM-DD',
+                }
+            );
+        });
+
+        // protect against invalid time ranges
+        $("#id_start_date").on("dp.change", function (e) {
+            $('#id_end_date').data("DateTimePicker").minDate(e.date);
+        });
+    });
+    </script>
+{% endblock %}

oshc/main/static/main/js/bootstrap-datetimepicker.min.js

@@ -4,6 +4,7 @@
 from datetime import datetime
 from django.shortcuts import render_to_response
 from django.template import RequestContext
+from .forms import ContestForm
 
 
 def home(request):
@@ -23,21 +24,19 @@ def contests(request):
 
 
 def contest_new(request):
-    return render(request, 'contest_edit.html')
+    form = ContestForm()
+    return render(request, 'contest_edit.html', {'form': form})
 
 
 def add_contest(request):
-    contest = Contest()
-    contest.name = request.POST.get("name", "null")
-    contest.link = request.POST.get("link", "null")
-    start_date = request.POST.get("start_date", "null")
-    end_date = request.POST.get("end_date", "null")
-    contest.description = request.POST.get("desc", "null")
-    contest.end_date = datetime.strptime(end_date, '%Y-%m-%d').date()
-    contest.start_date = datetime.strptime(start_date, '%Y-%m-%d').date()
-    contest.save()
-    return HttpResponseRedirect("/submit_contest/")
-
+    if request.method == 'POST':
+        form = ContestForm(request.POST)
+        if form.is_valid():
+            form.save()
+            return HttpResponseRedirect("/submit_contest/")
+    else:
+        form = ContestForm()
+    return render(request, 'contest_edit.html', {'form': form})
 
 def submit_contest(request):
     return render(request, 'contest_submission.html')

oshc/main/static/main/js/moment.min.js

@@ -48,6 +48,7 @@
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'crispy_forms',
 )
 
 MIDDLEWARE_CLASSES = (
@@ -159,3 +160,5 @@
 EMAIL_PORT = 587
 EMAIL_USE_TLS = True
 LOGIN_REDIRECT_URL = "/"
+
+CRISPY_TEMPLATE_PACK = 'bootstrap3'

oshc/main/templates/contest_edit.html

@@ -5,4 +5,5 @@ gunicorn==19.7.1
 psycopg2==2.7.3.1
 pytz==2017.2
 whitenoise==3.3.1
-django-allauth==0.33.0
+django-allauth==0.33.0
+django-crispy-forms==1.7.0