use socket emit from client to handle events

changedetectionio/blueprint/ui/__init__.py

@@ -1,9 +1,7 @@
 import time
 from flask import Blueprint, request, redirect, url_for, flash, render_template, session
 from loguru import logger
-from functools import wraps
 
-from changedetectionio.blueprint.ui.ajax import constuct_ui_ajax_blueprint
 from changedetectionio.store import ChangeDetectionStore
 from changedetectionio.blueprint.ui.edit import construct_blueprint as construct_edit_blueprint
 from changedetectionio.blueprint.ui.notification import construct_blueprint as construct_notification_blueprint
@@ -24,9 +22,6 @@ def construct_blueprint(datastore: ChangeDetectionStore, update_q, running_updat
     views_blueprint = construct_views_blueprint(datastore, update_q, queuedWatchMetaData, watch_check_update)
     ui_blueprint.register_blueprint(views_blueprint)
 
-    ui_ajax_blueprint = constuct_ui_ajax_blueprint(datastore, update_q, running_update_threads, queuedWatchMetaData, watch_check_update)
-    ui_blueprint.register_blueprint(ui_ajax_blueprint)
-
     # Import the login decorator
     from changedetectionio.auth_decorator import login_optionally_required
 

changedetectionio/blueprint/ui/ajax.py

@@ -1,35 +0,0 @@
-import time
-
-from blinker import signal
-from flask import Blueprint, request, redirect, url_for, flash, render_template, session
-
-
-from changedetectionio.store import ChangeDetectionStore
-
-def constuct_ui_ajax_blueprint(datastore: ChangeDetectionStore, update_q, running_update_threads, queuedWatchMetaData, watch_check_update):
-    ui_ajax_blueprint = Blueprint('ajax', __name__, template_folder="templates", url_prefix='/ajax')
-
-    # Import the login decorator
-    from changedetectionio.auth_decorator import login_optionally_required
-
-    @ui_ajax_blueprint.route("/toggle", methods=['POST'])
-    @login_optionally_required
-    def ajax_toggler():
-        op = request.values.get('op')
-        uuid = request.values.get('uuid')
-        if op and datastore.data['watching'].get(uuid):
-            if op == 'pause':
-                datastore.data['watching'][uuid].toggle_pause()
-            elif op == 'mute':
-                datastore.data['watching'][uuid].toggle_mute()
-            elif op == 'recheck':
-                update_q.put(queuedWatchMetaData.PrioritizedItem(priority=1, item={'uuid': uuid}))
-
-            watch_check_update = signal('watch_check_update')
-            if watch_check_update:
-                watch_check_update.send(watch_uuid=uuid)
-
-        return 'OK'
-
-
-    return ui_ajax_blueprint

changedetectionio/blueprint/watchlist/__init__.py

@@ -78,7 +78,6 @@ def construct_blueprint(datastore: ChangeDetectionStore, update_q, queuedWatchMe
             active_tag=active_tag,
             active_tag_uuid=active_tag_uuid,
             app_rss_token=datastore.data['settings']['application'].get('rss_access_token'),
-            ajax_toggle_url=url_for('ui.ajax.ajax_toggler'),
             datastore=datastore,
             errored_count=errored_count,
             form=form,

changedetectionio/blueprint/watchlist/templates/watch-overview.html

@@ -4,8 +4,6 @@
 <script src="{{url_for('static_content', group='js', filename='jquery-3.6.0.min.js')}}"></script>
 <script src="{{url_for('static_content', group='js', filename='watch-overview.js')}}" defer></script>
 <script>let nowtimeserver={{ now_time_server }};</script>
-<script>let ajax_toggle_url="{{ ajax_toggle_url }}";</script>
-
 <style>
 .checking-now .last-checked {
     background-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.1) 100%);

changedetectionio/realtime/socket_server.py

@@ -242,6 +242,10 @@ def init_socketio(app, datastore):
     # Create a dedicated signal handler that will receive signals and emit them to clients
     signal_handler = SignalHandler(socketio, datastore)
 
+    # Register watch operation event handlers
+    from .events import register_watch_operation_handlers
+    register_watch_operation_handlers(socketio, datastore)
+
     # Store the datastore reference on the socketio object for later use
     socketio.datastore = datastore
     

changedetectionio/static/js/realtime.js

@@ -2,20 +2,20 @@
 
 $(document).ready(function () {
 
-    function bindAjaxHandlerButtonsEvents() {
+    function bindSocketHandlerButtonsEvents(socket) {
-        $('.ajax-op').on('click.ajaxHandlerNamespace', function (e) {
+        $('.ajax-op').on('click.socketHandlerNamespace', function (e) {
             e.preventDefault();
-            $.ajax({
+            const op = $(this).data('op');
-                type: "POST",
+            const uuid = $(this).closest('tr').data('watch-uuid');
-                url: ajax_toggle_url,
+            
-                data: {'op': $(this).data('op'), 'uuid': $(this).closest('tr').data('watch-uuid')},
+            console.log(`Socket.IO: Sending watch operation '${op}' for UUID ${uuid}`);
-                statusCode: {
+            
-                    400: function () {
+            // Emit the operation via Socket.IO
-                        // More than likely the CSRF token was lost when the server restarted
+            socket.emit('watch_operation', {
-                        alert("There was a problem processing the request, please reload the page.");
+                'op': op,
-                    }
+                'uuid': uuid
-                }
             });
+            
             return false;
         });
     }
@@ -38,7 +38,7 @@ $(document).ready(function () {
             socket.on('connect', function () {
                 console.log('Socket.IO connected with path:', socketio_url);
                 console.log('Socket transport:', socket.io.engine.transport.name);
-                bindAjaxHandlerButtonsEvents();
+                bindSocketHandlerButtonsEvents(socket);
             });
 
             socket.on('connect_error', function(error) {
@@ -55,7 +55,7 @@ $(document).ready(function () {
 
             socket.on('disconnect', function (reason) {
                 console.log('Socket.IO disconnected, reason:', reason);
-                $('.ajax-op').off('.ajaxHandlerNamespace')
+                $('.ajax-op').off('.socketHandlerNamespace')
             });
 
             socket.on('queue_size', function (data) {
@@ -63,6 +63,16 @@ $(document).ready(function () {
                 // Update queue size display if implemented in the UI
             })
 
+            // Listen for operation results
+            socket.on('operation_result', function (data) {
+                if (data.success) {
+                    console.log(`Socket.IO: Operation '${data.operation}' completed successfully for UUID ${data.uuid}`);
+                } else {
+                    console.error(`Socket.IO: Operation failed: ${data.error}`);
+                    alert("There was a problem processing the request: " + data.error);
+                }
+            });
+
             // Listen for periodically emitted watch data
             console.log('Adding watch_update event listener');