299 lines
14 KiB
HTML
299 lines
14 KiB
HTML
{% load i18n %}{% load widget_tweaks %} {% load attendancefilters %}
|
|
{% load static %}
|
|
<style>
|
|
.question-container {
|
|
padding: 0px;
|
|
}
|
|
</style>
|
|
<div class="oh-general__tab-target" id="personal">
|
|
<div class="oh-alert-container">
|
|
</div>
|
|
<div class="oh-wrapper oh-survey-ques">
|
|
<div class="row pb-5">
|
|
<div class="col-12">{{form.non_field_errors}}</div>
|
|
|
|
{% for question in questions %}
|
|
|
|
{% if question.type == "textarea" %}
|
|
<div class="d-flex oh-card mt-2" data-question-id="{{question.id}}">
|
|
<div class="drag-handle">
|
|
<img src="/static/images/ui/drag.svg" alt="">
|
|
</div>
|
|
<div class="d-block w-100">
|
|
{% if question.is_mandatory %}
|
|
<span class="oh-label oh-label--question">{{ question.question }}<span class='text-danger'> * {% trans "Mandatory Question" %}</span></span>
|
|
{% else %}
|
|
<span class="oh-label oh-label--question">{{ question.question }}</span>
|
|
{% endif %}
|
|
<textarea
|
|
type="text"
|
|
name="{{question.question}}"
|
|
class="oh-input w-100"
|
|
id="id_{{qgvuestion.id}}"
|
|
{% if question.is_mandatory %}required{% endif %}
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
{% elif question.type == "options" %}
|
|
<div class="d-flex oh-card" data-question-id="{{question.id}}">
|
|
<div class="drag-handle">
|
|
<img src="/static/images/ui/drag.svg" alt="">
|
|
</div>
|
|
<div class="d-block w-100">
|
|
{% if question.is_mandatory %}
|
|
<span class="oh-label oh-label--question">{{ question.question }}<span class='text-danger'> * {% trans "Mandatory Question" %}</span></span>
|
|
{% else %}
|
|
<span class="oh-label oh-label--question">{{ question.question }}</span>
|
|
{% endif %}
|
|
<select
|
|
name="{{question.question}}"
|
|
class="oh-select oh-select-2--large oh-select-2 w-100 select2-hidden-accessible"
|
|
id="id_{{question.id}}"
|
|
data-select2-id="select2-data-id_employee_id1"
|
|
aria-hidden="true"
|
|
{% if question.is_mandatory %}required{% endif %}
|
|
>
|
|
<option value="">-------------------------</option>
|
|
{% for choice in question.choices %}
|
|
<option value="{{choice}}">{{choice}}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
{% elif question.type == "multiple" %}
|
|
<div class="d-flex oh-card" data-question-id="{{question.id}}">
|
|
<div class="drag-handle">
|
|
<img src="/static/images/ui/drag.svg" alt="">
|
|
</div>
|
|
<div class="d-block w-100">
|
|
{% if question.is_mandatory %}
|
|
<span class="oh-label oh-label--question">{{ question.question }}<span class='text-danger'> * {% trans "Mandatory Question" %}</span></span>
|
|
{% else %}
|
|
<span class="oh-label oh-label--question">{{ question.question }}</span>
|
|
{% endif %}
|
|
<select
|
|
name="multiple_choices_{{ question.question }}"
|
|
class="oh-select oh-select-2--large oh-select-2 w-100 select2-hidden-accessible"
|
|
style="height: 55px"
|
|
id="id_{{ question.id }}"
|
|
{% if question.is_mandatory %}required{% endif %}
|
|
multiple>
|
|
{% for choice in question.choices %}
|
|
<option value="{{ choice }}">{{ choice }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
{% elif question.type == "percentage" %}
|
|
<div class="d-flex oh-card" data-question-id="{{question.id}}">
|
|
<div class="drag-handle">
|
|
<img src="/static/images/ui/drag.svg" alt="">
|
|
</div>
|
|
<div class="d-block w-100">
|
|
{% if question.is_mandatory %}
|
|
<span class="oh-label oh-label--question">
|
|
{{ question.question }}
|
|
<span class='text-danger'>* {% trans "Mandatory Question" %}</span>
|
|
</span>
|
|
{% else %}
|
|
<span class="oh-label oh-label--question">{{ question.question }}</span>
|
|
{% endif %}
|
|
<div class="oh-container oh-container--outline my-2 w-25">
|
|
<input
|
|
type="number"
|
|
class="oh-input oh-input--small oh-input--block px-0"
|
|
style="width: 70px; text-align: center;"
|
|
min="0"
|
|
value="0"
|
|
max="100"
|
|
name="percentage_{{ question.question }}"
|
|
id="id_{{ question.id }}"
|
|
{% if question.is_mandatory %}required{% endif %}
|
|
/>
|
|
<input
|
|
type="text"
|
|
class="oh-input w-25 oh-input--small oh-input--block px-0"
|
|
value="%"
|
|
readonly
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% elif question.type == "file" %}
|
|
<div class="d-flex oh-card" data-question-id="{{question.id}}">
|
|
<div class="drag-handle">
|
|
<img src="/static/images/ui/drag.svg" alt="">
|
|
</div>
|
|
<div class="d-block w-100">
|
|
{% if question.is_mandatory %}
|
|
<span class="oh-label oh-label--question">{{ question.question }}<span class='text-danger'> * {% trans "Mandatory Question" %}</span></span>
|
|
{% else %}
|
|
<span class="oh-label oh-label--question">{{ question.question }}</span>
|
|
{% endif %}
|
|
<input
|
|
type="file"
|
|
class="oh-input w-25"
|
|
name="file_{{question.question}}"
|
|
id="id_{{question.id}}"
|
|
{% if question.is_mandatory %}required{% endif %}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{% elif question.type == "date" %}
|
|
<div class="d-flex oh-card" data-question-id="{{question.id}}">
|
|
<div class="drag-handle">
|
|
<img src="/static/images/ui/drag.svg" alt="">
|
|
</div>
|
|
<div class="d-block w-100">
|
|
{% if question.is_mandatory %}
|
|
<span class="oh-label oh-label--question">{{ question.question }}<span class='text-danger'> * {% trans "Mandatory Question" %}</span></span>
|
|
{% else %}
|
|
<span class="oh-label oh-label--question">{{ question.question }}</span>
|
|
{% endif %}
|
|
<input
|
|
type="date"
|
|
class="oh-input w-25"
|
|
name="date_{{question.question}}"
|
|
id="id_{{question.id}}"
|
|
{% if question.is_mandatory %}required{% endif %}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{% elif question.type == "rating" %}
|
|
<div class="d-flex oh-card" data-question-id="{{question.id}}">
|
|
<div class="drag-handle">
|
|
<img src="/static/images/ui/drag.svg" alt="">
|
|
</div>
|
|
<div class="d-block w-100">
|
|
{% if question.is_mandatory %}
|
|
<span class="oh-label oh-label--question">{{ question.question }}<span class='text-danger'> * {% trans "Mandatory Question" %}</span></span>
|
|
{% else %}
|
|
<span class="oh-label oh-label--question">{{ question.question }}</span>
|
|
{% endif %}
|
|
<div class="oh-rate">
|
|
<input type="radio" id="star5" name="rate" value="5" />
|
|
<label for="star5" title="5 Stars">5 stars</label>
|
|
<input type="radio" id="star4" name="rate" value="4" />
|
|
<label for="star4" title="4 Stars">4 stars</label>
|
|
<input type="radio" id="star3" name="rate" value="3" />
|
|
<label for="star3" title="3 Stars">3 stars</label>
|
|
<input type="radio" id="star2" name="rate" value="2" />
|
|
<label for="star2" title="2 Stars">2 stars</label>
|
|
<input type="radio" id="star1" name="rate" value="1" />
|
|
<label for="star1" title="1 Star">1 star</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% elif question.type == "checkbox" %}
|
|
<div class="d-flex oh-card" data-question-id="{{question.id}}">
|
|
<div class="drag-handle">
|
|
<img src="/static/images/ui/drag.svg" alt="">
|
|
</div>
|
|
<div class="oh-input__group">
|
|
{% if question.is_mandatory %}
|
|
<span class="oh-label oh-label--question">{{ question.question }}<span class='text-danger'> * {% trans "Mandatory Question" %}</span></span>
|
|
{% else %}
|
|
<span class="oh-label oh-label--question">{{ question.question }}</span>
|
|
{% endif %}
|
|
<div class="oh-input-picker-group">
|
|
<div class="oh-input-picker oh-input-picker--sm oh-input-picker--selected" style="width: 80px;">
|
|
<span>
|
|
<ion-icon name="checkmark-circle-outline"></ion-icon>
|
|
Yes
|
|
</span>
|
|
<input type="radio" name="{{ question.question }}" value="Yes" selected>
|
|
</div>
|
|
<div class="oh-input-picker oh-input-picker--sm" style="width: 80px;">
|
|
<span>
|
|
<ion-icon name="close-circle-outline"></ion-icon>
|
|
No
|
|
</span>
|
|
<input type="radio" name="{{ question.question }}" value="No">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="d-flex oh-card" data-question-id="{{question.id}}">
|
|
<div class="drag-handle">
|
|
<img src="/static/images/ui/drag.svg" alt="">
|
|
</div>
|
|
<div class="d-block w-100">
|
|
{% if question.is_mandatory %}
|
|
<span class="oh-label oh-label--question">{{ question.question }}<span class='text-danger'> * {% trans "Mandatory Question" %}</span></span>
|
|
{% else %}
|
|
<span class="oh-label oh-label--question">{{ question.question }}</span>
|
|
{% endif %}
|
|
<input
|
|
type="{{question.type}}"
|
|
class="oh-input w-100"
|
|
name="{{question.question}}"
|
|
id="id_{{question.id}}"
|
|
{% if question.is_mandatory %}required{% endif %}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{% endif %} {% endfor %}
|
|
</div>
|
|
{% comment %} <div class="d-flex justify-content-end align-items-center w-100 mt-4">
|
|
<button type="submit" class="oh-btn oh-btn--secondary oh-btn--w-100-resp">
|
|
{% trans "Save" %}
|
|
</button>
|
|
</div> {% endcomment %}
|
|
<div class="col-sm-12 col-md-12 col-lg-12">
|
|
<p class="small text-muted text-center">
|
|
© {% now 'Y' %} {{white_label_company_name}}. All rights resevered.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$(function () {
|
|
$('.pb-5').sortable({
|
|
start: function (event, ui) {
|
|
ui.item.css({
|
|
"border": "1px solid hsl(8, 77%, 56%)",
|
|
"transform": "scale(1.01)",
|
|
"cursor": "grabbing"
|
|
});
|
|
},
|
|
stop: function (event, ui) {
|
|
ui.item.css({
|
|
"background-color": "",
|
|
"cursor": "grab",
|
|
"border": "",
|
|
"transform": ""
|
|
});
|
|
|
|
// Gather the necessary question data (e.g., question ID and new order)
|
|
var questionId = ui.item.data('question-id');
|
|
var newPosition = ui.item.index(); // Get the new position of the item in the list
|
|
|
|
// Make an AJAX request to send the updated order of the questions
|
|
$.ajax({
|
|
url: '{% url "update-question-order" %}', // Replace with your actual endpoint URL
|
|
method: 'POST',
|
|
data: {
|
|
'question_id': questionId, // Send the question ID
|
|
'new_position': newPosition, // Send the new position
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}' // CSRF token for security if using Django
|
|
},
|
|
success: function(response) {
|
|
// Check if the server response indicates success
|
|
if (response.success) {
|
|
// Display the success message
|
|
$('.oh-alert-container').html('<div class="oh-alert oh-alert--animated oh-alert--success">' + response.message + '</div>');
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
// Handle error response
|
|
$('.oh-alert-container').html('<div class="oh-alert oh-alert--animated oh-alert--danger">' + 'Failed to update question order.' + '</div>');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|