@colijnit/corecomponents_v12 255.1.9 → 255.1.11

package/fesm2015/colijnit-corecomponents_v12.js

@@ -13687,48 +13687,61 @@ ColorSequenceService.decorators = [
 ];
 
 class HourSchedulingComponent {
-    constructor(cdRef, _datepipe) {
+    constructor(cdRef, datePipe) {
         this.cdRef = cdRef;
-        this._datepipe = _datepipe;
+        this.datePipe = datePipe;
         this.showClass = true;
-        this.customTemplateUsed = false;
-        this.hours = [];
+        this.hourLabels = [];
         this.scheduledObjects = {};
+        this.activeHour = null;
+        this.activeHalfHour = null;
         this.draggedObject = null;
+        this.customTemplateUsed = false;
+        this.timeChangeEvent = new EventEmitter();
+        this.newObjectPlanEvent = new EventEmitter();
+        document.addEventListener('click', this.onDocumentClick.bind(this));
     }
     ngOnInit() {
-        if (!this.childProp) {
-            this.startTime = parseInt(this._datepipe.transform(new Date(this.schedule[this.startTimeProp]).toISOString(), 'H:mm'));
-            this.endTime = parseInt(this._datepipe.transform(new Date(this.schedule[this.endTimeProp]).toISOString(), 'H:mm'));
-        }
-        else {
-            this.startTime = parseInt(this._datepipe.transform(new Date(this.schedule[this.childProp][this.startTimeProp]).toISOString(), 'H:mm'));
-            this.endTime = parseInt(this._datepipe.transform(new Date(this.schedule[this.childProp][this.endTimeProp]).toISOString(), 'H:mm'));
-        }
         this.generateTimeBlocks();
+        this.generateScheduledObjects();
+    }
+    ngOnDestroy() {
+        document.removeEventListener('click', this.onDocumentClick.bind(this));
     }
     generateTimeBlocks() {
+        let startUnix = !this.childProp ? this.dateToUnixEpoch(new Date(this.schedule[this.startTimeProp])) : this.dateToUnixEpoch(new Date(this.schedule[this.childProp][this.startTimeProp]));
+        let endUnix = !this.childProp ? this.dateToUnixEpoch(new Date(this.schedule[this.endTimeProp])) : this.dateToUnixEpoch(new Date(this.schedule[this.childProp][this.endTimeProp]));
+        let interval = 60 * 60;
+        for (let hourCount = startUnix; hourCount <= endUnix; hourCount += interval) {
+            let hour = new Date(hourCount * 1000);
+            let hourString = `${hour.getHours()}:${hour.getMinutes() === 0 ? '00' : hour.getMinutes()}`;
+            this.hourLabels.push(hourString);
+        }
+    }
+    generateScheduledObjects() {
         const objectsList = this.schedule[this.objectsProp];
-        for (let hour = this.startTime; hour <= this.endTime; hour++) {
-            this.hours.push(this.formatHour(hour));
-            this.scheduledObjects[this.formatHour(hour)] = this._getObjectsForHour(hour, objectsList);
+        let startUnix = !this.childProp ? this.dateToUnixEpoch(new Date(this.schedule[this.startTimeProp])) : this.dateToUnixEpoch(new Date(this.schedule[this.childProp][this.startTimeProp]));
+        let endUnix = !this.childProp ? this.dateToUnixEpoch(new Date(this.schedule[this.endTimeProp])) : this.dateToUnixEpoch(new Date(this.schedule[this.childProp][this.endTimeProp]));
+        let interval = 30 * 60;
+        for (let hourCount = startUnix; hourCount <= endUnix; hourCount += interval) {
+            let hour = new Date(hourCount * 1000);
+            let hourString = `${hour.getHours()}:${hour.getMinutes() === 0 ? '00' : hour.getMinutes()}`;
+            this.scheduledObjects[hourString] = this._getObjectsForHourAndMinutes(hour.getHours(), hour.getMinutes(), objectsList);
         }
     }
-    _getObjectsForHour(hour, objectsList) {
+    _getObjectsForHourAndMinutes(hour, minutes, objectsList) {
         const objectsForHour = [];
         objectsList.forEach((obj) => {
-            if (this.convertToHourNotation(obj[this.startTimeProp]) === hour) {
+            let split = this.convertToHourNotation(obj[this.startTimeProp]).split(':');
+            if (parseInt(split[0]) === hour && parseInt(split[1]) === minutes) {
                 objectsForHour.push(Object.assign({}, obj));
             }
         });
         return objectsForHour;
     }
-    formatHour(hour) {
-        return `${hour}:00`;
-    }
     onDragStart(event, obj) {
         const currentTarget = event.currentTarget;
-        const currentHourSpan = currentTarget.parentElement.parentElement.querySelector('.hour-label span');
+        const currentHourSpan = currentTarget.parentElement.parentElement.querySelector('.hidden-hour-label');
         const currentHour = currentHourSpan.textContent;
         this.draggedObject = obj;
         event.dataTransfer.setData('text', JSON.stringify({ obj: this.draggedObject, currentHour }));
@@ -13738,81 +13751,179 @@ class HourSchedulingComponent {
     }
     onDragOver(event) {
         event.preventDefault();
+        const currentTarget = event.currentTarget;
+        currentTarget.classList.add('drag-over');
+    }
+    onDragLeave(event) {
+        const currentTarget = event.currentTarget;
+        currentTarget.classList.remove('drag-over'); // Remove 'drag-over' class
     }
     onDrop(event, hour) {
         event.preventDefault();
         event.stopPropagation();
-        const data = JSON.parse(event.dataTransfer.getData('text'));
-        if (!data || !data.obj) {
+        const currentTarget = event.currentTarget;
+        currentTarget.classList.remove('drag-over');
+        let parsed = this.tryParseJSONObject(event.dataTransfer.getData("text"));
+        if (!parsed) {
+            this.newObjectPlanEvent.emit({ currentHour: hour, data: parsed.toString() });
             return;
         }
-        const newStartHour = parseInt(hour.split(':')[0], 10);
-        const newEndHour = newStartHour + 1;
-        const originalStartHour = this.convertToHourNotation(data.obj[this.startTimeProp]);
+        const splitHour = hour.split(':');
+        const newEndMinutes = splitHour[1] === "00" ? 30 : 0;
+        const newEndHour = splitHour[1] === "30" ? (parseInt(splitHour[0]) + 1) : parseInt(splitHour[0]);
+        const originalStartHour = this.convertToHourNotation(parsed.obj[this.startTimeProp]);
         // Get the unique identifier value from the object using the `idProp`
-        const objId = data.obj[this.idProp];
+        const objId = parsed.obj[this.idProp];
         // Ensure we create a new object to avoid mutation issues
-        const updatedObject = Object.assign(Object.assign({}, data.obj), { start: newStartHour, end: newEndHour });
-        const updatedObject2 = Object.assign(Object.assign({}, data.obj), { [this.startTimeProp]: this.createDate(newStartHour), [this.endTimeProp]: this.createDate(newEndHour) });
+        const updatedObject = Object.assign(Object.assign({}, parsed.obj), { [this.startTimeProp]: this.createDate(parseInt(splitHour[0]), parseInt(splitHour[1])), [this.endTimeProp]: this.createDate(newEndHour, newEndMinutes) });
         // Remove the object from its old hour block using its unique id
-        const originalHourBlock = this.formatHour(originalStartHour);
+        const originalHourBlock = this.formatHour(parseInt(originalStartHour.split(':')[0]), parseInt(originalStartHour.split(':')[1]));
         this.scheduledObjects[originalHourBlock] = this.scheduledObjects[originalHourBlock].filter(o => o[this.idProp] !== objId);
         // Add the object to the new hour block
-        const newHourBlock = this.formatHour(newStartHour);
-        if (!this.scheduledObjects[newHourBlock]) {
-            this.scheduledObjects[newHourBlock] = [];
+        if (!this.scheduledObjects[hour]) {
+            this.scheduledObjects[hour] = [];
         }
-        this.scheduledObjects[newHourBlock].push(updatedObject2);
+        this.scheduledObjects[hour].push(updatedObject);
         // Clear the dragged object
         this.draggedObject = null;
+        this.timeChangeEvent.emit(updatedObject);
         // Trigger change detection to update the view
         this.cdRef.detectChanges();
     }
     convertToHourNotation(date) {
-        return parseInt(this._datepipe.transform(new Date(date).toISOString(), 'H:mm'));
+        return this.datePipe.transform(new Date(date).toISOString(), 'HH:mm');
     }
-    createDate(hours) {
+    createDate(hours, minutes) {
         let date = new Date();
         date.setHours(hours);
-        date.setMinutes(0, 0, 0);
+        date.setMinutes(minutes ? minutes : 0);
         return date;
     }
+    dateToUnixEpoch(date) {
+        return Math.floor(date.getTime()) / 1000;
+    }
+    formatHour(hour, minutes) {
+        return `${hour}:${minutes ? minutes : '00'}`;
+    }
+    addMinutes(hour) {
+        let split = hour.split(":");
+        split[1] = "30";
+        return split.join(':');
+    }
+    onDocumentClick(event) {
+        const targetElement = event.target;
+        // Clear active state when clicking outside
+        if (!targetElement.closest('.object-display')) {
+            this.activeHalfHour = null;
+            this.cdRef.detectChanges();
+        }
+    }
+    onObjectDisplayClick(hour, half) {
+        var _a, _b;
+        const halfHourIdentifier = `${hour}-${half}`;
+        if (this.activeHalfHour === halfHourIdentifier) {
+            // Deactivate if clicked again
+            this.activeHalfHour = null;
+        }
+        else if (((_a = this.scheduledObjects[hour]) === null || _a === void 0 ? void 0 : _a.length) > 0 || ((_b = this.scheduledObjects[this.addMinutes(hour)]) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            // Activate the half-hour if there are objects
+            this.activeHalfHour = halfHourIdentifier;
+        }
+    }
+    tryParseJSONObject(jsonString) {
+        try {
+            let o = JSON.parse(jsonString);
+            // Handle non-exception-throwing cases:
+            // Neither JSON.parse(false) or JSON.parse(1234) throw errors, hence the type-checking,
+            // but... JSON.parse(null) returns null, and typeof null === "object",
+            // so we must check for that, too. Thankfully, null is falsey, so this suffices:
+            if (o && typeof o === "object") {
+                return o;
+            }
+        }
+        catch (e) {
+        }
+        return false;
+    }
+    ;
 }
 HourSchedulingComponent.decorators = [
     { type: Component, args: [{
                 selector: 'co-hour-scheduling',
                 template: `
-    <div class="time-block" *ngFor="let hour of hours">
+    <div class="time-block" *ngFor="let hour of hourLabels">
       <div class="hour-label"><span [textContent]="hour"></span></div>
-      <div
-        class="object-display"
-        (dragover)="onDragOver($event)"
-        (drop)="onDrop($event, hour)"
-      >
-        <ng-container *ngIf="!customTemplateUsed">
-          <ng-container *ngIf="scheduledObjects[hour]">
-            <div
-              *ngFor="let obj of scheduledObjects[hour]"
-              class="scheduled-object"
-              [draggable]="true"
-              (dragstart)="onDragStart($event, obj)"
-            >
-              <span class="title" [textContent]="obj.title"></span>
-              <span class="sub-title" [textContent]="obj.subTitle"></span>
-            </div>
+      <div class="object-display">
+        <div class="first-half-hour object-half"
+             [ngClass]="{'has-objects': scheduledObjects[hour]?.length > 0, 'active': activeHalfHour === hour + '-firstHalf'}"
+             (dragover)="onDragOver($event)"
+             (dragleave)="onDragLeave($event)"
+             (click)="onObjectDisplayClick(hour, 'firstHalf')"
+             (drop)="onDrop($event, hour)">
+          <ng-container *ngIf="!customTemplateUsed">
+            <ng-container *ngIf="scheduledObjects[hour]">
+              <span class="hidden-hour-label" [hidden]="true" [textContent]="hour"></span>
+              <div
+                *ngFor="let obj of scheduledObjects[hour]"
+                class="scheduled-object"
+                [draggable]="true"
+                (dragstart)="onDragStart($event, obj)"
+              >
+                <span class="hidden-hour-label" [hidden]="true" [textContent]="addMinutes(hour)"></span>
+                <span class="title" [textContent]="obj.title"></span>
+                <span class="sub-title" [textContent]="obj.subTitle"></span>
+              </div>
+            </ng-container>
           </ng-container>
-        </ng-container>
 
-        <ng-container *ngIf="customTemplateUsed">
-          <ng-template
-            [ngTemplateOutlet]="customTemplate"
-            [ngTemplateOutletContext]="{
+          <ng-container *ngIf="customTemplateUsed">
+            <ng-template
+              [ngTemplateOutlet]="customTemplate"
+              [ngTemplateOutletContext]="{
               hour: hour,
+              hiddenHour: hour,
               objects: scheduledObjects[hour]
             }"
-          >
-          </ng-template>
-        </ng-container>
+            >
+            </ng-template>
+          </ng-container>
+        </div>
+
+        <div class="second-half-hour object-half"
+             [ngClass]="{'has-objects': scheduledObjects[addMinutes(hour)]?.length > 0, 'active': activeHalfHour === hour + '-secondHalf'}"
+             (dragover)="onDragOver($event)"
+             (dragleave)="onDragLeave($event)"
+             (click)="onObjectDisplayClick(hour, 'secondHalf')"
+             (drop)="onDrop($event, addMinutes(hour))">
+          <ng-container *ngIf="!customTemplateUsed">
+            <ng-container *ngIf="scheduledObjects[addMinutes(hour)]">
+              <div
+                *ngFor="let obj of scheduledObjects[addMinutes(hour)]"
+                class="scheduled-object"
+                [draggable]="true"
+                (dragstart)="onDragStart($event, obj)"
+              >
+                <span class="title" [textContent]="obj.title"></span>
+                <span class="sub-title" [textContent]="obj.subTitle"></span>
+                <span class="hidden-hour-label" [hidden]="true" [textContent]="addMinutes(hour)"></span>
+              </div>
+            </ng-container>
+          </ng-container>
+
+          <ng-container *ngIf="customTemplateUsed">
+            <ng-template
+              [ngTemplateOutlet]="customTemplate"
+              [ngTemplateOutletContext]="{
+              hour: hour,
+              hiddenHour: addMinutes(hour),
+              objects: scheduledObjects[addMinutes(hour)]
+            }"
+            >
+            </ng-template>
+          </ng-container>
+        </div>
+
+
       </div>
     </div>
   `,
@@ -13832,6 +13943,8 @@ HourSchedulingComponent.propDecorators = {
     customTemplate: [{ type: Input }],
     customTemplateUsed: [{ type: Input }],
     idProp: [{ type: Input }],
+    timeChangeEvent: [{ type: Output }],
+    newObjectPlanEvent: [{ type: Output }],
     generateTimeBlocks: [{ type: HostBinding, args: ['class.co-hour-scheduling',] }]
 };