From cf4e294a9c82784f6f6c123f5c4f3178b3356f6c Mon Sep 17 00:00:00 2001 From: dgtlmoon Date: Sun, 18 Jul 2021 13:26:23 +1000 Subject: [PATCH] Re #135 - refactor the quick add widget (#136) * Re #135 - refactor the quick add widget * Fix W3C validation issues --- backend/__init__.py | 32 ++++++++++++++++++--------- backend/forms.py | 6 +++-- backend/static/styles/styles.css | 15 +++++++------ backend/static/styles/styles.scss | 22 +++++++++++------- backend/templates/_helpers.jinja | 19 +++++++++++++--- backend/templates/watch-overview.html | 6 ++--- 6 files changed, 66 insertions(+), 34 deletions(-) diff --git a/backend/__init__.py b/backend/__init__.py index b1653007..3a1c5708 100644 --- a/backend/__init__.py +++ b/backend/__init__.py @@ -223,7 +223,6 @@ def changedetection_app(config=None, datastore_o=None): @login_required def index(): limit_tag = request.args.get('tag') - pause_uuid = request.args.get('pause') if pause_uuid: @@ -279,7 +278,11 @@ def changedetection_app(config=None, datastore_o=None): return response else: + from backend import forms + form = forms.quickWatchForm(request.form) + output = render_template("watch-overview.html", + form=form, watches=sorted_watches, tags=existing_tags, active_tag=limit_tag, @@ -729,19 +732,26 @@ def changedetection_app(config=None, datastore_o=None): @app.route("/api/add", methods=['POST']) @login_required def api_watch_add(): + from backend import forms + form = forms.quickWatchForm(request.form) - url = request.form.get('url').strip() - if datastore.url_exists(url): - flash('The URL {} already exists'.format(url), "error") - return redirect(url_for('index')) + if form.validate(): - # @todo add_watch should throw a custom Exception for validation etc - new_uuid = datastore.add_watch(url=url, tag=request.form.get('tag').strip()) - # Straight into the queue. - update_q.put(new_uuid) + url = request.form.get('url').strip() + if datastore.url_exists(url): + flash('The URL {} already exists'.format(url), "error") + return redirect(url_for('index')) - flash("Watch added.") - return redirect(url_for('index')) + # @todo add_watch should throw a custom Exception for validation etc + new_uuid = datastore.add_watch(url=url, tag=request.form.get('tag').strip()) + # Straight into the queue. + update_q.put(new_uuid) + + flash("Watch added.") + return redirect(url_for('index')) + else: + flash("Error") + return redirect(url_for('index')) @app.route("/api/delete", methods=['GET']) @login_required diff --git a/backend/forms.py b/backend/forms.py index a2739030..faf1ad2a 100644 --- a/backend/forms.py +++ b/backend/forms.py @@ -124,13 +124,15 @@ class ValidateCSSJSONInput(object): message = field.gettext('\'%s\' is not a valid JSONPath expression. (%s)') raise ValidationError(message % (input, str(e))) - -class watchForm(Form): +class quickWatchForm(Form): # https://wtforms.readthedocs.io/en/2.3.x/fields/#module-wtforms.fields.html5 # `require_tld` = False is needed even for the test harness "http://localhost:5005.." to run url = html5.URLField('URL', [validators.URL(require_tld=False)]) tag = StringField('Tag', [validators.Optional(), validators.Length(max=35)]) + +class watchForm(quickWatchForm): + minutes_between_check = html5.IntegerField('Maximum time in minutes until recheck', [validators.Optional(), validators.NumberRange(min=1)]) css_filter = StringField('CSS/JSON Filter', [ValidateCSSJSONInput()]) diff --git a/backend/static/styles/styles.css b/backend/static/styles/styles.css index 51903cb1..a96db995 100644 --- a/backend/static/styles/styles.css +++ b/backend/static/styles/styles.css @@ -201,12 +201,13 @@ body:after, body:before { padding: 1em; border-radius: 10px; margin-bottom: 1em; } - -#new-watch-form legend { - color: #fff; } - -#new-watch-form input { - width: auto !important; } + #new-watch-form input { + width: auto !important; + display: inline-block; } + #new-watch-form .label { + display: none; } + #new-watch-form legend { + color: #fff; } #diff-col { padding-left: 40px; } @@ -280,7 +281,7 @@ footer { /* The list of errors */ } .pure-form .pure-control-group, .pure-form .pure-group, .pure-form .pure-controls { padding-bottom: 1em; } - .pure-form .pure-control-group dd, .pure-form .pure-group dd, .pure-form .pure-controls dd { + .pure-form .pure-control-group div, .pure-form .pure-group div, .pure-form .pure-controls div { margin: 0px; } .pure-form .error input { background-color: #ffebeb; } diff --git a/backend/static/styles/styles.scss b/backend/static/styles/styles.scss index d8871fac..d6c4a817 100644 --- a/backend/static/styles/styles.scss +++ b/backend/static/styles/styles.scss @@ -266,15 +266,20 @@ body:after, body:before { padding: 1em; border-radius: 10px; margin-bottom: 1em; + input { + width: auto !important; + display: inline-block; + } + .label { + display: none; + } + legend { + color: #fff; + } } -#new-watch-form legend { - color: #fff; -} -#new-watch-form input { - width: auto !important; -} + #diff-col { padding-left: 40px; @@ -367,7 +372,7 @@ footer { .pure-form { .pure-control-group, .pure-group, .pure-controls { padding-bottom: 1em; - dd { + div { margin: 0px; } } @@ -377,7 +382,8 @@ footer { background-color: #ffebeb; } } - /* The list of errors */ + + /* The list of errors */ ul.errors { padding: .5em .6em; border: 1px solid #dd0000; diff --git a/backend/templates/_helpers.jinja b/backend/templates/_helpers.jinja index 6aeb36eb..08a8815a 100644 --- a/backend/templates/_helpers.jinja +++ b/backend/templates/_helpers.jinja @@ -1,6 +1,6 @@ {% macro render_field(field) %} -
{{ field.label }} -
{{ field(**kwargs)|safe }} +
{{ field.label }}
+
{{ field(**kwargs)|safe }} {% if field.errors %}
    {% for error in field.errors %} @@ -8,5 +8,18 @@ {% endfor %}
{% endif %} -
+ +{% endmacro %} + +{% macro render_simple_field(field) %} + {{ field.label }} + {{ field(**kwargs)|safe }} + {% if field.errors %} + + {% endif %} + {% endmacro %} \ No newline at end of file diff --git a/backend/templates/watch-overview.html b/backend/templates/watch-overview.html index 4e096132..c09ae222 100644 --- a/backend/templates/watch-overview.html +++ b/backend/templates/watch-overview.html @@ -1,14 +1,14 @@ {% extends 'base.html' %} - {% block content %} +{% from '_helpers.jinja' import render_simple_field %}
Add a new change detection watch - - + {{ render_simple_field(form.url, placeholder="https://...", size=30, required=true) }} + {{ render_simple_field(form.tag, size=10, value=active_tag if active_tag else '', placeholder="tag") }}