Compare commits

...

3 Commits

Author SHA1 Message Date
Patrick Jentsch
a95b8d979d Fix forms 2024-11-20 15:56:48 +01:00
Patrick Jentsch
18d5ab160e Optimize jinja wtf macros 2024-11-20 15:56:29 +01:00
Patrick Jentsch
7439edacef Add background color to job list entries 2024-11-20 15:55:59 +01:00
10 changed files with 172 additions and 91 deletions

View File

@ -25,19 +25,19 @@ nopaque.resource_lists.JobList = class JobList extends nopaque.resource_lists.Re
get item() {
return `
<tr class="list-item clickable hoverable">
<tr class="list-item clickable hoverable service-color lighten">
<td>
<label class="list-action-trigger" data-list-action="select">
<input class="select-checkbox" type="checkbox">
<span class="disable-on-click"></span>
</label>
</td>
<td><a class="btn-floating service-color darken" data-service="inherit"><i class="nopaque-icons service-icons" data-service="inherit"></i></a></td>
<td><a class="btn-floating service-color darken"><i class="nopaque-icons service-icons"></i></a></td>
<td><b class="title"></b><br><i class="description"></i></td>
<td><span class="status badge new job-status-color job-status-text" data-badge-caption=""></span></td>
<td class="right-align">
<a class="list-action-trigger btn-floating red waves-effect waves-light" data-list-action="delete-request"><i class="material-icons">delete</i></a>
<a class="list-action-trigger btn-floating darken waves-effect waves-light" data-list-action="view"><i class="material-icons">send</i></a>
<a class="list-action-trigger btn-floating service-color darken waves-effect waves-light" data-list-action="view"><i class="material-icons">send</i></a>
</td>
</tr>
`.trim();

View File

@ -5,7 +5,7 @@
{% block page_content %}
<div class="container">
<div class="row">
<div class="col s12 m8 offset-m2">
<div class="col s12 l8 offset-l2">
<h1 id="title">{{ title }}</h1>
<p>Want to boost your research and get going? Nopaque is free and no download is needed. <a href="{{ url_for('.register') }}">Register now</a>!</p>
@ -15,14 +15,14 @@
{{ wtf.render_field(form.user, material_icon='person') }}
{{ wtf.render_field(form.password, material_icon='vpn_key') }}
<div class="row">
<div class="col s6 left-align">
<a href="{{ url_for('.reset_password_request') }}">Forgot your password?</a>
</div>
<div class="col s6 right-align">
<div class="col s12 l6">
{{ wtf.render_field(form.remember_me) }}
</div>
<div class="col s12 l6 right-align">
<a class="mr-3" href="{{ url_for('.reset_password_request') }}">Forgot your password?</a>
{{ wtf.render_field(form.submit, material_icon='send') }}
</div>
</div>
{{ wtf.render_field(form.submit, material_icon='send', class_='width-100') }}
</div>
</form>
</div>

View File

@ -5,7 +5,7 @@
{% block page_content %}
<div class="container">
<div class="row">
<div class="col s12 m8 offset-m2">
<div class="col s12 l8 offset-l2">
<h1 id="title">{{ title }}</h1>
<p>
Simply enter a username and password to receive your registration email.
@ -22,12 +22,15 @@
{{ wtf.render_field(form.username, material_icon='person') }}
{{ wtf.render_field(form.password, material_icon='vpn_key') }}
{{ wtf.render_field(form.password_2, material_icon='vpn_key') }}
{{ wtf.render_field(form.email, class_='validate', material_icon='email', type='email') }}
<br>
{{ wtf.render_field(form.terms_of_use_accepted, type='checkbox')}}
<p></p>
<br>
{{ wtf.render_field(form.submit, class_='width-100', material_icon='send') }}
{{ wtf.render_field(form.email, material_icon='email', type='email') }}
<div class="row">
<div class="col s12 l6">
{{ wtf.render_field(form.terms_of_use_accepted)}}
</div>
<div class="col s12 l6 right-align">
{{ wtf.render_field(form.submit, material_icon='send') }}
</div>
</div>
</div>
</form>
</div>

View File

@ -13,7 +13,9 @@
{{ form.hidden_tag() }}
{{ wtf.render_field(form.password) }}
{{ wtf.render_field(form.password_2) }}
{{ wtf.render_field(form.submit, class_='width-100', material_icon='send') }}
<div class="right-align">
{{ wtf.render_field(form.submit, material_icon='send') }}
</div>
</div>
</form>
</div>

View File

@ -4,15 +4,17 @@
{% block page_content %}
<div class="container">
<div class="row">
<div class="col s12 m8 offset-m2">
<div class="col s12 l8 offset-l2">
<h1 id="title">{{ title }}</h1>
<p>After entering your email address you will receive instructions on how to reset your password.</p>
<form method="POST">
<div class="card-panel">
{{ form.hidden_tag() }}
{{ wtf.render_field(form.email, class_='validate', material_icon='email', type='email') }}
{{ wtf.render_field(form.submit, class_='width-100', material_icon='send') }}
{{ wtf.render_field(form.email, material_icon='email', type='email') }}
<div class="right-align">
{{ wtf.render_field(form.submit, material_icon='send') }}
</div>
</div>
</form>
</div>

View File

@ -47,7 +47,7 @@
{{ wtf.render_field(form.description, material_icon='description') }}
</div>
<div class="col s12 l9">
{{ wtf.render_field(form.images, accept='image/jpeg, image/png, image/tiff', class_='file-setup-pipeline-color darken', placeholder='Choose JPEG, PNG or TIFF files') }}
{{ wtf.render_field(form.images, accept='image/jpeg, image/png, image/tiff', placeholder='Choose JPEG, PNG or TIFF files') }}
</div>
<div class="col s12 l3">
{{ wtf.render_field(form.version, material_icon='apps') }}
@ -63,3 +63,18 @@
</div>
</div>
{% endblock page_content %}
{% block scripts %}
{{ super() }}
<script>
function initPage() {
let createJobFormImagesElement = document.querySelector('#{{ form.images.id }}');
createJobFormImagesElement.parentElement.classList.add('service-color', 'darken');
let createJobFormSubmitElement = document.querySelector('#{{ form.submit.id }}');
createJobFormSubmitElement.classList.add('service-color', 'darken');
};
initPage();
</script>
{% endblock scripts %}

View File

@ -165,10 +165,20 @@
{% block scripts %}
{{ super() }}
<script>
// Disable user model selection if no models are available
{% if user_spacy_nlp_pipeline_models_count == 0 %}
optionGroupOptions = document.querySelectorAll(".optgroup-option");
optionGroupOptions[0].classList.add("disabled");
{% endif %}
function initPage() {
let createJobFormTxtElement = document.querySelector('#{{ form.txt.id }}');
createJobFormTxtElement.parentElement.classList.add('service-color', 'darken');
{% if user_spacy_nlp_pipeline_models_count == 0 %}
// Disable user model selection if no models are available
optionGroupOptions = document.querySelectorAll(".optgroup-option");
optionGroupOptions[0].classList.add("disabled");
{% endif %}
let createJobFormSubmitElement = document.querySelector('#{{ form.submit.id }}');
createJobFormSubmitElement.classList.add('service-color', 'darken');
};
initPage();
</script>
{% endblock scripts %}

View File

@ -145,15 +145,26 @@
{% block scripts %}
{{ super() }}
<script>
function initPage() {
let createJobFormPdfElement = document.querySelector('#{{ form.pdf.id }}');
createJobFormPdfElement.parentElement.classList.add('service-color', 'darken');
// Disable user model selection if no models are available
{% if user_tesseract_ocr_pipeline_models_count == 0 %}
optionGroupOptions = document.querySelectorAll(".optgroup-option");
optionGroupOptions[0].classList.add("disabled");
{% endif %}
{% if user_tesseract_ocr_pipeline_models_count == 0 %}
// Disable user model selection if no models are available
optionGroupOptions = document.querySelectorAll(".optgroup-option");
optionGroupOptions[0].classList.add("disabled");
{% endif %}
document.querySelector('#create-job-form-binarization').addEventListener('change', (event) => {
document.querySelector('#create-job-form-ocropus_nlbin_threshold-container').classList.toggle('hide');
});
let createJobFormBinarizationElement = document.querySelector('#{{ form.binarization.id }}');
let createJobFormOcropusNlbinThresholdContainerElement = document.querySelector('#create-job-form-ocropus_nlbin_threshold-container');
createJobFormBinarizationElement.addEventListener('change', (event) => {
createJobFormOcropusNlbinThresholdContainerElement.classList.toggle('hide');
});
let createJobFormSubmitElement = document.querySelector('#{{ form.submit.id }}');
createJobFormSubmitElement.classList.add('service-color', 'darken');
};
initPage();
</script>
{% endblock scripts %}

View File

@ -138,3 +138,18 @@
</div>
</div>
{% endblock modals %}
{% block scripts %}
{{ super() }}
<script>
function initPage() {
let createJobFormPdfElement = document.querySelector('#{{ form.pdf.id }}');
createJobFormPdfElement.parentElement.classList.add('service-color', 'darken');
let createJobFormSubmitElement = document.querySelector('#{{ form.submit.id }}');
createJobFormSubmitElement.classList.add('service-color', 'darken');
};
initPage();
</script>
{% endblock scripts %}

View File

@ -1,47 +1,42 @@
{% macro render_field(field) %}
{% if field.type == 'BooleanField' %}
{{ render_boolean_field(field, *args, **kwargs) }}
{% elif field.type == 'DecimalRangeField' %}
{{ render_decimal_range_field(field, *args, **kwargs) }}
{% elif field.type == 'FileField' %}
{{ render_file_field(field, *args, **kwargs) }}
{% elif field.type == 'IntegerField' %}
{{ render_integer_field(field, *args, **kwargs) }}
{% elif field.type == 'MultipleFileField' %}
{{ render_multiple_file_field(field, *args, **kwargs) }}
{% elif field.type == 'SubmitField' %}
{{ render_submit_field(field, *args, **kwargs) }}
{% elif field.type in ['FileField', 'MultipleFileField'] %}
{{ render_file_field(field, *args, **kwargs) }}
{% elif field.type == 'TextAreaField' %}
{{ render_text_area_field(field, *args, **kwargs) }}
{% else %}
{% if 'class_' in kwargs and 'validate' not in kwargs['class_'] %}
{% set tmp = kwargs.update({'class_': kwargs['class_'] + ' validate'}) %}
{% else %}
{% set tmp = kwargs.update({'class_': 'validate'}) %}
{% endif %}
{{ render_generic_field(field, *args, **kwargs) }}
{% endif %}
{% endmacro %}
{% macro render_boolean_field(field) %}
{% set label = kwargs.pop('label', True) %}
<div class="switch">
{% if 'material_icon' in kwargs %}
<i class="material-icons prefix">{{ kwargs.pop('material_icon') }}</i>
{% endif %}
<div>
<label>
{{ field(*args, **kwargs) }}
<span class="lever"></span>
{% if label %}
{{ field.label.text }}
{% endif %}
<input id="{{ field.id }}" name="{{ field.name }}" type="checkbox">
<span>{{ field.label.text }}</span>
{% for error in field.errors %}
<span class="helper-text error-color-text">{{ error }}</span>
{% endfor %}
</label>
{% for error in field.errors %}
<span class="helper-text error-color-text">{{ error }}</span>
{% endfor %}
</div>
{% endmacro %}
{% macro render_file_field(field) %}
{% set placeholder = kwargs.pop('placeholder', '') %}
<div class="file-field input-field">
<div class="btn">
<span>{{ field.label.text }}</span>
{{ field(*args, **kwargs) }}
<input id="{{ field.id }}" name="{{ field.name }}" type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="{{ placeholder }}">
@ -52,50 +47,78 @@
</div>
{% endmacro %}
{% macro render_generic_field(field) %}
{% if field.type == 'TextAreaField' and 'materialize-textarea' not in kwargs['class_'] %}
{% set tmp = kwargs.update({'class_': kwargs['class_'] + ' materialize-textarea'}) %}
{% elif field.type == 'IntegerField' %}
{% set tmp = kwargs.update({'type': 'number'}) %}
{% endif %}
{% set label = kwargs.pop('label', True) %}
<div class="input-field">
{% if 'material_icon' in kwargs %}
<i class="material-icons prefix">{{ kwargs.pop('material_icon') }}</i>
{% endif %}
{{ field(*args, **kwargs) }}
{% if label %}
{{ field.label }}
{% endif %}
{% macro render_multiple_file_field(field) %}
{% set placeholder = kwargs.pop('placeholder', '') %}
<div class="file-field input-field">
<div class="btn">
<span>{{ field.label.text }}</span>
<input id="{{ field.id }}" name="{{ field.name }}" type="file" multiple>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="{{ placeholder }}">
</div>
{% for error in field.errors %}
<span class="helper-text error-color-text">{{ error }}</span>
{% endfor %}
</div>
{% endmacro %}
{% macro render_integer_field(field) %}
<div class="input-field">
{% if 'material_icon' in kwargs %}
<i class="material-icons prefix">{{ kwargs.pop('material_icon') }}</i>
{% endif %}
<input class="validate" id="{{ field.id }}" name="{{ field.name }}" type="number">
<label for="{{ field.id }}">{{ field.label.text }}</label>
{% for error in field.errors %}
<span class="helper-text error-color-text">{{ error }}</span>
{% endfor %}
</div>
{% endmacro %}
{% macro render_submit_field(field) %}
{% if 'class_' in kwargs and 'btn' not in kwargs['class_'] %}
{% set tmp = kwargs.update({'class_': kwargs['class_'] + ' btn'}) %}
{% else %}
{% set tmp = kwargs.update({'class_': 'btn'}) %}
{% endif %}
{% if 'waves-effect' not in kwargs['class_'] %}
{% set tmp = kwargs.update({'class_': kwargs['class_'] + ' waves-effect'}) %}
{% endif %}
{% if 'waves-light' not in kwargs['class_'] %}
{% set tmp = kwargs.update({'class_': kwargs['class_'] + ' waves-light'}) %}
{% endif %}
<button class="{{ kwargs['class_'] }}"
id="{{ field.id }}"
name="{{ field.name }}"
type="submit"
value="{{ field.label.text }}"
{% if 'style' in kwargs %}
style="{{ kwargs.pop('style') }}"
{% endif %}>
<button class="btn waves-effect waves-light" id="{{ field.id }}" name="{{ field.name }}" type="submit">
{{ field.label.text }}
{% if 'material_icon' in kwargs %}
<i class="material-icons right">{{ kwargs.pop('material_icon') }}</i>
{% endif %}
</button>
{% endmacro %}
{% macro render_text_area_field(field) %}
<div class="input-field">
{% if 'material_icon' in kwargs %}
<i class="material-icons prefix">{{ kwargs.pop('material_icon') }}</i>
{% endif %}
<textarea class="materialize-textarea validate" id="{{ field.id }}" name="{{ field.name }}"></textarea>
<label for="{{ field.id }}">{{ field.label.text }}</label>
{% for error in field.errors %}
<span class="helper-text error-color-text">{{ error }}</span>
{% endfor %}
</div>
{% endmacro %}
{% macro render_generic_field(field) %}
{% set classes_ = kwargs.pop('class_', '').split(' ') %}
{% if 'validate' not in classes_ %}
{% set _ = classes_.append('validate') %}
{% endif %}
{% set _ = kwargs.update({'class_': ' '.join(classes_)}) %}
<div class="input-field">
{% if 'material_icon' in kwargs %}
<i class="material-icons prefix">{{ kwargs.pop('material_icon') }}</i>
{% endif %}
{{ field(*args, **kwargs) }}
{{ field.label }}
{% for error in field.errors %}
<span class="helper-text error-color-text">{{ error }}</span>
{% endfor %}
</div>
{% endmacro %}