Sindbad~EG File Manager
{% extends 'users/layout.html' %}
{% block content %}
<div class="container">
<div class="row">
<div class="col">
<div class="row mb-5">
<div class="col-12 rounded form-group">
<form action="{{ url_for('user.question_post',q_id=Cryptography.encrypt(q_data.q_id|int)) }}" method="post" id="question_form">
<input type="hidden" name="q_id" id="q_id" value="{{ q_data.q_id }}">
<div class="row">
<div class="col form-group">
<span class="h2">Add Your Question</span>
</div>
<div class="col form-group">
<a class="btn btn-primary text-light float-right" href="{{url_for('user.question_index',status_id=q_data.status_id)}}">Question index</a>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-12 form-group">
<label class="font-weight-bold">Question Image</label>
<div class="d-flex justify-content-center align-items-center" style="border-radius: 11px;border: 1px solid #A968FF;background: #F7F7F7;box-shadow: 0px 9px 21px 0px rgba(0, 0, 0, 0.10);background-image: url('{{ q_data.image_link }}');background-repeat: no-repeat;background-size: cover;min-height: 200px;" id="q_img">
<button type="button" class="btn btn-primary" id="upload_img"> Add / Change Image</button>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-12 col-12 form-group">
<label class="font-weight-bold">Question</label>
<textarea name="question" style="border-radius: 11px;border: 1px solid #A968FF;background: #F7F7F7;box-shadow: 0px 9px 21px 0px rgba(0, 0, 0, 0.10);" id="question" class="form-control" rows="8" required>{{ q_data.question or '' }}</textarea>
</div>
</div>
<div class="row">
<div class="col form-group rounded text-center" >
<div class="p-2" style="border-radius: 11px;border: 1px solid #A968FF;background: #F7F7F7;box-shadow: 0px 9px 21px 0px rgba(0, 0, 0, 0.10);">
<div class="row p-3">
<div class="col-10">
<div class="row">
<div class="col-3 d-flex justify-content-center align-items-center">
<label class="font-weight-bold">Options A</label>
</div>
<div class="col-9">
<input type="hidden" name="opt_1_id" value="{% if opt_data[0] %}{{ opt_data[0]['opt_id'] or '' }}{% endif %}">
<input type="text" name="option_1" id="option_1" class="form-control" value="{% if opt_data[0] %}{{ opt_data[0]['option_val'] }} {% endif %}">
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center align-items-center ">
<input type="radio" name="opt" id="otp_1_radio" {% if opt_data[0] and opt_data[0]['is_answer']|int == 1 %} checked {% endif %} value="A">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col form-group rounded text-center">
<div class="p-2" style="border-radius: 11px;border: 1px solid #A968FF;background: #F7F7F7;box-shadow: 0px 9px 21px 0px rgba(0, 0, 0, 0.10);">
<div class="row p-3">
<div class="col-10">
<div class="row">
<div class="col-3 d-flex justify-content-center align-items-center">
<label class="font-weight-bold">Options B</label>
</div>
<div class="col-9">
<input type="hidden" name="opt_2_id" value="{% if opt_data[1] %}{{ opt_data[1]['opt_id'] or '' }}{% endif %}">
<input type="text" name="option_2" id="option_2" class="form-control" value="{% if opt_data[1] %}{{ opt_data[1]['option_val'] or '' }}{% endif %}">
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center align-items-center ">
<input type="radio" name="opt" id="otp_2_radio" {% if opt_data[1] and opt_data[1]['is_answer']|int == 1 %} checked {% endif %} value="B">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col form-group rounded text-center">
<div class="p-2" style="border-radius: 11px;border: 1px solid #A968FF;background: #F7F7F7;box-shadow: 0px 9px 21px 0px rgba(0, 0, 0, 0.10);">
<div class="row p-3">
<div class="col-10">
<div class="row">
<div class="col-3 d-flex justify-content-center align-items-center">
<label class="font-weight-bold">Options C</label>
</div>
<div class="col-9">
<input type="hidden" name="opt_3_id" value="{% if opt_data[2] %}{{ opt_data[2]['opt_id'] or '' }}{% endif %}">
<input type="text" name="option_3" id="option_3" class="form-control" value="{% if opt_data[2] %}{{ opt_data[2]['option_val'] or '' }}{% endif %}">
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center align-items-center ">
<input type="radio" name="opt" id="otp_3_radio" {% if opt_data[2] and opt_data[2]['is_answer']|int == 1 %} checked {% endif %} value="C">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col form-group ounded text-center">
<div class="p-2" style="border-radius: 11px;border: 1px solid #A968FF;background: #F7F7F7;box-shadow: 0px 9px 21px 0px rgba(0, 0, 0, 0.10);">
<div class="row p-3">
<div class="col-10">
<div class="row">
<div class="col-3 d-flex justify-content-center align-items-center">
<label class="font-weight-bold">Options D</label>
</div>
<div class="col-9">
<input type="hidden" name="opt_4_id" value="{% if opt_data[3] %}{{ opt_data[3]['opt_id'] }}{% endif %}">
<input type="text" name="option_4" id="option_4" class="form-control" value="{% if opt_data[3] %}{{ opt_data[3]['option_val'] }}{% endif %}">
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center align-items-center ">
<input type="radio" name="opt" id="otp_4_radio" {% if opt_data[3] and opt_data[3]['is_answer']|int == 1 %} checked {% endif %} value="D">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12"><label class="font-weight-bold">Explanation:</label></div>
<div class="col form-group">
<div style="border-radius: 11px;border: 1px solid #A968FF;background: #F7F7F7;box-shadow: 0px 9px 21px 0px rgba(0, 0, 0, 0.10);" class="p-2">
<textarea id="htmeditor" name="explanation">{% if q_data.explanation %}{{ q_data.explanation | safe }}{% endif %}</textarea>
<script src="https://htmeditor.com/js/htmeditor.min.js" htmeditor_textarea="htmeditor" full_screen="no" editor_height="480" run_local="no"> </script>
</div>
</div>
</div>
<div class="row">
<div class="col-12 form-group text-center">
<button type="submit" class="btn btn-lg btn-danger" onclick="form_validate()">Save</button>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-12 form-group">
<input type="hidden" name="crt_new" id="crt_new" value="2">
<button type="button" class="btn btn-lg btn-primary float-right" id="crt_new_q">Submit & Create another one</button>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-12 form-group">
<button type="button" class="btn btn-lg btn-danger" id="to_dashboard">Submit & Exit to Dashboard</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="modal_img_upload">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add or Change image</h5>
</div>
<div class="modal-body">
<input type="file" name="file" id="file" class="form-control" accept="image/*">
</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="save_img" onclick="uploaduser()">Upload</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block script %}
<script>
$("#upload_img").click(function(){
$("#modal_img_upload").modal('show');
})
$("#crt_new_q").click(function(){
$("#crt_new").val(1);
form_validate();
if ($("#question_form").valid()){
$("#question_form").submit();
}
else{
return false
}
})
$("#to_dashboard").click(function(){
$("#crt_new").val(0);
form_validate();
if ($("#question_form").valid()){
$("#question_form").submit();
}
else{
return false
}
})
function form_validate() {
$("#question_form").validate({
rules: {
question: {
required: true,
},
explanation: {
required: true,
},
option_1: {
required: true,
},
option_2: {
required:true,
},
option_3: {
required:true,
},
option_4: {
required:true,
},
opt: {
required:true
},
}
})
return true
}
function uploaduser() {
var fd = new FormData();
var user_profile = $('#file')[0].files[0];
var file_name = $('#file').val().split('\\').pop();
var q_id = $("#q_id").val();
fd.append('file', user_profile);
ShowProgress();
$.ajax({
type: 'POST',
url: BaseUrl +"/img_upload/"+q_id,
data: fd,
contentType: false,
processData: false,
cache: false,
dataType: 'json',
})
.done(function(data, jqXHR) {
console.log(data["image_link"])
$("#modal_img_upload").modal('hide');
$("#q_img").css('background-image','url('+data["image_link"]+')');
// $("#q_img").css('background-image: url("',data["image_link"],'")');
})
.fail(function(data) {
});
}
$(".photo_delete").click(function()
{
var q_id = $('#q_id').val();
var r = confirm("confirm to delete!");
if (r == true)
{
$.ajax({
type: "GET",
url: BaseUrl +"/remove_img",
data: {
'q_id' : q_id,
},
dataType: "json",
success: function (data) {
StopProgress();
$("#delete").hide();
return true;
},
});
}
else {}
})
</script>
{% endblock %}
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists