Skip to content

Instantly share code, notes, and snippets.

@krooluang
Last active May 14, 2023 04:35
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save krooluang/eacb0270c7f71c638f2472191eb71eda to your computer and use it in GitHub Desktop.
Save krooluang/eacb0270c7f71c638f2472191eb71eda to your computer and use it in GitHub Desktop.
Quick search no time
<!-- Modal -->
<div class="modal fade" id="creditModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="container text-center">
พัฒนาโดย <a class="text-primary" href="https://examblog64.krooluang.com/" target="_blank">Examblog</a>
<div class="text-center my-2 text-danger">Credit โค้ดสำหรับ filter ข้อมูลโดย อ.เก๋ ตักศิลา</div>
<iframe width="360" height="215" src="https://www.youtube.com/embed/vp4vjekqgGk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>
</div>
</div>
<style>
body {
font-family: 'Sriracha', sans-serif;
}
a {
color: #198754;
text-decoration: none;
}
#ptable {
display: none;
}
span {
cursor: pointer;
}
#errorMessage{
color:red;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Examblog</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<link href='https://fonts.googleapis.com/css?family=Sriracha' rel='stylesheet' type='text/css'>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<?!= include('css'); ?>
</head>
<body>
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-6">
<div class="card border mb-2">
<div class="card-header text-white bg-success">
<i class="fas fa-search"></i> Quick search no time
</div>
<div class="card-body">
<form onsubmit="search()">
<div class="col-md-12 mb-2">
<input type="text" id="idcard" class="form-control" placeholder="Enter YourID" required >
</div>
<button type="submit" class="btn btn-success w-100 mb-2" >Submit</button>
<div class="text-center">
<span id="errorMessage"></span>
</div>
</form>
</div>
</div>
<div id="ptable">
<table id="table" class="table table-bordered"></table>
</div>
</div>
</div>
</div>
<div class="copyright fixed-bottom mb-2 text-success"></div>
<div class="text-end fixed-bottom mb-2 me-2">
<span data-bs-toggle="modal" data-bs-target="#creditModal"><i class="fa-solid fa-circle-info fa-2x text-success"></i></span>
</div>
<?!= include('credit'); ?>
<?!= include('js'); ?>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/gh/examblog/web/js/FtExamblog.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
</body>
</html>
<script>
var data;
$(document).ready(function(){
setFooter()
Swal.fire({
position: 'top',
icon: 'info',
title: 'Loading..',
showConfirmButton: false,
})
Swal.showLoading()
google.script.run.withSuccessHandler(function(datax){
data = datax
Swal.close()
}).getDataSheet()
// $("#idcard").on("keyup" ,search)
})
function search(){
event.preventDefault()
var id = $("#idcard").val()
var error = $("#errorMessage")
var dataArray = data.filter(f=> f[0] == id)
if(dataArray != ""){
var result = "<div>"+
"<table>"+
"<thead class='bg-warning'>"+
"<tr>"+
"<th scope='col'>Id</th>"+
"<th scope='col'>Fullname</th>"+
"<th scope='col'>Level</th>"+
"<th scope='col'>Number</th>"+
"</tr>"+
"</thead>";
for(var i=0; i<dataArray.length; i++) {
result += "<tr>";
for(var j=0; j<dataArray[i].length; j++){
result += "<td>"+dataArray[i][j]+"</td>";
}
result += "</tr>";
}
result += "</table></div>";
$('#table').html(result)
error.text("")
$('#ptable').show()
$("#idcard").val("")
}else{
error.text("Data not found!");
$('#ptable').hide()
}
}
</script>
// Database https://docs.google.com/spreadsheets/d/1WvnuQH6eBMXBmTDJZG3VFQlNymtrao7aDU7fv4JIheI/copy
//code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
/** ตัวแปรดึงข้อมูลในชีต */
function getDataSheet() {
var ss = SpreadsheetApp.getActive().getSheets()[0]
var data = ss.getDataRange().getValues()
return data
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment