Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/code.gs

Created December 3, 2021 09:17
Show Gist options
  • Save neno-tech/bed2f9351ff36b1afcd879cbafde0fd0 to your computer and use it in GitHub Desktop.
Save neno-tech/bed2f9351ff36b1afcd879cbafde0fd0 to your computer and use it in GitHub Desktop.
Download ZIP
เว็บแอปเช็คการส่งงานของนักเรียน
Raw
code.gs
function doGet(e) {
return HtmlService.createTemplateFromFile('index').evaluate();
}
var ss= SpreadsheetApp.getActiveSpreadsheet();
function getStudents(){
var studentValues = ss.getSheets()[0].getDataRange().getValues();
return studentValues;
}
function getWork(student){
var returnData = [];
var data = ss.getSheets()[1]
var getLastRow = data.getLastRow();
for(i = 2; i <= getLastRow; i++){
if(student == data.getRange(i, 1).getValue()){
returnData.push([data.getRange(i,2).getValue(),data.getRange(i,3).getValue(),data.getRange(i,4).getValue(),data.getRange(i,5).getValue(),data.getRange(i,6).getValue(),data.getRange(i,7).getValue(),data.getRange(i,8).getValue()])
}
}
return returnData;
}
function processForm(formObject){
var result = "";
if(formObject.searchtext){
result = search(formObject.searchtext);
}
return result;
}
function search(searchtext){
var data = ss.getSheets()[0].getDataRange().getValues();
data.shift()
var ar = [];
data.forEach(function(f) {
// if (~f.indexOf(searchtext)){
if (f[0].indexOf(searchtext) >-1) {
ar.push(f);
}
});
return ar;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<style>body{font-family: 'Prompt'}
</style>
<script>
$( document ).ready(function() {
getData();
});
function getData() {
google.script.run.withSuccessHandler(function(ar){
var displayTable = '';
displayTable += '<table class=\"table\" id=\"mainTable\" >';
displayTable += "<tr>";
displayTable += "<th>เลขประจำตัว</th>";
displayTable += "<th>ชื่อ สกุล</th>";
displayTable += "<th>ชั้น</th>";
displayTable += "<th>เลขที่</th>";
displayTable += "<th>รายวิชา</th>";
displayTable += "<th>เช็คการส่งงาน</th>";
displayTable += "</tr>";
ar.forEach(function(item, index){
if(index > 0){
displayTable += "<tr>";
displayTable += "<td>"+item[0]+"</td>";
displayTable += "<td>"+item[1]+"</td>";
displayTable += "<td>"+item[2]+"</td>";
displayTable += "<td>"+item[3]+"</td>";
displayTable += "<td>"+item[4]+"</td>";
displayTable += "<td><input type=\"button\" value=\"เช็คการส่งงาน\" class=\"btn btn-primary\" ";
displayTable += " onclick=\"showWork('"+item[1]+"')\" /></td>";
displayTable += "</tr>";
}
});
displayTable += '</table>';
document.getElementById("rowdata").innerHTML = displayTable;
}).getStudents();
}
function showWork(student){
google.script.run.withSuccessHandler(function(ar){
var displayTable = "<div class=\"modal\"tabindex=\"-1\" role=\"dialog\" id=\"myModal\">";
displayTable += "<div class=\"modal-dialog modal-lg\" role=\"document\">";
displayTable += "<div class=\"modal-content\" >";
displayTable += "<div class=\"modal-header bg-primary\">";
displayTable += "<h5 class=\"modal-title text-white\" id=\"exampleModalLongTitle\">ชื่อ สกุล: "+ student + "</h5>";
displayTable += "<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">";
displayTable += "<span aria-hidden=\"true\">×</span>";
displayTable += "</button>";
displayTable += "</div>";
displayTable += "<div class=\"modal-body\">";
displayTable += "<div class=\"container-fluid\">";
displayTable += "<div class=\"row\">";
displayTable += "<div class=\"col\" style=\"font-weight: bold\" >งานที่ 1</div>";
displayTable += "<div class=\"col\" style=\"font-weight: bold\" >งานที่ 2</div>";
displayTable += "<div class=\"col\" style=\"font-weight: bold\" >งานที่ 3</div>";
displayTable += "<div class=\"col\" style=\"font-weight: bold\" >งานที่ 4</div>";
displayTable += "<div class=\"col\" style=\"font-weight: bold\" >งานที่ 5</div>";
displayTable += "<div class=\"col\" style=\"font-weight: bold\" >งานที่ 6</div>";
displayTable += "<div class=\"col\" style=\"font-weight: bold\" >งานที่ 7</div>";
displayTable += "</div>";
ar.forEach(function(item, index)
{
displayTable += "<div class=\"row\">";
displayTable += "<div class=\"col\">"+item[0]+"</div>";
displayTable += "<div class=\"col\">"+item[1]+"</div>";
displayTable += "<div class=\"col\">"+item[2]+"</div>";
displayTable += "<div class=\"col\">"+item[3]+"</div>";
displayTable += "<div class=\"col\">"+item[4]+"</div>";
displayTable += "<div class=\"col\">"+item[5]+"</div>";
displayTable += "<div class=\"col\">"+item[6]+"</div>";
displayTable += "</div>";
});
displayTable += "</div>";
displayTable += "</div>";
displayTable += "</div>";
displayTable += "</div>";
displayTable += "</div>";
$("#gradeModal").html(displayTable);
$("#myModal").modal();
}).getWork(student);
}
</script>
</head>
<body>
<div class="container">
<div class="card mt-3">
<div class="card-header bg-primary text-white text-center">
<h3>เว็บแอปเช็คการส่งงานของนักเรียน</h3>
</div>
<div class="card-body">
<div id="rowdata"></div>
<div id="gradeModal"></div>
</div>
</div>
</div>
</body>
</html>
Raw
search.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://ltschool.web.app/css/Bootstrapcolor.css" rel="stylesheet" type="text/css">
<script src="https://kit.fontawesome.com/ad42651166.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<style>body{font-family: 'Prompt'}
#loader {
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #000000;
border-bottom: 6px solid #000000;
width: 40px;
height: 40px;
-webkit-animation: spin 0.5s linear infinite;
animation: spin 0.5s linear infinite;
visibility:hidden;
}
@-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>
function showWork(student){
document.getElementById("loader").style.visibility = "visible";
google.script.run.withSuccessHandler(function(ar){
var displayTable = "<div class=\"modal\"tabindex=\"-1\" role=\"dialog\" id=\"myModal\">";
displayTable += "<div class=\"modal-dialog modal-lg\" role=\"document\">";
displayTable += "<div class=\"modal-content\" >";
displayTable += "<div class=\"modal-header bg-success\">";
displayTable += "<h5 class=\"modal-title text-white\" id=\"exampleModalLongTitle\">ชื่อ สกุล: "+ student + "</h5>";
displayTable += "<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">";
displayTable += "<span aria-hidden=\"true\">×</span>";
displayTable += "</button>";
displayTable += "</div>";
displayTable += "<div class=\"modal-body\">";
displayTable += "<div class=\"container-fluid\">";
displayTable += "<div class=\"row\">";
displayTable += "<div class=\"col\" style=\"font-weight: bold\" >งานที่ 1</div>";
displayTable += "<div class=\"col\" style=\"font-weight: bold\" >งานที่ 2</div>";
displayTable += "<div class=\"col\" style=\"font-weight: bold\" >งานที่ 3</div>";
displayTable += "<div class=\"col\" style=\"font-weight: bold\" >งานที่ 4</div>";
displayTable += "<div class=\"col\" style=\"font-weight: bold\" >งานที่ 5</div>";
displayTable += "<div class=\"col\" style=\"font-weight: bold\" >งานที่ 6</div>";
displayTable += "<div class=\"col\" style=\"font-weight: bold\" >งานที่ 7</div>";
displayTable += "</div>";
ar.forEach(function(item, index)
{
displayTable += "<div class=\"row\">";
displayTable += "<div class=\"col\">"+item[0]+"</div>";
displayTable += "<div class=\"col\">"+item[1]+"</div>";
displayTable += "<div class=\"col\">"+item[2]+"</div>";
displayTable += "<div class=\"col\">"+item[3]+"</div>";
displayTable += "<div class=\"col\">"+item[4]+"</div>";
displayTable += "<div class=\"col\">"+item[5]+"</div>";
displayTable += "<div class=\"col\">"+item[6]+"</div>";
displayTable += "</div>";
});
displayTable += "</div>";
displayTable += "</div>";
displayTable += "</div>";
displayTable += "</div>";
displayTable += "</div>";
$("#gradeModal").html(displayTable);
$("#myModal").modal();
document.getElementById("loader").style.visibility = "hidden";
}).getWork(student);
}
function handleFormSubmit(formObject) {
event.preventDefault();
google.script.run.withSuccessHandler(createTable).processForm(formObject);
document.getElementById("loader").style.visibility = "visible";
document.getElementById("search-form").reset();
}
//สร้างตารางและข้อมูลในตาราง
function createTable(dataArray) {
document.getElementById("loader").style.visibility = "hidden";
if(dataArray && dataArray !== undefined && dataArray.length != 0){
var displayTable = "<table class='table table-sm table-striped table-hover' id='dtable'>"+
"<thead style='white-space: nowrap'>"+
"<tr>"+
"<th scope='col'>เลขประจำตัว"+
"<th scope='col'>ชื่อ สกุล</th>"+
"<th scope='col'>ชั้น</th>"+
"<th scope='col'>เลขที่</th>"+
"<th scope='col'>รายวิชา</th>"+
// "<th scope='col'>เช็คการส่งงาน</th>"+
"</tr>"+
"</thead>";
displayTable += "<tr>";
displayTable += "<td>"+dataArray[0][0]+"</td>"
displayTable += "<td>"+dataArray[0][1]+"</td>"
displayTable += "<td>"+dataArray[0][2]+"</td>"
displayTable += "<td>"+dataArray[0][3]+"</td>"
displayTable += "<td>"+dataArray[0][4]+"</td>"
displayTable += "<td><input type=\"button\" value=\"เช็คการส่งงาน\" class=\"btn btn-info\" ";
displayTable += " onclick=\"showWork('"+dataArray[0][1]+"')\" /></td>";
displayTable += "</tr>";
displayTable += "</table>";
var div = document.getElementById('search-displayTables');
div.innerHTML = displayTable;
}else{
var div = document.getElementById('search-displayTables');
//div.empty()
div.innerHTML = "ไมพบข้อมูลที่ค้นหา!";
}
}
</script>
</head>
<body>
<div class="container">
<div class="card mt-3">
<div class="card-header bd-pink-500 text-white text-center">
<h3><i class="fas fa-user-check"></i> นักเรียนเช็คการส่งงานกับครูผู้สอน นายอภิวัฒน์ วงศ์กัณหา</h3>
</div>
<div class="card-body">
<form class="row justify-content-center mb-3" id="search-form" onsubmit="handleFormSubmit(this)">
<div class="col-auto">
<div class="input-group">
<div class="input-group-text">กรอกเลขประจำตัวนักเรียน</div>
<input type="text" class="form-control" name="searchtext" placeholder="เลขประจำตัว">
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary " id="searchBtn"><i class="fas fa-search"></i> ค้นหา</button>
</div>
<div class="col-auto">
<center><div id="loader"></div> </center>
</div>
</form>
<div id="gradeModal"></div>
<div id="search-displayTables" class="table-responsive">
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment