changedetection.io/changedetectionio/templates/edit.html

{% extends 'base.html' %}
{% block content %}
{% from '_helpers.jinja' import render_field, render_checkbox_field, render_button %}
{% from '_common_fields.jinja' import render_common_settings_form %}
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='tabs.js')}}" defer></script>
<script>
    const notification_base_url="{{url_for('ajax_callback_send_notification_test')}}";
    const watch_visual_selector_data_url="{{url_for('static_content', group='visual_selector_data', filename=uuid)}}";
    const screenshot_url="{{url_for('static_content', group='screenshot', filename=uuid)}}";
    const playwright_enabled={% if playwright_enabled %} true {% else %} false {% endif %};

{% if emailprefix %}
    const email_notification_prefix=JSON.parse('{{ emailprefix|tojson }}');
{% endif %}

</script>
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='watch-settings.js')}}" defer></script>
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='notifications.js')}}" defer></script>
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='visual-selector.js')}}" defer></script>
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='limit.js')}}" defer></script>

<div class="edit-form monospaced-textarea">

    <div class="tabs collapsable">
        <ul>
            <li class="tab" id="default-tab"><a href="#general">General</a></li>
            <li class="tab"><a href="#request">Request</a></li>
            <li class="tab"><a id="visualselector-tab" href="#visualselector">Visual Filter Selector</a></li>
            <li class="tab"><a href="#filters-and-triggers">Filters &amp; Triggers</a></li>
            <li class="tab"><a href="#notifications">Notifications</a></li>
        </ul>
    </div>

    <div class="box-wrap inner">
        <form class="pure-form pure-form-stacked"
              action="{{ url_for('edit_page', uuid=uuid, next = request.args.get('next') ) }}" method="POST">
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>

            <div class="tab-pane-inner" id="general">
                <fieldset>
                    <div class="pure-control-group">
                        {{ render_field(form.url, placeholder="https://...", required=true, class="m-d") }}
                        <span class="pure-form-message-inline">Some sites use JavaScript to create the content, for this you should <a href="https://github.com/dgtlmoon/changedetection.io/wiki/Fetching-pages-with-WebDriver">use the Chrome/WebDriver Fetcher</a></span>
                    </div>
                    <div class="pure-control-group">
                        {{ render_field(form.title, class="m-d") }}
                    </div>
                    <div class="pure-control-group">
                        {{ render_field(form.tag) }}
                        <span class="pure-form-message-inline">Organisational tag/group name used in the main listing page</span>
                    </div>
                    <div class="pure-control-group">
                        {{ render_field(form.time_between_check, class="time-check-widget") }}
                        {% if has_empty_checktime %}
                        <span class="pure-form-message-inline">Currently using the <a
                                href="{{ url_for('settings_page', uuid=uuid) }}">default global settings</a>, change to another value if you want to be specific.</span>
                        {% else %}
                        <span class="pure-form-message-inline">Set to blank to use the <a
                                href="{{ url_for('settings_page', uuid=uuid) }}">default global settings</a>.</span>
                        {% endif %}
                    </div>
                    <div class="pure-control-group">
                        {{ render_checkbox_field(form.extract_title_as_title) }}
                    </div>
                </fieldset>
            </div>

            <div class="tab-pane-inner" id="request">
                    <div class="pure-control-group inline-radio">
                        {{ render_field(form.fetch_backend, class="fetch-backend") }}
                        <span class="pure-form-message-inline">
                            <p>Use the <strong>Basic</strong> method (default) where your watched site doesn't need Javascript to render.</p>
                            <p>The <strong>Chrome/Javascript</strong> method requires a network connection to a running WebDriver+Chrome server, set by the ENV var 'WEBDRIVER_URL'. </p>
                        </span>
                    </div>
                {% if form.proxy %}
                    <div class="pure-control-group inline-radio">
                        {{ render_field(form.proxy, class="fetch-backend-proxy") }}
                        <span class="pure-form-message-inline">
                        Choose a proxy for this watch
                        </span>
                    </div>
                {% endif %}
                <fieldset id="webdriver-override-options">
                    <div class="pure-control-group">
                        {{ render_field(form.webdriver_delay) }}
                        <div class="pure-form-message-inline">
                            <strong>If you're having trouble waiting for the page to be fully rendered (text missing etc), try increasing the 'wait' time here.</strong>
                            <br/>
                            This will wait <i>n</i> seconds before extracting the text.
                            {% if using_global_webdriver_wait %}
                            <br/><strong>Using the current global default settings</strong>
                            {% endif %}
                        </div>
                    </div>
                    <div class="pure-control-group">
                        {{ render_field(form.webdriver_js_execute_code) }}
                        <div class="pure-form-message-inline">
                            Run this code before performing change detection, handy for filling in fields and other actions <a href="https://github.com/dgtlmoon/changedetection.io/wiki/Run-JavaScript-before-change-detection">More help and examples here</a>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="pure-group" id="requests-override-options">
                    {% if not playwright_enabled %}
                        <div class="pure-form-message-inline">
                            <strong>Request override is currently only used by the <i>Basic fast Plaintext/HTTP Client</i> method.</strong>
                        </div>
                    {% endif %}
                    <div class="pure-control-group" id="request-method">
                        {{ render_field(form.method) }}
                    </div>
                    <div class="pure-control-group" id="request-headers">
{{ render_field(form.headers, rows=5, placeholder="Example
Cookie: foobar
User-Agent: wonderbra 1.0") }}
                    </div>
                    <div class="pure-control-group" id="request-body">
                                        {{ render_field(form.body, rows=5, placeholder="Example
{
   \"name\":\"John\",
   \"age\":30,
   \"car\":null
}") }}
                    </div>
                    <div id="ignore-status-codes-option">
                        {{ render_checkbox_field(form.ignore_status_codes) }}
                    </div>
                </fieldset>
                <br/>
            </div>

            <div class="tab-pane-inner" id="notifications">
                <strong>Note: <i>These settings override the global settings for this watch.</i></strong>
                <fieldset>
                    <div class="field-group">
                        {{ render_common_settings_form(form, current_base_url, emailprefix) }}
                    </div>
                </fieldset>
            </div>

            <div class="tab-pane-inner" id="filters-and-triggers">
                    <div class="pure-control-group">
                            <strong>Pro-tips:</strong><br/>
                            <ul>
                                <li>
                                    Use the preview page to see your filters and triggers highlighted.
                                </li>
                                <li>
                                    Some sites use JavaScript to create the content, for this you should <a href="https://github.com/dgtlmoon/changedetection.io/wiki/Fetching-pages-with-WebDriver">use the Chrome/WebDriver Fetcher</a>
                                </li>
                            </ul>
                    </div>
                    <fieldset>
                        <div class="pure-control-group">
                            {{ render_checkbox_field(form.check_unique_lines) }}
                            <span class="pure-form-message-inline">Good for websites that just move the content around, and you want to know when NEW content is added, compares new lines against all history for this watch.</span>
                        </div>
                    </fieldset>
                    <fieldset>
                        <div class="pure-control-group" id="request-method">
                            {{ render_field(form.trigger_type) }}
                            <span class="pure-form-message-inline">
                                This filter only compares to the previous snapshot. This is different from the "Only trigger when new lines appear" setting which checks all previous snapshots.
                                This is good for filtering out notifications that only are showing deleted content. (i.e A notice being removed from a website)
                            </span>
                        </div>
                    </fieldset>
                    <div class="pure-control-group">
                        {{ render_field(form.css_filter, placeholder=".class-name or #some-id, or other CSS selector rule.",
                        class="m-d") }}
                        <span class="pure-form-message-inline">
                    <ul>
                        <li>CSS - Limit text to this CSS rule, only text matching this CSS rule is included.</li>
                        <li>JSON - Limit text to this JSON rule, using <a href="https://pypi.org/project/jsonpath-ng/">JSONPath</a>, prefix with <code>"json:"</code>, use <code>json:$</code> to force re-formatting if required,  <a
                                href="https://jsonpath.com/" target="new">test your JSONPath here</a></li>
                        <li>XPath - Limit text to this XPath rule, simply start with a forward-slash, example  <code>//*[contains(@class, 'sametext')]</code> or <code>xpath://*[contains(@class, 'sametext')]</code>, <a
                                href="http://xpather.com/" target="new">test your XPath here</a></li>
                    </ul>
                    Please be sure that you thoroughly understand how to write CSS or JSONPath, XPath selector rules before filing an issue on GitHub! <a
                                href="https://github.com/dgtlmoon/changedetection.io/wiki/CSS-Selector-help">here for more CSS selector help</a>.<br/>
                </span>
                    </div>
                    <div class="pure-control-group">
                      {{ render_field(form.subtractive_selectors, rows=5, placeholder="header
footer
nav
.stockticker") }}
                      <span class="pure-form-message-inline">
                        <ul>
                          <li> Remove HTML element(s) by CSS selector before text conversion. </li>
                          <li> Add multiple elements or CSS selectors per line to ignore multiple parts of the HTML. </li>
                        </ul>
                      </span>
                    </div>
                <fieldset class="pure-group">
                    {{ render_field(form.ignore_text, rows=5, placeholder="Some text to ignore in a line
/some.regex\d{2}/ for case-INsensitive regex
                    ") }}
                    <span class="pure-form-message-inline">
                        <ul>
                            <li>Each line processed separately, any line matching will be ignored (removed before creating the checksum)</li>
                            <li>Regular Expression support, wrap the line in forward slash <code>/regex/</code></li>
                            <li>Changing this will affect the comparison checksum which may trigger an alert</li>
                            <li>Use the preview/show current tab to see ignores</li>
                        </ul>
                </span>

            </fieldset>
                <fieldset>
                    <div class="pure-control-group">
                        {{ render_field(form.trigger_text, rows=5, placeholder="Some text to wait for in a line
/some.regex\d{2}/ for case-INsensitive regex
                    ") }}
                        <span class="pure-form-message-inline">
                    <ul>
                        <li>Text to wait for before triggering a change/notification, all text and regex are tested <i>case-insensitive</i>.</li>
                        <li>Trigger text is processed from the result-text that comes out of any CSS/JSON Filters for this watch</li>
                        <li>Each line is processed separately (think of each line as "OR")</li>
                        <li>Note: Wrap in forward slash / to use regex  example: <code>/foo\d/</code></li>
                    </ul>
                        </span>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="pure-control-group">
                        {{ render_field(form.text_should_not_be_present, rows=5, placeholder="For example: Out of stock
Sold out
Not in stock
Unavailable") }}
                        <span class="pure-form-message-inline">
                            <ul>
                                <li>Block change-detection while this text is on the page, all text and regex are tested <i>case-insensitive</i>, good for waiting for when a product is available again</li>
                                <li>Block text is processed from the result-text that comes out of any CSS/JSON Filters for this watch</li>
                                <li>All lines here must not exist (think of each line as "OR")</li>
                                <li>Note: Wrap in forward slash / to use regex  example: <code>/foo\d/</code></li>
                            </ul>
                        </span>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="pure-control-group">
                        {{ render_field(form.extract_text, rows=5, placeholder="\d+ online") }}
                        <span class="pure-form-message-inline">
                    <ul>
                        <li>Extracts text in the final output after other filters using regular expressions, for example <code>\d+ online</code></li>
                        <li>One line per regular-expression.</li>
                    </ul>
                        </span>
                    </div>
                </fieldset>
            </div>

            <div class="tab-pane-inner visual-selector-ui" id="visualselector">
                <img id="beta-logo" src="{{url_for('static_content', group='images', filename='beta-logo.png')}}">
                <strong>Pro-tip:</strong> This tool is only for limiting which elements will be included on a change-detection, not for interacting with browser directly.
                <fieldset>
                    <div class="pure-control-group">
                        {% 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 -->
                                    <!-- @todo: maybe something interesting like a field to select 'elements that contain text... and their parents n' -->
                                    <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>

                            <span class="pure-form-message-inline">
                                <p><span style="font-weight: bold">Beta!</span> The Visual Selector is new and there may be minor bugs, please report pages that dont work, help us to improve this software!</p>
                            </span>

                            {% 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">
                                <p>Sorry, this functionality only works with Playwright/Chrome enabled watches.</p>
                                <p>Enable the Playwright Chrome fetcher, or alternatively try our <a href="https://lemonade.changedetection.io/start">very affordable subscription based service</a>.</p>
                                <p>This is because Selenium/WebDriver can not extract full page screenshots reliably.</p>

                            </span>
                        {% endif %}
                    </div>
                </fieldset>
            </div>

            <div id="actions">
                <div class="pure-control-group">

                      {{ render_button(form.save_button) }} {{ render_button(form.save_and_preview_button) }}

                    <a href="{{url_for('form_delete', uuid=uuid)}}"
                       class="pure-button button-small button-error ">Delete</a>
                    <a href="{{url_for('clear_watch_history', uuid=uuid)}}"
                       class="pure-button button-small button-error ">Clear History</a>
                    <a href="{{url_for('form_clone', uuid=uuid)}}"
                       class="pure-button button-small ">Create Copy</a>
                </div>
            </div>
        </form>
    </div>
</div>

{% endblock %}