Venue save functionality

No field validation is present, so there will be an error if you miss or put an invalid value into the form then save.

src/mainapp/templates/venues.html

@@ -91,7 +91,7 @@
     </div>
 </div>
 
-<div id="venueModal" class="modal fade">
+<div id="venueModal" class="modal fade" data-venue-id="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content overflow-hidden rounded-4">
             <div class="modal-body border-bottom-0 p-0">
@@ -159,6 +159,10 @@
                                     <label for="venuePostCode" class="form-label">Postal Code</label>
                                     <input name="venuePostCode" id="venuePostCode" type="text" class="form-control" placeholder="DE7 5GF">
                                 </div>
+                                <div class="col-6">
+                                    <label for="venueCountry" class="form-label">Country</label>
+                                    <input name="venueCountry" id="venueCountry" type="text" class="form-control" placeholder="United Kingdom">
+                                </div>
                             </div>
                         </div>
                         <div id="newVenueContactTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueContactTabBtn" tabindex="0">
@@ -297,7 +301,7 @@
             </div>
             <div class="modal-footer border-top-0 p-4 pt-2">
                 <button class="btn btn-secondary px-4 me-3 btn-facing-left" data-bs-dismiss="modal">Cancel</button>
-                <button class="btn btn-company btn-facing-right">
+                <button class="btn btn-company btn-facing-right" onclick="saveVenue();">
                     <span class="edit" style="display: none;">Save Edit</span>
                     <span class="create" style="display: none;">Save New</span>
                 </button>
@@ -309,5 +313,5 @@
 {% endblock content %}
 
 {% block scripts %}
-<script src="{% static 'js/mainapp/venues.js' %}"></script>
+<script src="{% static 'js/mainapp/venues.js' %}" data-csrfmiddlewaretoken="{{ csrf_token }}"></script>
 {% endblock scripts %}

src/mainapp/urls.py

@@ -10,6 +10,7 @@ urlpatterns = [
     path('venues/get-waters/<int:venue_id>', views.get_venue_waters, name="get-venue-waters"),
     path('venues/<int:venue_id>', views.venue_details, name="venue-details"),
     path("venues/api/<int:venue_id>", views.get_venue_details, name="venue-details"),
+    path("venues/api/create", views.create_venue, name="create-venue"),
 
     # path('bulk-peg/', views.bulk_create_pegs, name='bulk-peg'),
     path('get-angler-data/', views.get_angler_page_data, name='get-angler-data'),

src/mainapp/views.py

@@ -47,6 +47,31 @@ def venue_details(request, venue_id):
 
     return render(request, 'venue_details.html', context)
 
+def create_venue(request):
+
+    if request.method != "POST":
+        return JsonResponse({"error", "Method not allowed"}, status=403)
+
+    test = request.POST
+
+    attributes = {
+        name: request.POST.get(name) for name in 
+        [field.name for field in Venue._meta.get_fields()]
+    }
+    venue_id = request.POST.get("id")
+   
+    if venue_id:
+        venue = Venue.objects.get(id=venue_id)
+        for k, v in attributes.items():
+            setattr(venue, k, v)
+
+        venue.save()
+        return JsonResponse({"success": "successful update"}, status=200)
+
+    del attributes["id"]
+    Venue.objects.create(**attributes)
+    return JsonResponse({"success": "successful creation"}, status=200)
+
 def get_venue_details(request, venue_id: int):
 
     try:

src/static/js/mainapp/venues.js

@@ -12,7 +12,12 @@
 //     });
 // }
 
+var scriptData = document.currentScript.dataset;
+
 function openVenueModal(venue_id) {
+    $("#venueModal").data("venue-id", venue_id);
+
+
     if (venue_id == -1) {
         $("#venueModal .edit").hide();
         $("#venueModal .create").show();
@@ -25,6 +30,7 @@ function openVenueModal(venue_id) {
         $("#venueCity").val("");
         $("#venueProvence").val("");
         $("#venuePostCode").val("")
+        $("#venueCountry").val("")
 
         $("#venuePhone").val("");
         $("#venueEmail").val("");
@@ -52,7 +58,8 @@ function openVenueModal(venue_id) {
                 $("#venueStreetAddress").val(venue.street_address);
                 $("#venueCity").val(venue.city);
                 $("#venueProvence").val(venue.provence);
-                $("#venuePostCode").val(venue.postal_code)
+                $("#venuePostCode").val(venue.postal_code);
+                $("#venueCountry").val(venue.country);
 
                 $("#venuePhone").val(venue.phone_number);
                 $("#venueEmail").val(venue.email_address);
@@ -60,7 +67,7 @@ function openVenueModal(venue_id) {
 
                 $("#venueTwitter").val(venue.twitter_url);
                 $("#venueFacebook").val(venue.facebook_url);
-                $("#venueInstagram").val(venue.instagram);
+                $("#venueInstagram").val(venue.instagram_url);
             },
             error: function(error) {
                 alert("error: " + JSON.stringify(error));
@@ -69,4 +76,45 @@ function openVenueModal(venue_id) {
     }
 
     new bootstrap.Modal("#venueModal").show();
+}
+
+function saveVenue() {
+    var data = {
+        name: $("#venueName").val(),
+        description: $("#venueDescription").val(),
+        extra_notes: "* placeholder *",
+        venue_type: $("#venueType").val(),
+
+        street_address: $("#venueStreetAddress").val(),
+        city: $("#venueCity").val(),
+        provence: $("#venueProvence").val(),
+        postal_code: $("#venuePostCode").val(),
+        country: $("#venueCountry").val(),
+
+        phone_number: $("#venuePhone").val(),
+        email_address: $("#venueEmail").val(),
+        website_url: $("#venueWebsite").val(),
+
+        twitter_url: $("#venueTwitter").val(),
+        facebook_url: $("#venueFacebook").val(),
+        instagram_url: $("#venueInstagram").val(),
+
+        csrfmiddlewaretoken: scriptData.csrfmiddlewaretoken,
+    }
+
+    const venue_id = $("#venueModal").data("venue-id");
+    data.id = venue_id > -1 ? venue_id : null;
+
+    $.ajax({
+        url: `/venues/api/create`,
+        method: 'post',
+        dataType: 'json',
+        data: data,
+        success: function(response) {
+            alert("created, reload page please");
+        },
+        error: function(error) {
+            alert("error: " + JSON.stringify(error));
+        }
+    });
 }