Input event modal and create some supporting infra

update form to split date/time as well

goathacks/admin/events.py

@@ -16,7 +16,9 @@ def list_events():
 
     events = Event.query.all()
 
-    return render_template("events/list.html", events=events)
+    form = forms.EventForm()
+
+    return render_template("events/list.html", events=events, form=form)
 
 @bp.route("/events/events.json")
 @login_required

goathacks/admin/forms.py

@@ -1,12 +1,14 @@
 from flask_wtf import FlaskForm
-from wtforms import StringField, DateTimeField, SubmitField, TextAreaField
+from wtforms import StringField, DateField, TimeField, SubmitField, TextAreaField
 from wtforms.validators import DataRequired
 
 class EventForm(FlaskForm):
     name = StringField("Name", validators=[DataRequired()])
     description = TextAreaField("Description")
     location = StringField("Location", validators=[DataRequired()])
-    start_time = DateTimeField("Start Time", validators=[DataRequired()])
+    start_day = DateField("Start Day", validators=[DataRequired()])
-    end_time = DateTimeField("End Time", validators=[DataRequired()])
+    start_time = TimeField("Start Time", validators=[DataRequired()])
+    end_day = DateField("End Day", validators=[DataRequired()])
+    end_time = TimeField("End Time", validators=[DataRequired()])
     category = StringField("Category")
     submit = SubmitField("Submit")

goathacks/templates/events/list.html

@@ -19,7 +19,7 @@
                 <th>Category</th>
                 <th>Checked in</th>
                 <th>QR Code</th>
-                <th><a href="{{url_for('admin.new_event')}}">New</a></th>
+                <th><a href="#editModal" data-bs-toggle="modal" data-id="0">New</a></th>
             </tr>
         </thead>
         <tbody>
@@ -34,11 +34,137 @@
                 <td>{{ event.get_checkins()|length }}</td>
                 <td><a href='{{ url_for("admin.qrcode_event", id=event.id)
                                          }}'>QR Code</a></td>
-                <td><a href="{{url_for('admin.edit_event', id=event.id)}}">Edit</a></td>
+                <td><a href="#editModal" data-bs-toggle="modal" data-id="{{ e.id}}" >Edit</a></td>
             </tr>
             {% endfor %}
         </tbody>
     </table>
 </div>
 </div>
+
+<div class="modal" id="editModal" tabindex="-1" aria-labelledby="editModalLabel"
+                                                aria-hidden="true">
+      <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h1 class="modal-title fs-5" id="editModalLabel">Event</h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <form class="form" id="edit-form" action="/admin/events/0" role="form" method="post">
+          <div class="modal-body">
+          {{ form.csrf_token }}
+            <div class="form-floating mb-3 required">
+                {{ form.name(class="form-control") }}
+                {{ form.name.label() }}
+            </div>
+            <div class="form-floating mb-3">
+                {{ form.description(class="form-control") }}
+                {{ form.description.label() }}
+            </div>
+            <div class="form-floating mb-3 required">
+                {{ form.location(class="form-control") }}
+                {{ form.location.label() }}
+            </div>
+            <div class="row">
+                <div class="col">
+                    <div class="form-floating mb-3 required">
+                        {{ form.start_day(class="form-control") }}
+                        {{ form.start_day.label() }}
+                    </div> 
+                </div>
+                <div class="col">
+                    <div class="form-floating mb-3 required">
+                        {{ form.start_time(class="form-control") }}
+                        {{ form.start_time.label() }}
+                    </div>                    
+                </div> 
+            </div> 
+            <div class="row">
+                <div class="col">
+                    <div class="form-floating mb-3 required">
+                        {{ form.end_day(class="form-control") }}
+                        {{ form.end_day.label() }}
+                    </div> 
+                </div>
+                <div class="col">
+                    <div class="form-floating mb-3 required">
+                        {{ form.end_time(class="form-control") }}
+                        {{ form.end_time.label() }}
+                    </div>                    
+                </div> 
+            </div>  
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button type="submit" class="btn btn-primary" id="edit-save">Save changes</button>
+          </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<script src="{{ url_for('static', filename='js/jquery-3.6.3.min.js') }}" charset="utf-8"></script>
+
+<script charset="utf-8">
+    const editButton = document.getElementById("edit-save")
+
+    $('#editModal').on('show.bs.modal', function(event) {
+        var modal = $(this)
+                modal.find('#name').val('')
+        modal.find('#location').val('')
+        modal.find('#description').val('')
+        modal.find('#start_day').val('')
+        modal.find('#start_time').val('')
+        modal.find('#end_day').val('')
+        modal.find('#end_time').val('')
+
+        var button = $(event.relatedTarget)
+        var name,description,loc,start_time,start_day,end_time,end_day
+        id = button.data('id')
+
+        saveButton = document.getElementById("edit-save")
+        saveButton.dataset.id = id
+
+        editForm = document.getElementById("edit-form")
+        editForm.action = "/admin/event/" + id
+
+        if (id) {
+            $.get(`/admin/event/${id}`, (data) => {
+
+                if (data.status == "error") {
+                    // This is a new event, do nothing!
+                } else {
+                    name = data.name,
+                    description = data.description,
+                    loc = data.location
+
+                    start = new Date(data.start_time) 
+
+                    var day = ("0" + start.getDate()).slice(-2);
+                    var month = ("0" + (start.getMonth() + 1)).slice(-2);
+
+                    start_day = start.getFullYear()+"-"+(month)+"-"+(day); 
+                    start_time = `${start.getHours()}:${padTwoDigits(start.getMinutes())}`
+                    end = new Date(data.end_time)
+
+                    var day = ("0" + end.getDate()).slice(-2);
+                    var month = ("0" + (end.getMonth() + 1)).slice(-2);
+
+                    end_day = end.getFullYear()+"-"+(month)+"-"+(day); 
+                    end_time = `${end.getHours()}:${padTwoDigits(end.getMinutes())}`
+                }
+
+                    modal.find('#name').val(name)
+                    modal.find('#location').val(loc)
+                    modal.find('#description').val(description)
+                    modal.find('#start_day').val(start_day)
+                    modal.find('#start_time').val(start_time)
+                    modal.find('#end_day').val(end_day)
+                    modal.find('#end_time').val(end_time)
+
+               
+            });
+        }
+    })
+</script>
 {% endblock %}

goathacks/templates/home

@@ -1 +1 @@
-Subproject commit 8d8a691aad1cea4037bb9d33ddf7230d8d272597
+Subproject commit e0fb69c0be54c6cce7391ccb86a9bf14b80f432b

requirements.txt

@@ -9,7 +9,7 @@ Flask-Login==0.6.2
 Flask-Migrate==4.0.0
 Flask-SQLAlchemy==3.0.2
 Flask-WTF==1.0.1
-greenlet==2.0.1
+greenlet
 itsdangerous==2.1.2
 Jinja2==3.1.2
 Mako==1.2.4
@@ -19,7 +19,7 @@ psycopg2==2.9.5
 pynvim==0.4.3
 python-dotenv==0.21.0
 SQLAlchemy==1.4.44
-uWSGI==2.0.21
+uWSGI
 Werkzeug==2.2.2
 WTForms==3.0.1
 ulid