This commit is contained in:
tiago.kayaya
2021-06-28 14:41:42 +01:00
7 changed files with 213 additions and 91 deletions
+64 -65
View File
@@ -1,86 +1,85 @@
<ion-content class="text-white">
<div class="main-wrapper">
<div class="wrapper" *ngIf="userLoginPreference != 'pin' && userLoginPreference != 'fingerprint' && !setPint ">
<div class="wrapper" *ngIf="userLoginPreference != 'pin' && userLoginPreference != 'fingerprint' && !setPint ">
<div class="bg-1 d-flex justify-center align-center">
<div class="bg-2 d-flex justify-center align-center">
<div class="bg-3 d-flex justify-center align-center">
<div class="bg-4 d-flex justify-center align-center">
<div class="div-logo">
<img src='assets/images/fullLogo.png' alt='logo'>
<div class="bg-1 d-flex justify-center align-center">
<div class="bg-2 d-flex justify-center align-center">
<div class="bg-3 d-flex justify-center align-center">
<div class="bg-4 d-flex justify-center align-center">
<div class="div-logo">
<img src='assets/images/fullLogo.png' alt='logo'>
</div>
</div>
</div>
</div>
</div>
</div>
<h3 class="center text-white">Inicie a sessão</h3>
<form class="form">
<p class="form-label text-white">Email</p>
<ion-item class="form-input">
<ion-input type="text" [(ngModel)]="username" name="input-username"></ion-input>
</ion-item>
<p class="form-label text-white">Palavra-passe</p>
<ion-item class="form-input">
<ion-input (keyup.enter)="Login()" type="password" [(ngModel)]="password" name="input-password" ></ion-input>
</ion-item>
<div class="d-flex pt-25">
<button class="btn-ok btn-login" fill="clear" expand="block" shape="round" (click)="Login()">Iniciar</button>
</div>
</form>
<div class="msg-bottom d-flex">
<p class="msg-bottom-p">Uma iniciativa do Gabinete do Presidente da República</p>
<h3 class="center text-white">Inicie a sessão</h3>
<form class="form">
<p class="form-label text-white">Nome de utilizador</p>
<ion-item class="form-input">
<ion-input type="text" [(ngModel)]="username" name="input-username"></ion-input>
</ion-item>
<p class="form-label text-white">Palavra-passe</p>
<ion-item class="form-input">
<ion-input (keyup.enter)="Login()" type="password" [(ngModel)]="password" name="input-password" ></ion-input>
</ion-item>
<div class="d-flex pt-25">
<button class="btn-ok btn-login" fill="clear" expand="block" shape="round" (click)="Login()">Iniciar</button>
</div>
</form>
<div class="msg-bottom d-flex">
<p class="msg-bottom-p">Uma iniciativa do Gabinete do Presidente da República</p>
</div>
</div>
</div>
<div class="main-content height-100" *ngIf="userLoginPreference == 'pin' || setPint">
<div class=" align-center justify-center">
<div class="div-top-header">
<div class="main-content height-100" *ngIf="userLoginPreference == 'pin' || setPint">
<div class=" align-center justify-center">
<div class="div-top-header">
<div class="div-logo">
<img src='assets/images/logo-bg.png' alt='logo'>
<div class="div-logo">
<img src='assets/images/logo-bg.png' alt='logo'>
</div>
</div>
</div>
<ion-title *ngIf="!setPint" class="title">Digite o PIN</ion-title>
<ion-title *ngIf="setPint" class="title">Digite o novo PIN</ion-title>
<ion-title *ngIf="!setPint" class="title">Digite o PIN</ion-title>
<ion-title *ngIf="setPint" class="title">Digite o novo PIN</ion-title>
<div class="d-flex pt-25 align-center justify-center">
<div class="dot" [class.dot-active]="code.length >= 1"></div>
<div class="dot" [class.dot-active]="code.length >= 2"></div>
<div class="dot" [class.dot-active]="code.length >= 3"></div>
<div class="dot"[class.dot-active]="code.length >= 4"></div>
</div>
<div class="terminal">
<div class="d-flex">
<div class="circle" (click)="setCode('1')">1</div> <div class="circle" (click)="setCode('2')">2</div> <div class="circle" (click)="setCode('3')">3</div>
<div class="d-flex pt-25 align-center justify-center">
<div class="dot" [class.dot-active]="code.length >= 1"></div>
<div class="dot" [class.dot-active]="code.length >= 2"></div>
<div class="dot" [class.dot-active]="code.length >= 3"></div>
<div class="dot"[class.dot-active]="code.length >= 4"></div>
</div>
<div class="d-flex">
<div class="circle" (click)="setCode('4')">4</div> <div class="circle" (click)="setCode('5')">5</div> <div class="circle" (click)="setCode('6')">6</div>
<div class="terminal">
<div class="d-flex">
<div class="circle" (click)="setCode('1')">1</div> <div class="circle" (click)="setCode('2')">2</div> <div class="circle" (click)="setCode('3')">3</div>
</div>
<div class="d-flex">
<div class="circle" (click)="setCode('4')">4</div> <div class="circle" (click)="setCode('5')">5</div> <div class="circle" (click)="setCode('6')">6</div>
</div>
<div class="d-flex">
<div class="circle" (click)="setCode('7')">7</div> <div class="circle" (click)="setCode('8')">8</div> <div class="circle" (click)="setCode('9')">9</div>
</div>
<div class="d-flex align-center justify-center">
<div class="circle" (click)="setCode('0')">0</div>
</div>
</div>
<div class="d-flex">
<div class="circle" (click)="setCode('7')">7</div> <div class="circle" (click)="setCode('8')">8</div> <div class="circle" (click)="setCode('9')">9</div>
<div *ngIf="!setPint" class="voltar d-flex align-center justify-center pt-25 clear" (click)="setPint=false; userLoginPreference='none'">
Entrar com senha
</div>
<div class="d-flex align-center justify-center">
<div class="circle" (click)="setCode('0')">0</div>
</div>
</div>
<div *ngIf="!setPint" class="voltar d-flex align-center justify-center pt-25 clear" (click)="setPint=false; userLoginPreference='none'">
Entrar com senha
</div>
<div *ngIf="setPint" class="voltar d-flex align-center justify-center pt-25 clear" (click)="pin=!pin;">
Limpar
</div>
<div *ngIf="setPint" class="voltar d-flex align-center justify-center pt-25 clear" (click)="pin=!pin;">
Limpar
</div>
</div>
</div>
</div>
</div>
+4 -3
View File
@@ -211,8 +211,9 @@ ion-item{
}
}
@media only screen and (min-width: 1024px){
.form{
width: 400px;
@media only screen and (max-height: 746px){
.msg-bottom-p {
padding-top: 20px;
position: unset !important;
}
}
@@ -14,20 +14,44 @@
<ion-content>
<div class="main-content">
<div class="ion-item-container">
<div class="ion-item-container" [className]="Form?.get('Subject')?.invalid && validateFrom ? 'input-error ion-item-container' : 'ion-item-container' ">
<ion-input type="text" placeholder="Assunto*" [(ngModel)]="postEvent.Subject"></ion-input>
</div>
<div *ngIf="Form && validateFrom" >
<div *ngIf="Form.get('Subject').invalid " class="input-errror-message">
<div *ngIf="Form.get('Subject').errors?.required">
Campo obrigatório.
</div>
<div *ngIf="Form.get('Subject').errors?.minlength">
O campo deve ter pelo menos 4 caracteres.
</div>
</div>
</div>
<div class="container-div">
<div class="ion-item-class-2 d-flex">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
</div>
<div class="ion-input-class flex-grow-1">
<div class="ion-input-class flex-grow-1 width-100" [className]="Form?.get('Subject')?.invalid && validateFrom ? 'input-error ion-input-class flex-grow-1 width-100' : 'ion-input-class flex-grow-1 width-100' " >
<ion-input type="text" placeholder="Localização*" [(ngModel)]="postEvent.Location"></ion-input>
</div>
</div>
</div>
<div *ngIf="Form && validateFrom" >
<div *ngIf="Form.get('Location').invalid " class="input-errror-message">
<div *ngIf="Form.get('Location').errors?.required">
Campo obrigatório.
</div>
<div *ngIf="Form.get('Location').errors?.minlength">
O campo deve ter pelo menos 4 caracteres.
</div>
</div>
</div>
<div class="container-div">
<div class="ion-item-class-2 d-flex">
@@ -36,7 +60,7 @@
</div>
<div class="ion-input-class flex-grow-1 d-flex justify-center align-center material-inputs materia-top ">
<mat-form-field class="width-100" color="ion-color-secondary" placeholder="Selecione agenda">
<mat-form-field appearance="none" class="width-100" color="ion-color-secondary" placeholder="Selecione agenda">
<mat-select [(value)]="postEvent.CalendarName" >
<mat-option value="Oficial">
Oficial
@@ -58,9 +82,9 @@
</div>
<div class="ion-input-class flex-grow-1 d-flex justify-center align-center material-inputs materia-top">
<mat-form-field class="width-100" placeholder="Sample Type" required>
<mat-form-field appearance="none" class="width-100" placeholder="Sample Type" required>
<!-- <input matInput type="text" > -->
<mat-select matInput [(value)]="postEvent.Categories[0]" >
<mat-select [(value)]="postEvent.Categories[0]" >
<mat-option value="Reunião">
Reunião
</mat-option>
@@ -84,7 +108,11 @@
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class flex-grow-1">
<!--
[className]="Form?.get('Subject')?.invalid ? 'input-error ion-input-class flex-grow-1' : 'ion-input-class ion-input-class flex-grow-1' "
-->
<div class="ion-input-class flex-grow-1" >
<mat-form-field class="date-hour-picker">
<input matInput [ngxMatDatetimePicker]="picker1"
@@ -113,7 +141,10 @@
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div (click)="openFim()" class="ion-input-class flex-grow-1">
<!--
[className]="Form?.get('Subject')?.invalid ? 'input-error ion-input-class flex-grow-1' : 'ion-input-class ion-input-class flex-grow-1' "
-->
<div (click)="openFim()" class="ion-input-class flex-grow-1" >
<mat-form-field class="date-hour-picker">
<input matInput [ngxMatDatetimePicker]="fim"
@@ -144,7 +175,7 @@
</div>
<div class="ion-input-class flex-grow-1 d-flex justify-center align-center material-inputs materia-top">
<mat-form-field floatLabel="never" class="width-100" value="false" interface="action-sheet" required>
<mat-form-field appearance="none" floatLabel="never" class="width-100" value="false" interface="action-sheet" required>
<mat-select placeholder="Selecione repetição*" [(ngModel)]="postEvent.IsRecurring">
<mat-option value="false">
Não se repete
@@ -61,8 +61,8 @@ export class NewEventPage implements OnInit {
public showSeconds = false;
public touchUi = false;
public enableMeridian = false;
public minDate: any;
public maxDate: any;
public minDate = new Date();
public maxDate = '';
public stepHour = 1;
public stepMinute = 5;
public stepSecond = 5;
@@ -71,7 +71,7 @@ export class NewEventPage implements OnInit {
@Input() profile:string;
@Input() selectedSegment: string;
@Input() selectedDate: Date;
@Input() taskParticipants: EventPerson[];
@Input() taskParticipants: EventPerson[] = [];
@Input() taskParticipantsCc: any = [];
@Output() setIntervenient = new EventEmitter<any>();
@@ -94,6 +94,9 @@ export class NewEventPage implements OnInit {
@ViewChild('inicio') inicio: any;
@ViewChild('picker1') picker1: any;
Form: any = {}
validateFrom = false
public options = [
{ value: true, label: 'True' },
@@ -118,7 +121,6 @@ export class NewEventPage implements OnInit {
return this.dateControlEnd.value
}
constructor(
private modalController: ModalController,
private eventService: EventsService,
@@ -154,7 +156,7 @@ export class NewEventPage implements OnInit {
let selectedEndDate = new Date(this.selectedDate);
/* Set + 30minutes to seleted datetime */
selectedEndDate.setMinutes(this.selectedDate.getMinutes() + 30) ;
this.minDate = this.selectedDate.toString();
if(this.selectedSegment != "Combinada"){
this.postEvent ={
@@ -222,6 +224,46 @@ export class NewEventPage implements OnInit {
this.date = new Date(2021,9,4,5,6,7);
this.getDatepickerData()
this.injectValidation()
}
runValidation() {
this.validateFrom = true
}
injectValidation() {
this.Form = new FormGroup({
Subject: new FormControl(this.postEvent.Subject, [
Validators.required,
Validators.minLength(4)
]),
Location: new FormControl(this.postEvent.Location, [
Validators.required,
]),
CalendarName: new FormControl(this.postEvent.CalendarName),
Categories: new FormControl(this.postEvent.Categories[0], [
Validators.required
]),
dateStart: new FormControl(this.dateStart, [
Validators.required
]),
dateEnd: new FormControl(this.dateEnd, [
Validators.required
]),
IsRecurring: new FormControl(this.postEvent.IsRecurring, [
Validators.required
]),
participantes: new FormControl(this.participantes, [
Validators.required
]),
})
}
get participantes() {
return this.taskParticipantsCc.concat(this.taskParticipants)
}
openInicio() {
@@ -283,7 +325,12 @@ export class NewEventPage implements OnInit {
}
async save(){
async save() {
this.runValidation()
// dont runt this function
if (!this.Form.valid) return false
this.getDatepickerData()