mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 21:06:06 +00:00
Merge branch 'developer' of https://bitbucket.org/equilibriumito/gabinete-digital into developer
This commit is contained in:
@@ -61,7 +61,8 @@ export class ProfileComponent implements OnInit {
|
||||
componentProps: {
|
||||
}
|
||||
});
|
||||
return await modal.present();
|
||||
|
||||
modal.present();
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,26 +1,61 @@
|
||||
|
||||
<ion-content>
|
||||
|
||||
<div class="main-content d-flex flex-column align-center justify-center">
|
||||
<div class="div-top-header">
|
||||
|
||||
<div class="div-logo">
|
||||
<img src='assets/images/logo-bg.png' alt='logo'>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<ion-title class="title">Digite o PIN novo</ion-title>
|
||||
<div class="d-flex pt-25">
|
||||
<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">1</div> <div class="circle">2</div> <div class="circle">3</div>
|
||||
<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">4</div> <div class="circle">5</div> <div class="circle">6</div>
|
||||
<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">7</div> <div class="circle">8</div> <div class="circle">9</div>
|
||||
<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">0</div>
|
||||
<div class="circle" (click)="setCode('0')">0</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div (click)="clearCode()" class="d-flex align-center justify-center pt-25 clear">
|
||||
Limpar
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
<ion-footer class=" footer-container ion-no-border">
|
||||
<div class="d-flex justify-space-between">
|
||||
<ion-buttons slot="start" >
|
||||
<ion-button (click)="close()" class="btn-cancel" fill="clear" color="#061b52" >
|
||||
<ion-label>Cancelar</ion-label>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="end" >
|
||||
<ion-button (click)="save()" class="btn-ok" fill="clear" color="#fff" >
|
||||
<ion-label>Gravar</ion-label>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</div>
|
||||
|
||||
</ion-footer>
|
||||
|
||||
@@ -1,3 +1,22 @@
|
||||
@import '~src/function.scss';
|
||||
|
||||
.div-top-header{
|
||||
margin: 0 em(20px);
|
||||
padding-top: em(15px);
|
||||
border: 0!important;
|
||||
}
|
||||
|
||||
.div-logo{
|
||||
background: transparent;
|
||||
width: em(140px);
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
.div-logo img{
|
||||
width: 100%;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
:host{
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
@@ -6,23 +25,23 @@
|
||||
background-image: url("/assets/background/auth.svg");
|
||||
background-size: 686px 674px;
|
||||
background-position: center;
|
||||
background-position-y: 0px;
|
||||
background-position-y: 78px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
.circle{
|
||||
color: white;
|
||||
width: 85px;
|
||||
height: 85px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 19pt;
|
||||
background: #44b5ea;
|
||||
border-radius: 56px;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 30px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.title{
|
||||
@@ -31,5 +50,26 @@
|
||||
|
||||
.terminal {
|
||||
padding-top: 112px;
|
||||
margin-left: -9px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.clear{
|
||||
color: #44b5ea;
|
||||
font-size: 12pt;
|
||||
}
|
||||
.dot-active{
|
||||
background: #44b5ea;
|
||||
}
|
||||
|
||||
.dot{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 0 10px 0 0;
|
||||
border: 3px solid #44b5ea;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50px;
|
||||
-webkit-border-radius: 50px;
|
||||
-moz-border-radius: 50px;
|
||||
-ms-border-radius: 50px;
|
||||
-o-border-radius: 50px;
|
||||
}
|
||||
@@ -1,4 +1,7 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { BadRequestComponent } from '../popover/bad-request/bad-request.component';
|
||||
import { SuccessMessageComponent } from '../popover/success-message/success-message.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-pin',
|
||||
@@ -7,9 +10,77 @@ import { Component, OnInit } from '@angular/core';
|
||||
})
|
||||
export class PinPage implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
code = []
|
||||
constructor( private modalController: ModalController,) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
setCode(code: string) {
|
||||
if(this.code.length < 4) {
|
||||
this.code.push(code)
|
||||
} else {
|
||||
this.clearCode()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
clearCode(){
|
||||
this.code =[]
|
||||
}
|
||||
|
||||
close() {
|
||||
/* console.log(this.isEventEdited); */
|
||||
alert('close modal')
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
|
||||
async save() {
|
||||
if(this.code.length == 4) {
|
||||
|
||||
this.successMessage()
|
||||
localStorage.setItem('PIN', this.code.join(''))
|
||||
} else {
|
||||
this.badRequest()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async successMessage(message?: string) {
|
||||
|
||||
const modal = await this.modalController.create({
|
||||
component: SuccessMessageComponent,
|
||||
componentProps: {
|
||||
message: message || 'Processo efetuado' ,
|
||||
},
|
||||
cssClass: 'modal modal-desktop'
|
||||
});
|
||||
|
||||
modal.present()
|
||||
|
||||
setTimeout(()=>{
|
||||
|
||||
this.close()
|
||||
modal.dismiss()
|
||||
},3000)
|
||||
|
||||
}
|
||||
|
||||
async badRequest(message?: string) {
|
||||
const modal = await this.modalController.create({
|
||||
component: BadRequestComponent,
|
||||
componentProps: {
|
||||
message: message || 'Processo não efetuado' ,
|
||||
},
|
||||
cssClass: 'modal modal-desktop'
|
||||
});
|
||||
|
||||
modal.present()
|
||||
|
||||
setTimeout(()=>{
|
||||
modal.dismiss()
|
||||
},3000)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user