ayanova/src/views/home-schedule.vue

@@ -69,13 +69,25 @@
         @click:more="viewDay"
         @click:date="viewDay"
         @change="fetchEvents"
+        @mousedown:event="startDrag"
+        @mousedown:time="startTime"
+        @mousemove:time="mouseMove"
+        @mouseup:time="endDrag"
+        @mouseleave.native="cancelDrag"
         :event-more-text="$ay.t('More')"
       >
-        <template v-slot:event="{ event, eventSummary }">
+        <template v-slot:event="{ event, timed, eventSummary }">
-          <v-icon small :color="event.textColor" class="mr-1">{{
+          <div class="v-event-draggable">
-            iconForEvent(event.type)
+            <v-icon small :color="event.textColor" class="mr-1">{{
-          }}</v-icon>
+              iconForEvent(event.type)
-          <span :class="event.textColor + '--text'" v-html="eventSummary()" />
+            }}</v-icon>
+            <span :class="event.textColor + '--text'" v-html="eventSummary()" />
+          </div>
+          <div
+            v-if="timed"
+            class="v-event-drag-bottom"
+            @mousedown.stop="extendBottom(event)"
+          ></div>
         </template>
       </v-calendar>
 
@@ -282,7 +294,7 @@ export default {
     } catch (error) {
       window.$gz.errorHandler.handleFormError(error, vm);
     } finally {
-      // console.log("Setting ready, view Type is:", vm.viewType);
+      // //console.log("Setting ready, view Type is:", vm.viewType);
       vm.formState.ready = true;
     }
   },
