From 7be8f9296d990636dc3a8f262abf65e2c53bc49f Mon Sep 17 00:00:00 2001
From: dgtlmoon <dgtlmoon@gmail.com>
Date: Mon, 23 May 2022 17:36:03 +0200
Subject: [PATCH] Check that we are ready

---
 changedetectionio/__init__.py         |  8 +++++++
 changedetectionio/store.py            |  9 ++++++++
 changedetectionio/templates/edit.html | 33 +++++++++++++++------------
 3 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/changedetectionio/__init__.py b/changedetectionio/__init__.py
index 56663a1b..a5087e19 100644
--- a/changedetectionio/__init__.py
+++ b/changedetectionio/__init__.py
@@ -626,6 +626,12 @@ def changedetection_app(config=None, datastore_o=None):
             if request.method == 'POST' and not form.validate():
                 flash("An error occurred, please see below.", "error")
 
+            visualselector_data_is_ready = datastore.visualselector_data_is_ready(uuid)
+
+            # Only works reliably with Playwright
+            visualselector_enabled = os.getenv('PLAYWRIGHT_DRIVER_URL', False) and default['fetch_backend'] == 'html_webdriver'
+
+
             output = render_template("edit.html",
                                      uuid=uuid,
                                      watch=datastore.data['watching'][uuid],
@@ -634,6 +640,8 @@ def changedetection_app(config=None, datastore_o=None):
                                      using_global_webdriver_wait=default['webdriver_delay'] is None,
                                      current_base_url=datastore.data['settings']['application']['base_url'],
                                      emailprefix=os.getenv('NOTIFICATION_MAIL_BUTTON_PREFIX', False),
+                                     visualselector_data_is_ready=visualselector_data_is_ready,
+                                     visualselector_enabled=visualselector_enabled
                                      )
 
         return output
diff --git a/changedetectionio/store.py b/changedetectionio/store.py
index 96401cfe..45d9a0a5 100644
--- a/changedetectionio/store.py
+++ b/changedetectionio/store.py
@@ -372,6 +372,15 @@ class ChangeDetectionStore:
 
         return False
 
+    def visualselector_data_is_ready(self, watch_uuid):
+        output_path = "{}/{}".format(self.datastore_path, watch_uuid)
+        screenshot_filename = "{}/last-screenshot.png".format(output_path)
+        elements_index_filename = "{}/elements.json".format(output_path)
+        if path.isfile(screenshot_filename) and  path.isfile(elements_index_filename) :
+            return True
+
+        return False
+
     # Save as PNG, PNG is larger but better for doing visual diff in the future
     def save_screenshot(self, watch_uuid, screenshot: bytes):
         output_path = "{}/{}".format(self.datastore_path, watch_uuid)
diff --git a/changedetectionio/templates/edit.html b/changedetectionio/templates/edit.html
index 29a144e4..8c657707 100644
--- a/changedetectionio/templates/edit.html
+++ b/changedetectionio/templates/edit.html
@@ -206,20 +206,25 @@ nav
             <div class="tab-pane-inner visual-selector-ui" id="visualselector">
                 <fieldset>
                     <div class="pure-control-group">
-
-                        <div id="selector-header">
-                            <a id="clear-selector" class="pure-button button-secondary button-xsmall" style="font-size: 70%">Clear selection</a>
-                            <i class="fetching-update-notice" style="font-size: 80%;">One moment, fetching screenshot and element information..</i>
-                        </div>
-                        <div id="selector-wrapper">
-                            <!-- request the screenshot and get the element offset info ready -->
-                            <!-- use img src ready load to know everything is ready to map out -->
-                            <img id="selector-background" />
-                            <canvas id="selector-canvas"></canvas>
-                        </div>
-
-                        <div id="selector-current-xpath" style="overflow-x: hidden"><strong>Currently:</strong>&nbsp;<span class="text">Loading...</span></div>
-
+                        {% if visualselector_enabled %}
+                            {% if visualselector_data_is_ready %}
+                                <div id="selector-header">
+                                    <a id="clear-selector" class="pure-button button-secondary button-xsmall" style="font-size: 70%">Clear selection</a>
+                                    <i class="fetching-update-notice" style="font-size: 80%;">One moment, fetching screenshot and element information..</i>
+                                </div>
+                                <div id="selector-wrapper">
+                                    <!-- request the screenshot and get the element offset info ready -->
+                                    <!-- use img src ready load to know everything is ready to map out -->
+                                    <img id="selector-background" />
+                                    <canvas id="selector-canvas"></canvas>
+                                </div>
+                                <div id="selector-current-xpath" style="overflow-x: hidden"><strong>Currently:</strong>&nbsp;<span class="text">Loading...</span></div>
+                            {% else %}
+                                <span class="pure-form-message-inline">Screenshot and element data is not available or not yet ready.</span>
+                            {% endif %}
+                        {% else %}
+                            <span class="pure-form-message-inline">Sorry, this functionality only works with Playwright/Chrome enabled watches.</span>
+                        {% endif %}
                     </div>
                 </fieldset>
             </div>