{% 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)}}"; {% if emailprefix %} const email_notification_prefix=JSON.parse('{{ emailprefix|tojson }}'); {% endif %} </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 href="#filters-and-triggers">Filters & Triggers</a></li> <li class="tab"><a href="#notifications">Notifications</a></li> <li class="tab"><a href="#visualselector">Visual Selector</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"> {{ 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> <hr/> <fieldset class="pure-group"> <span class="pure-form-message-inline"> <strong>Request override is currently only used by the <i>Basic fast Plaintext/HTTP Client</i> method.</strong> </span> <div class="pure-control-group"> {{ render_field(form.method) }} </div> <div class="pure-control-group"> {{ render_field(form.headers, rows=5, placeholder="Example Cookie: foobar User-Agent: wonderbra 1.0") }} </div> <div class="pure-control-group"> {{ render_field(form.body, rows=5, placeholder="Example { \"name\":\"John\", \"age\":30, \"car\":null }") }} </div> <div> {{ 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"> <fieldset> <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> <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>, <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> <fieldset class="pure-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> </fieldset> </fieldset> <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> </div> <div class="tab-pane-inner visual-selector-ui" id="visualselector"> <fieldset> <div class="pure-control-group"> <i class="fetching-update-notice">One moment, fetching screenshot and element information..</i><br/> <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" /> <script> $("img#selector-background").attr("src", "{{ url_for('visualselector_request_current_screenshot_and_metadata', uuid=uuid) }}"); $("img#selector-background").bind('load', function () { fetch_data(); }); </script> <canvas id="selector-canvas"></canvas> </div> </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('api_delete', uuid=uuid)}}" class="pure-button button-small button-error ">Delete</a> <a href="{{url_for('api_clone', uuid=uuid)}}" class="pure-button button-small ">Create Copy</a> </div> </div> </form> </div> </div> {% endblock %}