peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-18 20:47:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add calendar timeline

Browse Source
This commit is contained in:
Peter Maquiran
2021-01-25 16:18:36 +01:00
parent f3ab852223
commit 2637e0607e
8 changed files with 182 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+33
View File
@@ -3081,6 +3081,11 @@
"integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
"dev": true
},
"@types/date-fns": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/@types/date-fns/-/date-fns-0.0.2.tgz",
"integrity": "sha1-px0uCyq1e7jegchD5ez24WF3m4w="
},
"@types/glob": {
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -3531,6 +3536,34 @@
}
}
},
"angular2-calendar": {
"version": "0.3.7",
"resolved": "https://registry.npmjs.org/angular2-calendar/-/angular2-calendar-0.3.7.tgz",
"integrity": "sha1-1hrZoQWNbjdrpOWs5C3QDaoNVb4=",
"requires": {
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.0",
"@types/date-fns": "0.0.2",
"calendar-utils": "0.0.35",
"date-fns": "^1.3.0"
},
"dependencies": {
"@ng-bootstrap/ng-bootstrap": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.1.2.tgz",
"integrity": "sha512-lPB4WdFk3s4k1OMKiZsmbxSE3r8qBFapov0HudEVi8HYkm6LBxZmWqy9I6KAC9NnhVUVIYnCixvRSNwOQvIwwA=="
},
"calendar-utils": {
"version": "0.0.35",
"resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.0.35.tgz",
"integrity": "sha1-BqlQdhAFRFyH8YpotAMhZIkcV5s="
},
"date-fns": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
"integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
}
}
},
"ansi": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/ansi/-/ansi-0.3.1.tgz",
package.json
+1
View File
@@ -42,6 +42,7 @@
"@ng-bootstrap/ng-bootstrap": "^9.0.1",
"angular-calendar": "^0.28.22",
"angular-tag-cloud-module": "^5.2.2",
"angular2-calendar": "^0.3.7",
"cordova-ios": "6.1.0",
"cordova-plugin-camera": "^5.0.1",
"cordova-plugin-file": "^6.0.2",
src/app/app.module.ts
+4 -2
View File
@@ -23,9 +23,11 @@ import { PipesModule } from './pipes/pipes.module';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
@@ -36,7 +38,7 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
FormsModule,
CalendarModule.forRoot({
provide: DateAdapter,
useFactory: adapterFactory,
useFactory: adapterFactory
}),
IonicModule.forRoot(),
IonicStorageModule.forRoot(),
src/app/pages/agenda/agenda.module.ts
+8
View File
@@ -16,12 +16,20 @@ import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/pt';
import { CalendarComponent } from 'src/app/components/calendar/calendar.component';
registerLocaleData(localeDe);
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
/* ComponentsModule, */
CalendarModule.forRoot({
provide: DateAdapter,
useFactory: adapterFactory
}),
AgendaPageRoutingModule,
NgCalendarModule,
CalModalPageModule,
src/app/pages/agenda/agenda.page.html
+31 -36
View File
@@ -17,20 +17,7 @@
<ion-toolbar class="bg-blue">
<div class="main-content">
<ion-toolbar>
<ion-buttons slot="end">
<!-- customized TOGGLE button -->
<div class="toggleBox">
<div (click)="changeProfile()" class="toggle">
<input type="checkbox">
<label for="" class="onbtn">PR</label>
<label for="" class="ofbtn">MDGPR</label>
</div>
</div>
</ion-buttons>
<ion-title class="header-title">Agenda</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-segment [(ngModel)]="segment">
<!-- <ion-segment [(ngModel)]="segment">
<ion-segment-button value="Combinada">
Combinada
</ion-segment-button>
@@ -41,7 +28,7 @@
Pessoal
</ion-segment-button>
</ion-segment>
-->
</ion-toolbar>
</div>
</ion-toolbar>
@@ -209,6 +196,7 @@
</ng-template>
</div>
<ion-fab vertical="bottom" horizontal="end" slot="fixed" (click)="openCalModal()">
<ion-fab-button>
<ion-icon name="add" ></ion-icon>
@@ -216,28 +204,35 @@
</ion-fab>
</div>
<mwl-demo-utils-calendar-header [(view)]="view" [(viewDate)]="viewDate">
</mwl-demo-utils-calendar-header>
<div *ngIf="showTimeline">
<mwl-demo-utils-calendar-header class="timeline"
[(view)]="view"
[(viewDate)]="viewDate"
[dayStartHour]="9"
[dayEndHour]="17">
</mwl-demo-utils-calendar-header>
<div [ngSwitch]="view">
<mwl-calendar-month-view
*ngSwitchCase="'month'"
[viewDate]="viewDate"
[events]="events"
>
</mwl-calendar-month-view>
<mwl-calendar-week-view
*ngSwitchCase="'week'"
[viewDate]="viewDate"
[events]="events"
>
</mwl-calendar-week-view>
<mwl-calendar-day-view
*ngSwitchCase="'day'"
[viewDate]="viewDate"
[events]="events"
>
</mwl-calendar-day-view>
<div [ngSwitch]="view">
<mwl-calendar-month-view
*ngSwitchCase="'month'"
[viewDate]="viewDate"
[events]="events"
>
</mwl-calendar-month-view>
<mwl-calendar-week-view
*ngSwitchCase="'week'"
[viewDate]="viewDate"
[events]="events"
>
</mwl-calendar-week-view>
<mwl-calendar-day-view
*ngSwitchCase="'day'"
[viewDate]="viewDate"
[events]="events"
>
</mwl-calendar-day-view>
</div>
</div>
</ion-content>
src/app/pages/agenda/agenda.page.scss
+13
View File
@@ -41,6 +41,7 @@
border-bottom: none;
border-right: 3px solid #f05d5e;
color: black;
margin: 0px auto;
width: 35px;
}
@@ -270,3 +271,15 @@ label{
.segment {
}
/* Timeline */
.cal-hour-segment {
border-bottom: none !important;
}
.cal-current-time-marker {
background-color: #42b9fe !important;
}
src/app/pages/agenda/agenda.page.ts
+73 -10
View File
@@ -8,39 +8,70 @@ import { Event } from '../../models/event.model';
import { Router, NavigationEnd } from '@angular/router';
import { AlertService } from 'src/app/services/alert.service';
import { CalendarEvent, CalendarView } from 'angular-calendar';
// showTimeline
import { setHours, setMinutes } from 'date-fns';
import {
CalendarDateFormatter,
CalendarEvent,
CalendarView,
DAYS_OF_WEEK,
} from 'angular-calendar';
import { CustomDateFormatter } from './custom-date-formatter.provider';
import { async } from '@angular/core/testing';
@Component({
selector: 'app-agenda',
templateUrl: './agenda.page.html',
styleUrls: ['./agenda.page.scss'],
providers: [
{
provide: CalendarDateFormatter,
useClass: CustomDateFormatter,
},
],
})
export class AgendaPage implements OnInit {
title = 'my-dream-app';
view: CalendarView = CalendarView.Day;
viewDate: Date = new Date();
weekStartsOn: number = DAYS_OF_WEEK.MONDAY;
weekendDays: number[] = [DAYS_OF_WEEK.FRIDAY, DAYS_OF_WEEK.SATURDAY];
CalendarView = CalendarView;
setView(view: CalendarView) {
this.view = view;
}
showTimeline: boolean= false;
events: CalendarEvent[] = [
{
title: 'No event end date',
/* {
title: '123',
start: setHours(setMinutes(new Date(), 0), 3),
color: {
primary: 'red',
secondary: 'rellow'
secondary: 'yellow'
},
},
{
title: 'No event end date',
title: '123123',
start: setHours(setMinutes(new Date(), 0), 5),
color: {
primary: 'red',
secondary: 'rellow'
secondary: 'yellow'
},
},
}, */
];
/* List of events of our calendar */
eventSource = [];
/* The title of the calendar */
@@ -84,7 +115,14 @@ export class AgendaPage implements OnInit {
private eventService: EventsService,
private router: Router,
private alertCrontroller: AlertService
) {}
) {
setTimeout(()=>{
// console.log(JSON.stringify(this.events));
// console.log(this.events);
},5000)
// console.log(setHours(setMinutes(new Date(), 0), 12))
}
ngOnInit() {
this.profile = "mdgpr";
@@ -165,6 +203,7 @@ export class AgendaPage implements OnInit {
allDay: false,
event: postEvent
});
this.myCal.update();
this.myCal.loadEvents();
this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
@@ -172,7 +211,8 @@ export class AgendaPage implements OnInit {
});
}
async loadRangeEvents(startTime: Date, endTime: Date){
loadRangeEvents(startTime: Date, endTime: Date){
this.showLoader = true;
switch (this.segment)
{
@@ -180,10 +220,12 @@ export class AgendaPage implements OnInit {
//Inicializa o array eventSource
this.eventSource=[];
if(this.profile == "mdgpr"){
this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(
this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(
response => {
this.eventsList = response;
// loop
this.eventsList.forEach(element => {
this.eventSource.push({
title: element.Subject,
startTime: new Date(element.StartDate),
@@ -191,11 +233,31 @@ export class AgendaPage implements OnInit {
allDay: false,
event: element
});
let hours = formatDate(new Date(element.EndDate), 'HH', 'pt');
this.events.push({
title: element.Subject,
start: setHours(setMinutes(new Date(element.EndDate), 0), parseInt(hours)),
color: {
primary: 'red',
secondary: 'yellow'
},
});
});
this.myCal.update();
this.myCal.loadEvents();
this.showLoader = false;
this.showTimeline = true;
});
}
else{
this.eventService.getAllPrEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(
@@ -293,6 +355,7 @@ export class AgendaPage implements OnInit {
});
}
break;
}
}
src/global.scss
+17 -1
View File
@@ -29,7 +29,7 @@
td.monthview-current{
color: white;
/* border-radius: 89px; */
background: red !important;
background: lightskyblue !important;
justify-content: center;
align-items: center;
/* display: flex; */
@@ -56,5 +56,21 @@ td.monthview-selected {
}
/* Timeline */
.cal-hour-segment {
border-bottom: none !important;
}
.cal-current-time-marker {
background-color: #42b9fe !important;
}
.timeline .cal-event, .cal-event{
background-color: white !important;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07) !important;
border: solid 1px #e9e9e9 !important;
border-left: 5px solid #ffb703 !important;
}
/* angular-cli file: src/styles.css */
@import "../node_modules/angular-calendar/css/angular-calendar.css";