117 lines
4.5 KiB
HTML
117 lines
4.5 KiB
HTML
{% extends "layout.html" %} {% block content %}
|
|
<main class="container-fluid mt-4">
|
|
<div class="bg-white rounded border shadow px-4 py-2 mb-4">
|
|
<!-- TITLE AND BUTTONS -->
|
|
<section class="row border-bottom mt-4 pb-2 mb-2">
|
|
<form class="col-12 d-flex justify-content-between" action="" method="post">
|
|
{{ form.hidden_tag() }}
|
|
{% if survey_id %}
|
|
<div>
|
|
<a class="btn btn-secondary" href="{{ url_for('surveys.dashboard', survey_id=survey_id) }}"
|
|
title="Return to the dashboard page for this survey">Back</a>
|
|
</div>
|
|
{% endif %}
|
|
<section class="form-group">
|
|
{% if form.title.errors %}
|
|
{{ form.title(class="form-control is-invalid") }}
|
|
<div class="text-danger">
|
|
{% for error in form.title.errors %}
|
|
<span>{{ error }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
{{ form.title(class="form-control", placeholder="Enter title") }}
|
|
{% endif %}
|
|
</section>
|
|
<div>
|
|
<span id="proceed">
|
|
<a class="btn btn-primary" href="{{ url_for('surveys.home') }}" title="Go to the home page">Proceed to home</a>
|
|
</span>
|
|
{{ form.submit(class="btn btn-primary") }}
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- HANDSONTABLE -->
|
|
<div class="d-flex mb-2 justify-content-between info-row">
|
|
<small class="align-self-end table-guide">Click on cells to edit data</small>
|
|
<button class="btn btn-info" type="button" data-toggle="modal" data-target="#new-column-modal">Add new column</button>
|
|
</div>
|
|
<div class="handsontable-container overflow-auto vh-75">
|
|
<div id="handsontable"></div>
|
|
</div>
|
|
<div class="lead py-2">
|
|
New rows will be generated as you enter
|
|
</div>
|
|
<!-- Initial overlay -->
|
|
<section class="input-overlay">
|
|
<div class="add-variable p-4 rounded border pointer hover-shadow primary-transition" data-toggle="modal" data-target="#new-column-modal">
|
|
<p class="lead m-0 text-muted">Click here to add your first column</p>
|
|
<div class="text-center mt-2">
|
|
<i class="fa fa-plus-circle fa-lg text-primary" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
|
|
|
|
<!-- Modal requesting header when new column is added -->
|
|
<section class="modal fade" id="new-column-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Enter a heading for your new column</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="form-group">
|
|
<input type="text" class="form-control heading">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
<button type="button" id="confirm" class="btn btn-primary add-column">Add column</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Modal asking user to confirm moving to dashboard if not saved -->
|
|
<section class="modal fade" id="save-changes-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">You have unsaved changes. Proceed without saving?</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
<a class="btn btn-primary" href="{{ url_for('surveys.home') }}"
|
|
title="Proceed without saving to the home page">Proceed</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script type="text/javascript" defer>
|
|
var nan = "N/A";
|
|
var True = true;
|
|
var False = false;
|
|
var data = {{ data | safe }}
|
|
// Needed for testing. Pytest disables CSRF tokens
|
|
{% if 'csrf_token' in form %}
|
|
var csrf = "{{ form.csrf_token._value() }}"
|
|
{% endif %}
|
|
var url = "{{ url_for('surveys.input', survey_id=survey_id) }}"
|
|
</script>
|
|
<script src="{{ url_for('static', filename='input.js') }}" defer></script>
|
|
{% endblock content %}
|