chg: [interactive crawler] improve template

Author: Terrtia

var/www/templates/crawler/crawler_splash/interactive_capture.html

@@ -41,16 +41,23 @@ <h4 class="mb-0"><i class="fas fa-route text-primary"></i> Session controls</h4>
                     <div id="capture_processing" class="alert alert-success" {% if session.status not in ['finishing', 'completed'] %}style="display:none;"{% endif %}>
                         <i class="fas fa-check-circle"></i> The interactive session is completed. AIL is saving and processing the browser state; results URL will appear in AIL when processing is finished.
                     </div>
+                    <div id="capture_stopped_pending_import" class="alert alert-info" {% if session.remote_status|lower != 'stopped' or session.status in ['completed', 'expired', 'error', 'closed'] %}style="display:none;"{% endif %}>
+                        <i class="fas fa-hourglass-half"></i> The interactive browser capture is stopped. The crawler will import the capture, then the crawled domain will be available when processing is finished.
+                    </div>
+                    <div id="open_browser_help" class="alert alert-primary" {% if not session.remote_url or session.status not in ['starting', 'ready'] or session.remote_status|lower == 'stopped' %}style="display:none;"{% endif %}>
+                        <i class="fas fa-external-link-alt"></i> Click <strong>Open interactive browser</strong> to open the interactive session. When you are done browsing, come back to this page and click <strong>Finish capture</strong>.
+                    </div>
                     <div id="interactive_error" class="alert alert-danger" {% if not session.error %}style="display:none;"{% endif %}>{{ session.error }}</div>
-                    <div id="crawled_domain_card" class="alert alert-primary d-flex flex-column flex-md-row justify-content-between align-items-md-center" {% if not session.crawled_domain %}style="display:none;"{% endif %}>
+                    {% set show_crawled_domain = session.crawled_domain and session.crawled_url and session.capture_status == 'DONE' %}
+                    <div id="crawled_domain_card" class="alert alert-primary flex-column flex-md-row justify-content-between align-items-md-center {% if show_crawled_domain %}d-flex{% else %}d-none{% endif %}" {% if not show_crawled_domain %}style="display:none !important;"{% endif %}>
                         <div>
                             <div class="font-weight-bold"><i class="fas fa-globe"></i> Crawled domain ready</div>
                             <div>
                                 <span id="crawled_url" class="text-muted" {% if not session.crawled_url %}style="display:none;"{% endif %}>({{ session.crawled_url }})</span>
                                 <span id="crawled_domain_text">{{ session.crawled_domain }}</span>
                             </div>
                         </div>
-                        <a id="crawled_domain_btn" class="btn btn-primary mt-3 mt-md-0" href="{{ url_for('crawler_splash.showDomain') }}?domain={{ session.crawled_domain|urlencode }}" {% if not session.crawled_domain %}style="display:none;"{% endif %}>
+                        <a id="crawled_domain_btn" class="btn btn-primary mt-3 mt-md-0 {% if not show_crawled_domain %}d-none{% endif %}" href="{{ url_for('crawler_splash.showDomain') }}?domain={{ session.crawled_domain|urlencode }}" {% if not show_crawled_domain %}style="display:none !important;"{% endif %}>
                             <i class="fas fa-external-link-alt"></i> Open domain
                         </a>
                     </div>
@@ -92,7 +99,7 @@ <h4 class="mb-0"><i class="fas fa-route text-primary"></i> Session controls</h4>
                             <a id="cookiejar_link" href="{{ url_for('crawler_splash.crawler_cookiejar_show') }}?uuid={{ session.cookiejar_uuid }}">{{ session.cookiejar_uuid }}</a>
                         </div>
                     {% endif %}
-                    <div class="list-group-item" id="crawled_domain_row" {% if not session.crawled_domain %}style="display:none;"{% endif %}>
+                    <div class="list-group-item {% if not show_crawled_domain %}d-none{% endif %}" id="crawled_domain_row" {% if not show_crawled_domain %}style="display:none !important;"{% endif %}>
                         <div class="text-muted small">Crawled domain</div>
                         <a id="crawled_domain_link" class="btn btn-sm btn-outline-primary mt-1" href="{{ url_for('crawler_splash.showDomain') }}?domain={{ session.crawled_domain|urlencode }}">
                             <i class="fas fa-external-link-alt"></i> {{ session.crawled_domain }}
