หากต้องการความสมบูรณ์ให้แก้ไขไฟล์ที่โหลดไปดังนี้
1. แก้ไขโหลดค้างหลังบันทึกรายชื่อ update 27/12/2566
แก้ไขไฟล์ code.gs
แกไขไฟล์ js_main
ส่วนของแก้ไขการมาเรียน
2. แก้ไขเพื่อเพิ่มรายงานรายชื่อนักเรียน ขาด ลา ป่วย สาย
Update 12/11/2565
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # แก้ไขให้มีรายงานรายชื่อนักเรียน ขาด ลา ป่วย สาย | |
| # 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 = '' | |
| ) | |
| } | |
| }); |