mirror
/
OpenDroneMap-WebODM
kopia lustrzana https://github.com/OpenDroneMap/WebODM
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Merge pull request #2 from adnanalameer16/ui 

tasks ui updated
pull/1755/head
Adnan Al Ameer 2025-09-26 17:00:14 +05:30 zatwierdzone przez GitHub
rodzic 9deb97f9d1 f3a35f581b
commit 48e7f0f333
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: B5690EEEBB952194
2 zmienionych plików z 107 dodań i 30 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

120
locane/src/components/Tasks.css
Wyświetl plik

@ -93,6 +93,9 @@
.task-box.status-completed:hover .task-thumbnail-wrapper {
display: block;
}
.task-box.status-completed:hover .task-status-info {
display: none;
}
/* ====== TASK CONTENT ====== */
.main-content-area {
@ -123,25 +126,78 @@
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #f7fafc;
}
.task-header h3 {
.task-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.task-status-info {
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
}
.task-id-row {
margin-bottom: 0.75rem;
}
.task-name {
margin: 0;
color: #2d3748;
font-size: 1.1rem;
font-size: 30px;
font-weight: 600;
line-height: 1.2;
}
.task-project-name {
margin: 0;
color: #718096;
font-size: 15px;
font-weight: 400;
}
.task-id {
color: #718096;
font-size: 0.8rem;
font-size: 10px;
background: #f7fafc;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-family: monospace;
display: inline-block;
}
.status-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
.status-indicator.status-running {
background-color: #1976d2;
}
.status-indicator.status-completed {
background-color: #2e7d32;
}
.status-indicator.status-failed {
background-color: #d32f2f;
}
.status-indicator.status-canceled {
background-color: #757575;
}
.status-indicator.status-queued {
background-color: #f57c00;
}
.task-content {
@ -149,13 +205,7 @@
flex-grow: 1;
}
.task-name {
color: #4a5568;
margin: 0 0 1.25rem 0;
font-weight: 500;
font-size: 1rem;
line-height: 1.4;
}
/* ====== PROGRESS ====== */
.task-progress {
@ -231,12 +281,41 @@
.status-canceled { background-color: #f5f5f5; color: #757575; }
.status-queued { background-color: #fff3e0; color: #f57c00; }
/* Task box status borders */
.task-box.status-running { border-left: 4px solid #1976d2; }
.task-box.status-completed { border-left: 4px solid #2e7d32; }
.task-box.status-failed { border-left: 4px solid #d32f2f; }
.task-box.status-canceled { border-left: 4px solid #757575; }
.task-box.status-queued { border-left: 4px solid #f57c00; }
.task-box.status-running {
border-left: 8px solid #1976d2;
border-right: 2px solid #1976d2;
border-top: 2px solid #1976d2;
border-bottom: 2px solid #1976d2;
}
.task-box.status-completed {
border-left: 8px solid #2e7d32;
border-right: 2px solid #2e7d32;
border-top: 2px solid #2e7d32;
border-bottom: 2px solid #2e7d32;
}
.task-box.status-failed {
border-left: 8px solid #d32f2f;
border-right: 2px solid #d32f2f;
border-top: 2px solid #d32f2f;
border-bottom: 2px solid #d32f2f;
}
.task-box.status-canceled {
border-left: 8px solid #757575;
border-right: 2px solid #757575;
border-top: 2px solid #757575;
border-bottom: 2px solid #757575;
}
.task-box.status-queued {
border-left: 8px solid #f57c00;
border-right: 2px solid #f57c00;
border-top: 2px solid #f57c00;
border-bottom: 2px solid #f57c00;
}
/* ====== ACTION BUTTONS ====== */
.task-actions {
@ -244,7 +323,7 @@
gap: 8px;
margin-top: 12px;
flex-wrap: nowrap; /* keep buttons on one line */
justify-content: space-between; /* spread View / Export / Delete */
justify-content: flex-start; /* align buttons to the left */
}
.task-actions button {
@ -261,8 +340,7 @@
.btn-delete { background-color: #f44336; color: white; }
.btn-delete:hover { background-color: #d32f2f; }
.btn-view { background-color: #2196f3; color: white; }
.btn-view:hover { background-color: #1976d2; }
.btn-export { background-color: #4caf50; color: white; }
.btn-export:hover { background-color: #2e7d32; }

17
locane/src/components/Tasks.jsx
Wyświetl plik

@ -71,16 +71,21 @@ const TaskBox = ({ task, onAction, onShowDeleteDialog, fetchJSON, isDeleteDialog
>
<div className="main-content-area">
<div className="task-header">
<h3>{task.projectName}</h3>
<div className="task-info">
<h3 className="task-name">{task.taskName}</h3>
<p className="task-project-name">{task.projectName}</p>
</div>
<div className="task-status-info">
<div className={`status-indicator ${getStatusClass(effectiveStatus)}`}></div>
<span className={`status-badge ${getStatusClass(effectiveStatus)}`}>
{getStatusText(effectiveStatus)}
</span>
<span className="task-id">ID: {task.id}</span>
</div>
</div>
<div className="task-id-row">
<span className="task-id">{task.id}</span>
</div>
<div className="task-content">
<p className="task-name">{task.taskName}</p>
{effectiveStatus === 30 && lastError && (
<p className="task-error"><strong>Error:</strong> {lastError}</p>
)}
@ -114,7 +119,6 @@ const TaskBox = ({ task, onAction, onShowDeleteDialog, fetchJSON, isDeleteDialog
)}
{effectiveStatus === 40 && (
<>
<button className="btn-view" onClick={() => handleAction('view')}>View</button>
<Export
projectId={task.projectId}
taskId={task.id}
@ -262,7 +266,6 @@ const Tasks = ({ runningTasks, loading, onRefresh, onTaskAction ,isViewing,exitV
<>
{categorizedTasks.running.length > 0 && (
<div className="task-category">
<h3>Running Tasks ({categorizedTasks.running.length})</h3>
<div className="tasks-grid">
{categorizedTasks.running.map((task) => (
<TaskBox
@ -281,7 +284,6 @@ const Tasks = ({ runningTasks, loading, onRefresh, onTaskAction ,isViewing,exitV
)}
{categorizedTasks.completed.length > 0 && (
<div className="task-category">
<h3>Completed Tasks ({categorizedTasks.completed.length})</h3>
<div className="tasks-grid">
{categorizedTasks.completed.map((task) => (
<TaskBox
@ -300,7 +302,6 @@ const Tasks = ({ runningTasks, loading, onRefresh, onTaskAction ,isViewing,exitV
)}
{categorizedTasks.failed.length > 0 && (
<div className="task-category">
<h3>Failed Tasks ({categorizedTasks.failed.length})</h3>
<div className="tasks-grid">
{categorizedTasks.failed.map((task) => (
<TaskBox
@ -319,7 +320,6 @@ const Tasks = ({ runningTasks, loading, onRefresh, onTaskAction ,isViewing,exitV
)}
{categorizedTasks.canceled.length > 0 && (
<div className="task-category">
<h3>Canceled Tasks ({categorizedTasks.canceled.length})</h3>
<div className="tasks-grid">
{categorizedTasks.canceled.map((task) => (
<TaskBox
@ -338,7 +338,6 @@ const Tasks = ({ runningTasks, loading, onRefresh, onTaskAction ,isViewing,exitV
)}
{categorizedTasks.queued.length > 0 && (
<div className="task-category">
<h3>Queued Tasks ({categorizedTasks.queued.length})</h3>
<div className="tasks-grid">
{categorizedTasks.queued.map((task) => (
<TaskBox