Added alert messages in login page, Edited event list border color, And few updates at the agenda module.

This commit is contained in:
Tiago Kayaya
2020-08-25 10:37:41 +01:00
parent 91147ef6b9
commit e6c55d26cb
8 changed files with 275 additions and 116 deletions
+159 -75
View File
@@ -4,13 +4,13 @@
</ion-toolbar>
<ion-toolbar>
<ion-segment [(ngModel)]="segment">
<ion-segment-button value="combinada">
<ion-segment-button value="Combinada">
Combinada
</ion-segment-button>
<ion-segment-button value="oficial">
<ion-segment-button value="Oficial">
Oficial
</ion-segment-button>
<ion-segment-button value="pessoal">
<ion-segment-button value="Pessoal">
Pessoal
</ion-segment-button>
</ion-segment>
@@ -31,86 +31,170 @@
</ion-segment-button>
</ion-segment>
</ion-toolbar> -->
<ion-content>
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="refreshAgenda($event)">
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="chevron-down-circle-outline"
pullingText="deslize para actualizar"
refreshingSpinner="circles"
refreshingText="a actualizar...">
refreshingText="A actualizar...">
</ion-refresher-content>
</ion-refresher>
<ion-row>
<!-- <ion-col size="6">
<ion-button (click)="createRandomEvents()" expand="block" fill="outline">
Add random events
</ion-button>
</ion-col>
<ion-col size="6">
<ion-button (click)="removeEvents()" expand="block" fill="outline">
Remove all events
</ion-button>
</ion-col>
<ion-col size="6">
<ion-button (click)="createdEvent()" expand="block" fill="outline">
Adicionar
</ion-button>
</ion-col>-->
</ion-row>
<ion-row>
<!-- Move back one screen of the slides -->
<ion-col size="2">
<ion-button fill="clear" (click)="back()">
<ion-icon name="arrow-back" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
<!-- The title of the calendar in the middle -->
<ion-col size="8" class="ion-text-center">
<h2 class="capitaliseText">{{ viewTitle }}</h2>
</ion-col>
<!-- Move forward one screen of the slides -->
<ion-col size="2">
<ion-button fill="clear" (click)="next()">
<ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
<calendar
[eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onRangeChanged)="onRangeChanged($event)"
queryMode="remote"
startHour="6"
endHour="20"
step="30"
startingDayMonth="1"
noEventsLabel="Sem Eventos"
allDayLabel="Todo o dia"
[monthviewDisplayEventTemplate]="template"
>
</calendar>
<div [ngSwitch]="segment">
<div *ngSwitchCase="'Combinada'">
<ion-row>
<!-- Move back one screen of the slides -->
<ion-col size="2">
<ion-button fill="clear" (click)="back()">
<ion-icon name="arrow-back" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
<!-- The title of the calendar in the middle -->
<ion-col size="8" class="ion-text-center">
<h2 class="capitaliseText">{{ viewTitle }}</h2>
</ion-col>
<!-- Move forward one screen of the slides -->
<ion-col size="2">
<ion-button fill="clear" (click)="next()">
<ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
<calendar
[eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onRangeChanged)="onRangeChanged($event)"
queryMode="remote"
startHour="6"
endHour="20"
step="30"
startingDayMonth="1"
noEventsLabel="Sem Eventos"
allDayLabel="Todo o dia"
[monthviewDisplayEventTemplate]="template"
>
</calendar>
<!-- Adding a customized ng-template -->
<ng-template #template let-view="view" let-row="row" let-col="col">
<div [class.with-event]="view.dates[row*7+col].events.length">
{{view.dates[row*7+col].label}}
<div class="indicator-container">
<div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div>
</div>
<!-- Adding a customized ng-template -->
<ng-template #template let-view="view" let-row="row" let-col="col">
<div [class.with-event]="view.dates[row*7+col].events.length">
{{view.dates[row*7+col].label}}
<div class="indicator-container">
<div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div>
</div>
</div>
</ng-template>
</div>
</ng-template>
<div *ngSwitchCase="'Pessoal'">
<ion-row>
<!-- Move back one screen of the slides -->
<ion-col size="2">
<ion-button fill="clear" (click)="back()">
<ion-icon name="arrow-back" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
<!-- The title of the calendar in the middle -->
<ion-col size="8" class="ion-text-center">
<h2 class="capitaliseText">{{ viewTitle }}</h2>
</ion-col>
<!-- Move forward one screen of the slides -->
<ion-col size="2">
<ion-button fill="clear" (click)="next()">
<ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
<calendar
[eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onRangeChanged)="onRangeChanged($event)"
queryMode="remote"
startHour="6"
endHour="20"
step="30"
startingDayMonth="1"
noEventsLabel="Sem Eventos"
allDayLabel="Todo o dia"
[monthviewDisplayEventTemplate]="template"
>
</calendar>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button>
<ion-icon name="add" (click)="openCalModal()"></ion-icon>
</ion-fab-button>
</ion-fab>
<!-- Adding a customized ng-template -->
<ng-template #template let-view="view" let-row="row" let-col="col">
<div [class.with-event]="view.dates[row*7+col].events.length">
{{view.dates[row*7+col].label}}
<div class="indicator-container">
<div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div>
</div>
</div>
</ng-template>
</div>
<div *ngSwitchCase="'Oficial'">
<ion-row>
<!-- Move back one screen of the slides -->
<ion-col size="2">
<ion-button fill="clear" (click)="back()">
<ion-icon name="arrow-back" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
<!-- The title of the calendar in the middle -->
<ion-col size="8" class="ion-text-center">
<h2 class="capitaliseText">{{ viewTitle }}</h2>
</ion-col>
<!-- Move forward one screen of the slides -->
<ion-col size="2">
<ion-button fill="clear" (click)="next()">
<ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
<calendar
[eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onRangeChanged)="onRangeChanged($event)"
queryMode="remote"
startHour="6"
endHour="20"
step="30"
startingDayMonth="1"
noEventsLabel="Sem Eventos"
allDayLabel="Todo o dia"
[monthviewDisplayEventTemplate]="template"
>
</calendar>
<!-- Adding a customized ng-template -->
<ng-template #template let-view="view" let-row="row" let-col="col">
<div [class.with-event]="view.dates[row*7+col].events.length">
{{view.dates[row*7+col].label}}
<div class="indicator-container">
<div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div>
</div>
</div>
</ng-template>
</div>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button>
<ion-icon name="add" (click)="openCalModal()"></ion-icon>
</ion-fab-button>
</ion-fab>
</div>
</ion-content>