add new javascript, request ui tweaks

 - Legacy-Id: 10888

Author: rpcross

ietf/meeting/forms.py

@@ -10,6 +10,7 @@
 from ietf.group.models import Group
 from ietf.ietfauth.utils import has_role
 from ietf.meeting.models import Meeting, Schedule, TimeSlot, Session, SchedTimeSessAssignment, countries, timezones
+from ietf.utils.fields import DatepickerDateField
 
 # need to insert empty option for use in ChoiceField
 countries.insert(0, ('', '-'*9 ))
@@ -115,21 +116,24 @@ def label_from_instance(self, obj):
 
 class InterimRequestForm(forms.Form):
     group = GroupModelChoiceField(queryset = Group.objects.filter(type__in=('wg','rg'),state='active').order_by('acronym'))
-    date = forms.DateField()
+    face_to_face = forms.BooleanField(required=False)
+    multi_day = forms.BooleanField(required=False)
+    series = forms.BooleanField(required=False)
+    date = DatepickerDateField(date_format="yyyy-mm-dd", picker_settings={"autoclose": "1" }, label='Date', required=True)
     time = forms.TimeField()
     duration = DurationField()
-    face_to_face = forms.BooleanField(required=False)
     city = forms.CharField(max_length=255,required=False)
     country = forms.ChoiceField(choices=countries,required=False)
     timezone = forms.ChoiceField(choices=timezones)
-    remote_instructions = forms.CharField(max_length=1024)
-    agenda = forms.CharField(widget=forms.Textarea)
-    agenda_note = forms.CharField(widget=forms.Textarea)
+    remote_instructions = forms.CharField(max_length=1024,required=False)
+    agenda = forms.CharField(required=False,widget=forms.Textarea)
+    agenda_note = forms.CharField(max_length=255,required=False)
 
     def __init__(self, request, *args, **kwargs):
         super(InterimRequestForm, self).__init__(*args, **kwargs)
         self.user = request.user
         self.person = self.user.person
+        self.fields["group"].widget.attrs["class"] = "select2-field"
 
         self.set_group_options()
 

ietf/static/ietf/js/meeting-interim-request.js

@@ -0,0 +1,3 @@
+$(document).ready(function () {
+    $('.select2-field').select2();
+});

ietf/templates/meeting/interim_request.html

@@ -1,10 +1,16 @@
 {% extends "base.html" %}
 {# Copyright The IETF Trust 2015, All Rights Reserved #}
 {% load origin %}
-{% load bootstrap3 %}
+{% load staticfiles bootstrap3 widget_tweaks %}
 
 {% block title %}Interim Request{% endblock %}
 
+{% block pagehead %}
+  <link rel="stylesheet" href="{% static 'select2/select2.css' %}">
+  <link rel="stylesheet" href="{% static 'select2-bootstrap-css/select2-bootstrap.min.css' %}">
+  <link rel="stylesheet" href="{% static 'bootstrap-datepicker/css/bootstrap-datepicker3.min.css' %}">
+{% endblock %}
+
 {% block content %}
   {% origin %}
   <h1>Interim Meeting Request</h1>
@@ -14,21 +20,72 @@ <h1>Interim Meeting Request</h1>
 
     {% bootstrap_field form.group layout='horizontal' %}
 
+    <div class="form-group">
+        <div class="checkbox">
+            <label class="checkbox-inline">{% render_field form.face_to_face class="form-control" %}Face to Face</label>
+        </div>
+        
+        <label class="radio-inline">
+            <input type="radio" name="optradio">Option 1
+        </label>
+        <label class="radio-inline">
+            <input type="radio" name="optradio">Option 2
+        </label>
+        <label class="radio-inline">
+            <input type="radio" name="optradio">Option 3
+        </label>
+        
+            {% render_field form.multi_day class="form-control" %}
+            {% render_field form.series class="form-control" %}
+        
+    </div>
+
+    
+    <div class="form-group">
+        <label for="face-to_face" class="col-md-2 control-label">Location</label>
+        <div class="form-inline">
+            {% render_field form.city class="form-control" placeholder="City" %}
+            {% render_field form.country class="form-control" %}
+            {% render_field form.timezone class="form-control" %}
+        </div>
+    </div>
+    
     <div class="form-group">
         <label for="session" class="col-md-2 control-label">Session</label>
-        <div class="col-md-10">
+        <div class="">
             <div class="form-inline">
-                {% bootstrap_field form.date show_label=False %}
-                {% bootstrap_field form.time show_label=False %}
-                {% bootstrap_field form.duration show_label=False %}
+                <div class="col-md-3">{% render_field form.date class="form-control" %}</div>
+                <div class="col-md-3">{% render_field form.time class="form-control" placeholder="time" %}</div>
+                <div class="col-md-3">{% render_field form.duration class="form-control" placeholder="duration" %}</div>
             </div>
         </div>
     </div>
-    
+
+    <div class="form-group">
+        <label for="id_remote_instructions" class="col-md-2 control-label">Remote Instructions</label>
+        <div class="col-md-10">{% render_field form.remote_instructions class="form-control" placeholder="ie. Webex address" %}</div>
+    </div>
+
+    <div class="form-group">
+        <label for="agenda" class="col-md-2 control-label">Agenda</label>
+        <div class="col-md-10">{% render_field form.agenda class="form-control" placeholder="Meeting agenda" %}</div>
+    </div>
+        
+    <div class="form-group">
+        <label for="agenda_note" class="col-md-2 control-label">Agenda Note</label>
+        <div class="col-md-10">{% render_field form.agenda_note class="form-control" placeholder="Note" %}</div>
+    </div>
+
     {% buttons %}
       <button type="submit" class="btn btn-primary">Submit</button>
       <a class="btn btn-default pull-right" href="{% url "ietf.meeting.views.upcoming" %}">Back</a>
     {% endbuttons %}
   </form>
 
 {% endblock %}
+
+{% block js %}
+  <script src="{% static 'bootstrap-datepicker/js/bootstrap-datepicker.min.js' %}"></script>
+  <script src="{% static 'select2/select2.min.js' %}"></script>
+  <script src="{% static 'ietf/js/meeting-interim-request.js' %}"></script>
+{% endblock %}