[timeline] farebne odlisenie vikendov

This commit is contained in:
Filip Kaluža committed 2023-01-18 19:53:37 +01:00
1 parent 657f10adc0
commit f13649485b
5 files changed
+50 -38

No files matched your search

+18 -18
View File
@@ -38,8 +38,8 @@
"tasks": [ "tasks": [
{ {
"id": 1, "id": 1,
"starts_at": "2023-01-11T08:01:00+00:00", "starts_at": "2023-01-18T08:01:00+00:00",
"ends_at": "2023-01-11T09:00:00+00:00", "ends_at": "2023-01-18T09:00:00+00:00",
"title": "Task DNES", "title": "Task DNES",
"project_code": "CO-2201", "project_code": "CO-2201",
"master_task_color": "#E9FFE6", "master_task_color": "#E9FFE6",
@@ -48,8 +48,8 @@
{ {
"id": 2, "id": 2,
"starts_at": "2023-01-12T08:30:00+00:00", "starts_at": "2023-01-19T08:30:00+00:00",
"ends_at": "2023-01-12T09:00:00+00:00", "ends_at": "2023-01-19T09:00:00+00:00",
"title": "Kratky 30min Lorem ipsum dolor sit amet, consectetur adipiscing e", "title": "Kratky 30min Lorem ipsum dolor sit amet, consectetur adipiscing e",
"project_code": "CO-2201", "project_code": "CO-2201",
"master_task_color": "#f27e57", "master_task_color": "#f27e57",
@@ -58,8 +58,8 @@
{ {
"id": 3, "id": 3,
"starts_at": "2023-01-12T10:30:00+00:00", "starts_at": "2023-01-19T10:30:00+00:00",
"ends_at": "2023-01-12T10:45:00+00:00", "ends_at": "2023-01-19T10:45:00+00:00",
"title": "Kratky 15min", "title": "Kratky 15min",
"project_code": "CO-2201", "project_code": "CO-2201",
"master_task_color": "#57e0f2", "master_task_color": "#57e0f2",
@@ -68,8 +68,8 @@
{ {
"id": 4, "id": 4,
"starts_at": "2023-01-13T08:00:00+00:00", "starts_at": "2023-01-20T08:00:00+00:00",
"ends_at": "2023-01-13T10:00:00+00:00", "ends_at": "2023-01-20T10:00:00+00:00",
"title": "Task 2", "title": "Task 2",
"project_code": "CO-2201", "project_code": "CO-2201",
"master_task_color": "#FDE1FF", "master_task_color": "#FDE1FF",
@@ -78,8 +78,8 @@
{ {
"id": 6, "id": 6,
"starts_at": "2023-01-13T09:00:00+00:00", "starts_at": "2023-01-20T09:00:00+00:00",
"ends_at": "2023-01-13T12:00:00+00:00", "ends_at": "2023-01-20T12:00:00+00:00",
"title": "Task 6", "title": "Task 6",
"project_code": "CO-2201", "project_code": "CO-2201",
"master_task_color": "#57e0f2", "master_task_color": "#57e0f2",
@@ -88,8 +88,8 @@
{ {
"id": 7, "id": 7,
"starts_at": "2023-01-13T12:00:00+00:00", "starts_at": "2023-01-20T12:00:00+00:00",
"ends_at": "2023-01-13T16:00:00+00:00", "ends_at": "2023-01-20T16:00:00+00:00",
"title": "Task 7", "title": "Task 7",
"project_code": "CO-2201", "project_code": "CO-2201",
"master_task_color": "#E7DBF8", "master_task_color": "#E7DBF8",
@@ -98,8 +98,8 @@
{ {
"id": 8, "id": 8,
"starts_at": "2023-01-14T07:00:00+00:00", "starts_at": "2023-01-21T07:00:00+00:00",
"ends_at": "2023-01-14T09:00:00+00:00", "ends_at": "2023-01-21T09:00:00+00:00",
"title": "Task 8", "title": "Task 8",
"project_code": "CO-2201", "project_code": "CO-2201",
"master_task_color": "#57e0f2", "master_task_color": "#57e0f2",
@@ -108,8 +108,8 @@
{ {
"id": 9, "id": 9,
"starts_at": "2023-01-14T09:00:00+00:00", "starts_at": "2023-01-21T09:00:00+00:00",
"ends_at": "2023-01-14T12:00:00+00:00", "ends_at": "2023-01-21T12:00:00+00:00",
"title": "Task 9", "title": "Task 9",
"project_code": "CO-2201", "project_code": "CO-2201",
"master_task_color": "#E9FFE6", "master_task_color": "#E9FFE6",
@@ -118,8 +118,8 @@
{ {
"id": 10, "id": 10,
"starts_at": "2023-01-14T12:00:00+00:00", "starts_at": "2023-01-21T12:00:00+00:00",
"ends_at": "2023-01-14T13:00:00+00:00", "ends_at": "2023-01-21T13:00:00+00:00",
"title": "Task 10", "title": "Task 10",
"project_code": "CO-2201", "project_code": "CO-2201",
"master_task_color": "#57e0f2", "master_task_color": "#57e0f2",
+18 -18
View File
@@ -10,8 +10,8 @@
"tasks": [ "tasks": [
{ {
"id": 1, "id": 1,
"starts_at": "2023-01-12T08:01:00+00:00", "starts_at": "2023-01-19T08:01:00+00:00",
"ends_at": "2023-01-12T09:00:00+00:00", "ends_at": "2023-01-19T09:00:00+00:00",
"title": "Task DNES", "title": "Task DNES",
"project_code": "CO-2201", "project_code": "CO-2201",
"master_task_color": "#E9FFE6", "master_task_color": "#E9FFE6",
@@ -20,8 +20,8 @@
{ {
"id": 2, "id": 2,
"starts_at": "2023-01-12T08:30:00+00:00", "starts_at": "2023-01-19T08:30:00+00:00",
"ends_at": "2023-01-12T09:00:00+00:00", "ends_at": "2023-01-19T09:00:00+00:00",
"title": "Kratky 30min", "title": "Kratky 30min",
"project_code": "CO-2201", "project_code": "CO-2201",
"master_task_color": "#f27e57", "master_task_color": "#f27e57",
@@ -30,8 +30,8 @@
{ {
"id": 3, "id": 3,
"starts_at": "2023-01-13T10:30:00+00:00", "starts_at": "2023-01-20T10:30:00+00:00",
"ends_at": "2023-01-13T10:45:00+00:00", "ends_at": "2023-01-20T10:45:00+00:00",
"title": "Kratky 15min", "title": "Kratky 15min",
"project_code": "CO-2201", "project_code": "CO-2201",
"master_task_color": "#57e0f2", "master_task_color": "#57e0f2",
@@ -49,8 +49,8 @@
"tasks": [ "tasks": [
{ {
"id": 4, "id": 4,
"starts_at": "2023-01-12T08:01:00+00:00", "starts_at": "2023-01-19T08:01:00+00:00",
"ends_at": "2023-01-12T09:00:00+00:00", "ends_at": "2023-01-19T09:00:00+00:00",
"title": "Task DNES", "title": "Task DNES",
"project_code": "CO-2201", "project_code": "CO-2201",
"master_task_color": "#E9FFE6", "master_task_color": "#E9FFE6",
@@ -59,8 +59,8 @@
{ {
"id": 5, "id": 5,
"starts_at": "2023-01-12T08:30:00+00:00", "starts_at": "2023-01-19T08:30:00+00:00",
"ends_at": "2023-01-12T09:00:00+00:00", "ends_at": "2023-01-19T09:00:00+00:00",
"title": "Kratky 30min", "title": "Kratky 30min",
"project_code": "CO-2201", "project_code": "CO-2201",
"master_task_color": "#f27e57", "master_task_color": "#f27e57",
@@ -69,8 +69,8 @@
{ {
"id": 6, "id": 6,
"starts_at": "2023-01-12T10:30:00+00:00", "starts_at": "2023-01-19T10:30:00+00:00",
"ends_at": "2023-01-12T10:45:00+00:00", "ends_at": "2023-01-19T10:45:00+00:00",
"title": "Kratky 15min", "title": "Kratky 15min",
"project_code": "CO-2201", "project_code": "CO-2201",
"master_task_color": "#57e0f2", "master_task_color": "#57e0f2",
@@ -88,8 +88,8 @@
"tasks": [ "tasks": [
{ {
"id": 1, "id": 1,
"starts_at": "2023-01-13T08:01:00+00:00", "starts_at": "2023-01-20T08:01:00+00:00",
"ends_at": "2023-01-13T09:00:00+00:00", "ends_at": "2023-01-20T09:00:00+00:00",
"title": "Task DNES", "title": "Task DNES",
"project_code": "CO-2201", "project_code": "CO-2201",
"master_task_color": "#E9FFE6", "master_task_color": "#E9FFE6",
@@ -98,8 +98,8 @@
{ {
"id": 2, "id": 2,
"starts_at": "2023-01-12T08:30:00+00:00", "starts_at": "2023-01-19T08:30:00+00:00",
"ends_at": "2023-01-12T09:00:00+00:00", "ends_at": "2023-01-19T09:00:00+00:00",
"title": "Kratky 30min", "title": "Kratky 30min",
"project_code": "CO-2201", "project_code": "CO-2201",
"master_task_color": "#f27e57", "master_task_color": "#f27e57",
@@ -108,8 +108,8 @@
{ {
"id": 3, "id": 3,
"starts_at": "2023-01-13T10:30:00+00:00", "starts_at": "2023-01-20T10:30:00+00:00",
"ends_at": "2023-01-13T10:45:00+00:00", "ends_at": "2023-01-20T10:45:00+00:00",
"title": "Kratky 15min", "title": "Kratky 15min",
"project_code": "CO-2201", "project_code": "CO-2201",
"master_task_color": "#57e0f2", "master_task_color": "#57e0f2",
@@ -106,6 +106,7 @@ export default {
return { return {
'vuecal__cell-split': true, 'vuecal__cell-split': true,
'vuecal__cell-split--highlighted': this.highlightedSplit === split.id, 'vuecal__cell-split--highlighted': this.highlightedSplit === split.id,
'vuecal__cell-split--weekend': split.isWeekend,
[split.class]: !!split.class [split.class]: !!split.class
} }
}, },
@@ -37,7 +37,7 @@
<p class="day-name" >{{ split.date.toLocaleDateString('en-EN', { weekday: 'long' }) }}</p> <p class="day-name" >{{ split.date.toLocaleDateString('en-EN', { weekday: 'long' }) }}</p>
</span> </span>
<div v-if="split.unscheduledTime && split.initials" class="unscheduled-time d-flex align-center text-left"> <div v-if="split.unscheduledTime && split.initials" class="unscheduled-time d-flex align-center text-left" :class="{'vuecal__cell-split--weekend': split.isWeekend}">
<div class="unscheduled-time-initials d-flex align-center justify-center me-4"> <div class="unscheduled-time-initials d-flex align-center justify-center me-4">
<p>{{split.initials}}</p> <p>{{split.initials}}</p>
</div> </div>
@@ -356,6 +356,11 @@ export default {
.vuecal__cell--highlighted, .vuecal__cell--highlighted,
.vuecal__cell--selected .vuecal__cell--selected
background-color: white background-color: white
border-radius: 16px
.vuecal__cell-split--weekend
background-color: #F2E7FE !important
border-radius: 16px
// EVENT // EVENT
+7 -1
View File
@@ -56,11 +56,17 @@ export default {
name: this.timelineData.name + " " + this.timelineData.surname, name: this.timelineData.name + " " + this.timelineData.surname,
initials: this.timelineData.name.charAt(0).toUpperCase() + this.timelineData.surname.charAt(0).toUpperCase(), 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], unscheduledTime: Math.floor(this.timelineData.unscheduled_times[i].time / 60) + "," + String(this.timelineData.unscheduled_times[i].time % 60)[0],
date: addDays(date, i) date: addDays(date, i),
isWeekend: this.isWeekend(addDays(date, i))
}) })
} }
}, },
isWeekend(date) {
if (date.getDay() == 6 || date.getDay() == 0) return true
return false
},
formatTimelineDataToTimelineFormat(date) { formatTimelineDataToTimelineFormat(date) {
// format events // format events
this.timelineData.tasks.forEach(event => { this.timelineData.tasks.forEach(event => {