<style type="text/css"> .assignment-calendar.po-calendar { margin: 25px 0; } .po-relative { position: relative; } .assignment-calendar .po-relative { width: 40%; margin-bottom: 10px; } </style> <main class="common_margin" id="main"> <div class="main-wrap"> <div class="assignment-section"> <div class="assignment-section-wrap"> <div class="class-head"> <h3 class="common-heading">Assignment</h3> </div> <div class="po-calendar assignment-calendar"> <div class="po-relative"> <input type="text" class="form-control" placeholder="Select a date" id="nepali-datepicker"> <i class="fas fa-calendar-alt cal-icon"></i> </div> <p>Note : To view different months notification, please select the required month and any day</p> </div> <div class="assignment-main"> <div class="assignment-subj"> </div> <div class="assignment-detail-main"> <div class="assignment-detail"> <div class="assgnmt-upload"> <div class="uploaded-assignmnts"> </div> <div class="submit-assignment-text"> <h5 class="text-success text-center "><small>Assignment submitted waiting for Teacher Remark</small></h5> </div> <div class="upload-btn-wrap btn-upload"> <button class="upload-btn"><span><i class="fas fa-cloud-upload-alt"></i></span>Upload Assignment</button> <input type="file" name="myfile[]" id="imgInp" multiple /> </div> <div class="upload-btn-wrap btn-submit"> <button class="upload-btn btn-success" data-toggle="modal" data-target="#confirmModal" style="background:green"> Submit </button> </div> <div class="upload-btn-wrap re-upload-btn"> <button class="upload-btn"><span><i class="fas fa-cloud-upload-alt"></i></span>Re - Upload </button> <input type="file" name="myfile[]" id="re-imgInp" multiple /> </div> <div class="upload-btn-wrap btn-cancel"> <button class="upload-btn" style="background:black"> Cancel </button> </div> </div> </div> <div class="assignmt-remark"> </div> </div> </div> </div> </div> </div> </main> <div class="syllabus-modal assignment-modal"> <div class="modal fade" id="viewAssignment" role="dialog"> <button type="button" class="close" data-dismiss="modal">×</button> <div class="modal-dialog"> <div class="modal-content"> <div class="down-btn-wrap"> <div class="page-number"> <div class="slider-counter"> <div class="slider-no"></div> <div class="tot-slider"></div> <span>Pages</span> </div> </div> </div> </div> </div> </div> <div class="viewDoc accept-modal-wrap"> <div class="modal fade" id="confirmModal" role="dialog"> <div class="modal-dialog"> <div class="modal-content-one"> <button type="button" class="close" data-dismiss="modal">×</button> <div class="accept-modal"> <input type="hidden" id="reject" /> <h3 class="text-center">Are you sure?</h3> <p>You won't be able to alter/re-upload the assignment after submission</p> <div class="delete-modal-btn mr-auto ml-auto"> <button type="button" id="asgn_submit" class="subject_addbtn btn-success ">Submit</button> </a> <button type="button" class="subject_addbtn subject_addbtn_cancel" data-dismiss="modal">Cancel</button> </div> </div> </div> </div> </div> </div> <style type="text/css"> @media (min-width: 576px) { .modal-dialog { max-width: 500px; margin: 6rem auto; } } .modal-content-one { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, .2); border-radius: .3rem; outline: 0; } #loader { position: relative; z-index: 1; width: 40px; height: 40px; margin: auto; border: 6px solid #f3f3f3; border-radius: 50%; border-top: 6px solid #3498db; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> <script> $(document).ready(function() { var asgn = '0', m = '0', y = '0'; $('.submit-assignment-text').hide(); get_assignment_list(m, y); get_assginment(asgn, m, y); }); function get_assignment_list(month = '', year = '') { $('.assignment-sub-tab').remove(); $.ajax({ url: '<?php echo base_url() . 'student/get_assignment_list/' ?>' + month + '/' + year, type: 'GET', dataType: 'json', success: function(result) { var assign = ''; var i = 1; var id = ''; $.each(result, function(k, v) { if (result) { if (i == 1) { id = v['assignment_id']; } if (v['status']) { if (v['flag'] == '1') { assign += '<div class="assignment-sub-tab" id="border_' + v['assignment_id'] + '"><a href="#" onClick="get_assginment(' + v['assignment_id'] + ', 0 , 0)" style="text-decoration:none;color:inherit;"><div class="assignmnt-tab-head"><img src="<?= base_url(); ?>assets_admin/images/icons/' + v['subject_icon'] + '"><h3> ' + v['subject_name'] + ' </h3></div><div class="assignmt-detail" style="overflow-wrap: break-word;">' + v['remark'] + '</div><div class="assignmt-bott"><p>By: ' + v['teacher_name'] + '</p><span>Due Date: ' + v['due_date'] + '</span></div><div class="select-tab"><i class="fas fa-check"></i></div></a></div>'; } else { assign += '<div class="assignment-sub-tab" id="border_' + v['assignment_id'] + '"><a href="#" onClick="get_assginment(' + v['assignment_id'] + ', 0 ,0)" style="text-decoration:none;color:inherit;"><div class="assignmnt-tab-head"><img src="<?= base_url(); ?>assets_admin/images/icons/' + v['subject_icon'] + '"><h3> ' + v['subject_name'] + ' </h3></div><div class="assignmt-detail" style="overflow-wrap: break-word;">' + v['remark'] + '</div><div class="assignmt-bott"><p>By: ' + v['teacher_name'] + '</p><span>Due Date: ' + v['due_date'] + '</span></div></a></div>'; } } else { assign += '<div class="assignment-sub-tab" id="border_' + v['assignment_id'] + '"><a href="#" onClick="get_assginment(' + v['assignment_id'] + ', 0 ,0)" style="text-decoration:none;color:inherit;"><div class="assignmnt-tab-head"><img src="<?= base_url(); ?>assets_admin/images/icons/' + v['subject_icon'] + '"><h3> ' + v['subject_name'] + ' </h3></div><div class="assignmt-detail" style="overflow-wrap: break-word;">' + v['remark'] + '</div><div class="assignmt-bott"><p>By: ' + v['teacher_name'] + '</p><span>Due Date: ' + v['due_date'] + '</span></div></a></div>'; } i++; } else { assign += '<div class="assignment-sub-tab" > No Assignment Available</div>'; } }); $('.assignment-subj').append(assign); $("#border_" + id).css("border-left", "5px solid #032da1"); } }); } function get_assginment(asgn_id, month, year) { $('.assignment-sub-tab').css("border-left", "5px solid #fff"); $("#border_" + asgn_id).css("border-left", "5px solid #032da1"); $('.btn-upload').show(); $('.submit-assignment-text').hide(); $('.assignmt-detail-top').remove(); $('.assignmt-sub-detail').remove(); $('.assignmt-remark-wrap').remove(); $.ajax({ url: '<?php echo base_url() . 'student/get_assignment/' ?>' + asgn_id + '/' + month + '/' + year, type: 'GET', dataType: 'json', success: function(result) { console.log('hello word'); $('.re-upload-btn').hide(); $('.btn-submit').hide(); $('.btn-cancel').hide(); $('.no_data_div').remove(); $('.assgnmt-upload').show(); var assign_details = '<div class="assignmt-detail-top"><div class="assignmt-sub-name"><h5>' + result['subject'][0]['subject_name'] + '</h5><p>By: ' + result['subject'][0]['teacher_name'] + '</p></div><div class="assignmt-date">Due Date : ' + result['subject'][0]['due_date'] + '</div></div><div class="assignmt-sub-detail"><h4 style="overflow-wrap: break-word;">' + result['subject'][0]['subject_name'] + ' assignment essay on: ' + result['subject'][0]['title'] + '</h4><p style="overflow-wrap: break-word;">' + result['subject'][0]['remark'] + '</p></div><input type="hidden" id="asgn_id" name="asgn_id" value="' + result['subject'][0]['assignment_id'] + '">'; if (result['images'] != '') { $('.btn-upload').hide(); // $('.re-upload-btn').show(); $('.re-upload-btn').css('display', 'inline-block'); $('.btn-submit').css('display', 'inline-block'); $('.btn-cancel').css('display', 'inline-block'); } console.log(result['remark_by_teacher']); if (result['remark_by_teacher'].length != 0 || result['remark_by_teacher'].length != "") { if (result['remark_by_teacher'][0]['Flag'] == 2) { console.log('images blank'); $('.btn-upload').hide(); // $('.re-upload-btn').show(); $('.re-upload-btn').css('display', 'none'); $('.btn-submit').css('display', 'none'); $('.btn-cancel').css('display', 'none'); $('.submit-assignment-text').show(); } } if (result['remark_by_teacher'].length != 0 && result['remark_by_teacher'].length != "" && result['remark_by_teacher'][0]['remark'] != '') { $('.re-upload-btn').css('display', 'none'); $('.btn-submit').css('display', 'none'); $('.btn-cancel').css('display', 'none'); var assignmt_remark = '<div class="assignmt-remark-wrap"><div class="assignmt-remark-head"><h5>Remarks</h5><p>By:<span> ' + result['subject'][0]['teacher_name'] + '</span></p></div><div class="remark-detail">' + result['remark_by_teacher'][0]['remark'] + '</div>'; $('.submit-assignment-text').hide(); } else { var assignmt_remark = ''; } var images = ''; var img = Object.keys(result['images']).length; var owl_img = ''; $('.modal-content').html('<div id="testing" class="owl-carousel"></div>'); for (var i = 2; i <= img + 1; i++) { images += '<div class="uploaded-img uploaded_img" data-toggle="modal" data-target="#viewAssignment"><img src="<?= base_url(); ?>' + result['images'][i] + '" id="upImage"></div>'; if (i == 2) { $(".owl-carousel").append('<div class="item active"><img src="<?= base_url(); ?>' + result['images'][i] + '" alt="" /></div>'); } else { $(".owl-carousel").append('<div class="item"><img src="<?= base_url(); ?>' + result['images'][i] + '" alt="" /></div>'); } } images += '<div id="loader" style="display:none;"></div>'; $('.assignment-detail').prepend(assign_details); if (assignmt_remark != '') { $('.assignmt-remark').css('display', 'block'); $('.assignmt-remark').append(assignmt_remark); } else { $('.assignmt-remark').css('display', 'none'); } // $('.assignmt-remark').append(assignmt_remark); $('.uploaded-assignmnts').html(images); var owl = $("#testing"); owl.owlCarousel({ nav: true, loop: true, slideSpeed: 300, paginationSpeed: 400, items: 1, itemsDesktop: false, itemsDesktopSmall: false, itemsTablet: false, itemsMobile: false }); }, error: function(jqXHR, status, err) { $('.assgnmt-upload').hide(); $('.no_data_div').remove(); $('.assignment-detail').append('<div class="no_data_div"><div class="No_data"><span><h5>No Assignments</h5></span></div></div>'); } }); } $('#imgInp').on('change', function() { var id = 'imgInp'; var count = 1; $('#loader').show(); upload_images_multiple(id, count); }); $('#re-imgInp').on('change', function() { var id = 're-imgInp'; var count = 2; $('#loader').show(); upload_images_multiple(id, count); }); function upload_images_multiple(id, count) { var file_img = $('#' + id)[0].files; var error = ''; var form_data = new FormData(); for (var i = 0; i < file_img.length; i++) { var name = file_img[i].name; var extension = name.split('.').pop().toLowerCase(); if (jQuery.inArray(extension, ['gif', 'png', 'jpg', 'jpeg']) == -1) { error += "Upload Only Images"; $('.btn-submit').css('display', 'none'); alert(error); return; } else { form_data.append("images[]", file_img[i]); } } if (count == 1) { $('.btn-upload').hide(); // $('.re-upload-btn').show(); $('.btn-submit').css('display', 'inline-block'); $('.re-upload-btn').css('display', 'inline-block'); $('.btn-cancel').css('display', 'inline-block'); } if (count == 2) { $('.submit-btn').hide(); } $('.uploaded_img').remove(); // var file_img = $('#' + id)[0].files; // var error = ''; // form_data = new FormData(); // for (var i = 0; i < file_img.length; i++) { // var name = file_img[i].name; // var extension = name.split('.').pop().toLowerCase(); // if (jQuery.inArray(extension, ['gif', 'png', 'jpg', 'jpeg']) == -1) { // error += "Invalid" + count + "Image File"; // alert(error); // return; // } else { // form_data.append("images[]", file_img[i]); // } // } var asgn_id = $('#asgn_id').val(); form_data.append("asgn_id", asgn_id); if (error == '') { $.ajax({ url: '<?php echo base_url() . 'student/assignment_image' ?>', method: 'POST', data: form_data, cache: false, contentType: false, processData: false, beforeSend: function() { // $().html("<label class='text success'>Uploading.....</label>") }, success: function(result) { var obj = JSON.parse(result); console.log(obj); //console.log(result); var image = '', owl_img = ''; var count = 1; $('.modal-content').html('<div id="testing" class="owl-carousel"></div>'); $.each(obj, function(index, value) { image += '<div class="uploaded-img uploaded_img" data-toggle="modal" data-target="#viewAssignment"><img src="' + value + '" id="upImage"></div>'; if (count == 1) { $(".owl-carousel").append('<div class="item active"><img src="' + value + '" alt="" /></div>'); // owl_img += '<div class="item "><img src="'+ value +'" alt="" class="img-fluid w-100" /></div>'; } else { $(".owl-carousel").append('<div class="item"><img src="' + value + '" alt="" /></div>'); // owl_img += '<div class="item"><img src="'+ value +'" alt="" class="img-fluid w-100"/></div>'; } count++; }); $('.uploaded-assignmnts').append(image); $('#loader').hide(); var owl = $("#testing"); owl.owlCarousel({ nav: true, loop: true, slideSpeed: 300, paginationSpeed: 400, items: 1, itemsDesktop: false, itemsDesktopSmall: false, itemsTablet: false, itemsMobile: false }); // $('.owl-carousel.slider').html(owl_img); // console.log($('.owl-carousel.slider')); } }); } else { alert("Please add only images...!"); } // get_assignment_list(); } $(function() { $("#assignCal").datepicker({ numberOfMonths: 1, changeYear: true, changeMonth: true, showOtherMonths: true, onChangeMonthYear: function(year, month) { var m = month; var y = year; var asgn = '0'; get_assignment_list(m, y); get_assginment(asgn, m, y); } }); }); $('#nepali-datepicker').nepaliDatePicker({ language : 'english', ndpYear: true, ndpMonth: true, ndpYearCount: 10, language : 'english', onChange: function(data) { console.log(data) var m = data.object.month; var y = data.object.year; var asgn = '0'; get_assignment_list(m, y); get_assginment(asgn, m, y); } }); $('#asgn_submit').click(function() { var asgn_id = $('#asgn_id').val(); $.ajax({ url: '<?php echo base_url() . 'student/assignment_class_submit/' ?>' + asgn_id, type: 'POST', dataType: 'json', success: function(result) { if (result) { var m = '0', y = '0'; $('.modal').modal('toggle'); get_assginment(asgn_id, m, y); } } }); }); $('.btn-cancel').click(function() { var asgn_id = $('#asgn_id').val(); $.ajax({ url: '<?php echo base_url() . 'student/assignment_class_cancel/' ?>' + asgn_id, type: 'POST', dataType: 'json', success: function(result) { if (result) { var m = '0', y = '0'; get_assginment(asgn_id, m, y); } } }); }); </script>