@@ -144,17 +151,47 @@ <h4 class="mb-0"><i class="fas fa-route text-primary"></i> Session controls</h4>
 
 function is_capture_done(captureStatus){
     const normalizedCaptureStatus = String(captureStatus || '').toUpperCase();
-    return ['DONE', '1', 'COMPLETED', 'COMPLETE'].includes(normalizedCaptureStatus);
+    return normalizedCaptureStatus === 'DONE';
 }
 
 function is_remote_browser_stopped(remoteStatus){
     return String(remoteStatus || '').toLowerCase() === 'stopped';
 }
 
+function update_stopped_pending_import_message(status, remoteStatus){
+    const normalizedStatus = String(status || '').toLowerCase();
+    if(is_remote_browser_stopped(remoteStatus) && !interactiveFinalStates.includes(normalizedStatus)){
+        $('#capture_stopped_pending_import').show();
+    } else {
+        $('#capture_stopped_pending_import').hide();
+    }
+}
+
+function update_open_browser_help(status, remoteStatus){
+    const normalizedStatus = String(status || '').toLowerCase();
+    if($('#remote_url_btn').is(':visible') && ['starting', 'ready'].includes(normalizedStatus) && !is_remote_browser_stopped(remoteStatus)){
+        $('#open_browser_help').show();
+    } else {
+        $('#open_browser_help').hide();
+    }
+}
+
 function hide_remote_browser_controls(){
     $('#remote_url_btn').hide().addClass('d-none');
 }
 
+function show_crawled_domain_controls(){
+    $('#crawled_domain_card').removeClass('d-none').addClass('d-flex').removeAttr('style');
+    $('#crawled_domain_row').removeClass('d-none').removeAttr('style');
+    $('#crawled_domain_btn').removeClass('d-none').removeAttr('style');
+}
+
+function hide_crawled_domain_controls(){
+    $('#crawled_domain_card').removeClass('d-flex').addClass('d-none').attr('style', 'display:none !important;');
+    $('#crawled_domain_row').addClass('d-none').attr('style', 'display:none !important;');
+    $('#crawled_domain_btn').addClass('d-none').attr('style', 'display:none !important;');
+}
+
 function update_interactive_controls(status, captureStatus, remoteStatus){
     update_interactive_title(status);
     const normalizedStatus = String(status || '').toLowerCase();
@@ -177,6 +214,8 @@ <h4 class="mb-0"><i class="fas fa-route text-primary"></i> Session controls</h4>
     if(['finishing', 'completed'].includes(normalizedStatus)){
         $('#capture_processing').show();
     }
+    update_stopped_pending_import_message(normalizedStatus, remoteStatus);
+    update_open_browser_help(normalizedStatus, remoteStatus);
     if(interactiveFinalStates.includes(normalizedStatus)){
         stop_interactive_status_refresh();
     }
@@ -209,23 +248,22 @@ <h4 class="mb-0"><i class="fas fa-route text-primary"></i> Session controls</h4>
             $('#remote_url_btn').attr('href', data.remote_url).show().removeClass('d-none');
             $('#remote_starting').hide();
         }
-        if(data.status){
-            update_interactive_controls(data.status, data.capture_status, currentRemoteStatus);
-        }
+        update_interactive_controls(data.status || $('#interactive_status').text(), data.capture_status || $('#capture_status').text(), currentRemoteStatus);
         if(data.cookiejar_uuid){
             $('#cookiejar_link').attr('href', '{{ url_for('crawler_splash.crawler_cookiejar_show') }}?uuid=' + data.cookiejar_uuid).text(data.cookiejar_uuid);
             $('#cookiejar_row').show();
         }
