![](\"/assets/img.png\")
\n// \n\ndocument.addEventListener(\"turbo:load\", () => {\n document.querySelectorAll('[data-src]').forEach((element) =>{\n element.setAttribute('src', element.getAttribute('data-src'))\n })\n})\n","// used in manage/users page to add styling to the checkbox\nwindow.manage_checkbox_admin = checkbox => {\n console.log(document.querySelectorAll(\"[id^='admin_']\"))\n if (checkbox.innerHTML == \"check_box\") {\n // if checkbox is checked, means user wants to remove admin role\n // need to check if user has at least school teacher role before unchecking\n let teacher_checkbox = checkbox.closest(\".admin-checkbox\").nextElementSibling.querySelector(\".teacher-role-checkbox\")\n if (teacher_checkbox.innerHTML == \"check_box\") {\n // TEMPORARY: disallow unchecking of school_admin\n alert(\"Please contact support to remove admin role.\");\n // to check if document.querySelectorAll(\".admin-checkbox\").length < 0\n // or prevent first school_admin from deselect forever document.querySelectorAll(\"[id^='admin_']\")[0]\n // user already has teacher role, safe to uncheck\n // checkbox.classList.remove(\"text-emerald-100\");\n // checkbox.innerHTML = \"check_box_outline_blank\";\n } else {\n // user does not have teacher role, admin role will not be removed, show error msg\n alert(\"A user must at least have one role.\");\n // using alert for now, will change to error modal pop up once design is done, code below is for the pop up\n // checkbox.closest(\".admin-and-teachers\").querySelector('.role-error-message').classList.remove(\"hidden\"); \n\n }\n } else {\n // if checkbox was checked, means user wants to add admin role\n checkbox.classList.add(\"text-emerald-100\");\n checkbox.innerHTML = \"check_box\";\n }\n}\n\nwindow.manage_checkbox_teacher = checkbox => {\n if (checkbox.innerHTML == \"check_box\") {\n // if checkbox is checked, means user wants to remove teacher role\n // need to check if user at least has school admin role before unchecking\n let admin_checkbox = checkbox.closest(\".teacher-checkbox\").previousElementSibling.querySelector(\".admin-role-checkbox\")\n if (admin_checkbox.innerHTML == \"check_box\") {\n // user already has admin role, safe to uncheck\n checkbox.classList.remove(\"text-emerald-100\");\n checkbox.innerHTML = \"check_box_outline_blank\";\n } else {\n // user does not have admin role, teacher role will not be removed, show error msg\n alert(\"A user must at least have one role.\");\n // using alert for now, will change to error modal pop up once design is done, code below is for the pop up\n // checkbox.closest(\".admin-and-teachers\").querySelector('.role-error-message').classList.remove(\"hidden\");\n }\n } else {\n // if checkbox was checked, means user wants to add teacher role\n checkbox.classList.add(\"text-emerald-100\");\n checkbox.innerHTML = \"check_box\";\n }\n}\n\n// used to close warning message\nwindow.closeModal = close => {\n close.closest('.role-error-message').classList.add(\"hidden\")\n}\n","// used in management, when school admin upload pics in gallery it will appear\ndocument.addEventListener(\"turbo:load\", () => {\n const input = document.getElementById( 'user_accounts_attributes_0_school_attributes_photos' ) ?? document.getElementById( 'course_photos' ) ?? document.getElementById ( 'user_accounts_attributes_0_teacher_profile_attributes_photos' );\n let output = document.getElementById('upload-gallery-pics');\n input.addEventListener( 'change', showFileName );\n function showFileName( event ) {\n let input = event.srcElement;\n let files = input.files;\n output.innerHTML = \"\";\n for (var i = 0; i < files.length; i++) {\n let newImage = document.createElement('img');\n newImage.className = 'h-24 px-2 py-2';\n newImage.src = URL.createObjectURL(files[i]);\n let wrapperClass = document.createElement('div');\n wrapperClass.className = 'col-span-1';\n wrapperClass.appendChild(newImage);\n output.appendChild(wrapperClass)\n }\n }\n})\n","document.addEventListener(\"turbo:load\", () => {\n // --------------------------------- New Question ------------------------------\n const overlay = document.querySelector('#overlay')\n const questBtn = document.querySelector('#question-btn')\n const closeMdl = document.querySelector('#close-modal')\n\n questBtn.addEventListener('click', () => {\n overlay.classList.remove('hidden')\n overlay.classList.add('flex')\n })\n\n closeMdl.addEventListener('click', () => {\n overlay.classList.add('hidden')\n overlay.classList.remove('flex')\n })\n})\n","document.addEventListener(\"turbo:load\", () => {\n // For nested venues in the course weekly schedules page\n\n // Following code is for the initial one venue modal on page load\n const parentNests = document.querySelectorAll('.parent-nest');\n const addBtn = document.querySelector('.add-location');\n parentNests.forEach((parentNest) => {\n const overlay = parentNest.querySelector('.overlay');\n const modalBtn = parentNest.querySelector('.modal-btn');\n const closeMdl = parentNest.querySelector('.close-modal');\n const deleteMdl = parentNest.querySelector('.delete-modal');\n const saveMdl = parentNest.querySelector('.save-modal');\n const venue = parentNest.querySelector('.venue');\n\n modalBtn.addEventListener('click', () => {\n overlay.classList.remove('hidden');\n overlay.classList.add('flex');\n })\n\n closeMdl.addEventListener('click', () => {\n overlay.classList.add('hidden');\n overlay.classList.remove('flex');\n })\n\n deleteMdl.addEventListener('click', () => {\n overlay.querySelectorAll(\".address-fields\").forEach((field) => {\n field.value = \"\";\n })\n venue.innerHTML = \"\"\n overlay.classList.add('hidden');\n overlay.classList.remove('flex');\n })\n\n saveMdl.addEventListener('click', () => {\n let address = [...parentNest.querySelectorAll(\".address-fields\")].map(x=>x.value);\n let regions = [...parentNest.querySelectorAll(\".region-fields\")].filter(word => word.checked).map(x=>x.getAttribute('data-region'));\n parentNest.querySelector(\".venue\").innerHTML = regions.concat(address).filter(item => item).join(\", \");\n if (address[0] || !parentNest.querySelector(\".address-fields\").required) { // line 1 is not empty\n overlay.classList.add('hidden');\n overlay.classList.remove('flex');\n }\n })\n\n // Following code is for the new venue modals added\n addBtn.addEventListener('click', () => {\n setTimeout(function() {\n let newNested = addBtn.parentElement.previousSibling;\n let newOverlay = newNested.querySelector('.overlay');\n let newModalBtn = newNested.querySelector('.modal-btn');\n let newCloseMdl = newNested.querySelector('.close-modal');\n let newDeleteMdl = newNested.querySelector('.delete-modal');\n let newSaveMdl = newNested.querySelector('.save-modal');\n newModalBtn.addEventListener('click', () => {\n newOverlay.classList.remove('hidden');\n newOverlay.classList.add('flex');\n })\n\n newCloseMdl.addEventListener('click', () => {\n newOverlay.classList.add('hidden');\n newOverlay.classList.remove('flex');\n })\n\n newDeleteMdl.addEventListener('click', () => {\n newNested.querySelectorAll(\".address-fields\").forEach((field) => {\n field.value = \"\";\n })\n newNested.querySelector(\".venue\").innerHTML = \"\"\n newOverlay.classList.add('hidden');\n newOverlay.classList.remove('flex');\n })\n\n newSaveMdl.addEventListener('click', () => {\n let address = [...newNested.querySelectorAll(\".address-fields\")].map(x=>x.value);\n let regions = [...newNested.querySelectorAll(\".region-fields\")].filter(word => word.checked).map(x=>x.getAttribute('data-region'));\n newNested.querySelector(\".venue\").innerHTML = regions.concat(address).filter(item => item).join(\", \");\n if (address[0] || !parentNest.querySelector(\".address-fields\").required) { // line 1 is not empty\n newOverlay.classList.add('hidden');\n newOverlay.classList.remove('flex');\n }\n })\n }, 500);\n })\n });\n})\n","document.addEventListener(\"turbo:load\", () => {\n const output = document.getElementById(\"profile-pic\");\n document.querySelector('#user_accounts_attributes_0_school_attributes_avatar').addEventListener('change', (event) => {\n let file = event.target.files[0];\n const reader = new FileReader();\n reader.addEventListener('load', event => {\n output.src = event.target.result;\n });\n reader.readAsDataURL(file);\n });\n});\n","document.addEventListener(\"turbo:load\", () => {\n const output = document.getElementById(\"profile-pic\");\n document.querySelector('#user_accounts_attributes_0_teacher_profile_attributes_avatar').addEventListener('change', (event) => {\n let file = event.target.files[0];\n const reader = new FileReader();\n reader.addEventListener('load', event => {\n output.src = event.target.result;\n });\n reader.readAsDataURL(file);\n });\n});\n","// used in manage, to display a parent's avatar\ndocument.addEventListener(\"turbo:load\", () => {\n const output = document.getElementById(\"profile-pic\");\n document.querySelector('#user_avatar').addEventListener('change', (event) => {\n let file = event.target.files[0];\n const reader = new FileReader();\n reader.addEventListener('load', event => {\n output.src = event.target.result;\n });\n reader.readAsDataURL(file);\n });\n});\n","window.addEventListener(\"scroll\", event => {\n let mainNavLinks = document.querySelectorAll(\"a.side-anchor\");\n let fromTop = window.scrollY + 5;\n \n mainNavLinks.forEach(link => {\n let section = document.querySelector(link.hash);\n if (\n section.offsetTop <= fromTop &&\n section.offsetTop + section.offsetHeight > fromTop\n ) {\n link.parentElement.classList.add(\"current\");\n } else {\n link.parentElement.classList.remove(\"current\");\n }\n });\n});\n","// This file is for Algolia InstantSearch Dropdown option together with util.js\n\nimport { panel } from 'instantsearch.js/es/widgets';\n\nimport {\n hasClassName,\n addClassName,\n removeClassName,\n capitalize,\n} from './util.js';\n\nconst CLASS_OPENED = 'ais-Dropdown--opened';\nconst CLASS_BUTTON = 'ais-Dropdown-button';\nconst CLASS_CLOSE_BUTTON = 'ais-Dropdown-close';\n\nconst cx = (...args) => args.filter(Boolean).join(' ');\n\nexport function createDropdown(\n baseWidget,\n {\n cssClasses: userCssClasses = {},\n buttonText,\n buttonClassName,\n closeOnChange,\n } = {}\n) {\n // Merge class names with the default ones and the ones from user\n const cssClasses = {\n root: cx('ais-Dropdown', userCssClasses.root),\n button: cx(CLASS_BUTTON, userCssClasses.button),\n buttonRefined: cx(\n 'ais-Dropdown-button--refined',\n userCssClasses.buttonRefined\n ),\n closeButton: cx(CLASS_CLOSE_BUTTON, userCssClasses.closeButton),\n };\n const makeWidget = panel({\n cssClasses,\n templates: {\n header: (options) => {\n const { widgetParams } = options;\n\n let text;\n if (typeof buttonText === 'string') {\n text = buttonText;\n } else if (typeof buttonText === 'function') {\n text = buttonText(options);\n } else {\n // See if the widget has `attribute`\n const attribute =\n widgetParams && widgetParams.attribute\n ? capitalize(widgetParams.attribute)\n : '';\n // Get the number of refinements if the widget has `items`\n const nbRefinements = (options.items || []).filter(\n (item) => item.isRefined\n ).length;\n // Format the button text\n text =\n nbRefinements > 0 ? `${attribute} (${nbRefinements})` : attribute;\n }\n\n const classNames = [cssClasses.button];\n if (typeof buttonClassName === 'string') {\n classNames.push(buttonClassName);\n } else if (typeof buttonClassName === 'function') {\n classNames.push(buttonClassName(options));\n } else if ((options.items || []).find((item) => item.isRefined)) {\n classNames.push(cssClasses.buttonRefined);\n }\n\n return `\n \n `;\n },\n footer: ``,\n },\n })(baseWidget);\n\n return (widgetParams) => {\n const widget = makeWidget(widgetParams);\n let cleanUp;\n let state = {};\n\n // Return a modified version of the widget\n return {\n ...widget,\n init: (options) => {\n const rootElem = document\n .querySelector(widgetParams.container)\n .querySelector('.ais-Panel');\n const headerElem = rootElem.querySelector('.ais-Panel-header');\n const closeButtonElem = rootElem.querySelector(\n '.' + CLASS_CLOSE_BUTTON\n );\n\n const open = () => {\n addClassName(rootElem, CLASS_OPENED);\n // This 'click' event is still being propagated,\n // so we add this event listener in the next tick.\n // Otherwise, it will immediately close the panel again.\n setTimeout(() => {\n state.windowClickListener = (event) => {\n // Close if the outside is clicked\n if (!rootElem.contains(event.target)) {\n close();\n }\n };\n // Add an event listener when the panel is opened\n window.addEventListener('click', state.windowClickListener);\n }, 0);\n };\n const close = () => {\n removeClassName(rootElem, CLASS_OPENED);\n // Remove the event listener when the panel is closed\n window.removeEventListener('click', state.windowClickListener);\n delete state.windowClickListener;\n };\n const isOpened = () => hasClassName(rootElem, CLASS_OPENED);\n const toggle = () => {\n if (isOpened()) {\n close();\n } else {\n open();\n }\n };\n\n // Add a click listener to the header (button)\n const buttonListener = (event) => {\n if (!event.target.matches('.' + CLASS_BUTTON)) {\n return;\n }\n toggle();\n };\n headerElem.addEventListener('click', buttonListener);\n\n closeButtonElem.addEventListener('click', close);\n\n // Setup a clean-up function, which will be called in `dispose`.\n cleanUp = () => {\n headerElem.removeEventListener('click', buttonListener);\n if (state.windowClickListener) {\n window.removeEventListener('click', state.windowClickListener);\n }\n };\n\n // Whenever uiState changes, it closes the panel.\n options.instantSearchInstance.use(() => ({\n subscribe() {},\n unsubscribe() {},\n onStateChange() {\n if (\n isOpened() &&\n (closeOnChange === true ||\n (typeof closeOnChange === 'function' &&\n closeOnChange() === true))\n ) {\n close();\n }\n },\n }));\n return widget.init.call(widget, options);\n },\n dispose: (options) => {\n if (typeof cleanUp === 'function') {\n cleanUp();\n }\n return widget.dispose.call(widget, options);\n },\n };\n };\n}\n","// autocomplete\nimport algoliasearch from 'algoliasearch/lite';\nimport { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js';\nimport '@algolia/autocomplete-theme-classic';\n\ndocument.addEventListener(\"turbo:before-visit\", function() {\n // to prevent duplicate rendering of search bar\n if (window.location.pathname == \"/\") {\n Turbo.clearCache();\n };\n});\n\ndocument.addEventListener(\"turbo:load\", function() {\n const searchClient = algoliasearch(process.env.ALGOLIASEARCH_APPLICATION_ID, process.env.ALGOLIASEARCH_API_KEY_SEARCH);\n autocomplete({\n container: '#autocomplete',\n detachedMediaQuery: 'none',\n openOnFocus: false, // dropdown appears once search bar clicked\n placeholder: 'What class are you looking for?',\n getSources({ query }) {\n return [\n // return timeslots\n {\n sourceId: 'courses',\n getItems() {\n return getAlgoliaResults({\n searchClient,\n queries: [\n {\n indexName: 'Course',\n query,\n params: {\n hitsPerPage: 5,\n },\n }\n ]\n });\n },\n getItemInputValue({ item }) {\n return item.name;\n },\n getItemUrl({ item }) {\n return \"/marketplace/courses?Course[query]=\" + item.name;\n },\n templates: {\n item({ item, createElement }) {\n // dropdown items are links by default\n return createElement('div', {\n dangerouslySetInnerHTML: {\n __html: `\n
\n \n ![](\"${data.course_url}/image\")
\n
\n \n
\n \n
\n ${data.conditioned_category} Lesson
\n \n ${data.name}
\n \n${data.price == null ? \"Enquire for price\" : \"$\" + data.price + \"/\" + data.interval}
\n By ${data.educator_name}
\n\n
\n \n ![](\"${data.stars}\")
\n
\n ${data.number_of_testimonials > 0 ? data.rating : 5}
\n (${data.number_of_testimonials})
\n ${data.multiple_venues ? \"Multiple Locations\" : data.display_venue}
\n Whatsapp\n