Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/code.gs

Created May 7, 2021 00:46
Show Gist options
  • Save neno-tech/d325370533be1265e3e9c5333101d605 to your computer and use it in GitHub Desktop.
Save neno-tech/d325370533be1265e3e9c5333101d605 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
code.gs
function doGet(e) {
var template = HtmlService.createTemplateFromFile('xxx')
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)
.addMetaTag('viewport', 'width=device-width , initial-scale=1')
}
function getCode(code) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var allss =ss.getSheets();
for (var i in allss){
var ws =ss.getSheets()[i];
var data=ws.getDataRange().getDisplayValues().filter(row=>{
return row[0]==code
})
Logger.log(data)
if(data.length>0) break;
}
var stdCodesList = data.map (function(r) { return r[0]; });
var stdList = data.map(function(r) {
return [`
<table class="table table-bordered">
<thead class="thead-light">
<tr>
<th scope="col"><center>เลขประจำตัวนักเรียน</center></th>
<th scope="col"><center>ชื่อ - สกุล</center></th>
<th scope="col"><center>ระดับชั้นเรียน</center></th>
<th scope="col"><center>ห้อง</center></th>
<th scope="col"><center>ครูที่ปรึกษา</center></th>
</tr>
</thead>
<tbody>
<tr>
<td>${r[1]}</td> <td>${r[2]}</td> <td>${r[3]}</td> <td>${r[4]} </td>
<td><center><a target="_blank" href="${r[5]}" class="p-2 mb-2 bg-success text-white"><i class="fas fa-user-tie"></i> รอเรียกตัว</a></center>
</td>
</td>
</tr>
</tbody>
</table>
`];
});
var position = stdCodesList.indexOf(code);
if(position > -1){
return stdList[position];
} else {
return '*ไม่พบข้อมูล';
}
}
function getURL(){
return ScriptApp.getService().getUrl()
}
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<base target="_top">
<!--font awesome-->
<script src="https://kit.fontawesome.com/ad42651166.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Sarabun' rel='stylesheet' type='text/css'>
<style type='text/css'>
@font-face {
font-family: 'Sarabun';
}
body { font-family: 'Sarabun' !important; }
::placeholder {
color: peachpuff;
font-size: 16px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
<div class="container">
<a class="navbar-brand" href="#"></a>
<h4 class="prompt text-white"><img src="https://drive.google.com/uc?id=1SQSVYCkY46_eqDIWDFvxfovotPAGnqMy" weight="60" height="60">ระบบตรวจสอบรายชื่อนักเรียน </h4>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav mr-auto w-100 justify-content-end">
<li class="nav-item">
<a class="nav-link" href="https://www.apivat.com/" target="_blank"><i class="fas fa-home mr-2"></i> เว็บไซต์ออนไลน์ครูอภิวัฒน์</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="alert alert-warning" role="alert" background-color: #ffed00>
<h6 class="font-weight-bold"><i class="fas fa-book-reader "></i>
วิธีการค้นหาข้อมูล</h6>
<p>1. ให้ผู้สมัครพิมพ์รหัสประจำตัวประชาชนจำนวน 13 หลัก ลงในช่องค้นหา
<br>2. รอสักครู่ ระบบจะแสดงข้อมูลให้โดยอัตโนมัต หากมีปัญหาติดต่อครูอภิวัฒน์</p>
</div>
<br>
<div class="container">
<div class="row">
<div class="col">
<!-- 1 of 3 -->
</div>
<div class="col-md-auto">
<div class="card border-primary">
<h5 class="card-header text-white bg-primary"><i class="far fa-address-card mr-3"></i>พิมพ์เลขบัตรประชาชน 13 หลัก</h5>
<div class="card-body"><input class="form-control form-control-lg" type="text" id="idStudent" placeholder="พิมพ์หมายเลขบัตรประชาชน" maxlength="13"></div>
</div>
</div>
<div class="col">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md">
</div>
<div class="col-md">
<br>
</div>
<div class="col-md">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
</div>
<div class="col-5">
<center><span class="badge badge-primary">ผลการค้นหาข้อมูล</span></center>
<center> <input type="button" class = "btn btn-success btn-lg" id="home-btn" value = "กลับหน้าหลัก" onclick ="Home()" ></center>
</div>
<!-- Result Header End -->
<br>
<div class="col">
</div>
</div>
<div class="row">
<div class="col">
</div>
<div class="col-md-auto">
<br>
<div class="container">
<div id="search">
<textarea style="border:none;resize:none;" id="search" readonly></textarea>
</div>
</div>
</div>
<div class="col">
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="container">
<footer><br>
<div class="bg-danger">
<div class="container">
<br>
<div class="row">
<div class="clo-lg-3 col-md-auto">
<h6 class="prompt text-white"><i class="fa fa-user-circle-o mr-3"></i>นายอภิวัฒน์ วงศ์กัณหา โรงเรียนอภิวัฒน์สอนสร้างสื่อวิทยาคม</h6>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- ปิดแทก Footer -->
<script>
document.getElementById("idStudent").addEventListener("input", findCode);
function findCode() {
var code = document.getElementById("idStudent").value;
if(code.length === 13){
google.script.run.withSuccessHandler(updateData).getCode(code);
}
}
function updateData(data) {
if(data == '*ไม่พบข้อมูล'){
Swal.fire({
position: 'center',
icon: 'error',
title: 'เสียใจด้วย..ไม่พบข้อมูลของคุณ',
showConfirmButton: true,
//timer: 1500
})
document.getElementById("search").innerHTML = data;
M.updateTexfields();
}else{
Swal.fire({
position: 'center',
icon: 'success',
title: 'ยินดีด้วย..พบข้อมูลของคุณ',
showConfirmButton: false,
timer: 2000
})
document.getElementById("home-btn").style.visibility="visible"
document.getElementById("search").innerHTML = data;
M.updateTexfields();
}
}
window.onload = function(){document.getElementById("home-btn").style.visibility="hidden"}
function Home(){
google.script.run.withSuccessHandler(function(url){
window.open(url,'_top')
}).getURL()
}
</script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment