[timeline] dynamicke tyzdne, non-working hours

app/src/plugins/tm@dashboard/tasks/tasks.vue

@@ -3,7 +3,7 @@
 		<A-task-filter @weekChange="getWeekData" />
 
 		<W-loadable :content="timelineData" class="w-loadable" empty-message="Nepodarilo sa nacitat data!">
-			<Z-timeline :calData="timelineData" :calConfig="config" @eventMoved="onEventMoved" />
+			<Z-timeline :calData="timelineData" :calConfig="config" :splits="splitDays" @eventMoved="onEventMoved" />
 		</W-loadable>
 
 		<v-snackbar
@@ -21,6 +21,8 @@
 import ATaskFilter from './_components/a-tasks-filter.vue'
 import ZTimeline from './_components/z-timeline.vue'
 
+import { addDays, setHours, setMinutes, setSeconds, differenceInCalendarDays } from 'date-fns'
+
 export default {
 	components: {
 		ATaskFilter,
@@ -33,6 +35,7 @@ export default {
 			errorToast: false,
 			errorToastMessage: "Nepodarilo sa nacitat data!",
 			dataLoaded: false,
+			splitDays: [],
 			config: {
 				date: new Date(),
 				scrollHour: 7,
@@ -45,7 +48,10 @@ export default {
 			this.config.date = week.firstDay
 			try {
 				this.timelineData = await this.$axios.get_auth_data('v1/overview/tasks')
-				this.formatData()
+				this.formatData(week.firstDay)
+				this.generateSplits(week.firstDay)
+				this.generateNonWorkingHours(week.firstDay)
+				this.assignTasksToSplits()
 			} catch(error) {
 				this.timelineData = {}
 				console.error(error)
@@ -53,15 +59,33 @@ export default {
 			}
 		},
 
-		formatData() {
+		generateSplits(date) {
+			this.splitDays = []
+			for (let i = 0; i < 7; i++) {
+				this.splitDays.push({
+					id: i + 1,
+					name: this.timelineData.name + " " + this.timelineData.surname,
+					initials: this.timelineData.name.charAt(0).toUpperCase() + this.timelineData.surname.charAt(0).toUpperCase(),
+					unscheduledTime: Math.floor(this.timelineData.unscheduled_times[i].time / 60) + "," + String(this.timelineData.unscheduled_times[i].time % 60)[0],
+					date: addDays(date, i)
+				})
+			}
+		},
+
+		formatData(date) {
 			// format events
 			this.timelineData.tasks.forEach(event => {
-				event.start = new Date(event.starts_at)
-				event.end = new Date(event.ends_at)
 				event.name = this.timelineData.name
 				event.surname = this.timelineData.surname
-				delete event.starts_at
-				delete event.ends_at
+
+				// convert all dates to one to show in day-splits
+				const startDate = new Date(event.starts_at)
+				const endDate = new Date(event.ends_at)
+				const diffInDays = differenceInCalendarDays(date, startDate)
+
+				event.start = addDays(startDate, diffInDays)
+				event.end = addDays(endDate, diffInDays)
+				event.split = Math.abs(diffInDays) + 1
 			})
 
 			this.timelineData.unscheduled_times.forEach(time => {
@@ -72,15 +96,48 @@ export default {
 			this.config.scrollHour = Number(this.timelineData.work_hours_from.split(':')[0]) - 1
 		},
 
+		generateNonWorkingHours(date) {
+			const nonWorkingHours = []
+			const start1 = { hour: 0, minutes: 0, seconds: 0}
+			const end1 = { hour: Number(this.timelineData.work_hours_from.split(':')[0]), minutes: Number(this.timelineData.work_hours_from.split(':')[1]) - 1, seconds: 0 }
+			const start2 = { hour: Number(this.timelineData.work_hours_to.split(':')[0]), minutes: Number(this.timelineData.work_hours_to.split(':')[1]) + 1, seconds: 0 }
+			const end2 = { hour: 23, minutes: 59, seconds: 59}
+
+			for (let i = 0; i < 7; i++) {
+				nonWorkingHours.push({
+					title: "Non working hours",
+					start: setSeconds(setMinutes(setHours(date, start1.hour), start1.minutes), start1.seconds),
+					end: setSeconds(setMinutes(setHours(date, end1.hour), end1.minutes), end1.seconds),
+					nonWorking: true,
+					split: i + 1
+				})
+				nonWorkingHours.push({
+					title: "Non working hours",
+					start: setSeconds(setMinutes(setHours(date, start2.hour), start2.minutes), start2.seconds),
+					end: setSeconds(setMinutes(setHours(date, end2.hour), end2.minutes), end2.seconds),
+					nonWorking: true,
+					split: i + 1
+				})
+			}
+
+			this.timelineData.tasks.push(...nonWorkingHours)
+		},
+
+		assignTasksToSplits() {
+			console.log('asasasas')
+		},
+
 		triggerToast(message) {
 			this.errorToastMessage = message
 			this.errorToast = true
 		},
 
 		async onEventMoved(event) {
-			console.log(`ID from dragStop: ${event.event.id}`)
+			console.log("drag", event)
 			// try {
-			// 	await this.$axios.post_auth_data(`v1/overview/tasks/${event.event.id}`, {start: event.event.start, end: event.event.end})
+			// 	const newStartDate = addDays(event.event.start, differenceInCalendarDays(this.splitDays.filter((split) => {return split.id == event.newSplit})[0].date, event.event.start))
+			// 	const newEndDate = addDays(event.event.end, differenceInCalendarDays( newStartDate, event.event.start))
+			// 	await this.$axios.post_auth_data(`v1/overview/tasks/${event.event.id}`, {start: newStartDate, end: newEndDate})
 			// } catch(error) {
 			// 	this.triggerToast("Nepodarilo sa presunut ulohu!")
 			// 	this.timelineData.tasks.filter(e => {