red border added to the modl inputs that are empty, edit modal button…

… is not working correctly

app/controllers/admin/routes.py

@@ -7,9 +7,6 @@
 import os
 import ast
 from dateutil.parser import parse
-import ast
-from dateutil.parser import parse
-
 from app import app
 from app.models.program import Program
 from app.models.event import Event

app/static/css/createEvent.css

@@ -34,4 +34,10 @@
     90%, 100% {
         opacity: 0;
     }
-}
+}
+
+.border-red {
+
+    border: 2px solid red;
+
+}

app/static/js/createEvents.js

@@ -70,12 +70,17 @@ function calculateRecurringEventFrequency(){
       // Check if the input field is empty
       if (eventNameInput.value.trim() === '') {
           isEmpty = true;
+          $(eventNameInput).addClass('border-red');
+      } else{
+        $(eventNameInput).removeClass('border-red');
       }
   });  
     datePickerInputs.forEach(datePickerInput => {
     // Check if the input field is empty
       if (datePickerInput.value.trim() === '') {
           isEmpty = true;
+      } else {
+        $(datePickerInput).removeClass('border-red');
       }
 });  
     if (isEmpty){
@@ -90,19 +95,18 @@ function calculateRecurringEventFrequency(){
     }
 
     else {
-      storingMultipleOfferingEventAttributes();
+      storeMultipleOfferingEventAttributes();
       $("#checkIsMultipleOffering").prop('checked', true);
       // Remove the modal and overlay from the DOM
       $('#modalMultipleOffering').modal('hide');
       msgFlash("Multiple time offering events saved!", "success");
     }
   });
 //build multi-event table
-function storingMultipleOfferingEventAttributes() {
+function storeMultipleOfferingEventAttributes() {
     let entries = [];
     $(".extraSlots").children().each(function(index, element) {
         let rowData = $.map($(element).find("input"), (el) => $(el).val());
-        console.log("Data in row " + (index + 1) + ": " + rowData);
 
         entries.push({
             eventName: rowData[0],
@@ -204,8 +208,44 @@ $(document).ready(function() {
     $("#multipleOfferingTableDiv").addClass('d-none');
     $('#modalMultipleOffering').modal('hide');
     $('.extraSlots').children().not(':first').remove();
-  }
+  } else {
+    console.log($("#multipleOfferingTableDiv").html())
+    let tableRows = $("#multipleOfferingTableDiv").find("tr").map(function() {
+      let rowData = $(this).find("td").map(function() {
+          return $(this).text();
+      }).get();
+      console.log(typeof rowData)
+      console.log(rowData)
+      return rowData;
+
+  }).get();
+
+    console.log(tableRows)
+    console.log(typeof tableRows)
+    console.log(typeof tableRows[0])
+
+    $(".extraSlots").children().each(function(index, element) {
+      let rowData = $.map($(element).find("input"), function(el) {
+        return $(el).val();
+      });
+
+      console.log("Data in row" +(index + 1) + ": " + rowData);
+      console.log(typeof rowData)
+      let foundInTable = tableRows.some(function(tableRow) {
+        return JSON.stringify(tableRow) === JSON.stringify(rowData);
+      });
+
+      console.log(foundInTable)
+
+      // If not found in tableRows, remove the child element
+      if (!foundInTable) {
+        $(element).remove();
+      }
+
   });
+  }
+
+});
 
   /*cloning the div with ID multipleOfferingEvent and cloning, changing the ID of each clone going up by 1. This also changes the ID of the deleteMultipleOfferingEvent so that when the trash icon is clicked, 
   that specific row will be deleted*/

app/templates/base.html

@@ -48,7 +48,6 @@
           <div class="flash_container" id="flash_container">
             {% with messages = get_flashed_messages(with_categories=true) %}
               <script> var flashMessages = {{messages | tojson}} </script>
-              {# <script> var flashMessages = {{messages | tojson}} </script> #}  {#FIXME: SHOULD BE THIS, WHY??#}
             {% endwith %}
           </div>
           <div class="sidebar-icon d-lg-none position-fixed top-0 start-0 d-print-none">