Duration picker alpha-version done

This commit is contained in:
tiago.kayaya
2021-01-06 15:28:42 +01:00
parent 23ee5d8862
commit 3f449abc3e
7 changed files with 167 additions and 19 deletions
@@ -30,15 +30,7 @@
<ion-icon slot="start" src="assets/images/icons-duration.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-datetime
placeholder="Duração"
displayFormat="D MMM YYYY H:mm"
minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="2018"
max="2022"
>
</ion-datetime>
<ion-input (click)="showPicker()" [(ngModel)]="displayDuration" placeholder="Duração"></ion-input>
</div>
</div>
</div>
+132 -1
View File
@@ -1,5 +1,7 @@
import { analyzeAndValidateNgModules } from '@angular/compiler';
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalController, PickerController, PopoverController } from '@ionic/angular';
import { GroupDurationPage } from 'src/app/shared/popover/group-duration/group-duration.page';
import { ContactsPage } from './contacts/contacts.page';
@Component({
@@ -9,9 +11,13 @@ import { ContactsPage } from './contacts/contacts.page';
})
export class NewGroupPage implements OnInit {
showLoader: boolean;
displayDuration: any;
showDuration: boolean;
selectedDuration = ['','',''];
constructor(
private pickerController: PickerController,
private popoverController: PopoverController,
private modalController: ModalController,
) {
@@ -39,5 +45,130 @@ export class NewGroupPage implements OnInit {
modal.onDidDismiss();
}
async setDuration(ev: any) {
const popover = await this.popoverController.create({
component: GroupDurationPage,
cssClass: 'group-duration',
event: ev,
translucent: true
});
return await popover.present();
}
async showPicker(){
const picker = await this.pickerController.create({
cssClass: '',
buttons: [
{
text: 'Cancelar', role: 'cancel', cssClass: 'btn-cancel'
},
{
text: 'Ok',
cssClass: 'btn-cancel',
handler:(value:any)=>{
console.log('button done pressed');
this.selectedDuration = [
value.days.value,
value.hours.value,
value.minutes.value,
]
console.log(this.selectedDuration);
if(value.days.value != null && value.hours.value != null && value.minutes.value != null){
if(value.days.value > 0){
if(value.days.value == 1){
if(value.hours.value == 1){
this.displayDuration = value.days.value + " day " +
value.hours.value + " hora " +
value.minutes.value + " minutos";
}
else{
this.displayDuration = value.days.value + " days " +
value.hours.value + " horas " +
value.minutes.value + " minutos";
}
}
else{
if(value.hours.value == 1){
this.displayDuration = value.days.value + " days " +
value.hours.value + " hora " +
value.minutes.value + " minutos";
}
else{
this.displayDuration = value.days.value + " days " +
value.hours.value + " horas " +
value.minutes.value + " minutos";
}
}
}
else{
if(value.hours.value == 1){
this.displayDuration = value.hours.value + " hora " +
value.minutes.value + " minutos";
}
else{
this.displayDuration = value.hours.value + " horas " +
value.minutes.value + " minutos";
}
}
}
},
},
],
columns: [
{
name: 'days',
prefix: 'Dias',
options: [
{ text: '0', value: 0 },
{ text: '1', value: 1 },
{ text: '2', value: 2 },
{ text: '3', value: 3 },
{ text: '4', value: 4 },
]
},
{
name: 'hours',
prefix: 'Horas',
options: [
{ text: '0', value: 0 },
{ text: '1', value: 1 },
{ text: '2', value: 2 },
{ text: '3', value: 3 },
{ text: '4', value: 4 },
{ text: '5', value: 5 },
{ text: '6', value: 6 },
{ text: '7', value: 7 },
{ text: '8', value: 8 },
]
},
{
name: 'minutes',
prefix: 'Minutos',
selectedIndex: 3,
options: [
{ text: '0', value: 0 },
{ text: '5', value: 5 },
{ text: '10', value: 10 },
{ text: '15', value: 15 },
{ text: '20', value: 20 },
{ text: '25', value: 25 },
{ text: '30', value: 30 },
{ text: '35', value: 35 },
{ text: '45', value: 45 },
{ text: '50', value: 50 },
{ text: '55', value: 55 },
]
}
]
});
await picker.present();
picker.onDidDismiss().then(async data =>{
let day = await picker.getColumn('days');
let hour = await picker.getColumn('hours');
let minutes = await picker.getColumn('minutes');
});
}
}
@@ -1,9 +1,19 @@
<ion-header>
<ion-toolbar>
<ion-title>group-duration</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="p-header">
<h3>Duração</h3>
</div>
<div class="picker">
</div>
<div class="p-buttons">
<ion-row>
<ion-col>
<button (click)="close()" full class="btn-cancel" shape="round" >Cancelar</button>
</ion-col>
<ion-col>
<button class="btn-ok" shape="round" >Ok</button>
</ion-col>
</ion-row>
</div>
</ion-content>
@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { PopoverController } from '@ionic/angular';
@Component({
selector: 'app-group-duration',
@@ -7,9 +8,14 @@ import { Component, OnInit } from '@angular/core';
})
export class GroupDurationPage implements OnInit {
constructor() { }
constructor(
public popoverController: PopoverController,
) { }
ngOnInit() {
}
close(){
this.popoverController.dismiss();
}
}
+1 -1
View File
@@ -1,7 +1,7 @@
export const environment = {
production: true,
apiURL: 'http://gpr-dev-01.gabinetedigital.local/GabineteDigital.Services/v1/api/',
apiChatUrl: 'http://192.168.100.111:3000/api/v1/',
apiChatUrl: 'http://chat.gabinetedigital.local:3000/api/v1/',
domain: 'gabinetedigital.local',
defaultuser: '',
defaultuserpwd: ''
+1 -1
View File
@@ -5,7 +5,7 @@
export const environment = {
production: false,
apiURL: 'http://gpr-dev-01.gabinetedigital.local/GabineteDigital.Services/V3/api/',
apiChatUrl: 'http://192.168.100.111:3000/api/v1/',
apiChatUrl: 'http://chat.gabinetedigital.local:3000/api/v1/',
domain: 'gabinetedigital.local',
defaultuser: 'paulo.pinto',
defaultuserpwd: 'tabteste@006'
+9
View File
@@ -299,6 +299,15 @@
max-height: 210px;
min-height: 210px;
}
.group-duration .popover-content{
width: 100% !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
top: calc(100% - 500px) !important;
max-height: 500px;
min-height: 500px;
}
/* .event-actions-popover ion-list{
} */