Hệ thống cửa hàng
Địa chỉ cửa hàng đang cập nhật
let distObj = {};
const spreadSheet = ‘https://docs.google.com/spreadsheets/d/1sHWAXwLIEFpe244Cb4m3RlC5WRH-0cB89dxVb5dOHo4/edit?usp=sharing’
//const id = spreadSheet.match(/(?<=/d/)(.*)(?=/)/gm);
const id = spreadSheet.match(/(d/)(.*)(?=/)/gm);
const gid = '0';
const url = 'https://docs.google.com/spreadsheets/'+id+'/gviz/tq?tqx=out:json&tq&gid='+gid;
function renderShop(shop,i){
let phone = shop.phone ? `` : ”
return `
${shop.name}
${shop.info}
${phone}
`
}
function renderShopList(currentShopList){
$(‘#shop-infor’).html(”)
currentShopList.map((shop,i)=>{
$(‘#shop-infor’).append(renderShop(shop,i))
})
renderIframe(currentShopList[0])
$(‘.shop’).eq(0).addClass(‘active’)
}
function renderIframe (shop){
var newDiv = document.createElement(“div”);
newDiv.innerHTML = shop.map.replace(‘<iframe’,'<iframe').replace('</iframe>', '’)
$(‘#map’).html(newDiv)
}
function getShops(){
let currentShopList = []
const params = {
type: ‘GET’,
url: url,
async: false,
dataType: “text”,
success: function(data) {
const from = data.indexOf(“{“);
const to = data.lastIndexOf(“}”)+1;
const jsonText = data.slice(from, to);
const parsedText = JSON.parse(jsonText);
const table = parsedText.table
if(!table || !table.rows || !table.rows.length){
$(‘.loading-icon’).hide()
$(‘.not_found’).show()
return
}
let result = table.rows.map(item => {return item.c})
distObj = […new Set(result.map(item => item[0].v.trim()))].reduce((obj, item) => {
obj[item] = []
return obj
}, {})
result.map(item => distObj[item[0].v.trim()].push({
name: item[1].v,
info: item[2].v,
phone: item[3].v,
map: item[4].v
}))
currentShopList = Object.keys(distObj).map(dist => {
return distObj[dist]
})
currentShopList = currentShopList.flat()
let distHTML = ‘Tất cả’
Object.keys(distObj).map(dist => {
if(dist && dist !== ‘undefined’){
distHTML+=`${dist}`
}
})
$(‘#city’).html(distHTML)
let shopHTML
currentShopList.map((shop)=> {
shop.name = $(`${shop.name}`).text()
shopHTML += `${shop.name}`
})
$(‘#shops’).html(shopHTML)
$(‘#city’).change(function(){
let html = ”
if($(this).val() == ‘all’){
currentShopList = Object.keys(distObj).map(dist => {
return distObj[dist]
}).flat()
currentShopList.map((shop)=> {
shop.name = $(`${shop.name}`).text()
html += `${shop.name}`
})
}else{
currentShopList = distObj[$(this).val()]
currentShopList.map((shop)=> {
shop.name = $(`${shop.name}`).text()
html += `${shop.name}`
})
}
$(‘#shops’).html(html)
renderShopList(currentShopList)
})
$(‘#shop’).change(function(){
let value = $(this).val().trim().toLowerCase()
let shop = currentShopList.filter(shop => {
return shop.name.toLowerCase().includes(value) || shop.info.toLowerCase().includes(value)
});
if( shop){
renderShopList(shop)
}
if(!$(‘#shop-infor’).text().trim() || !shop){
$(‘#shop-infor’).html(`Địa chỉ cửa hàng đang cập nhật
`)
}
})
$(document).on(‘click’,’.shop’,function(){
let index = $(this).data(‘index’)
$(‘.shop’).removeClass(‘active’)
$(this).addClass(‘active’)
renderIframe(currentShopList[index])
})
renderShopList(currentShopList)
$(‘.loading’).removeClass(‘loading’)
$(‘.loading-icon’).hide()
},
error: function(){
$(‘.loading-icon’).hide()
$(‘.not_found’).show()
}
};
jQuery.ajax(params);
}
getShops()
