[#130] Finish time but there is a bug

mcszymist · Apr 15, 2019 · 9e9179f · 9e9179f
1 parent 6eaeed7
commit 9e9179f
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 9 deletions.
diff --git a/IAIDSWebsite/eventEdit/forms.py b/IAIDSWebsite/eventEdit/forms.py
@@ -13,7 +13,7 @@ class Meta:
 			'personelMax' : forms.NumberInput(),
             'startdate' : forms.DateInput(attrs={'class': 'datepicker'}),
 			'enddate' : forms.DateInput(attrs={'class': 'datepicker'}),
-            'starttime' : forms.TimeInput(),
-			'endtime' : forms.TimeInput(),
+            'starttime' : forms.TimeInput(attrs={'class': 'timepicker'}),
+			'endtime' : forms.TimeInput(attrs={'class': 'timepicker'}),
 			'description' : forms.Textarea(),
         }
diff --git a/IAIDSWebsite/eventEdit/templates/eventEdit/eventEdit.html b/IAIDSWebsite/eventEdit/templates/eventEdit/eventEdit.html
@@ -7,10 +7,12 @@
 <!-- <link rel="stylesheet" type="text/css" href="{% static 'events/css/filter.css' %}" /> -->
 <link rel="stylesheet" type="text/css" href="{% static 'source/css/output.css' %}" />
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css" />
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
 <script type="text/javascript" src="{% static 'events/js/datatables.min.js' %}">
 </script>
 <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js">
 </script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
 {% endblock %}
 
 {% block middleColumn %}
@@ -102,7 +104,14 @@ <h1 class="textWithBar">{{event.name}}</h1>
                         <td>{{job.id}}</td>
                         <td>{{job.name}}</td>
                         <td>{{job.personel}}/{{job.personelMax}}</td>
-                        <td>{{job.startdate}} - {{job.enddate}}</td>
+
+                        <td>{{job.startdate}}
+                            {% if job.startdate != job.enddate %}
+                            - {{job.enddate}}
+                            {% endif %}
+                            <br>
+                            {{job.starttime}} - {{job.endtime}}
+                        </td>
                         <td><button id="signUpJob" class="button tiny"><i class="fi-plus"></i> <b>SignUp</b>
                                 {% if allUsers == user %}
                             </button><button id="deleteJob" class="button tiny alert"><i class="fi-trash"></i></button>
@@ -206,15 +215,22 @@ <h1>New Job</h1>
 
         function handleFormSuccess(data, textStatus, jqXHR) {
             let id = data['id']
-            var job = $("#id_name").val();
-            var date = $("#id_startdate").val();
-            var enddate = $("#id_enddate").val();
-            var personelMax = $("#id_personelMax").val();
+            let job = $("#id_name").val();
+            let date = $("#id_startdate").val();
+            let enddate = $("#id_enddate").val();
+            let personelMax = $("#id_personelMax").val();
+            let starttime = $("#id_starttime").val();
+            let endtime = $("#id_endtime").val();
+            let input = date;
+            if(date != endtime){
+                input += " - " + enddate;
+            }
+            input += "<br>" + starttime + " - " + endtime;
             table.row.add([
                 id,
                 job,
-                "0/" + personelMax,
-                date + " - " + enddate,
+                personelMax,
+                input,
                 "<button id=\"signUpJob\" class=\"button tiny\"><i class=\"fi-plus\"></i> <b>SignUp</b></button><button id=\"deleteJob\" class=\"button tiny alert\"><i class=\"fi-trash\"></i></button>"
             ]).draw(false);
             console.log(data)
@@ -346,6 +362,24 @@ <h1>New Job</h1>
             { "width": "10%" }
         ]
     });
+    $('.timepicker').timepicker({
+        timeFormat: 'h:mm p',
+        interval: 15,
+        minTime: '0',
+        maxTime: '11:45 pm',
+        defaultTime: '11',
+        startTime: '12:00 am',
+        dynamic: false,
+        dropdown: true,
+        scrollbar: true,
+        change: function(time) {
+            // the input field
+            var element = $(this);
+            // get access to this Timepicker instance
+            var timepicker = element.timepicker();
+            $(this).val(moment(time).format("HH:mm"));
+        }
+    });
     {%else%}
     var table = $('#jobs').DataTable({
         bInfo: false,
@@ -367,6 +401,7 @@ <h1>New Job</h1>
         ]
     });
     {% endif %}
+
 </script>
 
 {% endblock %}