CLASSROOMIO-T-167:Allow user upload image in the landing page
Merge branch 'main' into CLASSROOMIO-T-167 CLASSROOMIO-T-186:Allow user upload image in the landing page Co-authored-by: Ifeanyi Nwosu <[email protected]> Merge-request: CLASSROOMIO-MR-84 Merged-by: Best Admin <[email protected]>
This commit is contained in:
emmanuel
@@ -1,16 +1,58 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { settings } from '$lib/components/Course/components/Settings/store';
|
||||
import TextArea from '$lib/components/Form/TextArea.svelte';
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { supabase } from '$lib/utils/functions/supabase';
|
||||
import { updateCourse } from '$lib/utils/services/courses';
|
||||
import { landingPage } from '../../store';
|
||||
|
||||
export let course = {};
|
||||
let fileInput;
|
||||
let imageBuffer;
|
||||
let avatar;
|
||||
|
||||
const uploadImage = async (image: File) => {
|
||||
if (image) {
|
||||
const filename = `landingpage/${Date.now()}` + image.name;
|
||||
const { data } = await supabase.storage.from('avatars').upload(filename, image, {
|
||||
cacheControl: '3600',
|
||||
upsert: false
|
||||
});
|
||||
|
||||
if (data) {
|
||||
const { data: response } = await supabase.storage.from('avatars').getPublicUrl(filename);
|
||||
|
||||
$landingPage.imageUrl = response.publicUrl;
|
||||
$settings.image = $landingPage.imageUrl;
|
||||
|
||||
await updateCourse(course.id, avatar, {
|
||||
logo: $settings.image
|
||||
});
|
||||
|
||||
course.logo = $settings.image;
|
||||
|
||||
$landingPage.uploadingImage = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onFileSelected = () => {
|
||||
$landingPage.uploadingImage = true;
|
||||
const image = fileInput.files[0];
|
||||
if (image) {
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(image);
|
||||
reader.onload = (e) => {
|
||||
imageBuffer = image;
|
||||
uploadImage(image);
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<TextField
|
||||
className="mt-5"
|
||||
labelClassName="font-bold"
|
||||
label="Title"
|
||||
bind:value={course.title}
|
||||
/>
|
||||
<TextField className="mt-5" labelClassName="font-bold" label="Title" bind:value={course.title} />
|
||||
|
||||
<TextArea
|
||||
label="Description"
|
||||
@@ -29,3 +71,18 @@
|
||||
type="text"
|
||||
bind:value={course.metadata.videoUrl}
|
||||
/>
|
||||
<div>
|
||||
<PrimaryButton
|
||||
variant={VARIANTS.LINK}
|
||||
label="Replace Banner image"
|
||||
className="-ml-6"
|
||||
onClick={() => fileInput.click()}
|
||||
/>
|
||||
<input
|
||||
type="file"
|
||||
accept=".jpg, .jpeg, .png"
|
||||
style="display: none;"
|
||||
bind:this={fileInput}
|
||||
on:change={onFileSelected}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -22,7 +22,8 @@
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
|
||||
import { calDateDiff } from '$lib/utils/functions/date';
|
||||
|
||||
import { landingPage } from './store';
|
||||
import { Loading } from 'carbon-components-svelte';
|
||||
export let editMode = false;
|
||||
export let courseData: Course;
|
||||
const ratingsImg = [
|
||||
@@ -85,6 +86,7 @@
|
||||
});
|
||||
|
||||
$: video = get(courseData, 'metadata.videoUrl');
|
||||
$: bannerImage = get(courseData, 'logo');
|
||||
$: lessons = get(courseData, 'lessons', []);
|
||||
$: instructor = courseData?.metadata?.instructor || {};
|
||||
$: initPlyr(player, video);
|
||||
@@ -144,6 +146,18 @@
|
||||
/>
|
||||
</div> -->
|
||||
{:else}
|
||||
<div class="w-2/3 relative rounded-md overflow-hidden">
|
||||
<img
|
||||
style="min-width:280px; min-height:200px"
|
||||
alt="About us"
|
||||
src={bannerImage ? bannerImage : '/images/classroomio-course-img-template.jpg'}
|
||||
class="mt-2 md:mt-0 rounded-md w-full relative"
|
||||
/>
|
||||
{#if $landingPage.uploadingImage}
|
||||
<Loading withOverlay={true} small class="absolute top-0 w-full h-full" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- <div
|
||||
class="banner-image w-2/3 h-96 relative cursor-pointer"
|
||||
on:click={playVideo}
|
||||
|
||||
@@ -8,40 +8,40 @@ export const landingPageStore = writable({
|
||||
duration: 'Estimated 8 weeks',
|
||||
cost: 300,
|
||||
currency: '$',
|
||||
buttonLabel: 'Enrol',
|
||||
buttonLabel: 'Enrol'
|
||||
},
|
||||
requirement: {
|
||||
content:
|
||||
"You don't need any experience creating an online business or digital product. \nYou don't need an online presence, website, or following - but it will help kickstart your online business if you do.",
|
||||
"You don't need any experience creating an online business or digital product. \nYou don't need an online presence, website, or following - but it will help kickstart your online business if you do."
|
||||
},
|
||||
description: {
|
||||
content:
|
||||
"### Have you ever dreamed of starting your own online business?. \n\nOf course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. \n### Enroll today and get instant access to. \n\nOf course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though.\n ### You will learn many types of digital marketing:\n\n Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though.",
|
||||
"### Have you ever dreamed of starting your own online business?. \n\nOf course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. \n### Enroll today and get instant access to. \n\nOf course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though.\n ### You will learn many types of digital marketing:\n\n Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though."
|
||||
},
|
||||
syllabus: {
|
||||
lessons: [
|
||||
{
|
||||
title: 'What is FinTech?',
|
||||
title: 'What is FinTech?'
|
||||
},
|
||||
{
|
||||
title: 'Payments, Cryptocurrencies and Blockchain',
|
||||
title: 'Payments, Cryptocurrencies and Blockchain'
|
||||
},
|
||||
{
|
||||
title: 'Digital Finance and Alternative Finance',
|
||||
title: 'Digital Finance and Alternative Finance'
|
||||
},
|
||||
{
|
||||
title: 'FinTech Regulation and RegTech',
|
||||
title: 'FinTech Regulation and RegTech'
|
||||
},
|
||||
{
|
||||
title: 'Data & TechFin',
|
||||
},
|
||||
],
|
||||
title: 'Data & TechFin'
|
||||
}
|
||||
]
|
||||
},
|
||||
aboutUs: {
|
||||
companyName: 'The Brad School',
|
||||
logoUrl: 'https://img-c.udemycdn.com/user/200_H/19701574_95d1_13.jpg',
|
||||
description:
|
||||
'*Learn creative skills, from absolute beginner to advanced mastery.*\nVideo School exists to help you succeed in life. Each course has been hand-tailored to teach a specific skill from photography and video to art, design and business.\n**Whether you’re trying to learn a new skill from scratch, or want to refresh your memory on something you’ve learned in the past, you’ve come to the right place.**\nEducation makes the world a better place. Make your world better with new skills!\nOur courses can be watched 24/7 wherever you are. Most are fully downloadable so you can take them with you. You can also view them on mobile devices with the Udemy mobile app.\nAll courses have a 30-day money-back guarantee so that you can check it out, make sure it’s the right course for you, and get a refund if it’s not!',
|
||||
'*Learn creative skills, from absolute beginner to advanced mastery.*\nVideo School exists to help you succeed in life. Each course has been hand-tailored to teach a specific skill from photography and video to art, design and business.\n**Whether you’re trying to learn a new skill from scratch, or want to refresh your memory on something you’ve learned in the past, you’ve come to the right place.**\nEducation makes the world a better place. Make your world better with new skills!\nOur courses can be watched 24/7 wherever you are. Most are fully downloadable so you can take them with you. You can also view them on mobile devices with the Udemy mobile app.\nAll courses have a 30-day money-back guarantee so that you can check it out, make sure it’s the right course for you, and get a refund if it’s not!'
|
||||
},
|
||||
reviews: [
|
||||
{
|
||||
@@ -51,12 +51,16 @@ export const landingPageStore = writable({
|
||||
avatar_url: '/logo-192.png',
|
||||
rating: 1,
|
||||
created_at: new Date(),
|
||||
description:
|
||||
'rice ventore officiis maxime laudantium recusandae sit dolor.',
|
||||
},
|
||||
],
|
||||
description: 'rice ventore officiis maxime laudantium recusandae sit dolor.'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
export const reviewsModalStore = writable({
|
||||
open: false,
|
||||
open: false
|
||||
});
|
||||
|
||||
export const landingPage = writable({
|
||||
uploadingImage: false,
|
||||
imageUrl: ''
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user