forked from enviPath/enviPy
[Feature] Scenario Creation (#78)
Co-authored-by: Tim Lorsbach <tim@lorsba.ch> Reviewed-on: enviPath/enviPy#78
This commit is contained in:
@ -1,115 +1,95 @@
|
||||
<div class="modal fade" tabindex="-1" id="new_scenario_modal" role="dialog" aria-labelledby="newScenGenMod"
|
||||
<div class="modal fade" tabindex="-1" id="new_scenario_modal" role="dialog" aria-labelledby="new_scenario_modal"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span> <span
|
||||
class="sr-only">Close</span>
|
||||
<span aria-hidden="true">×</span>
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="js-title-step"></h4>
|
||||
<h4 class="modal-title">New Scenario</h4>
|
||||
</div>
|
||||
<form id="base-scenario-form" accept-charset="UTF-8" action="" data-remote="true" method="POST">
|
||||
<div class="modal-body hide" data-step="1" data-title="New Scenario - Step 1">
|
||||
<div class="jumbotron">Please enter name, description,
|
||||
and date of scenario. Date should be associated to the
|
||||
data, not the current date. For example, this could
|
||||
reflect the publishing date of a study. You can leave
|
||||
all fields but the name empty and fill them in
|
||||
later.
|
||||
<div class="modal-body">
|
||||
<form id="new_scenario_form" accept-charset="UTF-8" action="{{ meta.current_package.url }}/scenario"
|
||||
data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="jumbotron">Please enter name, description, and date of scenario. Date should be
|
||||
associated to the data, not the current date. For example, this could reflect the publishing
|
||||
date of a study. You can leave all fields but the name empty and fill them in later.
|
||||
<a target="_blank" href="https://wiki.envipath.org/index.php/scenario" role="button">wiki
|
||||
>></a>
|
||||
</div>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" name="studyname" placeholder="Name" class="form-control"/>
|
||||
<label for="name">Description</label>
|
||||
<input id="description" name="studydescription" placeholder="Description" class="form-control"/>
|
||||
<label for="scenario-name">Name</label>
|
||||
<input id="scenario-name" name="scenario-name" class="form-control" placeholder="Name"/>
|
||||
<label for="scenario-description">Description</label>
|
||||
<input id="scenario-description" name="scenario-description" class="form-control"
|
||||
placeholder="Description"/>
|
||||
<label id="dateField" for="dateYear">Date</label>
|
||||
<table>
|
||||
<tr>
|
||||
<th>
|
||||
<input type="number" id="dateYear" name="dateYear" class="form-control" placeholder="YYYY">
|
||||
<input type="number" id="dateYear" name="scenario-date-year" class="form-control"
|
||||
placeholder="YYYY">
|
||||
</th>
|
||||
<th>
|
||||
<input type="number" id="dateMonth" name="dateMonth" min="1" max="12"
|
||||
<input type="number" id="dateMonth" name="scenario-date-month" min="1" max="12"
|
||||
class="form-control" placeholder="MM" align="">
|
||||
</th>
|
||||
<th>
|
||||
<input type="number" id="dateDay" name="dateDay" min="1" max="31" class="form-control"
|
||||
<input type="number" id="dateDay" name="scenario-date-day" min="1" max="31" class="form-control"
|
||||
placeholder="DD">
|
||||
</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-body hide" data-step="2" data-title="New Scenario - Step 2">
|
||||
<div class="jumbotron">
|
||||
Do you want to create an empty scenario and fill it
|
||||
with your own set of attributes, or fill in a
|
||||
pre-defined set of attributes for soil, sludge or sediment
|
||||
data?
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="type" id="radioEmpty" checked>Empty Scenario
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="type" id="radioSoil" value="soil" >Soil Data
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="type" id="radioSludge" value="sludge">Sludge Data
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="type" id="radioSediment" value="sediment">Water-Sediment System Data
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body hide" data-step="3" data-title="New Scenario - Step 3">
|
||||
<div class="jumbotron" id="finaljumbo">
|
||||
All done! Click Submit!
|
||||
</div>
|
||||
<div style="float: left"><button
|
||||
id="addColumnButton" type="button"
|
||||
class="btn btn-default">Add
|
||||
another Scenario
|
||||
</button></div>
|
||||
<input type="hidden" name="fullScenario" value="true"/>
|
||||
{% include "tables/scenario.html" %}
|
||||
</div>
|
||||
</form>
|
||||
<label for="scenario-type">Scenario Type</label>
|
||||
<select id="scenario-type" name="scenario-type" class="form-control" data-width='100%'>
|
||||
<option value="empty" selected>Empty Scenario</option>
|
||||
{% for k, v in scenario_types.items %}
|
||||
<option value="{{ v.name }}">{{ k }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
{% for type in scenario_types.values %}
|
||||
<div id="{{ type.name }}-specific-inputs">
|
||||
{% for widget in type.widgets %}
|
||||
{{ widget|safe }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default js-btn-step pull-left" data-orientation="cancel" data-dismiss="modal"></button>
|
||||
<button type="button" class="btn btn-default js-btn-step" data-orientation="previous"></button>
|
||||
<button type="button" class="btn btn-default js-btn-step"
|
||||
data-orientation="next" id="nextbutton"></button>
|
||||
<a id="new_scenario_modal_form_submit" class="btn btn-primary" href="#">Submit</a>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
// Initially hide all "specific" forms
|
||||
$("div[id$='-specific-inputs']").each(function () {
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
// On change hide all and show only selected
|
||||
$("#scenario-type").change(function () {
|
||||
$("div[id$='-specific-inputs']").each(function () {
|
||||
$(this).hide();
|
||||
});
|
||||
val = $('option:selected', this).val();
|
||||
$("#" + val + "-specific-inputs").show();
|
||||
});
|
||||
|
||||
<p></p>
|
||||
<div id="scenariocontent"></div>
|
||||
$('#new_scenario_modal_form_submit').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
$('#new_scenario_form').submit();
|
||||
});
|
||||
|
||||
<!--Template index -->
|
||||
<script language="javascript">
|
||||
$(function() {
|
||||
|
||||
// Hide additional columns per default
|
||||
$('.col-2').hide();
|
||||
$('.col-3').hide();
|
||||
|
||||
//TODO just to see modal
|
||||
$('#new_scenario_modal').modalSteps({
|
||||
btnCancelHtml: 'Cancel',
|
||||
btnPreviousHtml: 'Previous',
|
||||
btnNextHtml: 'Next',
|
||||
btnLastStepHtml: 'Submit',
|
||||
disableNextButton: false,
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -0,0 +1,61 @@
|
||||
{% load static %}
|
||||
<!-- Add Additional Information-->
|
||||
<div id="add_additional_information_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h3 class="modal-title">Add Additional Information</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<select id="select-additional-information-type" data-actions-box='true' class="form-control" data-width='100%'>
|
||||
<option selected disabled>Select the type to add</option>
|
||||
{% for add_inf in available_additional_information %}
|
||||
<option value="{{ add_inf.name }}">{{ add_inf.display_name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% for add_inf in available_additional_information %}
|
||||
<div class="aiform {{ add_inf.name }}" style="display: none;">
|
||||
<form id="add_{{ add_inf.name }}_add-additional-information-modal-form" accept-charset="UTF-8"
|
||||
action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
{{ add_inf.widget|safe }}
|
||||
<input type="hidden" name="hidden" value="add-additional-information">
|
||||
</form>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="add-additional-information-modal-submit">Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#select-additional-information-type').change(function(e){
|
||||
var selectedType = $("#select-additional-information-type :selected").val();
|
||||
$('.aiform').hide();
|
||||
$('.' + selectedType).show();
|
||||
})
|
||||
|
||||
$('#add-additional-information-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
|
||||
var selectedType = $("#select-additional-information-type :selected").val();
|
||||
console.log(selectedType);
|
||||
if (selectedType !== null && selectedType !== undefined && selectedType !== '') {
|
||||
$('.' + selectedType + ' >form').submit();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,39 @@
|
||||
{% load static %}
|
||||
<!-- Update Scenario Additional Information-->
|
||||
<div id="update_scenario_additional_information_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h3 class="modal-title">Update Additional Information</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="edit-scenario-additional-information-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
{% for widget in update_widgets %}
|
||||
{{ widget|safe }}
|
||||
{% endfor %}
|
||||
<input type="hidden" name="hidden" value="set-additional-information">
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="edit-scenario-additional-information-modal-submit">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#edit-scenario-additional-information-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#edit-scenario-additional-information-modal-form').submit();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user