@@ -301,6 +313,11 @@ export default {
       selectedOpen: false,
       events: [],
       evInfo: {},
+      dragEvent: null,
+      dragStart: null,
+      createEvent: null,
+      createStart: null,
+      extendOriginal: null,
       formState: {
         ready: false,
         dirty: false,
@@ -320,6 +337,120 @@ export default {
     };
   },
   methods: {
+    startDrag({ event, timed }) {
+      //console.log("startDrag");
+      if (event && timed) {
+        //console.log("if passed true");
+        this.dragEvent = event;
+        this.dragTime = null;
+        this.extendOriginal = null;
+      }
+    },
+    startTime(tms) {
+      //console.log("startTime", tms);
+      const mouse = this.toTime(tms);
+
+      if (this.dragEvent && this.dragTime === null) {
+        const start = new Date(this.dragEvent.start).getTime();
+
+        this.dragTime = mouse - start;
+        //console.log("startTime dragTime is", this.dragTime);
+      } else {
+        this.createStart = this.roundTime(mouse);
+        console.log("startTime::STUB Create new element, popup FAB speeddial here");
+        // //console.log("startTime, create start:", this.createStart);
+        // this.createEvent = {
+        //   name: `Event #${this.events.length}`,
+        //   color: this.rndElement(this.colors),
+        //   start: this.createStart,
+        //   end: this.createStart,
+        //   timed: true
+        // };
+        // //console.log("startTime, pushing event:", this.createEvent);
+        // this.events.push(this.createEvent);
+      }
+    },
+    extendBottom(event) {
+      //console.log("extendBottom", event);
+      this.createEvent = event;
+      this.createStart = event.start;
+      this.extendOriginal = event.end;
+    },
+    mouseMove(tms) {
+      // //console.log("moustMove", tms);
+      const mouse = this.toTime(tms);
+
+      //console.log("mouseMove got time:", mouse);
+
+      if (this.dragEvent && this.dragTime !== null) {
+        //console.log("mosueMove:A");
+        const start = this.dragEvent.start;
+        const end = this.dragEvent.end;
+        const duration = end - start;
+        const newStartTime = mouse - this.dragTime;
+
+        const newStart = this.roundTime(newStartTime);
+        //console.log("mouseMove newStart...", newStart);
+        const newEnd = newStart + duration;
+
+        this.dragEvent.start = newStart;
+        this.dragEvent.end = newEnd;
+      } else if (this.createEvent && this.createStart !== null) {
+        //console.log("mosueMove:B");
+        const mouseRounded = this.roundTime(mouse, false);
+        //console.log("mouseMove mouseRounded:", mouseRounded);
+        const min = Math.min(mouseRounded, this.createStart);
+        const max = Math.max(mouseRounded, this.createStart);
+
+        this.createEvent.start = min;
+        this.createEvent.end = max;
+      }
+    },
+    endDrag() {
+      //console.log("endDrag");
+      this.dragTime = null;
+      this.dragEvent = null;
+      this.createEvent = null;
+      this.createStart = null;
+      this.extendOriginal = null;
+    },
+    cancelDrag() {
+      //console.log("cancelDrag");
+      if (this.createEvent) {
+        if (this.extendOriginal) {
+          this.createEvent.end = this.extendOriginal;
+        } else {
+          const i = this.events.indexOf(this.createEvent);
+          if (i !== -1) {
+            this.events.splice(i, 1);
+          }
+        }
+      }
+
+      this.createEvent = null;
+      this.createStart = null;
+      this.dragTime = null;
+      this.dragEvent = null;
+    },
+    roundTime(time, down = true) {
+      //console.log("roundtime...");
+      const roundTo = 15; // minutes
+      const roundDownTime = roundTo * 60 * 1000;
+
+      return down
+        ? time - (time % roundDownTime)
+        : time + (roundDownTime - (time % roundDownTime));
+    },
+    toTime(tms) {
+      //console.log("toTime tms=", tms);
+      return new Date(
+        tms.year,
+        tms.month - 1,
+        tms.day,
+        tms.hour,
+        tms.minute
+      ).getTime();
+    },
     diagInfo() {
       if (this.$refs.calendar) {
         return (
@@ -380,7 +511,7 @@ export default {
       });
     },
     async showevInfo({ nativeEvent, event }) {
-      //console.log("showevInfo:event ", JSON.stringify(event));
+      ////console.log("showevInfo:event ", JSON.stringify(event));
       let route = null;
       this.evInfo = {};
 
@@ -419,7 +550,7 @@ export default {
       //   JSON.stringify({ start: start.date, end: end.date })
       // );
 
-      // console.log(
+      // //console.log(
       //   "TZ Offset",
       //   window.$gz.locale.getTZOffset(this.timeZoneName)
       // );
@@ -620,8 +751,8 @@ function getFormSettings(vm) {
   vm.viewType = formSettings.temp.viewType;
   vm.focus = formSettings.temp.focus;
 
-  // console.log("getFormSettings, got:", JSON.stringify(formSettings));
+  // //console.log("getFormSettings, got:", JSON.stringify(formSettings));
-  // console.log("getFormSetting, vm.viewType is:", vm.viewType);
+  // //console.log("getFormSetting, vm.viewType is:", vm.viewType);
   return formSettings;
   //  formSettings.temp.page = 0;
   //     formSettings.saved.dataTable.listViewId = -1;
@@ -633,7 +764,7 @@ function saveFormSettings(vm) {
   formSettings.temp = { viewType: vm.viewType, focus: vm.focus };
 
   window.$gz.form.setFormSettings(FORM_KEY, formSettings);
-  //console.log("SaveFormSettings, saving:", JSON.stringify(formSettings));
+  ////console.log("SaveFormSettings, saving:", JSON.stringify(formSettings));
 }
 
 //////////////////////////////////////////////////////////
@@ -658,3 +789,39 @@ async function fetchTranslatedText(vm) {
   ]);
 }
 </script>
+<style scoped lang="scss">
+.v-event-draggable {
+  padding-left: 6px;
+}
+
+.v-event-timed {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.v-event-drag-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 4px;
+  height: 4px;
+  cursor: ns-resize;
+
+  &::after {
+    display: none;
+    position: absolute;
+    left: 50%;
+    height: 4px;
+    border-top: 1px solid white;
+    border-bottom: 1px solid white;
+    width: 16px;
+    margin-left: -8px;
+    opacity: 0.8;
+    content: "";
+  }
+
+  &:hover::after {
+    display: block;
+  }
+}
+</style>