485 lines
16 KiB
HTML
485 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TCKRTUIYO - Flash Memory</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<style>
|
|
:root {
|
|
--touch-target-min: 48px;
|
|
--touch-target-primary: 64px;
|
|
--primary-color: #0d6efd;
|
|
--bg-color: #f8f9fa;
|
|
--card-bg: #ffffff;
|
|
}
|
|
|
|
body {
|
|
font-size: 18px;
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
/* Touch-optimized navigation */
|
|
.nav-menu {
|
|
display: flex;
|
|
gap: 10px;
|
|
padding: 15px;
|
|
background: var(--card-bg);
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.nav-btn {
|
|
flex: 1;
|
|
min-height: var(--touch-target-primary);
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
border-radius: 12px;
|
|
transition: transform 0.1s, box-shadow 0.1s;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-btn:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.nav-btn.active {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
.nav-btn:not(.active) {
|
|
background-color: #e9ecef;
|
|
color: #495057;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
|
|
/* Logo in navigation */
|
|
.nav-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 10px;
|
|
}
|
|
.nav-logo img {
|
|
max-height: 40px;
|
|
width: auto;
|
|
}
|
|
|
|
/* File list container with scroll */
|
|
.file-list-container {
|
|
max-height: calc(100vh - 200px);
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
scroll-behavior: smooth;
|
|
background: var(--card-bg);
|
|
border-radius: 16px;
|
|
margin: 15px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
/* File count display */
|
|
.file-count {
|
|
padding: 15px 20px;
|
|
background: #e9ecef;
|
|
border-radius: 12px;
|
|
margin: 15px 15px 0 15px;
|
|
font-weight: 500;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Search input */
|
|
.search-container {
|
|
padding: 15px;
|
|
background: var(--card-bg);
|
|
margin: 15px;
|
|
border-radius: 16px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.form-control {
|
|
padding: 12px 15px;
|
|
font-size: 1rem;
|
|
border-radius: 10px;
|
|
min-height: var(--touch-target-min);
|
|
}
|
|
|
|
/* File items */
|
|
.file-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px 20px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
min-height: var(--touch-target-min);
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.file-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.file-item:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.file-item:active {
|
|
background-color: #e9ecef;
|
|
}
|
|
|
|
.file-name {
|
|
font-weight: 500;
|
|
color: #212529;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.file-meta {
|
|
font-size: 0.9rem;
|
|
color: #6c757d;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.file-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.file-btn {
|
|
min-width: var(--touch-target-min);
|
|
min-height: var(--touch-target-min);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 10px;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: transform 0.1s;
|
|
}
|
|
|
|
.file-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.btn-export {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.btn-delete {
|
|
background-color: #dc3545;
|
|
color: white;
|
|
}
|
|
|
|
.btn-view {
|
|
background-color: #6c757d;
|
|
color: white;
|
|
}
|
|
|
|
/* Empty state */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.empty-state i {
|
|
font-size: 3rem;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* Export all button */
|
|
.export-all-container {
|
|
padding: 15px;
|
|
background: var(--card-bg);
|
|
margin: 0 15px 15px 15px;
|
|
border-radius: 16px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.btn-export-all {
|
|
min-height: var(--touch-target-primary);
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
padding: 15px 30px;
|
|
border-radius: 12px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Alert messages */
|
|
.alert {
|
|
border-radius: 12px;
|
|
padding: 15px 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation Menu -->
|
|
<nav class="nav-menu">
|
|
<a href="/" class="nav-logo">
|
|
<img src="{{ url_for('static', filename='logo/[LOGO] TCK.svg') }}" alt="TCK" height="40">
|
|
</a>
|
|
<a href="/" class="nav-btn">
|
|
<i class="bi bi-speedometer2"></i> Dashboard
|
|
</a>
|
|
<a href="/settings" class="nav-btn">
|
|
<i class="bi bi-gear"></i> Settings
|
|
</a>
|
|
<a href="/calibration" class="nav-btn">
|
|
<i class="bi bi-sliders"></i> Calibration
|
|
</a>
|
|
<a href="/files" class="nav-btn active">
|
|
<i class="bi bi-file-earmark"></i> Files
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="container-fluid p-0">
|
|
<!-- Alert for status messages -->
|
|
<div id="alertMessage" class="alert alert-success m-3" style="display: none;"></div>
|
|
|
|
<!-- Search/Filter -->
|
|
<div class="search-container">
|
|
<input type="text" class="form-control" id="searchInput" placeholder="Search files by name...">
|
|
</div>
|
|
|
|
<!-- File Count Display -->
|
|
<div class="file-count">
|
|
<span id="fileCountText">Loading...</span>
|
|
<button class="btn btn-sm btn-outline-secondary" onclick="refreshFiles()">
|
|
<i class="bi bi-arrow-clockwise"></i> Refresh
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Scrollable File List -->
|
|
<div class="file-list-container" id="fileList">
|
|
<div class="empty-state">
|
|
<i class="bi bi-folder2-open"></i>
|
|
<p>No files found</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Export All Button -->
|
|
<div class="export-all-container">
|
|
<button class="btn btn-primary btn-export-all" onclick="exportAllFiles()">
|
|
<i class="bi bi-download"></i> Generate tidEDA Export
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
let files = [];
|
|
let filteredFiles = [];
|
|
|
|
// Load files on page load
|
|
async function loadFiles() {
|
|
try {
|
|
const response = await fetch('/api/files');
|
|
const data = await response.json();
|
|
files = data.files || [];
|
|
filterFiles();
|
|
updateFileCount();
|
|
} catch (error) {
|
|
console.error('Error loading files:', error);
|
|
showAlert('Error loading files', 'danger');
|
|
}
|
|
}
|
|
|
|
// Refresh files
|
|
async function refreshFiles() {
|
|
await loadFiles();
|
|
showAlert('Files refreshed', 'success');
|
|
}
|
|
|
|
// Filter files by search
|
|
function filterFiles() {
|
|
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
|
|
filteredFiles = files.filter(f => f.name.toLowerCase().includes(searchTerm));
|
|
// Sort by date, newest first
|
|
filteredFiles.sort((a, b) => new Date(b.modified) - new Date(a.modified));
|
|
renderFiles();
|
|
}
|
|
|
|
// Update file count display
|
|
function updateFileCount() {
|
|
const countText = document.getElementById('fileCountText');
|
|
countText.textContent = `Showing ${filteredFiles.length} of ${files.length} files`;
|
|
}
|
|
|
|
// Render file list
|
|
function renderFiles() {
|
|
const container = document.getElementById('fileList');
|
|
|
|
if (filteredFiles.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<i class="bi bi-folder2-open"></i>
|
|
<p>No files found</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = filteredFiles.map(file => `
|
|
<div class="file-item">
|
|
<div class="file-info" onclick="viewFile('${file.name}')">
|
|
<div class="file-name">
|
|
<i class="bi bi-file-earmark-spreadsheet"></i> ${file.name}
|
|
</div>
|
|
<div class="file-meta">
|
|
${formatDate(file.modified)} | ${formatSize(file.size)}
|
|
</div>
|
|
</div>
|
|
<div class="file-actions">
|
|
<button class="file-btn btn-view" onclick="viewFile('${file.name}')" title="View">
|
|
<i class="bi bi-eye"></i>
|
|
</button>
|
|
<button class="file-btn btn-export" onclick="exportFile('${file.name}')" title="Export">
|
|
<i class="bi bi-download"></i>
|
|
</button>
|
|
<button class="file-btn btn-delete" onclick="deleteFile('${file.name}')" title="Delete">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// View file content
|
|
async function viewFile(filename) {
|
|
try {
|
|
const response = await fetch('/api/files/' + encodeURIComponent(filename));
|
|
const data = await response.json();
|
|
|
|
if (data.error) {
|
|
showAlert(data.error, 'danger');
|
|
return;
|
|
}
|
|
|
|
// Display content in a modal or alert for now
|
|
alert(`${filename}\n\n${data.content.substring(0, 500)}${data.content.length > 500 ? '...' : ''}`);
|
|
} catch (error) {
|
|
console.error('Error viewing file:', error);
|
|
showAlert('Error viewing file', 'danger');
|
|
}
|
|
}
|
|
|
|
// Export single file as tidEDA
|
|
async function exportFile(filename) {
|
|
try {
|
|
const response = await fetch('/api/files/export', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ filename: filename })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.error) {
|
|
showAlert(data.error, 'danger');
|
|
return;
|
|
}
|
|
|
|
// Download the file
|
|
downloadFile(data.filename, data.content);
|
|
showAlert(`Exported ${data.filename}`, 'success');
|
|
} catch (error) {
|
|
console.error('Error exporting file:', error);
|
|
showAlert('Error exporting file', 'danger');
|
|
}
|
|
}
|
|
|
|
// Export all files
|
|
async function exportAllFiles() {
|
|
if (files.length === 0) {
|
|
showAlert('No files to export', 'warning');
|
|
return;
|
|
}
|
|
|
|
// For simplicity, export the first file (in production, could create a combined export)
|
|
const filename = filteredFiles[0].name;
|
|
await exportFile(filename);
|
|
}
|
|
|
|
// Delete file
|
|
async function deleteFile(filename) {
|
|
if (!confirm(`Delete ${filename}?`)) return;
|
|
|
|
try {
|
|
const response = await fetch('/api/files/' + encodeURIComponent(filename), {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
showAlert(`${filename} deleted`, 'success');
|
|
loadFiles();
|
|
} else {
|
|
showAlert(data.error || 'Error deleting file', 'danger');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting file:', error);
|
|
showAlert('Error deleting file', 'danger');
|
|
}
|
|
}
|
|
|
|
// Download helper function
|
|
function downloadFile(filename, content) {
|
|
const blob = new Blob([content], { type: 'text/plain' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = filename;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
// Format date
|
|
function formatDate(dateStr) {
|
|
const date = new Date(dateStr);
|
|
return date.toLocaleString();
|
|
}
|
|
|
|
// Format file size
|
|
function formatSize(bytes) {
|
|
if (bytes < 1024) return bytes + ' B';
|
|
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
|
return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
|
|
}
|
|
|
|
// Show alert message
|
|
function showAlert(message, type = 'success') {
|
|
const alert = document.getElementById('alertMessage');
|
|
alert.className = 'alert alert-' + type;
|
|
alert.textContent = message;
|
|
alert.style.display = 'block';
|
|
setTimeout(() => {
|
|
alert.style.display = 'none';
|
|
}, 3000);
|
|
}
|
|
|
|
// Search listener
|
|
document.getElementById('searchInput').addEventListener('input', filterFiles);
|
|
|
|
// Load files on page load
|
|
loadFiles();
|
|
</script>
|
|
</body>
|
|
</html>
|