complete progress section
This commit is contained in:
HAM!DREZA
@@ -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>
|
||||
@@ -147,5 +147,5 @@
|
||||
|
||||
<script setup>
|
||||
const props = defineProps(['props'])
|
||||
console.log('props', props);
|
||||
|
||||
</script>
|
||||
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user