Add file uploads and speed distribution chart

- File upload/download/delete per customer (max 20MB, stored in data/files/)
- Files section shown in customer detail modal
- Speed distribution chart replaces single "top speed" stat
- Bar chart shows all speeds with count, top speed bolded
- Customer delete also cleans up associated files
- data/files/ added to .gitignore

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-10 00:05:21 +02:00
parent 127b581a69
commit c648c9311c
5 changed files with 313 additions and 10 deletions

102
style.css
View File

@@ -178,6 +178,42 @@ header {
margin-top: 2px;
}
.stat-wide {
grid-column: span 2;
}
.speed-table {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 0.75rem;
margin-top: 0.4rem;
justify-content: center;
}
.speed-item {
font-size: 0.85rem;
color: #666;
white-space: nowrap;
}
.speed-item.top {
font-weight: 700;
color: #0f3460;
}
.speed-bar {
display: inline-block;
height: 6px;
background: #d5dbe5;
border-radius: 3px;
margin-left: 4px;
vertical-align: middle;
}
.speed-item.top .speed-bar {
background: #0f3460;
}
/* Toolbar */
.toolbar {
margin-bottom: 1rem;
@@ -589,6 +625,72 @@ form h3:first-child {
font-style: italic;
}
/* Files */
.file-upload-area {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.file-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.file-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.6rem 0.75rem;
background: #f8f9fb;
border-radius: 8px;
border: 1px solid #eee;
}
.file-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.file-name {
font-size: 0.9rem;
font-weight: 500;
color: #0f3460;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-name:hover {
text-decoration: underline;
}
.file-meta {
font-size: 0.75rem;
color: #999;
}
.file-delete-btn {
background: none;
border: none;
color: #ccc;
font-size: 1rem;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.15s;
flex-shrink: 0;
}
.file-delete-btn:hover {
color: #e74c3c;
background: #fef2f2;
}
/* Responsive */
@media (max-width: 768px) {
header {