Skip to content
Snippets Groups Projects
Commit c8305a62 authored by Tifenn Guillas's avatar Tifenn Guillas
Browse files

Change Timepicker => DONE

parent 6b59add2
No related branches found
No related tags found
2 merge requests!68Develop,!33Change Timepicker => DONE
ng-select {
width: 80px;
}
\ No newline at end of file
<div class="form-group row">
<label class="col-3 col-form-label">{{ label }}</label>
<div class="col">
<input type="text" [placeholder]="getPlaceholder()" class="form-control" [formControl]="date"
[bsValue]="date.value" [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }" (bsValueChange)="change()"
<input type="text" placeholder="Pick a date..." class="form-control" [formControl]="date"
[bsValue]="date.value" [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }" (change)="change()"
bsDatepicker>
</div>
<div class="col">
<timepicker [(ngModel)]="time" [showMeridian]="false" [showSpinners]="false" [disabled]="isTimeDisabled"
(change)="change()"></timepicker>
<div class="row">
<div class="col-auto pr-2">
<ng-select (change)="change()" [formControl]="hh" [multiple]="false" placeholder="HH...">
<ng-option *ngFor="let hour of hours" [value]="hour">{{ hour }}</ng-option>
</ng-select>
</div>
<div class="col-auto p-0">:</div>
<div class="col-auto pl-2">
<ng-select (change)="change()" [formControl]="mm" [multiple]="false" placeholder="MM...">
<ng-option *ngFor="let min of minutes" [value]="min">{{ min }}</ng-option>
</ng-select>
</div>
</div>
</div>
<div class="col-2 align-self-center text-center">
<button class="btn btn-outline-success" *ngIf="!date.disabled" [hidden]="!isValidFields"
<button class="btn btn-outline-success" *ngIf="!date.disabled || !hh.disabled || !mm.disabled" [hidden]="!isValidFields"
(click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
</div>
</div>
\ No newline at end of file
......@@ -6,7 +6,7 @@ import { Criterion, DatetimeCriterion } from '../../store/model';
@Component({
selector: 'app-datetime',
templateUrl: 'datetime.component.html',
styleUrls: ['time.component.css'],
styleUrls: ['datetime.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DatetimeComponent {
......@@ -19,12 +19,20 @@ export class DatetimeComponent {
}
@Output() add: EventEmitter<DatetimeCriterion> = new EventEmitter();
hours: string[] = [];
minutes: string[] = [];
date = new FormControl('');
time: Date = null;
isTimeDisabled: boolean;
isValidFields: boolean = false;
hh = new FormControl();
mm = new FormControl();
isValidFields = false;
datetime: Date = new Date();
constructor() {
this.hours = this.initTime(24);
this.minutes = this.initTime(60);
}
addCriterion() {
const fd = new DatetimeCriterion(this.id, this.datetime);
this.add.emit(fd);
......@@ -34,30 +42,36 @@ export class DatetimeComponent {
if (!criterion) {
this.date.setValue('');
this.date.enable();
this.time = null;
this.isTimeDisabled = false;
this.hh.reset();
this.hh.enable();
this.mm.reset();
this.mm.enable();
this.isValidFields = false;
} else {
console.log('pas vide');
const c = criterion as DatetimeCriterion;
const hour = ('0' + (c.value.getHours())).slice(-2);
const minute = ('0' + (c.value.getMinutes())).slice(-2);
this.date.setValue(c.value);
this.date.disable();
this.time = c.value;
this.isTimeDisabled = true;
this.hh.setValue(hour);
this.hh.disable();
this.mm.setValue(minute);
this.mm.disable();
this.isValidFields = true;
}
}
getPlaceholder(): string {
if (!this.placeholder) {
return '';
} else {
return this.placeholder;
initTime(time: number): string[] {
const array: string[] = [];
for (let i = 0; i < time; i++) {
const t = ('0' + i).slice(-2);
array.push(t);
}
return array;
}
change(): void {
if (!this.time || !this.date.value) {
if (!this.date.value || !this.hh.value || !this.mm.value) {
this.isValidFields = false;
} else {
this.isValidFields = true;
......@@ -66,8 +80,8 @@ export class DatetimeComponent {
this.date.value.getMonth(),
this.date.value.getDate());
this.datetime.setHours(
this.time.getHours(),
this.time.getMinutes());
this.hh.value,
this.mm.value);
}
}
}
ng-select {
width: 80px;
}
\ No newline at end of file
<div class="form-group row">
<label class="col-3 col-form-label">{{label}}</label>
<div class="col">
<timepicker [(ngModel)]="time" [showMeridian]="false" [showSpinners]="false" [disabled]="isTimeDisabled"
(change)="change()"></timepicker>
<div class="row">
<div class="col-auto pr-2">
<ng-select [formControl]="hh" [multiple]="false" placeholder="HH...">
<ng-option *ngFor="let hour of hours" [value]="hour">{{ hour }}</ng-option>
</ng-select>
</div>
<div class="col-auto p-0">:</div>
<div class="col-auto pl-2">
<ng-select [formControl]="mm" [multiple]="false" placeholder="MM...">
<ng-option *ngFor="let min of minutes" [value]="min">{{ min }}</ng-option>
</ng-select>
</div>
</div>
</div>
<div class="col-2 align-self-center text-center">
<button class="btn btn-outline-success" *ngIf="!isTimeDisabled" [hidden]="!isValidTime"
(click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
<button class="btn btn-outline-success" *ngIf="!hh.disabled || !mm.disabled" [hidden]="!hh.value || !mm.value"
(click)="addCriterion()">
<i class="fas fa-plus-circle"></i>
</button>
</div>
</div>
\ No newline at end of file
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Criterion, TimeCriterion } from '../../store/model';
......@@ -17,33 +18,43 @@ export class TimeComponent {
}
@Output() add: EventEmitter<TimeCriterion> = new EventEmitter();
time: Date = null;
isTimeDisabled: boolean;
isValidTime: boolean = false;
public hours: string[] = [];
public minutes: string[] = [];
hh = new FormControl();
mm = new FormControl();
constructor() {
this.hours = this.initTime(24);
this.minutes = this.initTime(60);
}
addCriterion() {
const fd = new TimeCriterion(this.id, this.time);
this.add.emit(fd);
const time = new TimeCriterion(this.id, this.hh.value + ':' + this.mm.value);
this.add.emit(time);
}
getDefault(criterion: Criterion): void {
if (!criterion) {
this.time = null;
this.isTimeDisabled = false;
this.isValidTime = false;
this.hh.reset();
this.hh.enable();
this.mm.reset();
this.mm.enable();
} else {
const c = criterion as TimeCriterion;
this.time = c.value;
this.isTimeDisabled = true;
this.isValidTime = true;
this.hh.setValue(c.value.slice(0, 2));
this.hh.disable();
this.mm.setValue(c.value.slice(3, 5));
this.mm.disable();
}
}
change(): void {
if (!this.time) {
this.isValidTime = false;
} else {
this.isValidTime = true;
initTime(time: number): string[] {
const array: string[] = [];
for (let i = 0; i < time; i++) {
const t = ('0' + i).slice(-2);
array.push(t);
}
return array;
}
}
......@@ -9,16 +9,22 @@ export class DatetimeCriterion extends Criterion {
}
printCriterion(): string {
const month = ('0'+(this.value.getMonth()+1)).slice(-2);
const date = this.value.getFullYear() + '-' + month + '-' + this.value.getDate();
const time = this.value.getHours() + ':' + this.value.getMinutes();
const month = ('0' + (this.value.getMonth() + 1)).slice(-2);
const day = ('0' + (this.value.getDate())).slice(-2);
const hour = ('0' + (this.value.getHours())).slice(-2);
const minute = ('0' + (this.value.getMinutes())).slice(-2);
const date = this.value.getFullYear() + '-' + month + '-' + day;
const time = hour + ':' + minute;
return date + ' ' + time;
}
getCriterionStr(): string {
const month = ('0'+(this.value.getMonth()+1)).slice(-2);
const date = this.value.getFullYear() + '-' + month + '-' + this.value.getDate();
const time = this.value.getHours() + ':' + this.value.getMinutes();
const month = ('0' + (this.value.getMonth() + 1)).slice(-2);
const day = ('0' + (this.value.getDate())).slice(-2);
const hour = ('0' + (this.value.getHours())).slice(-2);
const minute = ('0' + (this.value.getMinutes())).slice(-2);
const date = this.value.getFullYear() + '-' + month + '-' + day;
const time = hour + ':' + minute;
return this.id + ':eq:' + date + '.' + time;
}
}
import { Criterion } from './criterion.model';
export class TimeCriterion extends Criterion {
value: Date;
value: string;
constructor(id: number, value: Date) {
constructor(id: number, value: string) {
super(id);
this.value = value;
}
printCriterion(): string {
return this.value.getHours() + ':' + this.value.getMinutes();
return this.value;
}
getCriterionStr(): string {
return this.id + ':gt:' + this.value.getHours() + '.' + this.value.getMinutes();
return this.id + ':gt:' + this.value;
}
}
......@@ -4,9 +4,17 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { ToastrModule } from 'ngx-toastr';
import { ModalModule, TabsModule, AccordionModule, CollapseModule, PopoverModule, PaginationModule, BsDatepickerModule, TimepickerModule } from 'ngx-bootstrap';
import { BsModalService } from 'ngx-bootstrap/modal';
import { NgSelectModule } from '@ng-select/ng-select';
import {
ModalModule,
TabsModule,
AccordionModule,
CollapseModule,
PopoverModule,
PaginationModule,
BsDatepickerModule
} from 'ngx-bootstrap';
@NgModule({
imports: [
......@@ -21,7 +29,6 @@ import { NgSelectModule } from '@ng-select/ng-select';
PopoverModule.forRoot(),
PaginationModule.forRoot(),
BsDatepickerModule.forRoot(),
TimepickerModule.forRoot(),
NgSelectModule,
RouterModule
],
......@@ -37,7 +44,6 @@ import { NgSelectModule } from '@ng-select/ng-select';
PopoverModule,
PaginationModule,
BsDatepickerModule,
TimepickerModule,
NgSelectModule
],
providers: [BsModalService]
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment