mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-18 12:37:53 +00:00
Duration picker alpha-version done
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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,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: ''
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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{
|
||||
} */
|
||||
|
||||
Reference in New Issue
Block a user