merge develop
This commit is contained in:
Adam Caouette
parent
06380ee566
commit
603be6d206
4 changed files with 535 additions and 165 deletions
|
|
@ -265,16 +265,16 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.button-question-overflow {
|
||||
height: calc(100vh - 274px);
|
||||
// .button-question-overflow {
|
||||
// height: calc(100vh - 274px);
|
||||
|
||||
.overflow-scroll {
|
||||
// Height will be determined by overall height of content above list
|
||||
height: calc(100% - 314px);
|
||||
overflow-x: hidden !important;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
// .overflow-scroll {
|
||||
// // Height will be determined by overall height of content above list
|
||||
// height: calc(100% - 314px);
|
||||
// overflow-x: hidden !important;
|
||||
// -webkit-overflow-scrolling: touch;
|
||||
// }
|
||||
// }
|
||||
.button-question {
|
||||
color: $black;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,69 +1,70 @@
|
|||
<template>
|
||||
<div class="date-picker text-center" :class="calendarViewDirection">
|
||||
<!-- <p style="text-align: left">savedHeight: {{ savedHeight }}</p> -->
|
||||
<!-- <p style="text-align: left">selectableDatesData: {{ selectableDatesData }}</p> -->
|
||||
<!-- <p style="text-align: left">months: {{ months }}</p> -->
|
||||
<fieldset v-if="months" id="date-picker-fieldset">
|
||||
<legend class="sr-only">Date Picker</legend>
|
||||
<h4 id="tracker">currentScrollTop: {{ currentScrollTop }}</h4>
|
||||
<div
|
||||
v-for="month in months"
|
||||
:key="`${month.monthLabel}-${month.yearNum?.toString()}`"
|
||||
:id="`${month.monthLabel}-${month.yearNum?.toString()}`"
|
||||
class="calendar-grid-container position-relative"
|
||||
:class="[
|
||||
isInitialView === true ? 'initial-view' : '',
|
||||
month.monthClass,
|
||||
isAddingNewMonth === true ? 'is-adding-new-month' : '',
|
||||
]">
|
||||
<div class="month-year body-small d-flex align-items-center small">
|
||||
{{ month.monthLabel }} {{ month.yearNum?.toString() }}
|
||||
</div>
|
||||
<div
|
||||
v-if="calendarViewDirection === 'future'"
|
||||
class="legend caption d-flex align-items-center justify-content-end">
|
||||
<span class="legend-circle me-1"></span> = Available
|
||||
</div>
|
||||
<div class="separator-line"></div>
|
||||
<div class="nav-back ps-3"><button></button></div>
|
||||
<div class="nav-forward pe-3"><button></button></div>
|
||||
<!-- Do the days of the weeek need to be read? -->
|
||||
<div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
|
||||
<div
|
||||
v-for="date in month.dates"
|
||||
:key="`${month.monthLabel}-${date.dateNum.toString()}-${months.length}`"
|
||||
class="grid-item radio-wrapper"
|
||||
:class="[
|
||||
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
|
||||
date.dayClasses,
|
||||
]">
|
||||
<input
|
||||
:disabled="!isSelectableDate(date.inputValue)"
|
||||
type="radio"
|
||||
name="day-of-month"
|
||||
v-model="selectedDate"
|
||||
:value="date.inputValue"
|
||||
:id="`${month.monthLabel}-${date.dateNum.toString()}`" />
|
||||
<label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
|
||||
<span>{{ date.dateNum.toString() }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<button
|
||||
v-if="calendarViewDirection === 'future'"
|
||||
type="button"
|
||||
class="btn btn-link"
|
||||
@click="goForward">
|
||||
View more dates
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="months" class="date-picker text-center" :class="calendarViewDirection">
|
||||
<!-- <p style="text-align: left">savedHeight: {{ savedHeight }}</p> -->
|
||||
<!-- <p style="text-align: left">selectableDatesData: {{ selectableDatesData }}</p> -->
|
||||
<!-- <p style="text-align: left">months: {{ months }}</p> -->
|
||||
<fieldset id="date-picker-fieldset" ref="datePickerFieldset">
|
||||
<legend class="sr-only">Date Picker</legend>
|
||||
<!-- <h4 id="tracker" ref="tracker">currentScrollTop: {{ currentScrollTop }}</h4> -->
|
||||
<div
|
||||
v-for="month in months"
|
||||
:key="`${month.monthLabel}-${month.yearNum?.toString()}`"
|
||||
:id="`${month.monthLabel}-${month.yearNum?.toString()}`"
|
||||
class="calendar-grid-container position-relative"
|
||||
:class="[
|
||||
isInitialView === true ? 'initial-view' : '',
|
||||
month.monthClass,
|
||||
isAddingNewMonth === true ? 'is-adding-new-month' : '',
|
||||
]">
|
||||
<div class="month-year body-small d-flex align-items-center small">
|
||||
{{ month.monthLabel }} {{ month.yearNum?.toString() }}
|
||||
</div>
|
||||
<div
|
||||
v-if="calendarViewDirection === 'future'"
|
||||
class="legend caption d-flex align-items-center justify-content-end">
|
||||
<span class="legend-circle me-1"></span> = Available
|
||||
</div>
|
||||
<div class="separator-line"></div>
|
||||
<div class="nav-back ps-3"><button></button></div>
|
||||
<div class="nav-forward pe-3"><button></button></div>
|
||||
<!-- Do the days of the weeek need to be read? -->
|
||||
<div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
|
||||
<div
|
||||
v-for="date in month.dates"
|
||||
:key="`${month.monthLabel}-${date.dateNum.toString()}-${months.length}`"
|
||||
class="grid-item radio-wrapper"
|
||||
:class="[
|
||||
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
|
||||
date.dayClasses,
|
||||
]">
|
||||
<input
|
||||
:disabled="!isSelectableDate(date.inputValue)"
|
||||
type="radio"
|
||||
name="day-of-month"
|
||||
v-model="selectedDate"
|
||||
:value="date.inputValue"
|
||||
:id="`${month.monthLabel}-${date.dateNum.toString()}`" />
|
||||
<label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
|
||||
<span>{{ date.dateNum.toString() }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div id="bottom-spacer"></div> -->
|
||||
</fieldset>
|
||||
<button
|
||||
v-if="calendarViewDirection === 'future'"
|
||||
type="button"
|
||||
class="btn btn-link"
|
||||
@click="goForward">
|
||||
View more dates
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -81,7 +82,7 @@ export default {
|
|||
return {
|
||||
// calendarData: [],
|
||||
monthsBeforeToLoadOffset: 0,
|
||||
monthsAfterToLoadOffset: 1,
|
||||
monthsAfterToLoadOffset: 12,
|
||||
selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
|
||||
isInitialView: true,
|
||||
initialViewRowsToShow: 5,
|
||||
|
|
@ -97,7 +98,9 @@ export default {
|
|||
|
||||
mounted() {
|
||||
this.setCalendarData();
|
||||
// this.trackScrollTop();
|
||||
// this.$nextTick(() => {
|
||||
this.trackScrollTop();
|
||||
// });
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
@ -111,6 +114,9 @@ export default {
|
|||
modelValue: {
|
||||
type: Object,
|
||||
},
|
||||
// selectableDates: {
|
||||
// type: Array,
|
||||
// },
|
||||
todayOverrideDateString: {
|
||||
// only used for unit tests to override today's date
|
||||
type: String,
|
||||
|
|
@ -157,12 +163,250 @@ export default {
|
|||
// this.setCalendarData();
|
||||
// }
|
||||
// // this.months = this.calendarData;
|
||||
// },
|
||||
trackScrollTop() {
|
||||
|
||||
// this.$nextTick(() => {
|
||||
// setTimeout(() => {
|
||||
// // const outputSlot = document.querySelector("#tracker");
|
||||
// // const fieldset = document.querySelector("#date-picker-fieldset");
|
||||
// // console.log("fieldset: ", fieldset)
|
||||
|
||||
setInterval(() => {
|
||||
this.currentScrollTop = this.$refs.datePickerFieldset?.scrollTop.toString();
|
||||
}, 250);
|
||||
// }, 500);
|
||||
// });
|
||||
|
||||
|
||||
},
|
||||
scrollToElement(elementId, speed, easing) {
|
||||
const TIMINGFUNC_MAP = {
|
||||
"linear": t => t,
|
||||
"ease-in": t => t * t,
|
||||
"ease-out": t => t * ( 2 - t ),
|
||||
"ease-in-out": t => ( t < .5 ? 2 * t * t : -1 + ( 4 - 2 * t ) * t )
|
||||
};
|
||||
const BUFFER_OFFSET = 10;
|
||||
function scrollTopSmooth( wrapper, target, duration = 300, timingName = "linear" ) {
|
||||
const initY = wrapper.scrollTop;
|
||||
const wrapperRect = wrapper.getBoundingClientRect();
|
||||
// console.log("wrapperRect: ", wrapperRect)
|
||||
const targetRect = target.getBoundingClientRect();
|
||||
// console.log("targetRect: ", targetRect)
|
||||
const targetY = targetRect.top - wrapperRect.top - BUFFER_OFFSET;
|
||||
// console.log("targetY: ", targetY)
|
||||
|
||||
|
||||
const timingFunc = TIMINGFUNC_MAP[ timingName ];
|
||||
|
||||
let start = null;
|
||||
|
||||
const step = ( timestamp ) => {
|
||||
start = start || timestamp;
|
||||
const progress = timestamp - start,
|
||||
// Growing from 0 to 1
|
||||
time = Math.min( 1, ( ( timestamp - start ) / duration ) );
|
||||
|
||||
let percentageNew = timingFunc( time );
|
||||
let distanceToGo = targetY; // 592 is the goal for June-2023 targetY
|
||||
let thisDistance = percentageNew * distanceToGo;
|
||||
|
||||
// console.log("", progress.toFixed(2), " - initY: ", initY.toFixed(2))
|
||||
// console.log(" ", progress.toFixed(2), " - percentageNew: ", percentageNew.toFixed(2))
|
||||
// console.log(" ", progress.toFixed(2), " - distanceToGo: ", distanceToGo.toFixed(2))
|
||||
// console.log(" ", progress.toFixed(2), " - thisDistance: ", thisDistance.toFixed(2))
|
||||
// console.log(" ")
|
||||
|
||||
wrapper.scrollTo( 0, initY + thisDistance );
|
||||
|
||||
|
||||
if ( percentageNew < 1 ) {
|
||||
window.requestAnimationFrame( step );
|
||||
}
|
||||
};
|
||||
|
||||
window.requestAnimationFrame( step );
|
||||
}
|
||||
|
||||
// scrollTopSmooth( window.scrollY, 300, "ease-in-out" );
|
||||
|
||||
// const wrapper = document.getElementById("date-picker-fieldset");
|
||||
const wrapper = this.$refs.datePickerFieldset;
|
||||
// console.log("wrapper.scrollTop: ", wrapper.scrollTop)
|
||||
// get Target
|
||||
let targetMonth = document.getElementById(elementId);
|
||||
|
||||
scrollTopSmooth( wrapper, targetMonth, 800, "ease-in-out" );
|
||||
|
||||
},
|
||||
// scrollToElementOLD(elementId, speed, easing) {
|
||||
// const wrapper = document.getElementById("date-picker-fieldset");
|
||||
// const element = document.getElementById(elementId);
|
||||
// const elementRect = element.getBoundingClientRect();
|
||||
// const wrapperRect = wrapper.getBoundingClientRect();
|
||||
// const offset = elementRect.top - (wrapperRect.top + 200);
|
||||
// const distance = Math.abs(offset);
|
||||
// const duration = distance / speed;
|
||||
// const easingFactor = easing || 1;
|
||||
// const easingFunction = (t) => Math.pow(t, easingFactor);
|
||||
|
||||
// // console.log("elementRect: ", elementRect);
|
||||
// // console.log("wrapperRect: ", wrapperRect);
|
||||
// // console.log("offset: ", offset);
|
||||
// // console.log("distance: ", distance);
|
||||
// // console.log("duration: ", duration);
|
||||
|
||||
// let start = null;
|
||||
|
||||
// function step(timestamp) {
|
||||
// if (!start) start = timestamp;
|
||||
// const progress = timestamp - start;
|
||||
// const prePercentage = progress / duration;
|
||||
// // console.log("progress / duration: ", prePercentage);
|
||||
// const percentage = Math.min(progress / duration, 1);
|
||||
// const distanceToMove = easingFunction(percentage) * distance;
|
||||
// // console.log(
|
||||
// // "progress / percentage / distanceToMove: ",
|
||||
// // progress,
|
||||
// // " / ",
|
||||
// // percentage,
|
||||
// // " / ",
|
||||
// // distanceToMove
|
||||
// // );
|
||||
// // debugger; // eslint-disable-line no-debugger
|
||||
// wrapper.scrollTop += offset > 0 ? distanceToMove : -distanceToMove;
|
||||
// if (percentage < 1) {
|
||||
// setTimeout(() => {
|
||||
// window.requestAnimationFrame(step);
|
||||
// }, 50); // slowing it down a bit, less calculations, less smooth
|
||||
// // window.requestAnimationFrame(step);
|
||||
// }
|
||||
// }
|
||||
|
||||
// window.requestAnimationFrame(step);
|
||||
|
||||
// const elementRectEnd = element.getBoundingClientRect();
|
||||
// const wrapperRectEnd = wrapper.getBoundingClientRect();
|
||||
|
||||
// // console.log("elementRectEnd: ", elementRectEnd);
|
||||
// // console.log("wrapperRectEnd: ", wrapperRectEnd);
|
||||
// },
|
||||
// scrollToElementOLD2(elementId, speed, easing) {
|
||||
// const TIMINGFUNC_MAP = {
|
||||
// "linear": t => t,
|
||||
// "ease-in": t => t * t,
|
||||
// "ease-out": t => t * ( 2 - t ),
|
||||
// "ease-in-out": t => ( t < .5 ? 2 * t * t : -1 + ( 4 - 2 * t ) * t )
|
||||
// };
|
||||
// function scrollTopSmooth( el, duration = 300, timingName = "linear" ) {
|
||||
// const initY = el.scrollTop;
|
||||
// const timingFunc = TIMINGFUNC_MAP[ timingName ];
|
||||
// let start = null;
|
||||
|
||||
// const step = ( timestamp ) => {
|
||||
// start = start || timestamp;
|
||||
// const progress = timestamp - start,
|
||||
// // Growing from 0 to 1
|
||||
// time = Math.min( 1, ( ( timestamp - start ) / duration ) );
|
||||
|
||||
// console.log(" ", progress.toFixed(2), " - initY: ", initY.toFixed(2))
|
||||
// console.log(" ", progress.toFixed(2), " - calc1: ", ( timingFunc( time ) ).toFixed(2))
|
||||
// console.log(" ", progress.toFixed(2), " - calc2: ", ( timingFunc( time ) * initY ).toFixed(2))
|
||||
// console.log(" ", progress.toFixed(2), " - scrollTo: ", (initY + ( timingFunc( time ) * initY )).toFixed(2))
|
||||
// console.log(" ")
|
||||
|
||||
// el.scrollTo( 0, initY - ( timingFunc( time ) * initY ) );
|
||||
|
||||
// if ( progress < duration ) {
|
||||
// window.requestAnimationFrame( step );
|
||||
// }
|
||||
// };
|
||||
|
||||
// window.requestAnimationFrame( step );
|
||||
// }
|
||||
|
||||
// // scrollTopSmooth( window.scrollY, 300, "ease-in-out" );
|
||||
|
||||
// // const wrapper = document.getElementById("date-picker-fieldset");
|
||||
// const wrapper = this.$refs.datePickerFieldset;
|
||||
// console.log("wrapper.scrollTop: ", wrapper.scrollTop)
|
||||
// scrollTopSmooth( wrapper, 300, "ease-in-out" );
|
||||
// // go from: 211 to 592
|
||||
|
||||
// // function scrollTest() {
|
||||
// // wrapper.scrollTo( 0, (wrapper.scrollTop + 20) )
|
||||
// // setTimeout(() => {
|
||||
// // if (wrapper.scrollTop < 592) {
|
||||
// // scrollTest();
|
||||
// // }
|
||||
// // }, 100);
|
||||
// // }
|
||||
// // scrollTest();
|
||||
|
||||
// },
|
||||
goForward() {
|
||||
const fieldset = document.querySelector("#date-picker-fieldset");
|
||||
|
||||
if (this.isInitialView) {
|
||||
|
||||
const monthToScrollTo = document.querySelector(".initial-view:not(.current-month):not(.month-hidden)");
|
||||
// console.log(" monthToScrollTo.id ", monthToScrollTo.id)
|
||||
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
// document.querySelector("#April-2023")?.scrollIntoView({ behavior: "smooth" });
|
||||
|
||||
// const targ = document.querySelector("#April-2023").getBoundingClientRect();
|
||||
// const fs = document.querySelector("fieldset");
|
||||
// // targ.top is number to scroll to
|
||||
// fs.scrollBy({
|
||||
// top: 100,
|
||||
// behavior: "smooth",
|
||||
// });
|
||||
// write a javascript function that will get the y value of element firstThing and slowly scroll it in the parent element Wrapper so the top of firstThing is at the top of the Wrapper. Allow a parameter to control speed of the scrolling movement.
|
||||
|
||||
this.scrollToElement(monthToScrollTo.id);
|
||||
// fieldset.scrollTop = 211;
|
||||
}, 0.01);
|
||||
});
|
||||
this.isInitialView = false; // 1st click removes hidden styling
|
||||
|
||||
} else {
|
||||
this.addMonthData(); // 2nd click adds 1 month data
|
||||
// ====== GET CURRENT COORDINATES ==========
|
||||
|
||||
// fieldset.classList.add("crazy");
|
||||
|
||||
// this.savedHeight = fieldset.scrollTop;
|
||||
// console.log("this.savedHeight is: ", this.savedHeight);
|
||||
// =================================
|
||||
|
||||
this.showAnotherMonth(); // 2nd click adds 1 month data
|
||||
|
||||
// ====== RESTORE COORDINATES ==========
|
||||
|
||||
// this.$nextTick(() => {
|
||||
// // console.log("AFTER 1 fieldset.scrollTop: ", fieldset.scrollTop);
|
||||
// fieldset.scrollTop = this.savedHeight;
|
||||
// fieldset.classList.remove("crazy");
|
||||
// console.log(" BEFORE ANIMATION, this.savedHeight is: ", this.savedHeight)
|
||||
// console.log(" BEFORE ANIMATION, fieldset.scrollTop is: ", fieldset.scrollTop)
|
||||
// this.scrollToElement(this.newestMonthId, 0.5, 2);
|
||||
// });
|
||||
|
||||
|
||||
// debugger; // eslint-disable-line no-debugger
|
||||
// this.$nextTick(() => {
|
||||
// this.scrollToElement(this.newestMonthId, 0.5, 0.5);
|
||||
// });
|
||||
|
||||
// this.$nextTick(() => {
|
||||
// setTimeout(() => {
|
||||
// this.scrollToElement(this.newestMonthId, 0.1, 2);
|
||||
// }, 500);
|
||||
// });
|
||||
|
||||
// =================================
|
||||
}
|
||||
},
|
||||
async setCalendarData() {
|
||||
|
|
@ -221,6 +465,7 @@ export default {
|
|||
}
|
||||
}
|
||||
} else {
|
||||
// TODO ? I THINK THIS IS NEVER USED NOW
|
||||
// used only when adding an additional month
|
||||
|
||||
if (direction === "future") {
|
||||
|
|
@ -250,29 +495,32 @@ export default {
|
|||
}
|
||||
|
||||
const todayDayIndex = this.todayDate.getDay(); // get day of week index of today (0-6)
|
||||
currentWeekStartDateNum =
|
||||
todayDayIndex > todayDateNum ? 1 : todayDateNum - todayDayIndex; // FUTURE
|
||||
currentWeekStartDateNum = todayDayIndex > todayDateNum ? 1 : todayDateNum - todayDayIndex; // FUTURE
|
||||
const monthEndDate = new Date(yearNum, monthIndex + 1, 0); // BOTH
|
||||
let monthEndDateNum = monthEndDate.getDate(); // BOTH
|
||||
currentWeekEndDateNum = todayDateNum + 6 - todayDayIndex; // PAST, aka Sat. (ok if it's larger than the month end?)
|
||||
if (offset === 0 && direction === "past" && monthEndDateNum > currentWeekEndDateNum)
|
||||
if (offset === 0 && direction === "past" && monthEndDateNum > currentWeekEndDateNum) {
|
||||
monthEndDateNum = currentWeekEndDateNum; // PAST
|
||||
const monthStartDateNum =
|
||||
offset === 0 && direction === "future" ? currentWeekStartDateNum : 1; // FUTURE
|
||||
}
|
||||
const monthStartDateNum = (offset === 0 && direction === "future") ? currentWeekStartDateNum : 1; // FUTURE
|
||||
const monthStartDate = new Date(yearNum, monthIndex, monthStartDateNum); // BOTH
|
||||
const startDateDayIndex = monthStartDate.getDay(); // FUTURE
|
||||
const endDateDayIndex = monthEndDate.getDay(); // PAST
|
||||
|
||||
if (typeof offset !== "undefined") {
|
||||
if (offset === 0 && direction === "future")
|
||||
if (offset === 0 && direction === "future") {
|
||||
firstMonthDayTally = monthStartDateNum - startDateDayIndex; // FUTURE (starts low, counts up)
|
||||
if (offset === 0 && direction === "past")
|
||||
monthClass = monthClass + " current-month";
|
||||
}
|
||||
if (offset === 0 && direction === "past") {
|
||||
firstMonthDayTally = currentWeekEndDateNum; // PAST (starts high, counts down)
|
||||
monthClass = monthClass + " current-month";
|
||||
}
|
||||
|
||||
while (
|
||||
direction === "future" &&
|
||||
offset === 0 &&
|
||||
firstMonthDayTally < monthEndDateNum
|
||||
firstMonthDayTally <= monthEndDateNum
|
||||
) {
|
||||
// FUTURE
|
||||
firstMonthDayTally = firstMonthDayTally + 7;
|
||||
|
|
@ -282,7 +530,7 @@ export default {
|
|||
while (
|
||||
direction === "past" &&
|
||||
offset === 0 &&
|
||||
firstMonthDayTally > monthStartDateNum
|
||||
firstMonthDayTally >= monthStartDateNum
|
||||
) {
|
||||
// PAST
|
||||
firstMonthDayTally = firstMonthDayTally - 7;
|
||||
|
|
@ -295,7 +543,7 @@ export default {
|
|||
initialViewStartDate = monthEndDateNum - endDateDayIndex; // PAST
|
||||
this.initialViewRowsTally++;
|
||||
} else {
|
||||
monthClass = monthClass + " month-hidden";
|
||||
monthClass = monthClass + " initial-month-hidden";
|
||||
}
|
||||
|
||||
while (this.initialViewRowsTally < this.initialViewRowsToShow) {
|
||||
|
|
@ -304,7 +552,11 @@ export default {
|
|||
this.initialViewRowsTally++;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (Math.abs(offset) > 1) {
|
||||
monthClass = monthClass + " month-hidden";
|
||||
}
|
||||
|
||||
} else { // TODO REMOVE THIS BLOCK? NO LONGER NEEDED?
|
||||
monthClass = monthClass + " new-month";
|
||||
}
|
||||
|
||||
|
|
@ -377,63 +629,47 @@ export default {
|
|||
const monthToAdd = {
|
||||
monthLabel: monthsOfYear[monthIndex],
|
||||
monthIndex: monthIndex,
|
||||
monthString: monthsOfYear[monthIndex] + "-" + yearNum?.toString(),
|
||||
yearNum: yearNum,
|
||||
dates: datesArray,
|
||||
startDateDayIndex: startDateDayIndex,
|
||||
monthClass: monthClass,
|
||||
};
|
||||
|
||||
// TODO: CHANGE NAME OF MONTH AND DATE's "___String" to "_____Id"; it's better
|
||||
|
||||
// debugger; // eslint-disable-line no-debugger
|
||||
|
||||
// console.log(" mmm mm m mm m m m MONTH IS READY mm m m m m m m m mmmm m mm")
|
||||
|
||||
return monthToAdd;
|
||||
},
|
||||
async addMonthData() {
|
||||
this.isAddingNewMonth = true; // TODO - DO I NEED THIS ANYMIRE?
|
||||
|
||||
const monthToAdd = await this.getMonthData();
|
||||
|
||||
this.newestMonthId = monthToAdd.monthLabel + "-" + monthToAdd.yearNum?.toString();
|
||||
// console.log("newestMonthId: ", this.newestMonthId)
|
||||
|
||||
async showAnotherMonth() {
|
||||
let monthToShow;
|
||||
if (this.calendarViewDirection === "future") {
|
||||
let month = this.months[this.months.length - 1];
|
||||
month.monthClass = month.monthClass.replace("new-month", "");
|
||||
this.months.push(monthToAdd);
|
||||
monthToShow = this.months.find(month => month.monthClass.includes('month-hidden'));
|
||||
}
|
||||
if (this.calendarViewDirection === "past") {
|
||||
let month = this.months[0];
|
||||
month.monthClass = month.monthClass.replace("new-month", "");
|
||||
this.months.unshift(monthToAdd);
|
||||
// TODO: UPDATE THIS WITH CORRECT PAST LOOKING LOGIC
|
||||
monthToShow = this.months.find(month => month.monthClass.includes('month-hidden'));
|
||||
}
|
||||
|
||||
// console.log("monthToShow: ", monthToShow)
|
||||
|
||||
// make new API call with this month's start and end dates
|
||||
await this.updateSelectableDates(monthToShow.dates[0].inputValue.dateString, monthToShow.dates[monthToShow.dates.length - 1].inputValue.dateString);
|
||||
|
||||
monthToShow.monthClass = monthToShow.monthClass.replace(" month-hidden", "");
|
||||
|
||||
this.isAddingNewMonth = false;
|
||||
// scroll the next question into view
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
// put call to scroll here
|
||||
// ID to scroll to: monthToShow.monthString
|
||||
this.scrollToElement(monthToShow.monthString);
|
||||
}, 0.01);
|
||||
});
|
||||
|
||||
// == ATTEMPT 3
|
||||
// this.$nextTick(() => {
|
||||
// // setTimeout(() => {
|
||||
// // this.isAddingNewMonth = false;
|
||||
// // }, 0.010);
|
||||
// setTimeout(() => {
|
||||
// document.querySelector("#April-2023-3")?.scrollIntoView({ behavior: "smooth" });
|
||||
// }, 0.01);
|
||||
// });
|
||||
|
||||
// // scroll the next question into view
|
||||
// this.$nextTick(() => {
|
||||
// setTimeout(() => {
|
||||
// this.isAddingNewMonth = false;
|
||||
// }, 0.010);
|
||||
// setTimeout(() => {
|
||||
// document.querySelector(".new-month")?.scrollIntoView({ behavior: "smooth" });
|
||||
// }, 0.010);
|
||||
// });
|
||||
|
||||
// setTimeout(() => {
|
||||
// this.isAddingNewMonth = false;
|
||||
// }, 0.01);
|
||||
},
|
||||
isSelectableDate(thisDate) {
|
||||
const testForDate = (dateInArray) => {
|
||||
|
|
@ -483,28 +719,94 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hidden-for-real {
|
||||
visibility: hidden !important;
|
||||
max-height: 0 !important;
|
||||
}
|
||||
#tracker {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
z-index: 99999999999;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
width: 40%;
|
||||
text-align: left;
|
||||
padding: 5px;
|
||||
|
||||
// display: none;
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
// == ATTEMPT 3
|
||||
overflow: hidden;
|
||||
max-height: 62vh; // max-height: 60vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
height: 98vh;
|
||||
|
||||
// == ATTEMPT 2
|
||||
// max-height: 60vh; // TBD
|
||||
// overflow-y: auto;
|
||||
|
||||
// == ATTEMPT 1
|
||||
// position: relative;
|
||||
// display: flex;
|
||||
// width: 100%;
|
||||
// flex-direction: column;
|
||||
// height: 98vh;
|
||||
|
||||
// background: 0% 0%/50% 50% url("https://i.imgur.com/hlMp680.png") repeat;
|
||||
|
||||
// == ATTEMPT 2
|
||||
// IS THIS AFTER EVEN NEEDED?
|
||||
// &:after {
|
||||
// content: '';
|
||||
// display: block;
|
||||
// width: 100%;
|
||||
// height: 200px;
|
||||
// background: rgba(155, 60, 125, 0.5);
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
// // background: linear-gradient(to bottom, rgba(125,185,232,0) 0%,rgba(255,255,255,1) 100%);
|
||||
|
||||
// }
|
||||
|
||||
fieldset {
|
||||
height: 600px;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
// == ATTEMPT 3
|
||||
//overflow-y: auto;
|
||||
overflow-y: scroll;
|
||||
height: 54vh; // height: 54vh;
|
||||
|
||||
// height: 9600px; // SB 600px
|
||||
|
||||
// outline: 2px solid red;
|
||||
|
||||
// overflow: auto;
|
||||
// position: relative;
|
||||
// padding-bottom: 1000em;
|
||||
|
||||
// background: 0% 0%/50% 50% url("https://i.imgur.com/MRtUeUs.png") repeat;
|
||||
|
||||
&.crazy {
|
||||
overflow-y: hidden;
|
||||
// outline: 3px dotted orange;
|
||||
// background: orange !important;
|
||||
}
|
||||
}
|
||||
.calendar-grid-container {
|
||||
margin: 0 auto 2rem auto;
|
||||
max-width: 414px;
|
||||
max-height: 500px;
|
||||
overflow: hidden;
|
||||
transition: all ease 1s;
|
||||
// transition: all ease 1s;
|
||||
transition: height ease 2s, opacity ease 2s;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 .75rem;
|
||||
padding: 0 0.75rem;
|
||||
|
||||
// background: url("https://i.imgur.com/ncwmc2l.png") repeat;
|
||||
|
||||
.grid-item {
|
||||
text-align: center;
|
||||
|
|
@ -570,6 +872,7 @@ export default {
|
|||
height: 2rem;
|
||||
opacity: 1;
|
||||
transition: ease all 250ms;
|
||||
// transition: ease all 1250ms;
|
||||
|
||||
input[type="radio"] {
|
||||
position: absolute; //override bootstrap
|
||||
|
|
@ -702,12 +1005,13 @@ export default {
|
|||
}
|
||||
|
||||
&.initial-view {
|
||||
&.month-hidden {
|
||||
display: none;
|
||||
&.initial-month-hidden {
|
||||
visibility: hidden;
|
||||
max-height: 0;
|
||||
}
|
||||
.day-hidden {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
// height: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
|
|
@ -715,15 +1019,25 @@ export default {
|
|||
}
|
||||
&.is-adding-new-month {
|
||||
&.new-month {
|
||||
max-height: 0;
|
||||
// max-height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&.month-hidden {
|
||||
visibility: hidden;
|
||||
max-height: 0;
|
||||
}
|
||||
}
|
||||
#bottom-spacer {
|
||||
height: 20rem;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
// .btn-link {
|
||||
// font-weight: 500;
|
||||
// text-underline-offset: 4px;
|
||||
// }
|
||||
.btn-link {
|
||||
font-weight: 500;
|
||||
text-underline-offset: 4px;
|
||||
box-shadow: none !important; // TODO: FIX THIS
|
||||
}
|
||||
|
||||
.past {
|
||||
.calendar-grid-container {
|
||||
|
|
@ -782,18 +1096,26 @@ export default {
|
|||
}
|
||||
}
|
||||
.new-month {
|
||||
max-height: 550px;
|
||||
// max-height: 550px;
|
||||
opacity: 1;
|
||||
// background: lime !important;
|
||||
}
|
||||
}
|
||||
.btn-link {
|
||||
display: flex;
|
||||
// == ATTEMPT 3
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 3rem;
|
||||
|
||||
// display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
// position: absolute;
|
||||
// bottom: 2rem;
|
||||
font-weight: 500;
|
||||
text-underline-offset: 4px;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,18 +9,18 @@ import { headerKeys } from "@/constants/header-keys";
|
|||
export default {
|
||||
callHttpClient({ method, endpoint, payload, logApiCall = true, isFormData = false }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
|
||||
let payloadAndAnalyticsData = {};
|
||||
if (isFormData) {
|
||||
payloadAndAnalyticsData = payload;
|
||||
payloadAndAnalyticsData.append("AppName", "FixMyGlass");
|
||||
} else {
|
||||
Object.assign(payloadAndAnalyticsData, payload, { AppName: "FixMyGlass" });
|
||||
}
|
||||
let cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
|
||||
const payloadAndAnalyticsData = Object.assign({}, payload, { AppName: "FixMyGlass" });
|
||||
const headers = {
|
||||
[headerKeys.EXPERIMENT]: JSON.stringify(store.getters.experimentSettings),
|
||||
};
|
||||
|
||||
if (endpoint.toLowerCase().includes("/analytics/")) {
|
||||
cfDistroUrl = "";
|
||||
endpoint = "";
|
||||
method = "GET";
|
||||
}
|
||||
|
||||
axios({
|
||||
method: method,
|
||||
url: cfDistroUrl + endpoint,
|
||||
|
|
|
|||
|
|
@ -65,16 +65,64 @@ export default {
|
|||
return {
|
||||
selectedDate: null,
|
||||
mockSelectableDatesData: [
|
||||
{ dateString: "2023-04-28", year: 2023, month: 4, date: 28 },
|
||||
{ dateString: "2023-05-04", year: 2023, month: 5, date: 4 },
|
||||
{ dateString: "2023-05-05", year: 2023, month: 5, date: 5 },
|
||||
{ dateString: "2023-05-14", year: 2023, month: 5, date: 14 },
|
||||
{ dateString: "2023-05-21", year: 2023, month: 5, date: 21 },
|
||||
{ dateString: "2023-05-23", year: 2023, month: 5, date: 23 },
|
||||
{ dateString: "2023-05-25", year: 2023, month: 5, date: 25 },
|
||||
{ dateString: "2023-06-11", year: 2023, month: 6, date: 11 },
|
||||
{ dateString: "2023-06-13", year: 2023, month: 6, date: 13 },
|
||||
{ dateString: "2023-06-17", year: 2023, month: 6, date: 17 },
|
||||
{ dateString: "2023-04-28" },
|
||||
|
||||
{ dateString: "2023-05-04" },
|
||||
{ dateString: "2023-05-09" },
|
||||
{ dateString: "2023-05-11" },
|
||||
{ dateString: "2023-05-17" },
|
||||
{ dateString: "2023-05-18" },
|
||||
{ dateString: "2023-05-19" },
|
||||
{ dateString: "2023-05-23" },
|
||||
{ dateString: "2023-05-24" },
|
||||
{ dateString: "2023-05-25" },
|
||||
{ dateString: "2023-05-30" },
|
||||
{ dateString: "2023-05-31" },
|
||||
|
||||
{ dateString: "2023-06-01" },
|
||||
{ dateString: "2023-06-02" },
|
||||
{ dateString: "2023-06-06" },
|
||||
{ dateString: "2023-06-07" },
|
||||
{ dateString: "2023-06-09" },
|
||||
{ dateString: "2023-06-12" },
|
||||
{ dateString: "2023-06-13" },
|
||||
{ dateString: "2023-06-15" },
|
||||
{ dateString: "2023-06-16" },
|
||||
{ dateString: "2023-06-17" },
|
||||
{ dateString: "2023-06-20" },
|
||||
{ dateString: "2023-06-21" },
|
||||
{ dateString: "2023-06-22" },
|
||||
{ dateString: "2023-06-23" },
|
||||
{ dateString: "2023-06-26" },
|
||||
{ dateString: "2023-06-27" },
|
||||
{ dateString: "2023-06-28" },
|
||||
{ dateString: "2023-06-29" },
|
||||
{ dateString: "2023-06-30" },
|
||||
|
||||
{ dateString: "2023-07-01" },
|
||||
{ dateString: "2023-07-03" },
|
||||
{ dateString: "2023-07-04" },
|
||||
{ dateString: "2023-07-05" },
|
||||
{ dateString: "2023-07-06" },
|
||||
{ dateString: "2023-07-07" },
|
||||
{ dateString: "2023-07-10" },
|
||||
{ dateString: "2023-07-11" },
|
||||
{ dateString: "2023-07-12" },
|
||||
{ dateString: "2023-07-13" },
|
||||
{ dateString: "2023-07-14" },
|
||||
{ dateString: "2023-07-15" },
|
||||
{ dateString: "2023-07-17" },
|
||||
{ dateString: "2023-07-18" },
|
||||
{ dateString: "2023-07-19" },
|
||||
{ dateString: "2023-07-20" },
|
||||
{ dateString: "2023-07-21" },
|
||||
{ dateString: "2023-07-24" },
|
||||
{ dateString: "2023-07-25" },
|
||||
{ dateString: "2023-07-26" },
|
||||
{ dateString: "2023-07-27" },
|
||||
{ dateString: "2023-07-28" },
|
||||
{ dateString: "2023-07-29" },
|
||||
{ dateString: "2023-07-31" },
|
||||
],
|
||||
selectableDatesData: [],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue