feat(quick-2): archive Flask v1 interface to src_v1/
- Copy app.py, templates, static, data, routes, services - Copy requirements.txt for v1 dependencies
This commit is contained in:
484
src_v1/templates/files.html
Normal file
484
src_v1/templates/files.html
Normal file
@@ -0,0 +1,484 @@
|
||||
<!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="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>
|
||||
Reference in New Issue
Block a user