forked from tykayn/funky-framadate-front
⚡ erasable inputs on first config screen ok
This commit is contained in:
parent
3808f19425
commit
3ada66ac5f
@ -1,6 +1,7 @@
|
|||||||
import {Component} from '@angular/core';
|
import {Component, Inject} from '@angular/core';
|
||||||
import {TranslateService} from '@ngx-translate/core';
|
import {TranslateService} from '@ngx-translate/core';
|
||||||
import {Router} from '@angular/router';
|
import {Router} from '@angular/router';
|
||||||
|
import {DOCUMENT} from "@angular/common";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
@ -21,6 +22,7 @@ export class AppComponent {
|
|||||||
private step: string;
|
private step: string;
|
||||||
|
|
||||||
constructor(private translate: TranslateService,
|
constructor(private translate: TranslateService,
|
||||||
|
@Inject(DOCUMENT) private document,
|
||||||
private route: Router) {
|
private route: Router) {
|
||||||
this.translate.setDefaultLang(this.currentLang);
|
this.translate.setDefaultLang(this.currentLang);
|
||||||
this.detectCurrentTabOnRouteChange();
|
this.detectCurrentTabOnRouteChange();
|
||||||
@ -29,6 +31,7 @@ export class AppComponent {
|
|||||||
|
|
||||||
detectCurrentTabOnRouteChange() {
|
detectCurrentTabOnRouteChange() {
|
||||||
this.route.events.subscribe((event: any) => {
|
this.route.events.subscribe((event: any) => {
|
||||||
|
this.scrollGoToTop();
|
||||||
|
|
||||||
if (event.url) {
|
if (event.url) {
|
||||||
|
|
||||||
@ -68,4 +71,8 @@ export class AppComponent {
|
|||||||
toggleMenu() {
|
toggleMenu() {
|
||||||
this.menuVisible = !this.menuVisible;
|
this.menuVisible = !this.menuVisible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
scrollGoToTop() {
|
||||||
|
this.document.documentElement.scrollTop = 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -28,7 +28,7 @@
|
|||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class="description"
|
class="description"
|
||||||
for="email"
|
for="sendemail"
|
||||||
i18n
|
i18n
|
||||||
>
|
>
|
||||||
<i class='fa fa-envelope' ></i >
|
<i class='fa fa-envelope' ></i >
|
||||||
@ -38,7 +38,7 @@
|
|||||||
[(ngModel)]="config.myEmail"
|
[(ngModel)]="config.myEmail"
|
||||||
class='input'
|
class='input'
|
||||||
autofocus="autofocus"
|
autofocus="autofocus"
|
||||||
id="email"
|
id="sendemail"
|
||||||
name="mail"
|
name="mail"
|
||||||
required="required"
|
required="required"
|
||||||
type="email"
|
type="email"
|
||||||
@ -47,6 +47,7 @@
|
|||||||
[disabled]="!config.myEmail || !config.myEmail.length"
|
[disabled]="!config.myEmail || !config.myEmail.length"
|
||||||
[ngClass]="{'btn--primary': config.myEmail}"
|
[ngClass]="{'btn--primary': config.myEmail}"
|
||||||
class="btn btn--full"
|
class="btn btn--full"
|
||||||
|
id='sendemailbutton'
|
||||||
i18n-value="'config.find_button'|translate"
|
i18n-value="'config.find_button'|translate"
|
||||||
type="submit"
|
type="submit"
|
||||||
/>
|
/>
|
||||||
|
@ -1,25 +1,25 @@
|
|||||||
<div i18n>
|
<div i18n >
|
||||||
{{"dates.title"|translate}}
|
{{"dates.title"|translate}}
|
||||||
</div>
|
</div >
|
||||||
|
|
||||||
<div>
|
<div >
|
||||||
<label for="multi_hours">
|
<label for="multi_hours" >
|
||||||
<span>
|
<span >
|
||||||
{{"dates.hours_different"|translate}}
|
{{"dates.hours_different"|translate}}
|
||||||
</span>
|
</span >
|
||||||
<select
|
<select
|
||||||
[(ngModel)]="config.allowSeveralHours"
|
[(ngModel)]="config.allowSeveralHours"
|
||||||
id="multi_hours"
|
id="multi_hours"
|
||||||
name="multi_hours"
|
name="multi_hours"
|
||||||
>
|
>
|
||||||
<option value="true">{{"dates.multiple.different"|translate}}</option>
|
<option value="true" >{{"dates.multiple.different"|translate}}</option >
|
||||||
<option value="false">{{"dates.multiple.identical"|translate}}</option>
|
<option value="false" >{{"dates.multiple.identical"|translate}}</option >
|
||||||
</select>
|
</select >
|
||||||
<span i18n>
|
<span i18n >
|
||||||
{{"dates.hours_each_day"|translate}}
|
{{"dates.hours_each_day"|translate}}
|
||||||
</span>
|
</span >
|
||||||
</label>
|
</label >
|
||||||
</div>
|
</div >
|
||||||
|
|
||||||
<button
|
<button
|
||||||
(click)="addDate()"
|
(click)="addDate()"
|
||||||
@ -27,7 +27,7 @@
|
|||||||
id="add_date_button"
|
id="add_date_button"
|
||||||
>
|
>
|
||||||
{{"dates.add"|translate}}
|
{{"dates.add"|translate}}
|
||||||
</button>
|
</button >
|
||||||
<button
|
<button
|
||||||
(click)="showDateInterval = !showDateInterval "
|
(click)="showDateInterval = !showDateInterval "
|
||||||
[ngClass]="{active: showDateInterval}"
|
[ngClass]="{active: showDateInterval}"
|
||||||
@ -35,40 +35,48 @@
|
|||||||
id="toggle_interval_button"
|
id="toggle_interval_button"
|
||||||
>
|
>
|
||||||
{{"dates.add_interval"|translate}}
|
{{"dates.add_interval"|translate}}
|
||||||
</button>
|
</button >
|
||||||
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
(click)="emptyAll()"
|
(click)="emptyAll()"
|
||||||
class="btn btn-warning"
|
class="btn btn-warning"
|
||||||
id="empty_button"
|
id="empty_button"
|
||||||
>{{"dates.empty"|translate}}
|
>{{"dates.empty"|translate}}
|
||||||
</button>
|
</button >
|
||||||
<section *ngIf="showDateInterval" class="date-interval">
|
<section
|
||||||
|
*ngIf="showDateInterval"
|
||||||
|
class="date-interval" >
|
||||||
<!-- TODO à mettre en popup-->
|
<!-- TODO à mettre en popup-->
|
||||||
<hr>
|
<hr >
|
||||||
<h2> {{"dates.add_interval"|translate}}</h2>
|
<h2 > {{"dates.add_interval"|translate}}</h2 >
|
||||||
<p>
|
<p >
|
||||||
{{"dates.interval_propose"|translate}}
|
{{"dates.interval_propose"|translate}}
|
||||||
<input (change)="countDays()" [(ngModel)]="startDateInterval" type="date">
|
<input
|
||||||
|
(change)="countDays()"
|
||||||
|
[(ngModel)]="startDateInterval"
|
||||||
|
type="date" >
|
||||||
{{"dates.interval_span"|translate}}
|
{{"dates.interval_span"|translate}}
|
||||||
<input (change)="countDays()" [(ngModel)]="endDateInterval" type="date">
|
<input
|
||||||
</p>
|
(change)="countDays()"
|
||||||
<button (click)="addIntervalOfDates()"
|
[(ngModel)]="endDateInterval"
|
||||||
class="btn btn-block">
|
type="date" >
|
||||||
|
</p >
|
||||||
|
<button
|
||||||
|
(click)="addIntervalOfDates()"
|
||||||
|
class="btn btn-block" >
|
||||||
{{"dates.interval_button"|translate}}
|
{{"dates.interval_button"|translate}}
|
||||||
{{intervalDays}}
|
{{intervalDays}}
|
||||||
{{"dates.interval_button_dates"|translate}}
|
{{"dates.interval_button_dates"|translate}}
|
||||||
</button>
|
</button >
|
||||||
<hr>
|
<hr >
|
||||||
</section>
|
</section >
|
||||||
<div class="dates-list">
|
<div class="dates-list" >
|
||||||
<span class="count-dates">
|
<span class="count-dates" >
|
||||||
{{config.timeList.length}}
|
{{config.timeList.length}}
|
||||||
</span>
|
</span >
|
||||||
<span class="count-dates-txt">
|
<span class="count-dates-txt" >
|
||||||
{{"dates.count_time"|translate}}
|
{{"dates.count_time"|translate}}
|
||||||
</span>
|
</span >
|
||||||
<button
|
<button
|
||||||
(click)="addTime()"
|
(click)="addTime()"
|
||||||
*ngIf="config.allowSeveralHours=='false'"
|
*ngIf="config.allowSeveralHours=='false'"
|
||||||
@ -76,7 +84,7 @@
|
|||||||
id="add_time_button"
|
id="add_time_button"
|
||||||
>
|
>
|
||||||
{{"dates.add_time"|translate}}
|
{{"dates.add_time"|translate}}
|
||||||
</button>
|
</button >
|
||||||
|
|
||||||
<div
|
<div
|
||||||
*ngIf="'false'==config.allowSeveralHours"
|
*ngIf="'false'==config.allowSeveralHours"
|
||||||
@ -91,16 +99,19 @@
|
|||||||
name="timeChoices_{{id}}"
|
name="timeChoices_{{id}}"
|
||||||
type="name"
|
type="name"
|
||||||
>
|
>
|
||||||
<button (click)="config.timeList.splice(id, 1)" class="btn btn-warning">X</button>
|
<button
|
||||||
</div>
|
(click)="config.timeList.splice(id, 1)"
|
||||||
</div>
|
class="btn btn-warning" >X
|
||||||
<hr>
|
</button >
|
||||||
<span class="count-dates">
|
</div >
|
||||||
|
</div >
|
||||||
|
<hr >
|
||||||
|
<span class="count-dates" >
|
||||||
{{config.dateList.length}}
|
{{config.dateList.length}}
|
||||||
</span>
|
</span >
|
||||||
<span>
|
<span >
|
||||||
{{"dates.count_dates"|translate}}
|
{{"dates.count_dates"|translate}}
|
||||||
</span>
|
</span >
|
||||||
<div
|
<div
|
||||||
*ngFor="let choice of config.dateList; index as id"
|
*ngFor="let choice of config.dateList; index as id"
|
||||||
class="date-choice"
|
class="date-choice"
|
||||||
@ -114,14 +125,14 @@
|
|||||||
(click)="config.dateList.splice(id, 1)"
|
(click)="config.dateList.splice(id, 1)"
|
||||||
class="btn btn-warning"
|
class="btn btn-warning"
|
||||||
>X
|
>X
|
||||||
</button>
|
</button >
|
||||||
<button
|
<button
|
||||||
(click)="addTimeToDate(choice, id)"
|
(click)="addTimeToDate(choice, id)"
|
||||||
*ngIf="config.allowSeveralHours=='true'"
|
*ngIf="config.allowSeveralHours=='true'"
|
||||||
class="btn btn-primary"
|
class="btn btn-primary"
|
||||||
>
|
>
|
||||||
{{"dates.add_time"|translate}}
|
{{"dates.add_time"|translate}}
|
||||||
</button>
|
</button >
|
||||||
<div
|
<div
|
||||||
*ngIf="'true'==config.allowSeveralHours"
|
*ngIf="'true'==config.allowSeveralHours"
|
||||||
class="several-times"
|
class="several-times"
|
||||||
@ -139,15 +150,21 @@
|
|||||||
(click)="choice.timeList.splice(idTime, 1)"
|
(click)="choice.timeList.splice(idTime, 1)"
|
||||||
class="btn btn-warning"
|
class="btn btn-warning"
|
||||||
>X
|
>X
|
||||||
</button>
|
</button >
|
||||||
</div>
|
</div >
|
||||||
</div>
|
</div >
|
||||||
</div>
|
</div >
|
||||||
</div>
|
</div >
|
||||||
|
|
||||||
<a
|
<a
|
||||||
[routerLink]="'/step/end'"
|
[routerLink]="'/step/end'"
|
||||||
class="btn btn-block"
|
class="btn btn--full btn--primary"
|
||||||
>
|
>
|
||||||
C'est parfait!
|
C'est parfait!
|
||||||
</a>
|
</a >
|
||||||
|
<a
|
||||||
|
[routerLink]="'/step/home'"
|
||||||
|
class="prev"
|
||||||
|
>
|
||||||
|
Retour
|
||||||
|
</a >
|
||||||
|
@ -42,6 +42,7 @@
|
|||||||
placeholder="{{'creation.choose_title_placeholder'|translate}}"
|
placeholder="{{'creation.choose_title_placeholder'|translate}}"
|
||||||
type="name"
|
type="name"
|
||||||
>
|
>
|
||||||
|
<framadate-erasable-input [(inputModel)]="config.title" ></framadate-erasable-input >
|
||||||
</div >
|
</div >
|
||||||
|
|
||||||
<div >
|
<div >
|
||||||
@ -55,6 +56,7 @@
|
|||||||
placeholder="{{'creation.name_placeholder'|translate}}"
|
placeholder="{{'creation.name_placeholder'|translate}}"
|
||||||
type="name"
|
type="name"
|
||||||
>
|
>
|
||||||
|
<framadate-erasable-input [(inputModel)]="config.myName" ></framadate-erasable-input >
|
||||||
</div >
|
</div >
|
||||||
|
|
||||||
<div >
|
<div >
|
||||||
@ -64,6 +66,7 @@
|
|||||||
i18n
|
i18n
|
||||||
>
|
>
|
||||||
{{"creation.description"|translate}}:
|
{{"creation.description"|translate}}:
|
||||||
|
<framadate-erasable-input [(inputModel)]="config.description" ></framadate-erasable-input >
|
||||||
</label >
|
</label >
|
||||||
<br >
|
<br >
|
||||||
<textarea
|
<textarea
|
||||||
|
@ -1,3 +1,6 @@
|
|||||||
<button class="erase" (click)="eraseInput()">
|
<button
|
||||||
<i class="fa fa-times"></i>
|
class="erase btn btn--warning"
|
||||||
</button>
|
[disabled]='!inputModel'
|
||||||
|
(click)="eraseInput()" >
|
||||||
|
<i class="fa fa-times" ></i >
|
||||||
|
</button >
|
||||||
|
@ -14,7 +14,6 @@ export class ErasableInputComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
|
|
||||||
set inputModel(val) {
|
set inputModel(val) {
|
||||||
// this.inputModel = val;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
@ -25,7 +24,7 @@ export class ErasableInputComponent implements OnInit {
|
|||||||
|
|
||||||
eraseInput() {
|
eraseInput() {
|
||||||
this.inputModel = '';
|
this.inputModel = '';
|
||||||
this.inputModelChange.emit(this.inputModel);
|
this.inputModelChange.emit('');
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user