danak/dlearn-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

complete progress section

Browse Source
This commit is contained in:
HAM!DREZA
2024-07-01 23:09:43 +03:30
parent 87e16dc016
commit a8e723ddf0
28 changed files with 333 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ProgressCard.vue
+10 -4
View File
@@ -17,11 +17,11 @@
<div
class="w-full flex flex-col justify-center space-y-[1.042vw] md:space-y-[1.25vw]"
>
<nuxt-link :to="`${props.item?.id}`"
class="mb-[15vw] md:mb-[2.5vw] text-[14px] md:text-[0.833vw] text-[#383E43] ] mt-[4vw] md:mt-[1.042vw] ms-[3vw] md:ms-[0.625vw]"
<p @click="change"
class="cursor-pointer mb-[15vw] md:mb-[2.5vw] text-[14px] md:text-[0.833vw] text-[#383E43] ] mt-[4vw] md:mt-[1.042vw] ms-[3vw] md:ms-[0.625vw]"
>
{{ props.item?.name }}
</nuxt-link>
</p>
<div
class="flex flex-col justify-between items-center py-[3vw] md:py-[0.7vw] mx-[3vw] md:mx-[0.833vw] border-t"
@@ -43,8 +43,14 @@
</div>
</template>
<script setup>
const props = defineProps(['item']);
const props = defineProps(['item']);
const router = useRouter()
const route = useRoute()
console.log(props);
const change = () =>{
router.replace(`/${props.item.id}`)
}
</script>
<style scoped>
components/home-page/About-us.vue
+8 -13
View File
@@ -11,19 +11,9 @@
درباره ما
</h2>
<p
class="text-[#383E43] max-w-[766px] text-[3.59vw] md:text-[1.335vw] mt-[4vw] md:mt-[1.354vw] mb-[6vw] md:mb-0 leading-[7.179vw] md:leading-[2.865vw]"
class="about text-[#383E43] max-w-[766px] text-[3.59vw] md:text-[1.335vw] mt-[4vw] md:mt-[1.354vw] mb-[6vw] md:mb-0 leading-[7.179vw] md:leading-[2.865vw]"
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی
در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می
طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این
صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و
شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای
اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده
قرار گیرد.
</p>
</div>
@@ -37,7 +27,12 @@
</div>
</div>
</template>
<script setup>
const info = await useFetch('/api/settings')
if (process.client) {
document.querySelector('.about').innerHTML = info.data.value.about
}
</script>
<style>
@media (min-width: 768px) {
components/home-page/Information.vue
+2 -2
View File
@@ -78,7 +78,7 @@
</svg>
<div class="text-[#383E43] font-semibold">
<p class="text-[5.11vw] md:text-[1.979vw]">{{info.data.value.title}}</p>
<p class="text-[5.11vw] md:text-[1.979vw]">{{info.data.value.expertise}}</p>
<p class="text-[3.59vw] md:text-[1.502vw]">ویدئوی آموزشی</p>
</div>
</div>
@@ -114,7 +114,7 @@
</svg>
<div class="text-[#383E43] font-semibold">
<p class="text-[5.11vw] md:text-[1.979vw]">4.6</p>
<p class="text-[5.11vw] md:text-[1.979vw]">{{info.data.value.rate}}</p>
<p class="text-[3.59vw] md:text-[1.502vw]">امتیاز دانشجویان به ما</p>
</div>
</div>
components/home-page/Intro.vue
+11 -13
View File
@@ -3,23 +3,21 @@
<img src="/public/images/HeaderBg.jpg" class="absolute top-0 left-0 w-full h-full object-cover -z-[1] scale-x-[-1] md:scale-x-[1]" alt="">
<div class=" flex w-[81.04%] text-white">
<div class="flex flex-col text-start">
<h2 class="text-[5.751vw] md:text-[2.188vw] font-bold mt-[25vw] md:mt-[0.052vw]">
داستان برنامه‌نویس <br />
شدنت از اینجا شروع میشه!
<h2 class="w-[25vw] text-[5.751vw] md:text-[2.188vw] font-bold mt-[25vw] md:mt-[0.052vw]">
{{ headers.data?.value.header }}
</h2>
<p class="hidden md:block mt-[1.25vw] text-[1.055vw] leading-[30.38px] mb-[2.917vw]">
شینان، آکادمی آموزش آنلاین تخصصی برنامه نویسی، با افتخار بهترین و به روزترین مقالات و فیلم های
آموزشی
پروژه محور و کاربردی در زمینه برنامه نویسی وب را در اختیار علاقه مندان این <br /> قرار خواهد
داد تا
بتوانند از این طریق درآمد بیشتری کسب کنند با ما همراه باشید تا گام های تبدیل شدن به توسعه دهنده وب
را از
مبتدی تا پیشرفته طی کنیم
{{ headers.data?.value.titleText }}
</p>
<button
<nuxt-link to="/courses"
class="greenButton h-[8.974vw] md:h-[3.125vw] px-0 flexBox rounded-[2.051vw] md:rounded-[0.521vw] w-[26.41vw] md:w-[14.01vw] text-[3.19vw] md:text-[1.055vw] mt-[10vw] md:mt-0">شروع
یادگیری</button>
یادگیری </nuxt-link>
</div>
</div>
</div>
</template>
</template>
<script setup>
const headers = await useFetch("/api/settings")
</script>
components/product-page/Attended-course.vue
+151 -29
View File
@@ -22,13 +22,15 @@
fill="#0D3F40"
/>
</svg>
<span
<h1
class="text-[4.544vw] md:text-[1.69vw] text-[#383E43] font-bold -tracking-[0.05vw]"
>آموزش HTML رایگان مقدماتی تا پیشرفته</span
>
{{ activeHead?.headline }}
</h1>
</div>
<video
@ended="handleVideoEnded"
id="myVideo"
ref="video"
controls
@@ -39,7 +41,21 @@
<div
class="relative flex items-center text-[4.038vw] md:text-[1.502vw] mt-[6vw] md:mt-[1.6vw] font-semibold"
>
{{ activeHead?.headline }}
<div class="w-full flex justify-between">
<h1>{{ activeHead?.description }}</h1>
<p
@click="nextHandler(item)"
class="hidden animate-bounce next text-[0.75vw] cursor-pointer flex items-center gap-[0.3vw] pe-[1vw]"
>
مشاهده قسمت بعد
<img
src="/public/images/next-svgrepo-com.svg"
alt=""
class="h-[0.8vw] rotate-180"
/>
</p>
</div>
<div class="absolute gap-[2vw] flex md:hidden left-0">
<svg
class="h-[5.641vw] w-[5.641vw]"
@@ -257,6 +273,7 @@
</div>
<div
v-for="item in activeHead.Comment"
v-show="item.status === 'Active'"
:key="item.id"
class="mt-[1vw] relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between p-[4vw] md:p-[1.55vw]"
>
@@ -340,7 +357,7 @@
<p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
پرسش جدید
</p>
{{replyId}}
{{ replyId }}
</div>
</div>
<textarea
@@ -355,7 +372,7 @@
class="flex justify-end gap-[1vw] text-[3.19vw] md:text-[0.833vw] text-white"
>
<button
@click="replyId = null"
@click="replyId = null"
class="h-[8.974vw] md:h-[2.292vw] w-[20.769vw] md:w-[5.573vw] rounded-[2.051vw] md:rounded-[0.521vw] bg-[#5A6268]"
>
حذف
@@ -380,7 +397,6 @@
<label
v-for="item in data"
:key="item.id"
class="cursor-pointer text-[#383E43] h-[14.615vw] md:h-[3.125vw] px-[3vw] md:px-[1.25vw] text-[3.59vw] md:text-[0.833vw] w-full flex justify-between"
>
<div class="flexBox gap-[1vw] md:gap-[0.3vw]">
@@ -431,7 +447,27 @@
</label>
</div>
</div>
<product-page-attended-coursesProgress-bar />
<!-- <product-page-attended-coursesProgress-bar /> -->
<div
class="mt-[5vw] rounded-[3.846vw] md:rounded-[0.781vw] bg-[#F8F8F8] pinkShadow p-[4vw] md:p-[1vw] space-y-[6vw] md:space-y-[2vw] md:mt-[1vw] text-[#383E43]"
>
<div
class="flex justify-between text-[3.19vw] md:text-[0.833vw] font-semibold text-[#383E43]"
>
<span class="text-[3.59vw] md:text-[0.938vw]">پیشرفت شما</span>
<span>{{ progress.completionPercentage }}%</span>
</div>
<div
id="progressbar"
class="test mt-[3vw] md:mt-[0.7vw] h-[2.051vw] md:h-[0.521vw] rounded-[2vw] md:rounded-[0.521vw]"
>
<div
:style="{ width: activeClass + '%' }"
class="bg-[#0d3f40] float-end prog rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.521vw]"
></div>
</div>
</div>
</div>
</div>
</div>
@@ -447,15 +483,42 @@ const url = ref(null);
const query = ref({});
const toast = useToast();
const comment = ref(null);
const index = ref(0);
query.value = route.query;
const { authUser } = useAuth();
const { data: progress, refresh: reload } = await useFetch("/api/progress", {
method: "POST",
body: {
id: route.params.product,
userId: authUser.value.id,
},
});
const activeClass = ref(progress.value.completionPercentage);
const { data, refresh } = await useFetch("/api/courseHeadlines", {
query: {
id: route.params.product,
},
});
async function addToProgress() {
await $fetch("/api/progressCounter", {
method: "POST",
body: {
id: route.query.episode,
},
});
}
import progressAlert from "@/components/progressAlert.vue";
const handleVideoEnded = async () => {
addToProgress();
reload();
if (process.client) {
document.querySelector(".next").classList.remove("hidden");
}
toast.success('ویدیو به پایان رسید');
};
const sendComment = async () => {
if (comment.value === "" || comment.value === null) {
@@ -472,25 +535,23 @@ const sendComment = async () => {
refresh();
toast.success("نظر شما با موفقیت ثبت شد");
comment.value = "";
}else{
} else {
await $fetch("/api/comments/courseHeadlineReply", {
method: "POST",
body: {
id: replyId,
text: comment.value,
},
});
refresh();
toast.success("نظر شما با موفقیت ثبت شد");
comment.value = "";
method: "POST",
body: {
id: replyId,
text: comment.value,
},
});
refresh();
toast.success("نظر شما با موفقیت ثبت شد");
comment.value = "";
}
};
const replyId = ref(null)
const replyId = ref(null);
const reply = async (id) => {
replyId.value = id
replyId.value = id;
};
function copyUrl() {
@@ -501,28 +562,78 @@ function copyUrl() {
if (query.value.hasOwnProperty("episode")) {
const fimd = data.value.find((items) => items.id === query.value.episode);
activeHead.value = fimd;
url.value = fimd.videoUrl;
const getUrl = await useFetch("/api/checkMedia", {
query: {
fileName: fimd.videoUrl,
},
});
console.log("video", getUrl.data.value.url);
url.value = getUrl.data.value.url;
index.value = data.value.indexOf(fimd);
refresh();
} else {
activeHead.value = data.value[0];
url.value = data.value[0].videoUrl;
const getUrl = await useFetch("/api/checkMedia", {
query: {
fileName: data.value[0].videoUrl,
},
});
url.value = getUrl.data.value.url;
index.value = 0;
}
const chengeVideo = (item) => {
async function chengeVideo(item) {
if (process.client) {
document.querySelector(".next").classList.add("hidden");
}
query.value = { ...route.query, episode: item.id };
activeHead.value = item;
url.value = item.videoUrl;
const getUrl = await useFetch("/api/checkMedia", {
query: {
fileName: item.videoUrl,
},
});
url.value = getUrl.data.value.url;
index.value = data.value.indexOf(item);
video.value.load();
router.push({
query: query.value,
});
await refresh();
}
console.log("yek", data.value[index.value]);
async function nextHandler() {
if (process.client) {
document.querySelector(".next").classList.add("hidden");
}
query.value = { ...route.query, episode: data.value[index.value + 1].id };
index.value = index.value + 1;
console.log("index", index);
// const addToProgress = await $fetch("/api/progressCounter", {
// method: "POST",
// body: {
// id: route.query.episode,
// },
// });
addToProgress()
activeHead.value = data.value[index.value];
const getUrl = await useFetch("/api/checkMedia", {
query: {
fileName: data.value[index.value].videoUrl,
},
});
url.value = getUrl.data.value.url;
video.value.load();
activeClass.value = progress.value.completionPercentage;
refresh();
};
console.log(activeHead.value.Comment);
reload();
router.push({
query: query.value,
});
}
</script>
<style scoped>
video {
border-radius: 0.781vw;
@@ -532,4 +643,15 @@ video {
border-radius: 3.846vw;
}
}
#progressbar {
background-color: #e5e5e5;
width: 100%;
}
#progressbar > div {
background-color: #0d3f40;
float: left I !important;
left: 0;
}
</style>
components/product-page/attended-courses/Headlines.vue
+1 -1
View File
@@ -147,5 +147,5 @@
<script setup>
const props = defineProps(['props'])
console.log('props', props);
</script>
components/product-page/course-details/Course-information.vue
-1
View File
@@ -261,7 +261,6 @@
<script setup>
import { useToast } from "vue-toastification";
const { authUser } = useAuth();
console.log('user', authUser.value === null);
const props = defineProps(["props"], ["access"]);
const toast = useToast()
const router = useRouter()
components/progressAlert.vue
+18
View File
@@ -0,0 +1,18 @@
<template>
<div class="container">
<button
class="action px-[0.5vw]"
@click.stop="clicked"
>جهت مشاهده قسمت بعد کلیک کنید</button>
</div>
</template>
<script>
export default {
methods: {
clicked() {
alert("Clicked!");
}
}
};
</script>