-        if(data.crawled_domain){
+        if(data.crawled_domain && data.crawled_url && is_capture_done(data.capture_status || $('#capture_status').text())){
             const domainUrl = '{{ url_for('crawler_splash.showDomain') }}?domain=' + encodeURIComponent(data.crawled_domain);
             $('#crawled_domain_link').attr('href', domainUrl).html('<i class="fas fa-external-link-alt"></i> ' + data.crawled_domain);
-            $('#crawled_domain_btn').attr('href', domainUrl).show();
+            $('#crawled_domain_btn').attr('href', domainUrl);
             $('#crawled_domain_text').text(data.crawled_domain);
             if(data.crawled_url){
                 $('#crawled_url').text('(' + data.crawled_url + ')').show();
             }
-            $('#crawled_domain_card').show();
-            $('#crawled_domain_row').show();
+            show_crawled_domain_controls();
+        } else if(!is_capture_done(data.capture_status || $('#capture_status').text())){
+            hide_crawled_domain_controls();
         }
         if(data.error || data.last_status_error){
             $('#interactive_error').text(data.error || data.last_status_error).show();

var/www/templates/crawler/crawler_splash/interactive_capture_home.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>AIL-Framework</title>
+    <link rel="icon" href="{{ url_for('static', filename='image/ail-icon.png')}}">
+    <link href="{{ url_for('static', filename='css/bootstrap4.min.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
+    <script src="{{ url_for('static', filename='js/jquery.js')}}"></script>
+    <script src="{{ url_for('static', filename='js/bootstrap4.min.js')}}"></script>
+</head>
+<body>
+{% include 'nav_bar.html' %}
+<div class="container-fluid"><div class="row">
+{% include 'crawler/menu_sidebar.html' %}
+<div class="col-12 col-lg-10" id="core_content">
+    <div class="jumbotron bg-dark text-white mt-3 shadow-sm">
+        <div class="row align-items-center">
+            <div class="col-lg-8">
+                <p class="text-uppercase text-info font-weight-bold mb-2"><i class="fas fa-desktop"></i> Interactive capture</p>
+                <h1 class="display-4">No active browser session</h1>
+                <p class="lead mb-0">Start an interactive browser capture when you need to log in, solve prompts, or manually navigate before AIL saves the page state.</p>
+            </div>
+            <div class="col-lg-4 mt-4 mt-lg-0">
+                <div class="card text-dark border-0 shadow">
+                    <div class="card-body text-center">
+                        <div class="h2 mb-0">{{ usage.active }} / {{ usage.max }}</div>
+                        <div class="text-muted">interactive slots in use</div>
+                        {% if usage.active < usage.max %}
+                            <span class="badge badge-success mt-3">Slot available</span>
+                        {% else %}
+                            <span class="badge badge-danger mt-3">All slots busy</span>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-xl-8">
+            <div class="card shadow-sm mb-3">
+                <div class="card-header bg-white">
+                    <h4 class="mb-0"><i class="fas fa-play-circle text-primary"></i> Start a new interactive capture</h4>
+                </div>
+                <div class="card-body">
+                    <p class="mb-4">Interactive captures are launched from the crawler form. Paste a URL, enable <b>Interactive browser capture</b>, then AIL will open a remote browser that you can control.</p>
+                    <a class="btn btn-primary btn-lg" href="{{ url_for('crawler_splash.manual') }}">
+                        <i class="fas fa-plus"></i> Open crawler form
+                    </a>
+                    {% if current_user.get_role() == 'admin' %}
+                        <a class="btn btn-outline-secondary btn-lg ml-2" href="{{ url_for('crawler_splash.interactive_capture_admin') }}">
+                            <i class="fas fa-tools"></i> Manage sessions
+                        </a>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+        <div class="col-xl-4">
+            <div class="card border-info shadow-sm mb-3">
+                <div class="card-header bg-info text-white"><i class="fas fa-info-circle"></i> Workflow</div>
+                <div class="card-body">
+                    <ol class="pl-3 mb-0">
+                        <li>Launch the interactive capture from the crawler form.</li>
+                        <li>Open the remote browser link and navigate as needed.</li>
+                        <li>Click <b>Finish capture</b> to let AIL import and process the result.</li>
+                    </ol>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</div></div>
+</body>
+<script>$(document).ready(function(){ $('#page-Crawler').addClass('active'); });</script>
+</html>