ปรับปรุงเพิ่มรายการสรุปรายชื่อ สาย ขาด ลา ป่วย
| # แก้ไขให้มีรายงานรายชื่อนักเรียน ขาด ลา ป่วย สาย | |
| # I. แก้ไขไฟล์ js_main.html | |
| 1. ค้นหาคำว่า => ทำให้ฟังก์ชั่นต่างๆ | |
| 2. นำโค้ดด้านล่างว่างไว้ด้านบนของบรรทัด | |
| $("#btn-reportName").on("click",function() { | |
| loadingStart() | |
| dayprint = daySelect | |
| $('#dateDisplayMissing').html(daySelect); | |
| google.script.run.withSuccessHandler(showDataMissing).reportMissing(daySelect) | |
| }) | |
| 3. ค้นหาคำว่า => วันที่ หน้าสรุปรวม | |
| 4. นำโค้ดด้านล่างว่างไว้ด้านใต้บรรทัด }); ของ $("#datepickerTotal").datepicker | |
| /** วันที่ หน้าสรุปรายชื่อนักเรียนขาดเรียน ลา มาสาย */ | |
| $("#datepickerMissing").datepicker({ | |
| language:'th-th', | |
| format:'dd MM yyyy', | |
| autoclose: true, | |
| }); | |
| # II. แก้ไขไฟล์ index.html | |
| 1. ค้นหาคำว่า => ส่วนของแถบเมนูด้านล่าง | |
| 2. นำโค้ดด้านล่างนี้ว่างไว้ด้านบนของบรรทัด | |
| <!-- /********* หน้ารายชื่อนักเรียนไม่มาเรียน *********/ --> | |
| <section id="p8" class = 'container card p-3 mt-5' style="display:none;"> | |
| <div class="container py-3 my-auto"> | |
| <?!=include('reportMissing')?> | |
| <!-- ปุ่มพิมพ์รายงาน --> | |
| <div class=" m-3"> | |
| <button class="btn btn-outline-dark" id="PrintName"> | |
| <i class="fa-solid fa-print"></i> พิมพ์รายชื่อนักเรียนไม่มาเรียน | |
| </button> | |
| </div> | |
| <!-- ตารางสรุปรายชื่อ --> | |
| <table id="add-list-missing" class="table table-bordered text-center" style="width:100%"> | |
| </table> | |
| <!-- ส่วนพิมพ์สรุปรายชื่อ --> | |
| <?!=include('print2')?> | |
| <form id="formPrint2 "> | |
| <div class="text-center" id="dvContainer1" style="display:none"> | |
| <!-- ตารางพิมพ์รายงาน --> | |
| <div id="add-list-missing1" class="display nowrap" width="100%"></div> | |
| </div> | |
| </form> | |
| </div> | |
| </section> | |
| # III. แก้ไขไฟล์ main.html | |
| นำโค้ดด้านล่างนี้ว่างไว้ต่อจากบรรทัดสุดท้าย หรือ ตามตำแหน่งที่ต้อง | |
| <button id = 'btn-reportName' class="btn btn-primary" type="button" onclick="changePage('p8')"> สรุปรายชื่อนักเรียนไม่มาเรียน </button> | |
| # IV. สร้างไฟล์ HTML ตั้งชื่อ reportMissing นำโค้ดด้านล่างไปว่าง | |
| <h3 class='text-center mt3'>สรุปนักเรียนขาดเรียน</h3> | |
| <div class='text-center mt3'> | |
| <span class='text-center pe-3'>วันที่</span> | |
| <span class='text-primary' id="dateDisplayMissing"></span> | |
| </div> | |
| <div class='row justify-content-center text-center mt-3'> | |
| <div class="col-md-auto py-auto mb-3"> | |
| <div class="col-10 mx-auto"> | |
| <div class="input-group"> | |
| <div class="input-group-text"><i class="fa-solid fa-calendar-check"></i></div> | |
| <input class="form-control text-center bg-light bg-opacity-25" type="text" name="datepickerMissing" id="datepickerMissing" placeholder="เลือก วัน เดือน ปี" readonly/> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| /******* สร้างตารางสรุปผลการมาเรียนทั้งหมด *******/ | |
| $("#datepickerMissing").change(function(){ | |
| loadingStart() | |
| let daySelect = $(this).val() | |
| dayprint = daySelect | |
| $('#dateDisplayMissing').html(daySelect); | |
| $(this).val('') | |
| google.script.run.withSuccessHandler(showDataMissing).reportMissing(daySelect) | |
| }); | |
| function showDataMissing(data){ | |
| console.log(data.length) | |
| let result = ""; | |
| result += "<table style='width:100%'>"; | |
| result += "<thead><tr class='bg-primary text-white'><th>ระดับชั้น</th><th>ขาดเรียน</th><th> ลาหยุด </th><th> ลาป่วย </th><th> มาสาย </th></tr></thead>"; | |
| if(data.length > 0){ | |
| for(let i = 0; i < data.length; i++){ | |
| let classroom = data[i][0] | |
| let name1 = data[i][1][0] | |
| let name2 = data[i][2][0] | |
| let name3 = data[i][3][0] | |
| let name4 = data[i][4][0] | |
| result += "<tr>"+ | |
| "<td class = 'text-start align-top ps-2'>"+classroom+"</td>"+ | |
| "<td class = 'text-start align-top ps-2'>"; | |
| if(name1 != ''){ | |
| for(a = 0; a< name1.length; a++){ | |
| result += a+1 +". "+name1[a]+"<br>"; | |
| } | |
| }else{ | |
| result += 'ไม่มี'; | |
| } | |
| result += "</td>"+ | |
| "<td class = 'text-start align-top ps-2'>"; | |
| if(name2 != ''){ | |
| for(b =0; b< name2.length; b++){ | |
| result += b+1 +". "+name2[b]+"<br>"; | |
| } | |
| }else{ | |
| result += 'ไม่มี'; | |
| } | |
| result += "</td>"+ | |
| "<td class = 'text-start align-top ps-2'>"; | |
| if(name4 != ''){ | |
| for(d = 0; d < name4.length; d++){ | |
| result += d+1 +". "+name4[d]+"<br>"; | |
| } | |
| }else{ | |
| result += 'ไม่มี'; | |
| } | |
| result += "</td>"+ | |
| "<td class = 'text-start align-top ps-2'>"; | |
| if(name3 != ''){ | |
| for(c =0; c< name3.length; c++){ | |
| result += c+1 +". "+name3[c]+"<br>"; | |
| } | |
| }else{ | |
| result += 'ไม่มี'; | |
| } | |
| result += "</td></tr>"; | |
| } | |
| }else{ | |
| result += "<tr><th colspan='5'>ไม่มีข้อมูล</th></tr>"; | |
| } | |
| result += "</table>"; | |
| $('#add-list-missing').html(result); | |
| $('#add-list-missing1').html(result); | |
| loadingEnd() | |
| } | |
| </script> | |
| # V. สร้างไฟล์ HTML ตั้งชื่อ print2 นำโค้ดด้านล่างไปว่าง | |
| <script> | |
| /*************** Print document to pdf with javascript ***************/ | |
| /** Ref: http://qawithexperts.com/article/javascript/easy-way-to-convert-html-to-pdf-using-javascript/335 **/ | |
| $("#PrintName").on("click", function () { | |
| let divContents = $("#add-list-missing1").html(); | |
| let printWindow = window.parent.open('', '', ''); | |
| printWindow.document.write(''+ | |
| '<html><head><title>รายงานวันที่ '+dayprint+'</title>'+ | |
| '<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">'+ | |
| '<style> '+ | |
| '@import url("https://fonts.googleapis.com/css2?family=K2D&family=Sarabun&display=swap");'+ | |
| 'body{font-family: Sarabun}'+ | |
| 'table, th, td {border: 1px solid black; border-collapse: collapse; font-family: Sarabun; font-size:0.8rem; text-align:center;}'+ | |
| '</style> '+ | |
| '</head>'+ | |
| '<body >'+ | |
| //******* เปลี่ยน logo หัวกระดาษ ********** | |
| '<center><img src="https://semicon.github.io/img/taksilarLogo.png" style="height:70px">'+ | |
| '<p><b>สรุปรายชื่อนักเรียนไม่มาเรียน</b><br>'+ | |
| 'ประจำวันที่ '+dayprint+'</p></center>'+ | |
| '<div class="mx-3">'+divContents+'</div>'+ | |
| '<center><br><br>...............................</center>'+ | |
| //******* เปลี่ยน ชื่อผู้รายงาน ********** | |
| '<center>(นายสมพงษ์ ใจดี)</center>'+ | |
| '<center>ผู้รายงาน</center>'+ | |
| '</body></html>'); | |
| printWindow.document.close(); | |
| setTimeout(function(){ | |
| printWindow.print(); | |
| }, 2000); | |
| }); | |
| </script> | |
| # VI. แก้ไขไฟล์ code.gs นำโค้ดด้านล่างไปว่างต่อจากบรรทัดสุดท้าย | |
| /******************************************************************** */ | |
| function reportMissing(daySelect){ | |
| //daySelect ='04 พฤศจิกายน 2565' | |
| let colNumb = 0 | |
| let output = [] | |
| const sheets = sheetCheckin.getSheets(); | |
| for (let i=3; i < sheets.length; i++) {//change*********เริ่มจากชีต 3 | |
| let lastRow = sheets[i].getLastRow() | |
| let lastCol = sheets[i].getLastColumn() | |
| let sheet_name = sheets[i].getName() | |
| let out =[] | |
| let status = '' | |
| let nameStd = '' | |
| let nameStd_absence =[] | |
| let nameStd_tell =[] | |
| let nameStd_late =[] | |
| let nameStd_sick =[] | |
| for(let col = 6; col < lastCol+1; col++){ | |
| let colvalue = sheets[i].getRange(1,col).getDisplayValues() | |
| //Logger.log("colvalue:"+colvalue) | |
| if(colvalue == daySelect){ | |
| colNumb = col | |
| for(let j=2; j < lastRow+1; j++){ | |
| nameStd = sheets[i].getRange(j,3).getDisplayValue(); | |
| status = sheets[i].getRange(j,colNumb).getDisplayValue(); | |
| if(status == 'ขาด'){ | |
| nameStd_absence.push(nameStd) | |
| } | |
| if(status == 'ลา'){ | |
| nameStd_tell.push(nameStd) | |
| } | |
| if(status == 'ป่วย' ){ | |
| nameStd_sick.push(nameStd) | |
| } | |
| if(status == 'สาย'){ | |
| nameStd_late.push(nameStd) | |
| } | |
| } | |
| //รายงานเฉพาะห้องที่กรอกข้อมูลแล้ว | |
| out.push(sheet_name,[nameStd_absence],[nameStd_tell],[nameStd_late],[nameStd_sick]) | |
| output.push(out) | |
| //Logger.log("out:"+output) | |
| } | |
| } | |
| } | |
| //Logger.log("OK") | |
| return output | |
| } | |
| # VII. ล็อกวันที่ห้ามกรอกข้อมูลล่วงหน้า แก้ไขไฟล์ js_main.html | |
| 1. ค้นหาคำว่า => ฟังก์ชั่นเลือก วัน เดือน ปี จากปฎิทิน หรือ $("#datepicker").change | |
| 2. นำโค้ดด้านล่างนี้ว่างแทนของเดิมทั้งหมด | |
| $("#datepicker").change(function(){ | |
| //console.log('date:'+$(this).val()) | |
| const currentDate = new Date().getDate() | |
| const currentMonth = new Date().getMonth() | |
| const currentYear = new Date().getFullYear()+543 | |
| const selectedDate = $(this).val().split(" ") | |
| const monthTh = ["มกราคม","กุมภาพันธ์","มีนาคม","เมษายน","พฤษภาคม","มิถุนายน","กรกฎาคม","สิงหาคม","กันยายน","ตุลาคม","พฤศจิกายน","ธันวาคม"] | |
| let indx | |
| monthTh.forEach((item, index) => { | |
| if(item == selectedDate[1]){indx = index} | |
| }); | |
| if(Number(selectedDate[2]) < currentYear){ | |
| $('#add-content').html(''); | |
| $('select[id="menuList"]').val(""); | |
| $("#xmenuList").show(); | |
| $("#btn-submit").hide(); | |
| }else if(Number(selectedDate[2]) <= currentYear && indx < currentMonth){ | |
| $('#add-content').html(''); | |
| $('select[id="menuList"]').val(""); | |
| $("#xmenuList").show(); | |
| $("#btn-submit").hide(); | |
| }else if(Number(selectedDate[2]) <= currentYear && indx <= currentMonth && Number(selectedDate[0]) <= currentDate ){ | |
| $('#add-content').html(''); | |
| $('select[id="menuList"]').val(""); | |
| $("#xmenuList").show(); | |
| $("#btn-submit").hide(); | |
| }else{ | |
| $(this).val("") | |
| Swal.fire( | |
| 'ขออภัย !', | |
| 'ไม่สามารถทำรายการล่วงหน้าได้ ', | |
| 'info', | |
| wsName = '' | |
| ) | |
| } | |
| }); |
view rawupdateZoom04112565 hosted with ❤ by GitHub
ที่มาครูสมชายคัดมาจาก : {getButton} $text={อ้างอิงที่มา} $icon={link} $color={red}
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.
I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
THANKS FOR VISITING thumariya.blogspot
Have a nice day!
-------------------------- -------------------------
>>>ลองตรวจสอบหากพบข้อผิดพลาด โปรดแจ้งให้เราทราบโดยแสดงความคิดเห็น
ฉันจะพยายามระดับของฉันให้ดีที่สุดเพื่อแก้ไขปัญหา
ขอบคุณสำหรับการเยี่ยมชม thumariya.blogspot
ขอให้เป็นวันที่ดี!
-------------------------- -------------------------
{fullWidth}