Last active
October 23, 2023 09:41
-
-
Save wwwy3y3/e9673f779ff42d9f78bae214a000b1fd to your computer and use it in GitHub Desktop.
test.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
document.getElementById('fetchData').addEventListener('click', async function () { | |
const loader = document.getElementById('loader'); | |
loader.style.display = 'block'; | |
// Fetch data and update tables... | |
// After all fetches and updates | |
loader.style.display = 'none'; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>API Data Display</title> | |
<!-- Tailwind CSS --> | |
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet"> | |
</head> | |
<body class="bg-gray-100 p-8"> | |
<input type="text" id="idInput" placeholder="身份證字號" class="border p-2" /> | |
<button id="fetchData" class="bg-blue-500 text-white px-4 py-2 ml-2">Fetch Data</button> | |
<!-- API 1 table --> | |
<div class="mt-8"> | |
<h2 class="text-2xl font-semibold mb-4">API 1 Data</h2> | |
<table id="api1Table" class="min-w-full divide-y divide-gray-200"> | |
<thead class="bg-gray-50"> | |
<tr> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ACT_DATE</th> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CASE_STATUS</th> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CLOSE_TMR_NAME</th> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">TASK_NAME</th> | |
</tr> | |
</thead> | |
<tbody id="api1Body" class="bg-white divide-y divide-gray-200"> | |
<!-- Data will be inserted here --> | |
</tbody> | |
</table> | |
</div> | |
<!-- API 2 & 3 table --> | |
<div class="mt-8"> | |
<h2 class="text-2xl font-semibold mb-4">API 2 & 3 Data</h2> | |
<table id="api2Table" class="min-w-full divide-y divide-gray-200"> | |
<thead class="bg-gray-50"> | |
<tr> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">kindtext</th> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">insno</th> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">acceptdate</th> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">processingstatus</th> | |
</tr> | |
</thead> | |
<tbody id="api2Body" class="bg-white divide-y divide-gray-200"> | |
<!-- Data will be inserted here --> | |
</tbody> | |
</table> | |
</div> | |
<!-- API 4 & 5 table --> | |
<div class="mt-8"> | |
<h2 class="text-2xl font-semibold mb-4">API 4 & 5 Data</h2> | |
<table id="api4Table" class="min-w-full divide-y divide-gray-200"> | |
<thead class="bg-gray-50"> | |
<tr> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">被保人id</th> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">保單號碼</th> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">被保人姓名</th> | |
</tr> | |
</thead> | |
<tbody id="api4Body" class="bg-white divide-y divide-gray-200"> | |
<!-- Data will be inserted here --> | |
</tbody> | |
</table> | |
</div> | |
<script> | |
// JavaScript code will be inserted here | |
</script> | |
<!-- Tailwind CSS --> | |
<script src="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>API Data Display</title> | |
<!-- Tailwind CSS --> | |
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet"> | |
<style> | |
.loader { | |
border: 4px solid #f3f3f3; | |
border-top: 4px solid #3498db; | |
border-radius: 50%; | |
width: 50px; | |
height: 50px; | |
animation: spin 2s linear infinite; | |
} | |
@keyframes spin { | |
0% { | |
transform: rotate(0deg); | |
} | |
100% { | |
transform: rotate(360deg); | |
} | |
} | |
</style> | |
</head> | |
<body class="bg-gray-100 p-8"> | |
<input type="text" id="idInput" placeholder="身份證字號" class="border p-2" /> | |
<button id="fetchData" class="bg-blue-500 text-white px-4 py-2 ml-2">Fetch Data</button> | |
<div class="loader" id="loader" style="display: none;"></div> | |
<!-- API 1 table --> | |
<div class="mt-8"> | |
<h2 class="text-2xl font-semibold mb-4">API 1 Data</h2> | |
<table id="api1Table" class="min-w-full divide-y divide-gray-200"> | |
<thead class="bg-gray-50"> | |
<tr> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ACT_DATE</th> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CASE_STATUS</th> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CLOSE_TMR_NAME</th> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">TASK_NAME</th> | |
</tr> | |
</thead> | |
<tbody id="api1Body" class="bg-white divide-y divide-gray-200"> | |
<!-- Data will be inserted here --> | |
</tbody> | |
</table> | |
</div> | |
<!-- API 2 & 3 table --> | |
<div class="mt-8"> | |
<h2 class="text-2xl font-semibold mb-4">API 2 & 3 Data</h2> | |
<table id="api2Table" class="min-w-full divide-y divide-gray-200"> | |
<thead class="bg-gray-50"> | |
<tr> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">kindtext</th> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">insno</th> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">acceptdate</th> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">processingstatus</th> | |
</tr> | |
</thead> | |
<tbody id="api2Body" class="bg-white divide-y divide-gray-200"> | |
<!-- Data will be inserted here --> | |
</tbody> | |
</table> | |
</div> | |
<!-- API 4 & 5 table --> | |
<div class="mt-8"> | |
<h2 class="text-2xl font-semibold mb-4">API 4 & 5 Data</h2> | |
<table id="api4Table" class="min-w-full divide-y divide-gray-200"> | |
<thead class="bg-gray-50"> | |
<tr> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">被保人id</th> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">保單號碼</th> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">被保人姓名</th> | |
</tr> | |
</thead> | |
<tbody id="api4Body" class="bg-white divide-y divide-gray-200"> | |
<!-- Data will be inserted here --> | |
</tbody> | |
</table> | |
</div> | |
<script> | |
// JavaScript code will be inserted here | |
</script> | |
<!-- Tailwind CSS --> | |
<script src="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Tailwind API Example</title> | |
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet"> | |
</head> | |
<body class="bg-gray-100 p-8"> | |
<div class="container mx-auto"> | |
<div class="mb-4"> | |
<label for="idInput" class="block text-sm font-medium text-gray-700">身分證字號</label> | |
<input type="text" id="idInput" class="mt-1 p-2 w-full border rounded-md"> | |
</div> | |
<button id="fetchData" class="bg-blue-500 text-white px-4 py-2 rounded-md">查詢</button> | |
<div class="mt-8"> | |
<table id="dataTable" class="min-w-full divide-y divide-gray-200"> | |
<thead class="bg-gray-50"> | |
<tr> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th> | |
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th> | |
<!-- Add more columns here --> | |
</tr> | |
</thead> | |
<tbody id="dataBody" class="bg-white divide-y divide-gray-200"> | |
<!-- Data will be inserted here --> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
<script> | |
document.getElementById('fetchData').addEventListener('click', function () { | |
const id = document.getElementById('idInput').value; | |
fetch(`https://jsonplaceholder.typicode.com/comments?postId=${id}`) | |
.then(response => { | |
if (!response.ok) { | |
throw new Error('Network response was not ok'); | |
} | |
return response.json(); | |
}) | |
.then(data => { | |
const tableBody = document.getElementById('dataBody'); | |
tableBody.innerHTML = ''; // Clear the table body | |
data.forEach(item => { | |
const row = document.createElement('tr'); | |
// id | |
const idCell = document.createElement('td'); | |
idCell.textContent = item.id; | |
row.appendChild(idCell); | |
// name | |
const nameCell = document.createElement('td'); | |
nameCell.textContent = item.name; | |
row.appendChild(nameCell); | |
const emailCell = document.createElement('td'); | |
emailCell.textContent = item.email; | |
row.appendChild(emailCell); | |
// Add more cells here | |
tableBody.appendChild(row); | |
}); | |
}) | |
.catch(error => { | |
console.error('There has been a problem with your fetch operation:', error); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
document.getElementById('fetchData').addEventListener('click', function () { | |
const id = document.getElementById('idInput').value; | |
const pat = '你的 Personal Access Token'; // 將這裡替換成你的 Personal Access Token | |
const headers = { | |
'Authorization': `canner-pat ${pat}` | |
}; | |
const apis = [ | |
fetch(`/apisource?cust_id=${id}&ad_value=B2020`, { headers }), | |
fetch(`/mssql_customers?cust_id=${id}`, { headers }), | |
fetch(`/mssql_rights?cust_id=${id}`, { headers }), | |
fetch(`/a_f_fn_system?cust_id=${id}`, { headers }), | |
fetch(`/excel?cust_id=${id}`, { headers }), | |
]; | |
Promise.all(apis) | |
.then(responses => { | |
return Promise.all(responses.map(response => { | |
if (!response.ok) { | |
throw new Error('Network response was not ok'); | |
} | |
return response.json(); | |
})); | |
}) | |
.then(datas => { | |
const tableBody = document.getElementById('dataBody'); | |
tableBody.innerHTML = ''; // Clear the table body | |
// Handle first API data | |
datas[0][0].json_extract.forEach(item => { | |
const row = document.createElement('tr'); | |
const dateCell = document.createElement('td'); | |
dateCell.textContent = item.ACT_DATE; | |
row.appendChild(dateCell); | |
const statusCell = document.createElement('td'); | |
statusCell.textContent = item.CASE_STATUS; | |
row.appendChild(statusCell); | |
// ... other cells | |
tableBody.appendChild(row); | |
}); | |
// Handle second and third API data | |
[...datas[1], ...datas[2]].forEach(item => { | |
const row = document.createElement('tr'); | |
const kindtextCell = document.createElement('td'); | |
kindtextCell.textContent = item.kindtext; | |
row.appendChild(kindtextCell); | |
// ... other cells | |
tableBody.appendChild(row); | |
}); | |
// Handle fourth and fifth API data | |
[...datas[3], ...datas[4]].forEach(item => { | |
const row = document.createElement('tr'); | |
const idCell = document.createElement('td'); | |
idCell.textContent = item['被保人id']; | |
row.appendChild(idCell); | |
// ... other cells | |
tableBody.appendChild(row); | |
}); | |
}) | |
.catch(error => { | |
console.error('There has been a problem with your fetch operation:', error); | |
}); | |
}); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function appendCells(row, item, columns) { | |
columns.forEach(column => { | |
const cell = document.createElement('td'); | |
cell.textContent = item[column]; | |
row.appendChild(cell); | |
}); | |
} | |
document.getElementById('fetchData').addEventListener('click', function () { | |
// ... (其它代碼不變) | |
// Handle first API data | |
datas[0][0].json_extract.forEach(item => { | |
const row = document.createElement('tr'); | |
appendCells(row, item, ['ACT_DATE', 'CASE_STATUS', 'CLOSE_TMR_NAME', 'TASK_NAME']); | |
tableBody.appendChild(row); | |
}); | |
// Handle second and third API data | |
[...datas[1], ...datas[2]].forEach(item => { | |
const row = document.createElement('tr'); | |
appendCells(row, item, ['kindtext', 'insno', 'acceptdate', 'processingstatus']); | |
tableBody.appendChild(row); | |
}); | |
// Handle fourth and fifth API data | |
[...datas[3], ...datas[4]].forEach(item => { | |
const row = document.createElement('tr'); | |
appendCells(row, item, ['被保人id', '保單號碼', '被保人姓名']); | |
tableBody.appendChild(row); | |
}); | |
// ... (其它代碼不變) | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment