Add character counter to job forms.

app/services/forms.py

@@ -4,52 +4,40 @@ from wtforms.validators import DataRequired, Length
 
 
 class NewNLPJobForm(FlaskForm):
-    description = StringField(
+    description = StringField('Description',
-        'Description',
+                              validators=[DataRequired(), Length(1, 255)])
-        validators=[DataRequired(), Length(1, 255)]
-    )
     files = MultipleFileField('Files', validators=[DataRequired()])
-    language = SelectField(
+    language = SelectField('Language',
-        'Language',
                            choices=[('', 'Choose your option'),
+                                    ('nl', 'Dutch'),
                                     ('en', 'English'),
                                     ('fr', 'French'),
                                     ('de', 'German'),
+                                    ('el', 'Greek'),
                                     ('it', 'Italian'),
                                     ('pt', 'Portuguese'),
                                     ('es', 'Spanish')],
-        validators=[DataRequired()]
+                           validators=[DataRequired()])
-    )
     submit = SubmitField('Submit')
-    title = StringField(
+    title = StringField('Title', validators=[DataRequired(), Length(1, 32)])
-        'Title',
+    version = SelectField('Version',
-        validators=[DataRequired(), Length(1, 32)]
+                          choices=[('latest', 'Latest (2.1.0)'),
-    )
-    version = SelectField(
-        'Version',
-        choices=[('', 'Choose your option'),
-                 ('latest', 'Latest (2.1.0)'),
                                    ('2.1.0', '2.1.0')],
-        validators=[DataRequired()]
+                          validators=[DataRequired()])
-    )
 
     def validate_files(form, field):
         for file in field.data:
             if not file.filename.lower().endswith('.txt'):
                 raise ValidationError(
-                    'File does not have an approved extension: '
+                    'File does not have an approved extension: .txt'
-                    '.txt'
                 )
 
 
 class NewOCRJobForm(FlaskForm):
-    description = StringField(
+    description = StringField('Description',
-        'Description',
+                              validators=[DataRequired(), Length(1, 255)])
-        validators=[DataRequired(), Length(1, 255)]
-    )
     files = MultipleFileField('Files', validators=[DataRequired()])
-    language = SelectField(
+    language = SelectField('Language',
-        'Language',
                            choices=[('', 'Choose your option'),
                                     ('eng', 'English'),
                                     ('enm', 'English, Middle (1100-1500)'),
@@ -60,19 +48,12 @@ class NewOCRJobForm(FlaskForm):
                                     ('ita', 'Italian'),
                                     ('por', 'Portuguese'),
                                     ('spa', 'Spanish; Castilian')],
-        validators=[DataRequired()]
+                           validators=[DataRequired()])
-    )
     submit = SubmitField('Submit')
-    title = StringField(
+    title = StringField('Title', validators=[DataRequired(), Length(1, 32)])
-        'Title',
+    version = SelectField('Version',
-        validators=[DataRequired(), Length(1, 32)]
+                          choices=[('latest', 'Latest')],
-    )
+                          validators=[DataRequired()])
-    version = SelectField(
-        'Version',
-        choices=[('', 'Choose your option'),
-                 ('latest', 'Latest')],
-        validators=[DataRequired()]
-    )
 
     def validate_files(form, field):
         for file in field.data:

app/templates/base.html.j2

@@ -182,6 +182,7 @@
     <script type="text/javascript" src="{{ url_for('static', filename='js/materialize.min.js') }}"></script>
     <script>
         M.AutoInit();
+        M.CharacterCounter.init(document.querySelectorAll('input[data-length][type="text"]'))
         M.Dropdown.init(
           document.getElementById("nav-notifications"),
           {"alignment": "right", "constrainWidth": false, "coverTrigger": false}

app/templates/services/nlp.html.j2

@@ -60,7 +60,7 @@
           <div class="col s12 m4">
             <div class="input-field">
               <i class="material-icons prefix">title</i>
-              {{ new_nlp_job_form.title() }}
+              {{ new_nlp_job_form.title(data_length='32') }}
               {{ new_nlp_job_form.title.label }}
               {% for error in new_nlp_job_form.title.errors %}
                 <span class="helper-text red-text">{{ error }}</span>
@@ -106,7 +106,7 @@
           <div class="col s12 m6">
             <div class="input-field">
               <i class="material-icons prefix">description</i>
-              {{ new_nlp_job_form.description() }}
+              {{ new_nlp_job_form.description(data_length='255') }}
               {{ new_nlp_job_form.description.label }}
               {% for error in new_nlp_job_form.description.errors %}
                 <span class="helper-text red-text">{{ error }}</span>

app/templates/services/ocr.html.j2

@@ -61,7 +61,7 @@
           <div class="col s12 m4">
             <div class="input-field">
               <i class="material-icons prefix">title</i>
-              {{ new_ocr_job_form.title() }}
+              {{ new_ocr_job_form.title(data_length='32') }}
               {{ new_ocr_job_form.title.label }}
               {% for error in new_ocr_job_form.title.errors %}
                 <span class="helper-text red-text">{{ error }}</span>
@@ -107,7 +107,7 @@
           <div class="col s12 m6">
             <div class="input-field">
               <i class="material-icons prefix">description</i>
-              {{ new_ocr_job_form.description() }}
+              {{ new_ocr_job_form.description(data_length='255') }}
               {{ new_ocr_job_form.description.label }}
               {% for error in new_ocr_job_form.description.errors %}
                 <span class="helper-text red-text">{{ error }}</span>