{"version":3,"file":"contracts-2cc47746.js","sources":["../../src/contracts/Contracts.vue","../../src/contracts/app.js"],"sourcesContent":["<template>\r\n    <div class=\"contract\">\r\n        <div class=\"contract__contents\">\r\n            <div class=\"contract__header\">\r\n                <button type=\"button\" :class=\"`contract__header-item ${key} ${index}`\"\r\n                    v-for=\"(years, key, index) in years\" @click=\"toggleContractYears(index, false)\">\r\n                    <span class=\"contract__academic-year\">{{ key }}</span>\r\n                </button>\r\n            </div>\r\n            <div class=\"contract__item\" v-for=\"(years, key, index) in years\">\r\n                <div :class=\"`contract__content ${key} ${index} contract__content--no-rooms`\" v-if=\"years.length === 0\">\r\n                    <div class=\"contract__no-rooms-container\">\r\n                        <span class=\"contract__no-rooms-title\">Sold out</span>\r\n                        <span class=\"contract__no-rooms-content\">Unfortunately, there are no contracts available for\r\n                            this academic year. Please register your intrest and get added to our waiting list</span>\r\n                        <div class=\"wp-block-button is-style-secondary-button openform\">\r\n                            <button type=\"button\" data-form=\"join_our_waiting_list\" data-form-id=\"399\"\r\n                                class=\"wp-block-button__link wp-element-button\">Join our waiting list</button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"contract__contract-container\">\r\n                    <div :class=\"`contract__content ${key} ${index}`\" v-if=\"years.length > 0\"\r\n                        v-for=\"(contract, key) in years\">\r\n                        <div class=\"contract__contract\">\r\n                            <div class=\"contract__contract-title-container\">\r\n                                <span class=\"contract__contract-title\">\r\n                                    {{ contract.title }}\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"contract__contract-info-container\">\r\n                                <span class=\"contract__contract-price\">£{{ getLowestPriceFromContract(index, key).price }}\r\n                                    <span class=\"contract__contract-price-info\">pppw</span>\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"contract__contract-cta-container\">\r\n                                <span class=\"contract__contract-start-date\">{{ formatDate(contract.start_date) }} - {{\r\n                        formatDate(contract.end_date) }}</span>\r\n                                <span class=\"contract__contract-start-date\">{{ getLowestPriceFromContract(index, key).hasDeposit }}</span>\r\n                                <div class=\"wp-block-button is-style-primary-button openform\" style=\"width: 100%\">\r\n                                    <a target=\"_blank\" :href=\"`${contract.book_now_url}`\"\r\n                                        class=\"wp-block-button__link wp-element-button\">Book Now</a>\r\n                                </div>\r\n\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n</template>\r\n\r\n<script setup>\r\nimport { reactive, onMounted, computed, ref, readonly, watch } from 'vue';\r\n\r\nconst props = defineProps({\r\n    years: {\r\n        Array,\r\n        default: () => []\r\n    },\r\n});\r\n\r\nconst years = props?.years // constant contains all the academic years and assosiated contracts \r\nconst academicContractIndex = reactive({}); // reactive constant contains all the academic years and the number of contracts linked to each year\r\nconst contentHeight = ref(0); // proxy varible records the height of the heighest contract year tab \r\nconst currentActiveYear = ref(0); // current active year\r\nconst hasDeposit = ref(\"\"); // would contain message shown on frontend regarding deposit\r\n\r\nonMounted(() => {\r\n\r\n    /**\r\n     * Resize observer monitors window for changes to the screen size, if it finds the current active tab to have a greater height \r\n     * than the current recorded height in the contentHeight varible then it will recalcuate the height of the active tab\r\n     * \r\n     * If the width on the inner window is less than a laptop screen size, then it will set the content height to 300, height of a no contract tab, and \r\n     * panels containing contracts will resize based on the number of contracts\r\n     */\r\n\r\n    const observer = new ResizeObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            const panels = document.querySelectorAll('.contract__item');\r\n            if (panels[currentActiveYear.value].getBoundingClientRect().height > contentHeight.value && window.innerWidth > 1024) {\r\n                contentHeight.value = getMaxContentHeight(panels[currentActiveYear.value])\r\n            }\r\n            if (window.innerWidth < 1024) {\r\n                contentHeight.value = 300;\r\n            }\r\n        });\r\n    });\r\n\r\n    observer.observe(document.body);\r\n\r\n    const activeAcademicYear = getYearIndex(years);\r\n    currentActiveYear.value = activeAcademicYear;\r\n    hideContractTabs(activeAcademicYear, true);\r\n    toggleContractYears(activeAcademicYear, true)\r\n\r\n\r\n});\r\n\r\n\r\n\r\n/**\r\n * getYearIndex() --> used to get the number of contracts for each academic year, required to carry out the initial height calcuation and \r\n * set the initial active tab to the tab with the most contracts.\r\n * \r\n */\r\n\r\nconst getYearIndex = (years) => {\r\n    let contractYears = Object.keys(years);\r\n    for (let i = 0; i < contractYears.length; i++) {\r\n        academicContractIndex[contractYears[i]] = getNumberOfContractsForAcademicYear(contractYears[i]);\r\n    }\r\n    return activePanel.value;\r\n}\r\n\r\n\r\n/**\r\n * getNumberOfContractsForAcademicYear() --> returns the number of contracts for the required year\r\n */\r\nconst getNumberOfContractsForAcademicYear = (year) => {\r\n    return years[year].length;\r\n}\r\n\r\n\r\nconst activePanel = computed(() => {\r\n    let activePanel = 0;\r\n    let prevContractNumber = 0;\r\n    let contractArray = Object.values(academicContractIndex);\r\n    for (let i = 0; i < contractArray.length; i++) {\r\n        if (contractArray[i] >= prevContractNumber) {\r\n            prevContractNumber = contractArray[i];\r\n            activePanel = i;\r\n        }\r\n    }\r\n    return activePanel;\r\n});\r\n\r\n\r\n/**\r\n * changeHeaderColours() --> takes in list of all headers, and new active index, it converts active header to have background colour of blue and color white, \r\n * sets all no active headers to have a bacground colour of grey and a colour of blue \r\n */\r\nconst changeHeaderColours = (headerItems, index) => {\r\n    for (let i = 0; i < headerItems.length; i++) {\r\n        if (i == index) {\r\n            headerItems[i].classList.add(\"active\");\r\n        }\r\n        else {\r\n            headerItems[i].classList.remove(\"active\");\r\n        }\r\n    }\r\n}\r\n\r\n/**\r\n * toggleContractYears() --> called from frontend, and inititates all the changes that happen on the front end after a panel header is pressed, records the new current\r\n * active year\r\n */\r\nconst toggleContractYears = (index, onMounted) => {\r\n    let headerItems = document.querySelectorAll('.contract__header-item');\r\n    currentActiveYear.value = index;\r\n    changeHeaderColours(headerItems, index);\r\n    if (!onMounted) {\r\n        hideContractTabs(index, false);\r\n    }\r\n}\r\n\r\n\r\n/** hideContractTabs() --> Takes in, index of the new active academic year and flag referencing if it has been called from onMounted function  \r\n * It will hide all non active contract panels, and show new active panel by call applyToggleStyles()\r\n * If function has been called from onmounted it will calcuate the height of the contract panel, as the active panel would be the panel with the most contracts (The Highest)\r\n*/\r\nconst hideContractTabs = (activeAcademicYear, onMounted) => {\r\n    const panels = document.querySelectorAll('.contract__item');\r\n    for (let i = 0; i < panels.length; i++) {\r\n        if (onMounted) {\r\n            if (i != activeAcademicYear) {\r\n                panels[i].style.display = \"none\";\r\n            }\r\n            else {\r\n                const largestContentHeight = getMaxContentHeight(panels[i]);\r\n                contentHeight.value = largestContentHeight;\r\n                applyToggleStyles(panels[i]);\r\n            }\r\n        }\r\n        if (!onMounted) {\r\n            if (i != activeAcademicYear) {\r\n                panels[i].style.display = \"none\";\r\n            }\r\n            else {\r\n                applyToggleStyles(panels[i])\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n/**\r\n * applyToggleStyles() --> +shows and adjusts height of newly activated panel\r\n */\r\nconst applyToggleStyles = (panel) => {\r\n    panel.style.display = \"flex\";\r\n    panel.style.minHeight = contentHeight.value + \"px\";\r\n}\r\n\r\n/**\r\n * getMaxContentHeight() --> gets height of element passed as a parameter\r\n */\r\nconst getMaxContentHeight = (panel) => {\r\n    return panel.getBoundingClientRect().height;\r\n}\r\n\r\n/**\r\n * getLowestPriceFromContracts() --> takes in the index (the index of the year contract belongs to, index based on the academicContractIndex), \r\n * contractIndex (the index of the contract within academic year), It will then return the lowest price found, for that contract. \r\n * \r\n */\r\nconst getLowestPriceFromContract = (index, contractIndex) => {\r\n    let contactYears = Object.keys(years);\r\n    let targetYear = contactYears[index];\r\n    const priceObj = years[targetYear][contractIndex].prices;\r\n    let lowestPrice = null;\r\n    let depositIndex = 0;\r\n    for (let i = 0; i < priceObj.length; i++) {\r\n        if (lowestPrice === null) {\r\n            lowestPrice = priceObj[i].price_per_person_per_week;\r\n        }\r\n        else {\r\n            if (priceObj[i].price_per_person_per_week < lowestPrice) {\r\n                lowestPrice = priceObj[i].price_per_person_per_week;\r\n                depositIndex = i;\r\n            }\r\n        }\r\n    }\r\n    /**\r\n     * checks to see if contract, has a deposit associated to contract with LowestPrice, assigns deposit value if one is found, which is later used on the frontend\r\n     */\r\n    let hasDeposit = \"No deposit\";\r\n    if (priceObj[depositIndex].deposit_per_person !== \"0.00\") {\r\n        hasDeposit = \"Deposit: £\" + priceObj[depositIndex].deposit_per_person\r\n    }\r\n\r\n    return {\r\n        price: lowestPrice,\r\n        hasDeposit\r\n    };\r\n\r\n}\r\n\r\n/**\r\n * formats date as Month,Date,Year\r\n */\r\nconst formatDate = (timestamp) => {\r\n    const date = new Date(timestamp);\r\n    const options = { day: 'numeric', month: 'short', year: 'numeric' };\r\n    return date.toLocaleDateString('en-US', options);\r\n}\r\n\r\n</script>","import { createApp } from \"vue\";\r\n\r\nimport Contracts from \"./Contracts.vue\";\r\n\r\n\r\nconst handle = \"almero-vue-contracts\";\r\nconst mountEls = document.querySelectorAll(`.${handle}`);\r\n\r\nmountEls.forEach((mountEl) => {\r\n    let props = {};\r\n    try {\r\n        props = JSON.parse(mountEl.dataset.rootProps);\r\n    }\r\n    catch (e) {\r\n        console.error(e);\r\n    }\r\n    const app = createApp(\r\n        Contracts, {\r\n            ...props,\r\n        }\r\n    );\r\n    app.mount(mountEl);\r\n});"],"names":["props","__props","years","academicContractIndex","reactive","contentHeight","ref","currentActiveYear","onMounted","entries","entry","panels","getMaxContentHeight","activeAcademicYear","getYearIndex","hideContractTabs","toggleContractYears","contractYears","i","getNumberOfContractsForAcademicYear","activePanel","year","computed","prevContractNumber","contractArray","changeHeaderColours","headerItems","index","largestContentHeight","applyToggleStyles","panel","getLowestPriceFromContract","contractIndex","targetYear","priceObj","lowestPrice","depositIndex","hasDeposit","formatDate","timestamp","date","options","handle","mountEls","mountEl","e","createApp","Contracts"],"mappings":"y6CA0DA,MAAMA,EAAQC,EAORC,EAAQF,GAAA,YAAAA,EAAO,MACfG,EAAwBC,EAAS,CAAA,CAAE,EACnCC,EAAgBC,EAAI,CAAC,EACrBC,EAAoBD,EAAI,CAAC,EACZA,EAAI,EAAE,EAEzBE,EAAU,IAAM,CAUK,IAAI,eAAgBC,GAAY,CAC7CA,EAAQ,QAAQC,GAAS,CACrB,MAAMC,EAAS,SAAS,iBAAiB,iBAAiB,EACtDA,EAAOJ,EAAkB,KAAK,EAAE,sBAAuB,EAAC,OAASF,EAAc,OAAS,OAAO,WAAa,OAC5GA,EAAc,MAAQO,EAAoBD,EAAOJ,EAAkB,KAAK,CAAC,GAEzE,OAAO,WAAa,OACpBF,EAAc,MAAQ,IAEtC,CAAS,CACT,CAAK,EAEQ,QAAQ,SAAS,IAAI,EAE9B,MAAMQ,EAAqBC,EAAaZ,CAAK,EAC7CK,EAAkB,MAAQM,EAC1BE,EAAiBF,EAAoB,EAAI,EACzCG,EAAoBH,EAAoB,EAAI,CAGhD,CAAC,EAUD,MAAMC,EAAgBZ,GAAU,CAC5B,IAAIe,EAAgB,OAAO,KAAKf,CAAK,EACrC,QAASgB,EAAI,EAAGA,EAAID,EAAc,OAAQC,IACtCf,EAAsBc,EAAcC,CAAC,CAAC,EAAIC,EAAoCF,EAAcC,CAAC,CAAC,EAElG,OAAOE,EAAY,KACvB,EAMMD,EAAuCE,GAClCnB,EAAMmB,CAAI,EAAE,OAIjBD,EAAcE,EAAS,IAAM,CAC/B,IAAIF,EAAc,EACdG,EAAqB,EACrBC,EAAgB,OAAO,OAAOrB,CAAqB,EACvD,QAASe,EAAI,EAAGA,EAAIM,EAAc,OAAQN,IAClCM,EAAcN,CAAC,GAAKK,IACpBA,EAAqBC,EAAcN,CAAC,EACpCE,EAAcF,GAGtB,OAAOE,CACX,CAAC,EAOKK,EAAsB,CAACC,EAAaC,IAAU,CAChD,QAAST,EAAI,EAAGA,EAAIQ,EAAY,OAAQR,IAChCA,GAAKS,EACLD,EAAYR,CAAC,EAAE,UAAU,IAAI,QAAQ,EAGrCQ,EAAYR,CAAC,EAAE,UAAU,OAAO,QAAQ,CAGpD,EAMMF,EAAsB,CAACW,EAAOnB,IAAc,CAC9C,IAAIkB,EAAc,SAAS,iBAAiB,wBAAwB,EACpEnB,EAAkB,MAAQoB,EAC1BF,EAAoBC,EAAaC,CAAK,EACjCnB,GACDO,EAAiBY,EAAO,EAAK,CAErC,EAOMZ,EAAmB,CAACF,EAAoBL,IAAc,CACxD,MAAMG,EAAS,SAAS,iBAAiB,iBAAiB,EAC1D,QAASO,EAAI,EAAGA,EAAIP,EAAO,OAAQO,IAAK,CACpC,GAAIV,EACA,GAAIU,GAAKL,EACLF,EAAOO,CAAC,EAAE,MAAM,QAAU,WAEzB,CACD,MAAMU,EAAuBhB,EAAoBD,EAAOO,CAAC,CAAC,EAC1Db,EAAc,MAAQuB,EACtBC,EAAkBlB,EAAOO,CAAC,CAAC,CAC9B,CAEAV,IACGU,GAAKL,EACLF,EAAOO,CAAC,EAAE,MAAM,QAAU,OAG1BW,EAAkBlB,EAAOO,CAAC,CAAC,EAGtC,CACL,EAKMW,EAAqBC,GAAU,CACjCA,EAAM,MAAM,QAAU,OACtBA,EAAM,MAAM,UAAYzB,EAAc,MAAQ,IAClD,EAKMO,EAAuBkB,GAClBA,EAAM,sBAAuB,EAAC,OAQnCC,EAA6B,CAACJ,EAAOK,IAAkB,CAEzD,IAAIC,EADe,OAAO,KAAK/B,CAAK,EACNyB,CAAK,EACnC,MAAMO,EAAWhC,EAAM+B,CAAU,EAAED,CAAa,EAAE,OAClD,IAAIG,EAAc,KACdC,EAAe,EACnB,QAASlB,EAAI,EAAGA,EAAIgB,EAAS,OAAQhB,IAC7BiB,IAAgB,KAChBA,EAAcD,EAAShB,CAAC,EAAE,0BAGtBgB,EAAShB,CAAC,EAAE,0BAA4BiB,IACxCA,EAAcD,EAAShB,CAAC,EAAE,0BAC1BkB,EAAelB,GAO3B,IAAImB,EAAa,aACjB,OAAIH,EAASE,CAAY,EAAE,qBAAuB,SAC9CC,EAAa,aAAeH,EAASE,CAAY,EAAE,oBAGhD,CACH,MAAOD,EACP,WAAAE,CACR,CAEA,EAKMC,EAAcC,GAAc,CAC9B,MAAMC,EAAO,IAAI,KAAKD,CAAS,EACzBE,EAAU,CAAE,IAAK,UAAW,MAAO,QAAS,KAAM,WACxD,OAAOD,EAAK,mBAAmB,QAASC,CAAO,CACnD,y2BC7PMC,GAAS,uBACTC,GAAW,SAAS,iBAAiB,IAAID,EAAM,EAAE,EAEvDC,GAAS,QAASC,GAAY,CAC1B,IAAI5C,EAAQ,CAAA,EACZ,GAAI,CACAA,EAAQ,KAAK,MAAM4C,EAAQ,QAAQ,SAAS,CAC/C,OACMC,EAAG,CACN,QAAQ,MAAMA,CAAC,CAClB,CACWC,EACRC,GAAW,CACP,GAAG/C,CACN,CACT,EACQ,MAAM4C,CAAO,CACrB,CAAC"}