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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.button-question-overflow {
|
// .button-question-overflow {
|
||||||
height: calc(100vh - 274px);
|
// height: calc(100vh - 274px);
|
||||||
|
|
||||||
.overflow-scroll {
|
// .overflow-scroll {
|
||||||
// Height will be determined by overall height of content above list
|
// // Height will be determined by overall height of content above list
|
||||||
height: calc(100% - 314px);
|
// height: calc(100% - 314px);
|
||||||
overflow-x: hidden !important;
|
// overflow-x: hidden !important;
|
||||||
-webkit-overflow-scrolling: touch;
|
// -webkit-overflow-scrolling: touch;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
.button-question {
|
.button-question {
|
||||||
color: $black;
|
color: $black;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,69 +1,70 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="date-picker text-center" :class="calendarViewDirection">
|
<div v-if="months" class="date-picker text-center" :class="calendarViewDirection">
|
||||||
<!-- <p style="text-align: left">savedHeight: {{ savedHeight }}</p> -->
|
<!-- <p style="text-align: left">savedHeight: {{ savedHeight }}</p> -->
|
||||||
<!-- <p style="text-align: left">selectableDatesData: {{ selectableDatesData }}</p> -->
|
<!-- <p style="text-align: left">selectableDatesData: {{ selectableDatesData }}</p> -->
|
||||||
<!-- <p style="text-align: left">months: {{ months }}</p> -->
|
<!-- <p style="text-align: left">months: {{ months }}</p> -->
|
||||||
<fieldset v-if="months" id="date-picker-fieldset">
|
<fieldset id="date-picker-fieldset" ref="datePickerFieldset">
|
||||||
<legend class="sr-only">Date Picker</legend>
|
<legend class="sr-only">Date Picker</legend>
|
||||||
<h4 id="tracker">currentScrollTop: {{ currentScrollTop }}</h4>
|
<!-- <h4 id="tracker" ref="tracker">currentScrollTop: {{ currentScrollTop }}</h4> -->
|
||||||
<div
|
<div
|
||||||
v-for="month in months"
|
v-for="month in months"
|
||||||
:key="`${month.monthLabel}-${month.yearNum?.toString()}`"
|
:key="`${month.monthLabel}-${month.yearNum?.toString()}`"
|
||||||
:id="`${month.monthLabel}-${month.yearNum?.toString()}`"
|
:id="`${month.monthLabel}-${month.yearNum?.toString()}`"
|
||||||
class="calendar-grid-container position-relative"
|
class="calendar-grid-container position-relative"
|
||||||
:class="[
|
:class="[
|
||||||
isInitialView === true ? 'initial-view' : '',
|
isInitialView === true ? 'initial-view' : '',
|
||||||
month.monthClass,
|
month.monthClass,
|
||||||
isAddingNewMonth === true ? 'is-adding-new-month' : '',
|
isAddingNewMonth === true ? 'is-adding-new-month' : '',
|
||||||
]">
|
]">
|
||||||
<div class="month-year body-small d-flex align-items-center small">
|
<div class="month-year body-small d-flex align-items-center small">
|
||||||
{{ month.monthLabel }} {{ month.yearNum?.toString() }}
|
{{ month.monthLabel }} {{ month.yearNum?.toString() }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="calendarViewDirection === 'future'"
|
v-if="calendarViewDirection === 'future'"
|
||||||
class="legend caption d-flex align-items-center justify-content-end">
|
class="legend caption d-flex align-items-center justify-content-end">
|
||||||
<span class="legend-circle me-1"></span> = Available
|
<span class="legend-circle me-1"></span> = Available
|
||||||
</div>
|
</div>
|
||||||
<div class="separator-line"></div>
|
<div class="separator-line"></div>
|
||||||
<div class="nav-back ps-3"><button></button></div>
|
<div class="nav-back ps-3"><button></button></div>
|
||||||
<div class="nav-forward pe-3"><button></button></div>
|
<div class="nav-forward pe-3"><button></button></div>
|
||||||
<!-- Do the days of the weeek need to be read? -->
|
<!-- 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">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">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">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">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">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">Friday</span>F</div>
|
||||||
<div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
|
<div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
|
||||||
<div
|
<div
|
||||||
v-for="date in month.dates"
|
v-for="date in month.dates"
|
||||||
:key="`${month.monthLabel}-${date.dateNum.toString()}-${months.length}`"
|
:key="`${month.monthLabel}-${date.dateNum.toString()}-${months.length}`"
|
||||||
class="grid-item radio-wrapper"
|
class="grid-item radio-wrapper"
|
||||||
:class="[
|
:class="[
|
||||||
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
|
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
|
||||||
date.dayClasses,
|
date.dayClasses,
|
||||||
]">
|
]">
|
||||||
<input
|
<input
|
||||||
:disabled="!isSelectableDate(date.inputValue)"
|
:disabled="!isSelectableDate(date.inputValue)"
|
||||||
type="radio"
|
type="radio"
|
||||||
name="day-of-month"
|
name="day-of-month"
|
||||||
v-model="selectedDate"
|
v-model="selectedDate"
|
||||||
:value="date.inputValue"
|
:value="date.inputValue"
|
||||||
:id="`${month.monthLabel}-${date.dateNum.toString()}`" />
|
:id="`${month.monthLabel}-${date.dateNum.toString()}`" />
|
||||||
<label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
|
<label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
|
||||||
<span>{{ date.dateNum.toString() }}</span>
|
<span>{{ date.dateNum.toString() }}</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
<!-- <div id="bottom-spacer"></div> -->
|
||||||
<button
|
</fieldset>
|
||||||
v-if="calendarViewDirection === 'future'"
|
<button
|
||||||
type="button"
|
v-if="calendarViewDirection === 'future'"
|
||||||
class="btn btn-link"
|
type="button"
|
||||||
@click="goForward">
|
class="btn btn-link"
|
||||||
View more dates
|
@click="goForward">
|
||||||
</button>
|
View more dates
|
||||||
</div>
|
</button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -81,7 +82,7 @@ export default {
|
||||||
return {
|
return {
|
||||||
// calendarData: [],
|
// calendarData: [],
|
||||||
monthsBeforeToLoadOffset: 0,
|
monthsBeforeToLoadOffset: 0,
|
||||||
monthsAfterToLoadOffset: 1,
|
monthsAfterToLoadOffset: 12,
|
||||||
selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
|
selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
|
||||||
isInitialView: true,
|
isInitialView: true,
|
||||||
initialViewRowsToShow: 5,
|
initialViewRowsToShow: 5,
|
||||||
|
|
@ -97,7 +98,9 @@ export default {
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.setCalendarData();
|
this.setCalendarData();
|
||||||
// this.trackScrollTop();
|
// this.$nextTick(() => {
|
||||||
|
this.trackScrollTop();
|
||||||
|
// });
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
|
@ -111,6 +114,9 @@ export default {
|
||||||
modelValue: {
|
modelValue: {
|
||||||
type: Object,
|
type: Object,
|
||||||
},
|
},
|
||||||
|
// selectableDates: {
|
||||||
|
// type: Array,
|
||||||
|
// },
|
||||||
todayOverrideDateString: {
|
todayOverrideDateString: {
|
||||||
// only used for unit tests to override today's date
|
// only used for unit tests to override today's date
|
||||||
type: String,
|
type: String,
|
||||||
|
|
@ -157,12 +163,250 @@ export default {
|
||||||
// this.setCalendarData();
|
// this.setCalendarData();
|
||||||
// }
|
// }
|
||||||
// // this.months = this.calendarData;
|
// // 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() {
|
goForward() {
|
||||||
|
const fieldset = document.querySelector("#date-picker-fieldset");
|
||||||
|
|
||||||
if (this.isInitialView) {
|
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
|
this.isInitialView = false; // 1st click removes hidden styling
|
||||||
|
|
||||||
} else {
|
} 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() {
|
async setCalendarData() {
|
||||||
|
|
@ -221,6 +465,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
// TODO ? I THINK THIS IS NEVER USED NOW
|
||||||
// used only when adding an additional month
|
// used only when adding an additional month
|
||||||
|
|
||||||
if (direction === "future") {
|
if (direction === "future") {
|
||||||
|
|
@ -250,29 +495,32 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
const todayDayIndex = this.todayDate.getDay(); // get day of week index of today (0-6)
|
const todayDayIndex = this.todayDate.getDay(); // get day of week index of today (0-6)
|
||||||
currentWeekStartDateNum =
|
currentWeekStartDateNum = todayDayIndex > todayDateNum ? 1 : todayDateNum - todayDayIndex; // FUTURE
|
||||||
todayDayIndex > todayDateNum ? 1 : todayDateNum - todayDayIndex; // FUTURE
|
|
||||||
const monthEndDate = new Date(yearNum, monthIndex + 1, 0); // BOTH
|
const monthEndDate = new Date(yearNum, monthIndex + 1, 0); // BOTH
|
||||||
let monthEndDateNum = monthEndDate.getDate(); // BOTH
|
let monthEndDateNum = monthEndDate.getDate(); // BOTH
|
||||||
currentWeekEndDateNum = todayDateNum + 6 - todayDayIndex; // PAST, aka Sat. (ok if it's larger than the month end?)
|
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
|
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 monthStartDate = new Date(yearNum, monthIndex, monthStartDateNum); // BOTH
|
||||||
const startDateDayIndex = monthStartDate.getDay(); // FUTURE
|
const startDateDayIndex = monthStartDate.getDay(); // FUTURE
|
||||||
const endDateDayIndex = monthEndDate.getDay(); // PAST
|
const endDateDayIndex = monthEndDate.getDay(); // PAST
|
||||||
|
|
||||||
if (typeof offset !== "undefined") {
|
if (typeof offset !== "undefined") {
|
||||||
if (offset === 0 && direction === "future")
|
if (offset === 0 && direction === "future") {
|
||||||
firstMonthDayTally = monthStartDateNum - startDateDayIndex; // FUTURE (starts low, counts up)
|
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)
|
firstMonthDayTally = currentWeekEndDateNum; // PAST (starts high, counts down)
|
||||||
|
monthClass = monthClass + " current-month";
|
||||||
|
}
|
||||||
|
|
||||||
while (
|
while (
|
||||||
direction === "future" &&
|
direction === "future" &&
|
||||||
offset === 0 &&
|
offset === 0 &&
|
||||||
firstMonthDayTally < monthEndDateNum
|
firstMonthDayTally <= monthEndDateNum
|
||||||
) {
|
) {
|
||||||
// FUTURE
|
// FUTURE
|
||||||
firstMonthDayTally = firstMonthDayTally + 7;
|
firstMonthDayTally = firstMonthDayTally + 7;
|
||||||
|
|
@ -282,7 +530,7 @@ export default {
|
||||||
while (
|
while (
|
||||||
direction === "past" &&
|
direction === "past" &&
|
||||||
offset === 0 &&
|
offset === 0 &&
|
||||||
firstMonthDayTally > monthStartDateNum
|
firstMonthDayTally >= monthStartDateNum
|
||||||
) {
|
) {
|
||||||
// PAST
|
// PAST
|
||||||
firstMonthDayTally = firstMonthDayTally - 7;
|
firstMonthDayTally = firstMonthDayTally - 7;
|
||||||
|
|
@ -295,7 +543,7 @@ export default {
|
||||||
initialViewStartDate = monthEndDateNum - endDateDayIndex; // PAST
|
initialViewStartDate = monthEndDateNum - endDateDayIndex; // PAST
|
||||||
this.initialViewRowsTally++;
|
this.initialViewRowsTally++;
|
||||||
} else {
|
} else {
|
||||||
monthClass = monthClass + " month-hidden";
|
monthClass = monthClass + " initial-month-hidden";
|
||||||
}
|
}
|
||||||
|
|
||||||
while (this.initialViewRowsTally < this.initialViewRowsToShow) {
|
while (this.initialViewRowsTally < this.initialViewRowsToShow) {
|
||||||
|
|
@ -304,7 +552,11 @@ export default {
|
||||||
this.initialViewRowsTally++;
|
this.initialViewRowsTally++;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
if (Math.abs(offset) > 1) {
|
||||||
|
monthClass = monthClass + " month-hidden";
|
||||||
|
}
|
||||||
|
|
||||||
|
} else { // TODO REMOVE THIS BLOCK? NO LONGER NEEDED?
|
||||||
monthClass = monthClass + " new-month";
|
monthClass = monthClass + " new-month";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -377,63 +629,47 @@ export default {
|
||||||
const monthToAdd = {
|
const monthToAdd = {
|
||||||
monthLabel: monthsOfYear[monthIndex],
|
monthLabel: monthsOfYear[monthIndex],
|
||||||
monthIndex: monthIndex,
|
monthIndex: monthIndex,
|
||||||
|
monthString: monthsOfYear[monthIndex] + "-" + yearNum?.toString(),
|
||||||
yearNum: yearNum,
|
yearNum: yearNum,
|
||||||
dates: datesArray,
|
dates: datesArray,
|
||||||
startDateDayIndex: startDateDayIndex,
|
startDateDayIndex: startDateDayIndex,
|
||||||
monthClass: monthClass,
|
monthClass: monthClass,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// TODO: CHANGE NAME OF MONTH AND DATE's "___String" to "_____Id"; it's better
|
||||||
|
|
||||||
// debugger; // eslint-disable-line no-debugger
|
// 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")
|
// 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;
|
return monthToAdd;
|
||||||
},
|
},
|
||||||
async addMonthData() {
|
async showAnotherMonth() {
|
||||||
this.isAddingNewMonth = true; // TODO - DO I NEED THIS ANYMIRE?
|
let monthToShow;
|
||||||
|
|
||||||
const monthToAdd = await this.getMonthData();
|
|
||||||
|
|
||||||
this.newestMonthId = monthToAdd.monthLabel + "-" + monthToAdd.yearNum?.toString();
|
|
||||||
// console.log("newestMonthId: ", this.newestMonthId)
|
|
||||||
|
|
||||||
if (this.calendarViewDirection === "future") {
|
if (this.calendarViewDirection === "future") {
|
||||||
let month = this.months[this.months.length - 1];
|
monthToShow = this.months.find(month => month.monthClass.includes('month-hidden'));
|
||||||
month.monthClass = month.monthClass.replace("new-month", "");
|
|
||||||
this.months.push(monthToAdd);
|
|
||||||
}
|
}
|
||||||
if (this.calendarViewDirection === "past") {
|
if (this.calendarViewDirection === "past") {
|
||||||
let month = this.months[0];
|
// TODO: UPDATE THIS WITH CORRECT PAST LOOKING LOGIC
|
||||||
month.monthClass = month.monthClass.replace("new-month", "");
|
monthToShow = this.months.find(month => month.monthClass.includes('month-hidden'));
|
||||||
this.months.unshift(monthToAdd);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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
|
// 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) {
|
isSelectableDate(thisDate) {
|
||||||
const testForDate = (dateInArray) => {
|
const testForDate = (dateInArray) => {
|
||||||
|
|
@ -483,28 +719,94 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<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 {
|
.date-picker {
|
||||||
|
// == ATTEMPT 3
|
||||||
|
overflow: hidden;
|
||||||
|
max-height: 62vh; // max-height: 60vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
// == ATTEMPT 2
|
||||||
flex-direction: column;
|
// max-height: 60vh; // TBD
|
||||||
height: 98vh;
|
// 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 {
|
fieldset {
|
||||||
height: 600px;
|
// == ATTEMPT 3
|
||||||
overflow: auto;
|
//overflow-y: auto;
|
||||||
position: relative;
|
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 {
|
.calendar-grid-container {
|
||||||
margin: 0 auto 2rem auto;
|
margin: 0 auto 2rem auto;
|
||||||
max-width: 414px;
|
max-width: 414px;
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: all ease 1s;
|
// transition: all ease 1s;
|
||||||
|
transition: height ease 2s, opacity ease 2s;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(7, 1fr);
|
grid-template-columns: repeat(7, 1fr);
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 .75rem;
|
padding: 0 0.75rem;
|
||||||
|
|
||||||
|
// background: url("https://i.imgur.com/ncwmc2l.png") repeat;
|
||||||
|
|
||||||
.grid-item {
|
.grid-item {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -570,6 +872,7 @@ export default {
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: ease all 250ms;
|
transition: ease all 250ms;
|
||||||
|
// transition: ease all 1250ms;
|
||||||
|
|
||||||
input[type="radio"] {
|
input[type="radio"] {
|
||||||
position: absolute; //override bootstrap
|
position: absolute; //override bootstrap
|
||||||
|
|
@ -702,12 +1005,13 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.initial-view {
|
&.initial-view {
|
||||||
&.month-hidden {
|
&.initial-month-hidden {
|
||||||
display: none;
|
visibility: hidden;
|
||||||
|
max-height: 0;
|
||||||
}
|
}
|
||||||
.day-hidden {
|
.day-hidden {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
height: 0;
|
// height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -715,15 +1019,25 @@ export default {
|
||||||
}
|
}
|
||||||
&.is-adding-new-month {
|
&.is-adding-new-month {
|
||||||
&.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 {
|
.btn-link {
|
||||||
// font-weight: 500;
|
font-weight: 500;
|
||||||
// text-underline-offset: 4px;
|
text-underline-offset: 4px;
|
||||||
// }
|
box-shadow: none !important; // TODO: FIX THIS
|
||||||
|
}
|
||||||
|
|
||||||
.past {
|
.past {
|
||||||
.calendar-grid-container {
|
.calendar-grid-container {
|
||||||
|
|
@ -782,18 +1096,26 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.new-month {
|
.new-month {
|
||||||
max-height: 550px;
|
// max-height: 550px;
|
||||||
|
opacity: 1;
|
||||||
|
// background: lime !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.btn-link {
|
.btn-link {
|
||||||
display: flex;
|
// == ATTEMPT 3
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
height: 3rem;
|
||||||
|
|
||||||
|
// display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
bottom: 2rem;
|
// bottom: 2rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-underline-offset: 4px;
|
text-underline-offset: 4px;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -9,18 +9,18 @@ import { headerKeys } from "@/constants/header-keys";
|
||||||
export default {
|
export default {
|
||||||
callHttpClient({ method, endpoint, payload, logApiCall = true, isFormData = false }) {
|
callHttpClient({ method, endpoint, payload, logApiCall = true, isFormData = false }) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
|
let cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
|
||||||
let payloadAndAnalyticsData = {};
|
const payloadAndAnalyticsData = Object.assign({}, payload, { AppName: "FixMyGlass" });
|
||||||
if (isFormData) {
|
|
||||||
payloadAndAnalyticsData = payload;
|
|
||||||
payloadAndAnalyticsData.append("AppName", "FixMyGlass");
|
|
||||||
} else {
|
|
||||||
Object.assign(payloadAndAnalyticsData, payload, { AppName: "FixMyGlass" });
|
|
||||||
}
|
|
||||||
const headers = {
|
const headers = {
|
||||||
[headerKeys.EXPERIMENT]: JSON.stringify(store.getters.experimentSettings),
|
[headerKeys.EXPERIMENT]: JSON.stringify(store.getters.experimentSettings),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (endpoint.toLowerCase().includes("/analytics/")) {
|
||||||
|
cfDistroUrl = "";
|
||||||
|
endpoint = "";
|
||||||
|
method = "GET";
|
||||||
|
}
|
||||||
|
|
||||||
axios({
|
axios({
|
||||||
method: method,
|
method: method,
|
||||||
url: cfDistroUrl + endpoint,
|
url: cfDistroUrl + endpoint,
|
||||||
|
|
|
||||||
|
|
@ -65,16 +65,64 @@ export default {
|
||||||
return {
|
return {
|
||||||
selectedDate: null,
|
selectedDate: null,
|
||||||
mockSelectableDatesData: [
|
mockSelectableDatesData: [
|
||||||
{ dateString: "2023-04-28", year: 2023, month: 4, date: 28 },
|
{ dateString: "2023-04-28" },
|
||||||
{ dateString: "2023-05-04", year: 2023, month: 5, date: 4 },
|
|
||||||
{ dateString: "2023-05-05", year: 2023, month: 5, date: 5 },
|
{ dateString: "2023-05-04" },
|
||||||
{ dateString: "2023-05-14", year: 2023, month: 5, date: 14 },
|
{ dateString: "2023-05-09" },
|
||||||
{ dateString: "2023-05-21", year: 2023, month: 5, date: 21 },
|
{ dateString: "2023-05-11" },
|
||||||
{ dateString: "2023-05-23", year: 2023, month: 5, date: 23 },
|
{ dateString: "2023-05-17" },
|
||||||
{ dateString: "2023-05-25", year: 2023, month: 5, date: 25 },
|
{ dateString: "2023-05-18" },
|
||||||
{ dateString: "2023-06-11", year: 2023, month: 6, date: 11 },
|
{ dateString: "2023-05-19" },
|
||||||
{ dateString: "2023-06-13", year: 2023, month: 6, date: 13 },
|
{ dateString: "2023-05-23" },
|
||||||
{ dateString: "2023-06-17", year: 2023, month: 6, date: 17 },
|
{ 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: [],
|
selectableDatesData: [],
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue