Skip to content

Instantly share code, notes, and snippets.

@wwwy3y3

wwwy3y3/loader.js

Last active October 23, 2023 09:41
Show Gist options
  • Save wwwy3y3/e9673f779ff42d9f78bae214a000b1fd to your computer and use it in GitHub Desktop.
Save wwwy3y3/e9673f779ff42d9f78bae214a000b1fd to your computer and use it in GitHub Desktop.
Download ZIP
test.html
Raw
loader.js
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';
});
Raw
test-3.html
<!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>
Raw
test-4.html
<!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>
Raw
test.html
<!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);
// email
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>
Raw
test2.html
<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>
Raw
test2.js
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