<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub File List</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
text-align: center;
color: #333;
padding: 20px 0;
background-color: #4CAF50;
margin: 0;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
}
tr:hover {
background-color: #f5f5f5;
}
.btn {
display: inline-block;
margin: 10px;
padding: 10px 15px;
background-color: #4CAF50;
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #45a049;
}
@media (max-width: 768px) {
table {
width: 100%;
}
.btn {
font-size: 14px;
}
}
</style>
</head>
<body>
<h1>GitHub File List</h1>
<div style="text-align: center;">
<a href="#" id="refreshBtn">Refresh</a>
</div>
<table id="fileTable">
<thead>
<tr>
<th>File Name</th>
<th>Last Modified</th>
<th>Custom Field 1</th>
<th>Custom Field 2</th>
<th>Custom Field 3</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
async function fetchFiles() {
const apiUrl = 'https://github.enterprise.com/api/v3/repos/{owner}/{repo}/contents/{path}';
const token = 'YOUR_PERSONAL_ACCESS_TOKEN';
try {
const response = await fetch(apiUrl, {
method: 'GET',
headers: {
'Authorization': `token ${token}`,
}
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
if (Array.isArray(data)) {
renderTable(data);
} else {
console.error("The returned data is not in the expected format");
}
} catch (error) {
console.error('Error fetching data:', error);
}
}
function renderTable(files) {
const tableBody = document.querySelector('#fileTable tbody');
tableBody.innerHTML = '';
if (files.length === 0) {
const row = document.createElement('tr');
row.innerHTML = `<td colspan="5" style="text-align: center;">No files found</td>`;
tableBody.appendChild(row);
return;
}
files.forEach(file => {
const lastModified = new Date(file.committer.date);
const formattedDate = lastModified.toLocaleString();
const row = document.createElement('tr');
row.innerHTML = `
<td>${file.name}</td>
<td>${formattedDate}</td>
<td>Custom Value 1</td>
<td>Custom Value 2</td>
<td>Custom Value 3</td>
`;
tableBody.appendChild(row);
});
}
fetchFiles();
document.getElementById('refreshBtn').addEventListener('click', fetchFiles);
</script>
</body>
</html>