รหัส 1001-1030
DEMO
DOWLOAD
code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function getproduct (){
return product = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('product')
.getDataRange().getDisplayValues().slice(1)
}
function checkID(id){
const data = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('customer')
.getDataRange().getDisplayValues().slice(1)
const item = data.find(r=>{return r[1] === id})
return item
}
function checkSetValue(id){
const ssh = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('customer')
const data = ssh.getDataRange().getDisplayValues().slice(1)
const item = data.findIndex(r=>{return r[1] === id[1]})
ssh.getRange(item+2,Number(id[0])+3).setValue([1])
return id[0]
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {
height: 100vh;
width: 100vw;
background: url(https://marketplace.canva.com/EAD2962NKnQ/2/0/1600w/canva-rainbow-gradient-pink-and-purple-virtual-background-_Tcjok-d9b4.jpg);
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.grid-items{
border-radius: 10px;
border: 2px solid #cccccc;
align-items: center;
justify-content: center;
padding: 15px;
margin: 15px;
box-sizing: border-box;
transition: all linear 200ms;
font-size: 22px;
}
img{
width: 100%;
height: auto;
}
.number{
width: 20px;
height: auto;
}
.grid-items:hover {
transform: scale(0.95);
transition: all linear 200ms;
z-index: 1;
box-shadow: 1px 1px 10px rgba(0, 0, 0, .3);
cursor: pointer;
}
.container {
background: #fff;
border-bottom: 3px solid #ddd;
border-radius: 10px;
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);
padding: 50px 50px;
margin: 30px 0;
position: absolute;
transform: translate(-50%);
padding: 1rem 1rem;
top: 2%;
left: 50%;
width:95%;
}
.img-gray {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
</style>
</head>
<body>
<div class="container">
<form style="text-align: center;" role="search">
รหัสลูกค้า
<input class="form-control" type="search" placeholder="รหัสลูกค้า" id="iduser" aria-label="Search">
<button class="btn btn-success me-1" type="button" id="btn" onclick="searchID()">Search</button>
</form>
<span style="text-align: left;" id="id_user"></span> - <span style="text-align: left;" id="user"></span>
<div class="grid" id="product-page">
<?!= getproduct ().forEach((r,i)=>{ ?>
<div class="grid-items card" id="<?= i+1?>">
<img class="imgx" id="<?= i+1?>" src="<?=r[1]?>">
<center><h5><?=r[0]?></h5></center>
</div>
<?})?>
</div>
</div>
<script>
function searchID(){
const imgx = document.querySelectorAll(".imgx")
const id = document.querySelector('#iduser').value;
imgx.forEach(r =>{r.classList.remove("img-gray")});
google.script.run.withSuccessHandler(function(output){
document.querySelector('#id_user').innerText = output[1]
document.querySelector('#user').innerText = output[2]
imgx.forEach((r,i)=>{
//console.log(output[i+3])
if(output[i+3] > 0){
if(r.id == i+1){
r.classList.add("img-gray");
}
}
})
}).checkID(id)
}
const cardx = document.querySelectorAll(".card")
cardx.forEach(button => {
button.addEventListener('click', (e) => {
const userID = document.querySelector('#id_user').innerText
const cardId = e.target.id
if(userID !== ""){
google.script.run.withSuccessHandler(function(output){
alert(output)
document.querySelectorAll(".imgx")[output-1].classList.add("img-gray");
}).checkSetValue([cardId,userID])
}
})
})
</script>
</body>
</html>