From a716c07cf5fd82c0fb06795c4848df63b55b080d Mon Sep 17 00:00:00 2001 From: tunny17 Date: Thu, 24 Aug 2023 07:32:19 +0000 Subject: [PATCH] CLASSROOMIO-T-115:Allow Landing page UI to use Org Landing page settings CLASSROOMIO-T-115: Fetch data on server CLASSROOMIO-T-115: Add dynamic debug orgs, handle not found orgs, add 404 to public route CLASSROOMIO-T-115:Automacally add prefix to the footer input CLASSROOMIO-T-115:Implemented the video to also play youtube videos Merge branch 'CLASSROOMIO-T-115' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-115 CLASSROOMIO-T-115:Implemented the video to also play youtube videos CLASSROOMIO-T-115:Still woking on the landing page UI CLASSROOMIO-T-115: Some improvements CLASSROOMIO-T-115:Working on the landing page UI Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio CLASSROOMIO-T-27: Review Section for Instructors on landing page CLASSROOMIO-T-27: Remove unused variable Merge branch 'CLASSROOMIO-T-27' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-27 CLASSROOMIO-T-27: Complete reviews functionality CLASSROOMIO-T-27: Review Render Update CLASSROOMIO-T-27: - Resolved Feedbacks CLASSROOMIO-T-27: Fixed Ratings Data CLASSROOMIO-T-27: - Added Ratings Svg - Fixed avatar_url feedback CLASSROOMIO-T-27: Import Adjustment CLASSROOMIO-T-27: Code Review CLASSROOM-T-27: Added Add Review Functionality CLASSROOMIO-T-27: - Unresolved Review - Enhance Code Redability CLASSROOMIO-T-27: Completed the delete functionality CLASSROOMIO-T-27: Hide/Show functionality CLASSROOMIO-T-27: Double Quotation Update CLASSROOMIO-T-27: Testing toggle functinality CLASSROOMIO-T-27: Added the icons CLASSROOMIO-T-27: Completion of the hide/show functionality CLASSROOMIO-T-27: Display the store data on the review page for styling CLASSROOMIO-T-27: Styling of the review component & connecting it's data CLASSROOMIO-T-27: - Add ReviewsForm - Completion of the Reviews Form Structure/Styling CLASSROOMIO-T-27: Added a reviews modal CLASSROOMIO-T-27: Logic update for review section CLASSROOMIO-T-50: Logic for overlapping reviews CLASSROOMIO-T-27: - Completion of the structure & styling with mock data. - Addition of custom ratings assets CLASSROOMIO-T-27: - Review Section Code Structure - Import Profile Picture Assets Co-authored-by: Rotimi Best Co-authored-by: Tunji Adeyemi Co-authored-by: tunny17 Merge-request: CLASSROOMIO-MR-22 Merged-by: Best Admin CLASSROOMIO-T-62: Dark Mode Bug Fix CLASSROOMIO-T-62: Delete Unused class CLASSROOMIO-T-62: Dark Mode Bug Fix Co-authored-by: Tunji Adeyemi Merge-request: CLASSROOMIO-MR-23 Merged-by: Best Admin Co-authored-by: Ifeanyi Nwosu Co-authored-by: Rotimi Best Co-authored-by: Tunji Adeyemi Co-authored-by: tunny17 Merge-request: CLASSROOMIO-MR-53 Merged-by: Best Admin --- src/lib/components/Courses/index.svelte | 7 +- src/lib/components/Courses/store.js | 6 +- .../Org/LandingPage/PageLoader.svelte | 28 + .../components/Org/LandingPage/index.svelte | 784 ++++++++++-------- .../Org/Settings/LandingpageSettings.svelte | 37 +- src/lib/components/Org/Settings/store.ts | 8 +- src/lib/utils/constants/routes.ts | 3 +- src/lib/utils/functions/theme.ts | 13 + src/lib/utils/services/org/index.js | 10 - src/routes/+layout.server.js | 9 +- src/routes/+layout.svelte | 29 +- 11 files changed, 535 insertions(+), 399 deletions(-) create mode 100644 src/lib/components/Org/LandingPage/PageLoader.svelte create mode 100644 src/lib/utils/functions/theme.ts diff --git a/src/lib/components/Courses/index.svelte b/src/lib/components/Courses/index.svelte index d7a78e8a..aca8ed49 100644 --- a/src/lib/components/Courses/index.svelte +++ b/src/lib/components/Courses/index.svelte @@ -9,9 +9,7 @@ -
+
{#if $courseMetaDeta.isLoading} @@ -35,8 +33,7 @@

No Courses Created

- Share your knowledge with the world by creating engaging courses for - your students. + Share your knowledge with the world by creating engaging courses for your students.

{/each} diff --git a/src/lib/components/Courses/store.js b/src/lib/components/Courses/store.js index d30ea60e..f30531e2 100644 --- a/src/lib/components/Courses/store.js +++ b/src/lib/components/Courses/store.js @@ -2,7 +2,7 @@ import { writable } from 'svelte/store'; export const courses = writable([]); export const courseMetaDeta = writable({ - isLoading: false, + isLoading: true }); export const createCourseModal = writable({ @@ -11,7 +11,7 @@ export const createCourseModal = writable({ description: '', emails: '', tutors: '', - students: '', + students: '' }); export const copyCourseModalInitialState = { @@ -20,6 +20,6 @@ export const copyCourseModalInitialState = { id: '', title: '', isSaving: false, - error: null, + error: null }; export const copyCourseModal = writable({ ...copyCourseModalInitialState }); diff --git a/src/lib/components/Org/LandingPage/PageLoader.svelte b/src/lib/components/Org/LandingPage/PageLoader.svelte new file mode 100644 index 00000000..4a6cf178 --- /dev/null +++ b/src/lib/components/Org/LandingPage/PageLoader.svelte @@ -0,0 +1,28 @@ + + +
+ +
+ +
+ + + +
+
+ +
+ +
+ +
+ + + +
+
diff --git a/src/lib/components/Org/LandingPage/index.svelte b/src/lib/components/Org/LandingPage/index.svelte index d2d60c84..8f5c9829 100644 --- a/src/lib/components/Org/LandingPage/index.svelte +++ b/src/lib/components/Org/LandingPage/index.svelte @@ -10,7 +10,7 @@ import Phone from 'carbon-icons-svelte/lib/Phone.svelte'; import Email from 'carbon-icons-svelte/lib/Email.svelte'; import Rocket from 'carbon-icons-svelte/lib/Rocket.svelte'; - + import PageLoader from './PageLoader.svelte'; import { orgLandingpageValidation } from '$lib/utils/functions/validator'; import TextField from '$lib/components/Form/TextField.svelte'; import PrimaryButton from '$lib/components/PrimaryButton/index.svelte'; @@ -27,8 +27,10 @@ import { validateEmail } from '$lib/utils/functions/validateEmail'; import TextArea from '$lib/components/Form/TextArea.svelte'; import { goto } from '$app/navigation'; + import { landingPageSettings } from '$lib/components/Org/Settings/store'; export let orgSiteName = ''; + export let org = {}; let email: string | undefined; let isAdding = false; @@ -36,6 +38,7 @@ let successContactSaved = false; let viewAll = false; let isContactSubmiting = false; + let player; let contact = { name: '', email: '', @@ -43,36 +46,16 @@ message: '' }; let contactError = {}; - let video = - 'https://koxqonvbkeakwvmdegcf.supabase.co/storage/v1/object/public/avatars/course/About%20Best.mp4'; const supabase = getSupabase(); - const faqs = [ - { - title: 'What sets your bootcamp apart from other online resources?', - content: - 'Our bootcamp offers a structured and guided learning experience led by industry professionals who have a deep understanding of current web development trends and technologies. Unlike self-paced online tutorials, our program provides a hands-on, immersive environment with real-time feedback, personalized guidance, and the opportunity to work on practical projects that mirror real-world scenarios, preparing you for a successful career in web development.' - }, - { - title: 'Who is this bootcamp suitable for?', - content: - "Our web technologies bootcamp is suitable for individuals of all skill levels, from beginners with no prior coding experience to intermediate learners looking to enhance their web development capabilities. Whether you're a career changer, a recent graduate, or a professional aiming to upskill, our program is tailored to help you succeed." - }, - { - title: 'How is the bootcamp structured?', - content: - "Our web technologies bootcamp typically spans a [X]-week period and is divided into modules that cover different aspects of web development. Each module consists of lectures, hands-on coding exercises, projects, and collaborative activities. Our experienced instructors provide guidance and support, and you'll have access to a community of fellow learners to foster collaboration and knowledge sharing." - } - ]; - async function handleSubmit() { if (!email || !validateEmail(email)) return; isAdding = true; const { error } = await supabase.from('organization_emaillist').insert({ email, - organization_id: $currentOrg.id + organization_id: org.id }); if (error) { @@ -91,6 +74,7 @@ isContactSubmiting = true; contactError = orgLandingpageValidation(contact); if (Object.keys(contactError).length) { + isContactSubmiting = false; return; } @@ -100,11 +84,12 @@ email: contact.email, phone: contact.phone, message: contact.message, - organization_id: $currentOrg.id + organization_id: org.id }); if (error) { console.error('Something went wrong', error, '\n\nContact', contact); + isContactSubmiting = false; } isContactSubmiting = false; @@ -116,10 +101,15 @@ message: '' }; } + function isYouTubeLink(link: string) { + const youtubeRegex = + /^(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/; + + return youtubeRegex.test(link.trim()); + } onMount(async () => { if (!orgSiteName) return; - try { console.log('sitename', orgSiteName); $courseMetaDeta.isLoading = true; @@ -130,356 +120,442 @@ console.log('error', error); } }); + function initPlyr(_player: any, _video: string | undefined) { + if (!player) return; + + // @ts-ignore + const plyr = new Plyr('#player', { width: '400px', height: '300px', borderRadius: '10px' }); + // @ts-ignore + window.player = plyr; + } + + // Use default data in store if user hasn't added their own content to landing page + function setDefault(landingpage) { + if (landingpage && Object.keys(landingpage).length) { + $landingPageSettings = landingpage; + } + } + + $: initPlyr(player, $landingPageSettings.header.video.link); + $: setDefault(org.landingpage); - {$currentOrg.name}'s Landing Page + {!org.name ? '' : `${org.name}'s `}Landing Page -
- -