From df11f653f253f2e0a99b06ed1651177243a030b9 Mon Sep 17 00:00:00 2001 From: John Cardinal Date: Tue, 21 Sep 2021 21:52:24 +0000 Subject: [PATCH] For one (likely brief) shining moment the schedule events behave as they should --- ayanova/src/views/home-schedule.vue | 123 +++++++++++++++++++++------- 1 file changed, 94 insertions(+), 29 deletions(-) diff --git a/ayanova/src/views/home-schedule.vue b/ayanova/src/views/home-schedule.vue index f50cf7c1..ff4d1820 100644 --- a/ayanova/src/views/home-schedule.vue +++ b/ayanova/src/views/home-schedule.vue @@ -212,13 +212,15 @@ >{{ $ay.t("ReviewCompletedDate") }}: {{ - $ay.dt(evInfo.reviewCompletedDate) + $ay.dt(evInfo.completedDate) }}
- {{ $ay.t("ReviewNotes") }}: + {{ $ay.t("ReviewCompletionNotes") }}: - {{ evInfo.reviewNotes }}
@@ -377,9 +379,29 @@ TODO NEXT: Needs a refresh button at top Issue - needs a fast click to open an item for more info, related to 100ms?? - if too slow a click it ignores it + Dragging vs info SUCKS and bug riddled!!! + todo: Before gutting, see if can use the pixel move trick instead of the timer trick, that seems more reliable and portable + + Google calendar handles it a bit differently: + click and hold until see fourway cursor and event dims but stays where it was while a new non dim copy is draggable and on drop the old dimmed event vanishes and the new bold one is there + This is what I should replicate, so a long press to move and a short click to open + HOWEVER + It *also* allows immediate drag, so it must be keying in on both the timer and the pixel move trick. + ugh + + todo: make a copy of this schedule form, gut it entirely for all events and start again from scratch, it's ugly dirty and nonsensical in places + instead of click event handled for opening item it's mouse up for all ops + mouseup when hasn't entered dragging mode yet opens more info (and cancels dragging mode countdown) + mouseup in dragging mode makes the move + mouseup always cancels dragging mode + mousedown starts a timer of about 500ms, if it times out still moused down then it enters drag mode and UI changes + if it doesn't reach timeout on mouse up then stops drag mode countdown + mousemove in drag mode moves item, if not yet in drag mode the mouse doesn't move + + todo: red current time line is cool, see if can implement (also follows google calendar ui) + + todo: ### find all trans keys and make sure they are fetched in initform ### TESTING: drag/extend in all views working? @@ -403,7 +425,9 @@ TODO NEXT: // const FORM_CUSTOM_TEMPLATE_KEY = "home-schedule"; const FORM_KEY = "home-schedule"; -const CLICK_DETECT_TIMEOUT = 200; +const CLICK_DETECT_TIMEOUT = 100; +let mouseX = 0; +let mouseY = 0; export default { async created() { let vm = this; @@ -441,6 +465,9 @@ export default { extendOriginal: null, dragged: false, dragTimeout: null, + dragStartX: null, + dragStartY: null, + draggingEvent: false, formState: { ready: false, dirty: false, @@ -517,24 +544,7 @@ export default { this.events.splice(this.events.length - 1); this.newItemDialog = false; }, - startDrag({ event }) { - if (event) { - if (event.editable) { - //My work around to disambiguate dragging and clicking - clearTimeout(this.dragTimeout); - this.dragged = false; - this.dragTimeout = setTimeout(() => { - this.dragged = true; - }, CLICK_DETECT_TIMEOUT); // Min delay to be regarded as extend instead of click, also affects click time to display more info, too short needs faster click - this.dragEvent = event; - this.dragTime = null; - this.extendOriginal = null; - } else { - this.dragged = false; - } - } - }, extendBottom(event) { if (event.editable) { //My work around to disambiguate extending and clicking @@ -544,10 +554,15 @@ export default { this.dragged = true; }, CLICK_DETECT_TIMEOUT); // Min delay to be regarded as extend instead of click, also affects click time to display more info, too short needs faster click - //this.dragEvent = event; + //console.log("extendBottom setting extendEvent"); this.extendEvent = event; this.createStart = event.start; this.extendOriginal = event.end; + } else { + //probably don't need this, was diagnosing new on click on locked items + ////console.log("extendBottom not editable"); + // // this.dragged = false; + // // this.extendEvent = null; } }, async endDragExtend() { @@ -556,16 +571,22 @@ export default { //on create then dragged is set to false and createStart is only value set, dragEvent is null and extendEvent is null //Handle the event, could be one of three things: changing an event start time, changing an event length or creating a new event - + ////console.log("end drag extend"); if (this.extendEvent && this.extendEvent.type == 0) { + //console.log("end drag extend NEW"); //NEW, prompt for deets and create or if cancelled then just remove this faux event from events list (it will be the last one in the array) this.newItemDialog = true; } else { + ////console.log("end drag extend MODIFY??"); if (!this.dragged) { //we're here due to mouse up but it's not a drag or an extend so it's a More Info mouse up click so bail out now + //console.log("end drag extend NOPE NOT MODIFY, MUST BE MOREINFO", { + // dragEvent: this.dragEvent + // }); + this.dragEvent = null; //this needs to be set or it will keep dragging off an editable event even as the moreinfo dialog show return; } - + //console.log("end drag extend YES MODIFY"); //MODIFY existing event, drag or extend if (this.dragEvent || this.extendEvent) { let param = { type: null, id: null, start: null, end: null }; @@ -613,6 +634,7 @@ export default { } this.dragTime = null; this.dragEvent = null; + //console.log("endDragExtend setting extendEvent to null"); this.extendEvent = null; this.createStart = null; this.extendOriginal = null; @@ -620,6 +642,7 @@ export default { cancelDrag() { if (this.extendEvent) { if (this.extendOriginal) { + //console.log("cancelDrag setting extendEvent"); this.extendEvent.end = this.extendOriginal; } else { const i = this.events.indexOf(this.extendEvent); @@ -628,20 +651,54 @@ export default { } } } - + //console.log("cancelDrag setting extendEvent to null"); this.extendEvent = null; this.createStart = null; this.dragTime = null; this.dragEvent = null; }, + startDrag({ event }) { + //# mouse down on an event triggers this call + if (event) { + if (event.editable) { + //console.log("startDrag editable event: ", event); + //testtest + this.draggingEvent = true; + //My work around to disambiguate dragging and clicking + clearTimeout(this.dragTimeout); + this.dragged = false; + this.dragTimeout = setTimeout(() => { + this.dragged = true; + }, CLICK_DETECT_TIMEOUT); // Min delay to be regarded as extend instead of click, also affects click time to display more info, too short needs faster click + + this.dragEvent = event; + this.dragTime = null; + this.extendOriginal = null; + } else { + //console.log("startDrag not editable"); + this.dragged = false; + this.dragEvent = event; + // this.extendEvent = null; + this.dragTime = null; + } + } + }, mouseMoveDayView(tms) { //no event being dragged or exgtended? if (!this.dragEvent && !this.extendEvent) { return; } + //console.log("mouseMoveDayView has event, processing..."); const mouse = this.toTime(tms); if (this.dragEvent && this.dragTime !== null) { + //console.log("mousemovedayview dragging"); + + ////console.log("mouseMoveDAyView::dragging path ", { + // dragged: this.dragged, + // dragEvent: this.dragEvent, + // dragTime: this.dragTime + // }); //# DRAGGING PATH const start = this.dragEvent.start; const end = this.dragEvent.end; @@ -652,6 +709,7 @@ export default { this.dragEvent.start = newStart; this.dragEvent.end = newEnd; } else if (this.extendEvent && this.createStart !== null) { + //console.log("mouseMoveDAyView::extending path ", this.extendEvent); //# EXTENDING PATH const mouseRounded = this.roundTime(mouse, false); const min = Math.min(mouseRounded, this.createStart); @@ -685,11 +743,18 @@ export default { if (this.dragEvent && this.dragTime === null) { //# DAY VIEW *DRAG* EXISTING START EVENT (not extend) - const start = this.dragEvent.start; - this.dragTime = mouse - start; + //(also called on simple click to view schedule more info) + if (this.dragEvent.editable) { + //console.log("startTime calculating this.dragTime"); + const start = this.dragEvent.start; + this.dragTime = mouse - start; + } else { + //console.log("startTime AVOIDED calculating this.dragTime"); + } } else { //# DAY VIEW CREATE START EVENT this.createStart = this.roundTime(mouse); + //console.log("startTime setting extendEvent"); this.extendEvent = { name: "-", color: this.$store.state.darkMode ? "white" : "black",