implement x out of y progress text

This commit is contained in:
Fhj0607
2026-04-29 11:06:20 +02:00
parent e8f7f45f11
commit c46508d233
2 changed files with 46 additions and 25 deletions

View File

@@ -133,12 +133,14 @@ export default function ViewDetailsAssignment() {
)
}
const completedTasks = tasks.filter((task) => task.isCompleted).length;
const totalTasks = tasks.length;
const remainingTasks = totalTasks - completedTasks;
const progress =
tasks.length === 0
totalTasks === 0
? 0
: Math.round(
(tasks.filter((task) => task.isCompleted).length / tasks.length) * 100
);
: Math.round((completedTasks / totalTasks) * 100);
if (!assignment) {
return (
@@ -234,24 +236,34 @@ export default function ViewDetailsAssignment() {
</View>
</View>
<View className="mt-2">
<View className="mb-2 flex-row items-center justify-between">
<Text className="text-sm font-semibold text-text-secondary">
Progress
</Text>
<Text className="text-sm font-bold text-text-main">
{progress}%
</Text>
</View>
<View className="mt-5">
<View className="mb-2 flex-row items-center justify-between">
<Text className="text-sm font-semibold text-text-secondary">
Task Progress
</Text>
<View className="h-3 overflow-hidden rounded-full bg-app-subtle">
<View
className="h-full rounded-full bg-accent"
style={{ width: `${progress}%` }}
/>
</View>
<Text className="text-sm font-bold text-text-main">
{completedTasks}/{totalTasks}
</Text>
</View>
<View className="h-3 overflow-hidden rounded-full bg-app-subtle">
<View
className="h-full rounded-full"
style={{
width: `${progress}%`,
backgroundColor: progress === 100 ? '#34D399' : '#3B82F6',
}}
/>
</View>
<Text className="mt-2 text-xs font-medium text-text-secondary">
{remainingTasks === 0
? 'All tasks complete'
: `${remainingTasks} task${remainingTasks === 1 ? '' : 's'} remaining`}
</Text>
</View>
<Text className="mt-4 text-sm text-text-muted">
Last changed: {assignment.lastChanged}
</Text>

View File

@@ -188,14 +188,14 @@ export default function ViewDetailsSubject() {
);
};
const completedAssignments = assignments.filter((assignment) => assignment.isCompleted).length;
const totalAssignments = assignments.length;
const remainingAssignments = totalAssignments - completedAssignments;
const progress =
assignments.length === 0
? 0
: Math.round(
(assignments.filter((assignment) => assignment.isCompleted).length /
assignments.length) *
100
);
: Math.round((completedAssignments / totalAssignments) * 100);
if (!subject) {
return (
@@ -319,8 +319,9 @@ export default function ViewDetailsSubject() {
<Text className="text-sm font-semibold text-text-secondary">
Assignment Progress
</Text>
<Text className="text-sm font-bold text-text-main">
{progress}%
{completedAssignments}/{totalAssignments}
</Text>
</View>
@@ -333,6 +334,14 @@ export default function ViewDetailsSubject() {
}}
/>
</View>
<Text className="mt-2 text-xs font-medium text-text-secondary">
{remainingAssignments === 0
? 'All assignments complete'
: `${remainingAssignments} assignment${
remainingAssignments === 1 ? '' : 's'
} remaining`}
</Text>
</View>
<Text className="mt-4 text-sm text-text-muted">