rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: trail related bugs + general design improvements

Browse source
This commit is contained in:
swve 2023-12-14 16:41:28 +01:00
parent 53f40f3f34
commit 5b3c2fab24
17 changed files with 128 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

13
apps/web/components/Pages/Courses/ActivityIndicators.tsx
View file

@ -8,6 +8,7 @@ interface Props {
course: any
orgslug: string
course_uuid: string
activity: any
current_activity?: any
}
@ -24,15 +25,11 @@ function ActivityIndicators(props: Props) {
function isActivityDone(activity: any) {
const runs = course.trail.runs;
for (let run of runs) {
for (let step of run.steps) {
if (step.activity_id === activity.id && step.complete === true) {
return false;
}
}
let run = props.course.trail.runs.find((run: any) => run.course_id == props.course.id);
if (run) {
return run.steps.find((step: any) => step.activity_id == activity.id);
}
return false;
}
function isActivityCurrent(activity: any) {

24
apps/web/components/Pages/Trail/TrailCourseElement.tsx
View file

@ -1,21 +1,29 @@
'use client';
import { useOrg } from '@components/Contexts/OrgContext';
import { getAPIUrl, getBackendUrl, getUriWithOrg } from '@services/config/config';
import { removeCourse } from '@services/courses/activity';
import { getCourseThumbnailMediaDirectory } from '@services/media/media';
import { revalidateTags } from '@services/utils/ts/requests';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { use, useEffect } from 'react';
import { mutate } from 'swr';
interface TrailCourseElementProps {
course: any
run: any
orgslug: string
}
function TrailCourseElement(props: TrailCourseElementProps) {
const org = useOrg() as any;
const courseid = props.course.course_uuid.replace("course_", "")
const course = props.course
const router = useRouter();
const course_total_steps = props.run.course_total_steps
const course_completed_steps = props.run.steps.length
const orgID = org?.id;
const course_progress = Math.round((course_completed_steps / course_total_steps) * 100)
async function quitCourse(course_uuid: string) {
// Close activity
@ -25,14 +33,18 @@ function TrailCourseElement(props: TrailCourseElementProps) {
router.refresh();
// Mutate
mutate(`${getAPIUrl()}trail/org_slug/${props.orgslug}/trail`);
mutate(`${getAPIUrl()}trail/org/${orgID}/trail`);
}
useEffect(() => {
}
, [props.course, org]);
return (
<div className='trailcoursebox flex p-3 bg-white rounded-xl' style={{ boxShadow: '0px 4px 7px 0px rgba(0, 0, 0, 0.03)' }}>
<Link href={getUriWithOrg(props.orgslug, "/course/" + courseid)}>
<div className="course_tumbnail inset-0 ring-1 ring-inset ring-black/10 rounded-lg relative h-[50px] w-[72px] bg-cover bg-center" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(props.course.course_object.org_id, props.course.course_object.course_uuid, props.course.course_object.thumbnail)})`, boxShadow: '0px 4px 7px 0px rgba(0, 0, 0, 0.03)' }}></div>
<div className="course_tumbnail inset-0 ring-1 ring-inset ring-black/10 rounded-lg relative h-[50px] w-[72px] bg-cover bg-center" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(org.org_uuid, props.course.course_uuid, props.course.thumbnail_image)})`, boxShadow: '0px 4px 7px 0px rgba(0, 0, 0, 0.03)' }}></div>
</Link>
<div className="course_meta pl-5 flex-grow space-y-1">
<div className="course_top">
@ -40,19 +52,19 @@ function TrailCourseElement(props: TrailCourseElementProps) {
<div className="course_basic flex flex-col flex-end -space-y-2">
<p className='p-0 font-bold text-sm text-gray-700'>Course</p>
<div className="course_progress flex items-center space-x-2">
<h2 className='font-bold text-xl'>{course.course_object.name}</h2>
<h2 className='font-bold text-xl'>{course.name}</h2>
<div className='bg-slate-300 rounded-full w-[10px] h-[5px]'></div>
<h2>{course.progress}%</h2>
<h2>{course_progress}%</h2>
</div>
</div>
<div className="course_actions flex-grow flex flex-row-reverse">
<button onClick={() => quitCourse(course.course_uuid)} className="bg-red-200 text-red-700 hover:bg-red-300 rounded-full text-xs h-5 px-2 font-bold">Quit Course</button>
<button onClick={() => quitCourse(course.course_uuid)} className="bg-red-200 text-red-700 hover:bg-red-300 rounded-full text-xs h-5 px-2 font-bold">Quit Course</button>
</div>
</div>
</div>
<div className="course_progress indicator w-full">
<div className="w-full bg-gray-200 rounded-full h-1.5 ">
<div className={`bg-teal-600 h-1.5 rounded-full`} style={{ width: `${course.progress}%` }} ></div>
<div className={`bg-teal-600 h-1.5 rounded-full`} style={{ width: `${course_progress}%` }} ></div>
</div>
</div>