Re #135 - refactor the quick add widget (#136)

* Re #135 - refactor the quick add widget

* Fix W3C validation issues

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

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()])

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; }

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;

backend/templates/_helpers.jinja

@@ -1,6 +1,6 @@
 {% macro render_field(field) %}
-  <dt {% if field.errors %} class="error" {% endif %}>{{ field.label }}
-  <dd {% if field.errors %} class="error" {% endif %}>{{ field(**kwargs)|safe }}
+  <div {% if field.errors %} class="error" {% endif %}>{{ field.label }}</div>
+  <div {% if field.errors %} class="error" {% endif %}>{{ field(**kwargs)|safe }}
   {% if field.errors %}
     <ul class=errors>
     {% for error in field.errors %}
@@ -8,5 +8,18 @@
     {% endfor %}
     </ul>
   {% endif %}
-  </dd>
+  </div>
+{% endmacro %}
+
+{% macro render_simple_field(field) %}
+  <span class="label {% if field.errors %}error{% endif %}">{{ field.label }}</span>
+  <span {% if field.errors %} class="error" {% endif %}>{{ field(**kwargs)|safe }}
+  {% if field.errors %}
+    <ul class=errors>
+    {% for error in field.errors %}
+      <li>{{ error }}</li>
+    {% endfor %}
+    </ul>
+  {% endif %}
+  </span>
 {% endmacro %}

backend/templates/watch-overview.html

@@ -1,14 +1,14 @@
 {% extends 'base.html' %}
-
 {% block content %}
+{% from '_helpers.jinja' import render_simple_field %}
 
 <div class="box">
 
     <form class="pure-form" action="{{ url_for('api_watch_add') }}" method="POST" id="new-watch-form">
         <fieldset>
             <legend>Add a new change detection watch</legend>
-            <input type="url" placeholder="https://..." name="url"/>
-            <input type="text" placeholder="tag" size="10" name="tag" value="{{active_tag if active_tag}}"/>
+                {{ 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") }}
             <button type="submit" class="pure-button pure-button-primary">Watch</button>
         </fieldset>
         <!-- add extra stuff, like do a http POST and send headers -->