{% extends 'lofardata/index.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% load define_action %}
{% load widget_tweaks %}
{% load json %}
{% block myBlock %}
<div class="overlay">
<div class="modal-dias-wrapper">
<div class="modal-dias modal-dias--fit-content">
<a class="icon icon--times button--close" href="{% url 'index' %}"></a>
<header class="flex-wrapper flex-wrapper--centered flex-wrapper--column">
{% if object.pk %}
<h2 class="title text text--primary">Edit Work Specification {{ object.pk }}</h2>
<form method="post" action="{% url 'specification-update' object.pk %}">
{% else %}
<h2 class="title text text--primary">New Work Specification </h2>
<form method="post" action="{% url 'specification-create' %}">
{% endif %}
{% csrf_token %}
<div class="flex-wrapper flex-wrapper--row flex-wrapper--start">
<!-- Standard input fields -->
<div class="custom--div-margin">
<h3 class="text text--primary text--title">Selection</h3>
<div class="flex-wrapper flex-wrapper--row" id="div_id_group">
<div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
<label class="input__label">{{ form.group.label }}</label>
<a class="tooltip-dias tooltip-dias-right custom--tooltip"
data-tooltip="{{ form.group.help_text }}">m</a>
</div>
<div class="input-select-wrapper icon--inline icon-after icon-after--angle-down margin-left margin-bottom">
{% render_field form.group class="input input--select custom__input--fixed-width" %}
</div>
</div>
<div class="flex-wrapper flex-wrapper--row" id="div_id_processing_site">
<div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
<label class="input__label">{{ form.processing_site.label }}*</label>
<a class="tooltip-dias tooltip-dias-right custom--tooltip"
data-tooltip="{{ form.processing_site.help_text }}">m</a>
</div>
<div class="input-select-wrapper icon--inline icon-after icon-after--angle-down">
<select class="input input--select custom__input--fixed-width margin-left margin-bottom"
name="processing_site"
data-bind="options:processingSites,
optionsCaption: '---------',
optionsText: function(item) { return item.name + ' - ' + item.url},
optionsValue: 'name',
value: selectedProcessingSite"
test-id="processing_site"
></select>
</div>
</div>
<div class="flex-wrapper flex-wrapper--row" id="div_id_selected_workflow_tag">
<div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
<label class="input__label"
for="id_selected_workflow_tag">{{ form.selected_workflow_tag.label_tag }}*</label>
<a class="tooltip-dias tooltip-dias-right custom--tooltip"
data-tooltip="{{ form.selected_workflow_tag.help_text }}">m</a>
</div>
<div class="input-select-wrapper icon--inline icon-after icon-after--angle-down">
<select class="input input--select custom__input--fixed-width margin-bottom margin-left"
id="id_selected_workflow_tag"
test-id="workflow_tag"
name="selected_workflow_tag"
style="width: 12rem"
data-bind="options:tags,
optionsCaption: caption,
value: selectedTag,
disable: isLoading">
</select>
</div>
</div>
<div class="flex-wrapper flex-wrapper--row" id="div_id_selected_workflow">
<div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
<label class="input__label"
for="id_selected_workflow">{{ form.selected_workflow.label }}*</label>
<a class="tooltip-dias tooltip-dias-right custom--tooltip"
data-tooltip="{{ form.selected_workflow.help_text }}">m</a>
</div>
<div class="input-select-wrapper icon--inline icon-after icon-after--angle-down">
<select class="input input--select custom__input--fixed-width margin-bottom margin-left"
id="id_selected_workflow"
name="selected_workflow"
style="width: 12rem"
test-id="workflow"
data-bind="options:workflowsByTag,
optionsCaption: caption,
optionsValue: 'workflow_uri',
optionsText: 'workflow_uri',
value: selectedWorkflow,
disable: isLoading">
</select>
</div>
</div>
<div class="flex-wrapper flex-wrapper--row" id="div_id_predecessor">
<div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
<label class="input__label"
for="id_predecessor">{{ form.predecessor_specification.label }}</label>
<a class="tooltip-dias tooltip-dias-right custom--tooltip"
data-tooltip="{{ form.predecessor_specification.help_text }}">m</a>
</div>
<div class="input-select-wrapper icon--inline icon-after icon-after--angle-down margin-left margin-bottom">
{% render_field form.predecessor_specification class="input input--select custom__input--fixed-width" %}
</div>
</div>
<div class="flex-wrapper flex-wrapper--row" id="div_id_batch_size">
<div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
<label class="input__label"
for="id_batch_size">{{ form.batch_size.label_tag }}</label>
<a class="tooltip-dias tooltip-dias-right custom--tooltip"
data-tooltip="{{ form.batch_size.help_text }}">m</a>
</div>
{% render_field form.batch_size class="input input--select custom__input--fixed-width margin-left margin-bottom" type="number" %}
</div>
<div class="flex-wrapper flex-wrapper--row" id="div_id_auto_submit">
{% render_field form.is_auto_submit class="input custom--checkbox margin-top" type="checkbox" %}
<label class="input__label">{{ form.is_auto_submit.label }}</label>
<a class="tooltip-dias tooltip-dias-right custom--tooltip"
data-tooltip="{{ form.is_auto_submit.help_text }}">m</a>
</div>
</div>
<!-- Filter fields -->
<div class="custom--div-margin">
<h3 class="text text--primary text--title">Filters</h3>
{% for filter in filters %}
{% if filter.filter_type == 'Free' %}
<div class="flex-wrapper">
<div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
<label class="input__label"
for="id_{{ filter.field }}">{{ filter.name }}</label>
{% if filter.help_text %}
<a class="tooltip-dias tooltip-dias-right custom--tooltip"
data-tooltip="{{ filter.help_text }}">m</a>
{% endif %}
</div>
<input class="input input--text margin-left margin-bottom"
id="id_{{ filter.field }}" name="{{ filter.field }}"
test-id="{{ filter.name }}"
placeholder="Enter {{ filter.name }}" type="text"
data-filter="{{ filter.lookup_type }}"
value="{{ filter.default }}">
</div>
{% elif filter.filter_type == 'Dropdown' %}
<div class="flex-wrapper flex-wrapper--row"
id="div_id_filter_{{ filter.name }}">
<div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
<label class="input__label"
for="id_{{ filter.field }}"
test-id="{{ filter.name }}">{{ filter.name }}</label>
{% if filter.help_text %}
<a class="tooltip-dias tooltip-dias-right custom--tooltip"
data-tooltip="{{ filter.help_text }}">m</a>
{% endif %}
</div>
<div class="input-select-wrapper icon--inline icon-after icon-after--angle-down margin-left margin-bottom">
<select class="input input--select custom__input--fixed-width"
id="id_{{ filter.field }}"
test-id="{{ filter.name }}"
name="{{ filter.field }}"
data-filter="{{ filter.lookup_type }}"
style="width: 12rem">
{#for some reason, styling is not applied otherwise#}
<option selected value="">All</option>
{% for option in filter.choices %}
{% if filter.default == option.0 %}
<option value="{{ option.0 }}">{{ option.0 }}</option>
{% else %}
<option value="{{ option.0 }}">{{ option.0 }}</option>
{% endif %}
{% endfor %}
</select>
</div>
</div>
{% else %}
<div class="text text--red">Not supported field</div>
{% endif %}
{% endfor %}
</div>
</div>
<div class="flex-wrapper flex-wrapper--centered margin-bottom margin-top">
<button class="button button--primary margin-right"
type="submit"
name="action"
value="Submit"
test-id="create-update"
title="
{% if object.pk %}
Update the task
{% else %}
Create the task to inspect the result. Send it later to ATDB.
{% endif %}">
{% if object.pk %}
Update
{% else %}
Create
{% endif %}
</button>
<button class="button button--primary margin-right" type="submit"
value="Successor"
name="action"
title="Submit the task and add a successor task.">Add successor
</button>
<a class="button button--red button--primary margin-left" href="{% url 'index' %}">Cancel</a>
</div>
</form>
</header>
{% if form.errors %}
<div class="popup-bar popup-bar--red">
<span class="icon icon--left icon--color-inherit icon--times"></span>
<div class="flex-wrapper flex-wrapper--column">
The input is invalid:
{% for field, errors in form.errors.items %}
{% for error in errors %}
{% if field == '__all__' %}
<li class="text text--red text--faded">{{ error }}</li>
{% else %}
<li class="text text--red text--faded">{{ field }}: {{ error }}</li>
{% endif %}
{% endfor %}
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js'></script>
<script type="text/javascript">
const processingSite = "{% url 'processingsite-detail' 'replace' %}";
const existingWorkflow = '{{ object.selected_workflow|default_if_none:"null" }}';
const existingWorkflowTag = '{{ object.selected_workflow_tag|default_if_none:"null" }}';
const processingSites = {{ processing_sites | json }};
const existingProcessingSite = '{{ object.processing_site.name }}';
</script>
<script src="{% static 'update_workflow.js' %}"></script>
{% endblock %}