mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: improve activities UI
This commit is contained in:
swve
parent
d351e8864d
commit
3a898eb29a
6 changed files with 110 additions and 276 deletions
|
|
@ -1,16 +1,15 @@
|
|||
"use client";
|
||||
import Link from "next/link";
|
||||
import React, { useMemo } from "react";
|
||||
import React from "react";
|
||||
import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config/config";
|
||||
import Canva from "@components/Pages/Activities/DynamicCanva/DynamicCanva";
|
||||
import styled from "styled-components";
|
||||
import VideoActivity from "@components/Pages/Activities/Video/Video";
|
||||
import useSWR, { mutate } from "swr";
|
||||
import { Check } from "lucide-react";
|
||||
import { markActivityAsComplete } from "@services/courses/activity";
|
||||
import ToolTip from "@components/StyledElements/Tooltip/Tooltip";
|
||||
import DocumentPdfActivity from "@components/Pages/Activities/DocumentPdf/DocumentPdf";
|
||||
import ActivityIndicators from "@components/Pages/Courses/ActivityIndicators";
|
||||
import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
interface ActivityClientProps {
|
||||
activityid: string;
|
||||
|
|
@ -20,6 +19,8 @@ interface ActivityClientProps {
|
|||
course: any;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function ActivityClient(props: ActivityClientProps) {
|
||||
const activityid = props.activityid;
|
||||
const courseid = props.courseid;
|
||||
|
|
@ -27,149 +28,104 @@ function ActivityClient(props: ActivityClientProps) {
|
|||
const activity = props.activity;
|
||||
const course = props.course;
|
||||
|
||||
|
||||
async function markActivityAsCompleteFront() {
|
||||
const trail = await markActivityAsComplete(orgslug, courseid, activityid);
|
||||
mutate(`${getAPIUrl()}activities/activity_${activityid}`);
|
||||
mutate(`${getAPIUrl()}courses/meta/course_${courseid}`);
|
||||
function getChapterName(chapterId: string) {
|
||||
let chapterName = "";
|
||||
course.chapters.forEach((chapter: any) => {
|
||||
if (chapter.chapter_id === chapterId) {
|
||||
chapterName = chapter.name;
|
||||
}
|
||||
});
|
||||
return chapterName;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="max-w-7xl mx-auto px-4 space-y-5 pt-0">
|
||||
<pre style={{ display: "none" }}>{JSON.stringify(activity, null, 2)}</pre>
|
||||
<ActivityTopWrapper>
|
||||
<ActivityThumbnail>
|
||||
<GeneralWrapperStyled>
|
||||
<div className="space-y-4 pt-4">
|
||||
<div className="flex space-x-6">
|
||||
<div className="flex">
|
||||
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}`}>
|
||||
<img src={`${getBackendUrl()}content/uploads/img/${course.course.thumbnail}`} alt="" />
|
||||
<img className="w-[100px] h-[57px] rounded-md drop-shadow-md" src={`${getBackendUrl()}content/uploads/img/${course.course.thumbnail}`} alt="" />
|
||||
</Link>
|
||||
</ActivityThumbnail>
|
||||
<ActivityInfo>
|
||||
<p>Course</p>
|
||||
<h1>{course.course.name}</h1>
|
||||
</ActivityInfo>
|
||||
</ActivityTopWrapper>
|
||||
</div>
|
||||
<div className="flex flex-col -space-y-1">
|
||||
<p className="font-bold text-gray-700 text-md">Course </p>
|
||||
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{course.course.name}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<ActivityIndicators current_activity={activityid} orgslug={orgslug} course={course} />
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex flex-col -space-y-1">
|
||||
<p className="font-bold text-gray-700 text-md">Chapter : {getChapterName(activity.chapter_id)}</p>
|
||||
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{activity.name}</h1>
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<MarkStatus activityid={activityid} course={course} orgslug={orgslug} courseid={courseid} />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{activity ? (
|
||||
<div className="p-7 pt-2 drop-shadow-sm rounded-lg bg-white">
|
||||
<CourseContent>
|
||||
<div className={`p-7 pt-2 drop-shadow-sm rounded-lg ${activity.type == 'dynamic' ? 'bg-white' : 'bg-zinc-950'}`}>
|
||||
<div>
|
||||
{activity.type == "dynamic" && <Canva content={activity.content} activity={activity} />}
|
||||
{/* todo : use apis & streams instead of this */}
|
||||
{activity.type == "video" && <VideoActivity course={course} activity={activity} />}
|
||||
|
||||
{activity.type == "documentpdf" && <DocumentPdfActivity course={course} activity={activity} />}
|
||||
|
||||
<ActivityMarkerWrapper className="py-10">
|
||||
<div className="py-10">
|
||||
|
||||
{course.trail.activities_marked_complete &&
|
||||
course.trail.activities_marked_complete.includes("activity_" + activityid) &&
|
||||
course.trail.status == "ongoing" ? (
|
||||
<button style={{ backgroundColor: "green" }}>
|
||||
<i>
|
||||
<Check size={20}></Check>
|
||||
</i>{" "}
|
||||
Already completed
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={markActivityAsCompleteFront}>
|
||||
{" "}
|
||||
<i>
|
||||
<Check size={20}></Check>
|
||||
</i>{" "}
|
||||
Mark as complete
|
||||
</button>
|
||||
)}
|
||||
</ActivityMarkerWrapper>
|
||||
</CourseContent>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (<div></div>)}
|
||||
{<div style={{ height: "100px" }}></div>}
|
||||
</div>
|
||||
</GeneralWrapperStyled>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const ActivityThumbnail = styled.div`
|
||||
padding-right: 30px;
|
||||
justify-self: center;
|
||||
img {
|
||||
box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.42);
|
||||
border-radius: 7px;
|
||||
width: 100px;
|
||||
height: 57px;
|
||||
}
|
||||
`;
|
||||
const ActivityInfo = styled.div`
|
||||
h1 {
|
||||
margin-top: 0px;
|
||||
|
||||
export function MarkStatus(props: { activityid: string, course: any, orgslug: string, courseid: string }) {
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
async function markActivityAsCompleteFront() {
|
||||
const trail = await markActivityAsComplete(props.orgslug, props.courseid, props.activityid);
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
|
||||
|
||||
const ActivityTopWrapper = styled.div`
|
||||
width: 1300px;
|
||||
padding-top: 50px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const CourseContent = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
`;
|
||||
|
||||
const ActivityMarkerWrapper = styled.div`
|
||||
display: block;
|
||||
width: 1300px;
|
||||
justify-content: flex-end;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
background-color: #151515;
|
||||
border: none;
|
||||
padding: 18px;
|
||||
border-radius: 15px;
|
||||
margin: 15px;
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-family: "DM Sans";
|
||||
font-size: 16px;
|
||||
letter-spacing: -0.05em;
|
||||
box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.42);
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
|
||||
// center the icon
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
return (
|
||||
<>{props.course.trail.activities_marked_complete &&
|
||||
props.course.trail.activities_marked_complete.includes("activity_" + props.activityid) &&
|
||||
props.course.trail.status == "ongoing" ? (
|
||||
<div className="bg-teal-600 rounded-md drop-shadow-md flex flex-col p-3 text-sm text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out" >
|
||||
<i>
|
||||
<Check size={15}></Check>
|
||||
</i>{" "}
|
||||
Already completed
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-zinc-600 rounded-md drop-shadow-md flex flex-col p-3 text-sm text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out" onClick={markActivityAsCompleteFront}>
|
||||
{" "}
|
||||
<i>
|
||||
<Check size={15}></Check>
|
||||
</i>{" "}
|
||||
Mark as complete
|
||||
</div>
|
||||
)}</>
|
||||
)
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #000000;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
export default ActivityClient;
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const CourseClient = (props: any) => {
|
|||
|
||||
<ActivityIndicators orgslug={orgslug} course={course} />
|
||||
|
||||
<div className="flex flex-row pt-10">
|
||||
<div className="flex flex-row pt-10 flex-wrap">
|
||||
<div className="course_metadata_left grow space-y-2">
|
||||
<h2 className="py-3 text-2xl font-bold">Description</h2>
|
||||
<StyledBox>
|
||||
|
|
|
|||
|
|
@ -1,75 +1,18 @@
|
|||
import { getBackendUrl } from "@services/config/config";
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
function DocumentPdfActivity({ activity, course }: { activity: any; course: any }) {
|
||||
function getChapterName() {
|
||||
let chapterName = "";
|
||||
let chapterId = activity.chapter_id;
|
||||
course.chapters.forEach((chapter: any) => {
|
||||
if (chapter.chapter_id === chapterId) {
|
||||
chapterName = chapter.name;
|
||||
}
|
||||
});
|
||||
return chapterName;
|
||||
}
|
||||
|
||||
return (
|
||||
<DocumentPdfActivityLayout>
|
||||
<DocumentPdfTitle>
|
||||
<p>Chapter : {getChapterName()}</p>
|
||||
{activity.name}
|
||||
</DocumentPdfTitle>
|
||||
<DocumentPdfPlayerWrapper>
|
||||
<div className="m-8 bg-zinc-900 rounded-md mt-14">
|
||||
<iframe
|
||||
className="rounded-lg w-full h-[900px]"
|
||||
src={`${getBackendUrl()}content/uploads/documents/documentpdf/${activity.content.documentpdf.activity_id}/${activity.content.documentpdf.filename}`}
|
||||
/>
|
||||
</DocumentPdfPlayerWrapper>
|
||||
</DocumentPdfActivityLayout>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DocumentPdfActivity;
|
||||
|
||||
const DocumentPdfActivityLayout = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
background: #141414;
|
||||
min-width: 100%;
|
||||
min-height: 1200px;
|
||||
`;
|
||||
|
||||
const DocumentPdfTitle = styled.div`
|
||||
display: flex;
|
||||
width: 1300px;
|
||||
margin: 0 auto;
|
||||
padding-top: 20px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
flex-direction: column;
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #ffffffaa;
|
||||
}
|
||||
`;
|
||||
|
||||
const DocumentPdfPlayerWrapper = styled.div`
|
||||
display: flex;
|
||||
width: 1300px;
|
||||
margin: 0 auto;
|
||||
justify-content: center;
|
||||
padding-top: 20px;
|
||||
|
||||
iframe {
|
||||
width: 1300px;
|
||||
height: 500px;
|
||||
border-radius: 7px;
|
||||
background-color: black;
|
||||
border: none;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -7,9 +7,10 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
|
|||
const [videoId, setVideoId] = React.useState('');
|
||||
const [videoType, setVideoType] = React.useState('');
|
||||
|
||||
function getChapterName() {
|
||||
let chapterName = "";
|
||||
let chapterId = activity.chapter_id;
|
||||
|
||||
function getChapterName(chapterId: string) {
|
||||
let chapterName = "";
|
||||
course.chapters.forEach((chapter: any) => {
|
||||
if (chapter.chapter_id === chapterId) {
|
||||
chapterName = chapter.name;
|
||||
|
|
@ -45,18 +46,14 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
|
|||
}, [activity]);
|
||||
|
||||
return (
|
||||
<VideoActivityLayout>
|
||||
<VideoTitle>
|
||||
<p>{getChapterName()}</p>
|
||||
<p>{activity.name}</p>
|
||||
</VideoTitle>
|
||||
<div>
|
||||
{videoType === 'video' && (
|
||||
<VideoPlayerWrapper>
|
||||
<video controls src={`${getBackendUrl()}content/uploads/video/${activity.content.video.activity_id}/${activity.content.video.filename}`}></video>
|
||||
</VideoPlayerWrapper>
|
||||
<div className="m-8 bg-zinc-900 rounded-md mt-14">
|
||||
<video className="rounded-lg w-full h-[500px]" controls src={`${getBackendUrl()}content/uploads/video/${activity.content.video.activity_id}/${activity.content.video.filename}`}></video>
|
||||
</div>
|
||||
)}
|
||||
{videoType === 'external_video' && (
|
||||
<VideoPlayerWrapper>
|
||||
<div>
|
||||
<YouTube
|
||||
className="rounded-md overflow-hidden"
|
||||
opts={
|
||||
|
|
@ -70,10 +67,10 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
|
|||
}
|
||||
}
|
||||
videoId={videoId} />
|
||||
</VideoPlayerWrapper>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</VideoActivityLayout>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -82,44 +79,4 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
|
|||
|
||||
export default VideoActivity;
|
||||
|
||||
const VideoActivityLayout = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
background: #141414;
|
||||
min-width: 100%;
|
||||
min-height: 1200px;
|
||||
`;
|
||||
|
||||
const VideoTitle = styled.div`
|
||||
display: flex;
|
||||
width: 1300px;
|
||||
margin: 0 auto;
|
||||
padding-top: 20px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
flex-direction: column;
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #ffffffaa;
|
||||
}
|
||||
`;
|
||||
|
||||
const VideoPlayerWrapper = styled.div`
|
||||
display: flex;
|
||||
width: 1300px;
|
||||
margin: 0 auto;
|
||||
justify-content: center;
|
||||
padding-top: 20px;
|
||||
|
||||
video {
|
||||
width: 1300px;
|
||||
height: 500px;
|
||||
border-radius: 7px;
|
||||
background-color: black;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ function ActivityIndicators(props: Props) {
|
|||
<div className='grid grid-flow-col justify-stretch space-x-2'>
|
||||
{chapter.activities.map((activity: any) => {
|
||||
return (
|
||||
<ToolTip sideOffset={-5} slateBlack content={activity.name} key={activity.id}>
|
||||
<ToolTip sideOffset={8} slateBlack content={activity.name} key={activity.id}>
|
||||
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
|
||||
<div className={`h-[7px] w-auto ${getActivityClass(activity)} rounded-lg shadow-md`}></div>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
import React from 'react';
|
||||
import * as Tooltip from '@radix-ui/react-tooltip';
|
||||
import { styled, keyframes } from '@stitches/react';
|
||||
import { violet, blackA } from '@radix-ui/colors';
|
||||
import { PlusIcon } from '@radix-ui/react-icons';
|
||||
|
||||
|
||||
type TooltipProps = {
|
||||
|
|
@ -24,7 +22,6 @@ const ToolTip = (props: TooltipProps) => {
|
|||
<Tooltip.Portal>
|
||||
<TooltipContent slateBlack={props.slateBlack} side="bottom" sideOffset={props.sideOffset}>
|
||||
{props.content}
|
||||
<TooltipArrow />
|
||||
</TooltipContent>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
|
|
@ -62,7 +59,7 @@ const TooltipContent = styled(Tooltip.Content, {
|
|||
variants: {
|
||||
slateBlack: {
|
||||
true: {
|
||||
backgroundColor: " #5a5a5a",
|
||||
backgroundColor: " #0d0d0d",
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
|
|
@ -96,25 +93,6 @@ const TooltipContent = styled(Tooltip.Content, {
|
|||
},
|
||||
});
|
||||
|
||||
const TooltipArrow = styled(Tooltip.Arrow, {
|
||||
fill: 'white',
|
||||
|
||||
});
|
||||
|
||||
const IconButton = styled('button', {
|
||||
all: 'unset',
|
||||
fontFamily: 'inherit',
|
||||
borderRadius: '100%',
|
||||
height: 35,
|
||||
width: 35,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: violet.violet11,
|
||||
backgroundColor: 'white',
|
||||
boxShadow: `0 2px 10px ${blackA.blackA7}`,
|
||||
'&:hover': { backgroundColor: violet.violet3 },
|
||||
'&:focus': { boxShadow: `0 0 0 2px black` },
|
||||
});
|
||||
|
||||
export default ToolTip;
|
||||
Loading…
Add table
Add a link
Reference in a new issue