change GUI to reflect active status

Author: robswc

src/main.py

@@ -102,7 +102,7 @@ def activate_event():
         # set event to active or inactive, depending on current state
         event.active = request.args.get('active', True) == 'true'
         logger.info(f'Event {event.name} active set to: {event.active}, via POST request')
-        return Response(response={event.name: {'active': event.active}}, status=200)
+        return {'active': event.active}
 
 
 if __name__ == '__main__':

src/templates/dashboard.html

@@ -133,8 +133,15 @@ <h2 class="accordion-header" id="flush-headingTwo">
                                                         </details>
                                                     </div>
                                                 </div>
-                                                <div>
-                                                    <i class="fa-solid fa-circle-check fs-3 text-success"></i>
+                                                <div class="d-flex align-items-center justify-content-end gap-5">
+                                                    <div class="form-check form-switch">
+                                                        <input class="form-check-input toggle-active-switch"
+                                                               type="checkbox" role="switch"
+                                                               id="{{ event }}toggleActiveSwitch" checked>
+                                                        <label class="form-check-label"
+                                                               for="{{ event }}toggleActiveSwitch">Active</label>
+                                                    </div>
+                                                    <i id="{{ event }}ActiveStatus" class="fa-solid fa-circle-check fs-3 text-success"></i>
                                                 </div>
                                             </div>
                                         </div>
@@ -216,7 +223,33 @@ <h1><i class="fa-solid fa-chart-area pe-3 text-muted"></i>Monitoring</h1>
         </div>
     </div>
 </div>
-
+<script>
+    // on document load
+    $(document).ready(
+        function toggleEventActive() {
+            $('.toggle-active-switch').on('change', function () {
+                console.log('toggle active')
+                let event = $(this).attr('id').split('toggleActiveSwitch')[0];
+                let active = $(this).is(':checked');
+                $.ajax({
+                    url: `/event/active?event=${event}&active=${active}`,
+                    type: 'POST',
+                    success: function (data) {
+                        console.log(data);
+                        const statusIcon = $(`#${event}ActiveStatus`)
+                        if (data['active']) {
+                            statusIcon.addClass('fa-circle-check text-success');
+                            statusIcon.removeClass('fa-circle-xmark text-danger');
+                        } else {
+                            statusIcon.removeClass('fa-circle-check text-success');
+                            statusIcon.addClass('fa-circle-xmark text-danger');
+                        }
+                    }
+                })
+            })
+        }
+    )
+</script>
 <script>
     var data = [
         {