forked from tykayn/funky-framadate-front
fix buttons colours and manage a bit more the date form
This commit is contained in:
parent
2e6723a1f1
commit
f056b0d79a
@ -23,14 +23,18 @@ export const defaultAnswers = [{
|
||||
id: 0,
|
||||
text: 'réponse de démo 1',
|
||||
url: 'https://mastodon.cipherbliss.com/system/media_attachments/files/001/439/118/original/6fcf149bd902841b.png?1579471574',
|
||||
literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`,
|
||||
timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
text: 'réponse 2',
|
||||
url: 'https://mastodon.cipherbliss.com/system/media_attachments/files/001/439/118/original/6fcf149bd902841b.png?1579471574',
|
||||
literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 1}`,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: 'la réponse D',
|
||||
url: 'https://mastodon.cipherbliss.com/system/media_attachments/files/001/439/118/original/6fcf149bd902841b.png?1579471574',
|
||||
literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 2}`,
|
||||
}];
|
||||
|
||||
@ -23,29 +23,33 @@
|
||||
|
||||
<button
|
||||
(click)="addDate()"
|
||||
class="btn btn-primary"
|
||||
class="btn btn--primary"
|
||||
id="add_date_button"
|
||||
>
|
||||
<i class='fa fa-plus' ></i >
|
||||
{{"dates.add"|translate}}
|
||||
</button >
|
||||
<button
|
||||
(click)="showDateInterval = !showDateInterval "
|
||||
[ngClass]="{active: showDateInterval}"
|
||||
class="btn btn-primary"
|
||||
class="btn btn--primary"
|
||||
id="toggle_interval_button"
|
||||
>
|
||||
<i class='fa fa-clock-o' ></i >
|
||||
{{"dates.add_interval"|translate}}
|
||||
</button >
|
||||
|
||||
<button
|
||||
(click)="emptyAll()"
|
||||
class="btn btn-warning"
|
||||
class="btn btn--warning"
|
||||
id="empty_button"
|
||||
>{{"dates.empty"|translate}}
|
||||
>
|
||||
<i class='fa fa-trash' ></i >
|
||||
{{"dates.empty"|translate}}
|
||||
</button >
|
||||
<section
|
||||
*ngIf="showDateInterval"
|
||||
class="date-interval" >
|
||||
class="date-interval " >
|
||||
<!-- TODO à mettre en popup-->
|
||||
<hr >
|
||||
<h2 > {{"dates.add_interval"|translate}}</h2 >
|
||||
@ -60,31 +64,38 @@
|
||||
(change)="countDays()"
|
||||
[(ngModel)]="endDateInterval"
|
||||
type="date" >
|
||||
<br >
|
||||
|
||||
</p >
|
||||
<button
|
||||
(click)="addIntervalOfDates()"
|
||||
class="btn btn-block" >
|
||||
class="btn btn-block btn--primary" >
|
||||
<i class='fa fa-plus' ></i >
|
||||
{{"dates.interval_button"|translate}}
|
||||
{{intervalDays}}
|
||||
{{"dates.interval_button_dates"|translate}}
|
||||
</button >
|
||||
<hr >
|
||||
</section >
|
||||
<div class="dates-list" >
|
||||
<div class="dates-list " >
|
||||
<div class='title' >
|
||||
<span class="count-dates" >
|
||||
{{config.timeList.length}}
|
||||
</span >
|
||||
<span class="count-dates-txt" >
|
||||
<span class="count-dates-txt " >
|
||||
{{"dates.count_time"|translate}}
|
||||
(pour chaque jour)
|
||||
</span >
|
||||
<button
|
||||
(click)="addTime()"
|
||||
*ngIf="config.allowSeveralHours=='false'"
|
||||
class="btn btn-primary pull-right"
|
||||
id="add_time_button"
|
||||
>
|
||||
{{"dates.add_time"|translate}}
|
||||
</button >
|
||||
<button
|
||||
(click)="addTime()"
|
||||
*ngIf="config.allowSeveralHours=='false'"
|
||||
class="btn btn--primary pull-right"
|
||||
id="add_time_button"
|
||||
>
|
||||
<i class='fa fa-plus' ></i >
|
||||
{{"dates.add_time"|translate}}
|
||||
</button >
|
||||
</div >
|
||||
|
||||
<div
|
||||
*ngIf="'false'==config.allowSeveralHours"
|
||||
@ -94,19 +105,24 @@
|
||||
*ngFor="let choice of config.timeList; index as id"
|
||||
class="time-choice"
|
||||
>
|
||||
<label for='timeChoices_{{id}}' >
|
||||
<i class='fa fa-clock-o' ></i >
|
||||
</label >
|
||||
<input
|
||||
[(ngModel)]="choice.literal"
|
||||
name="timeChoices_{{id}}"
|
||||
type="name"
|
||||
id='timeChoices_{{id}}'
|
||||
>
|
||||
|
||||
<button
|
||||
(click)="config.timeList.splice(id, 1)"
|
||||
class="btn btn-warning" >X
|
||||
class="btn btn-warning" ><i class="fa fa-times" ></i >
|
||||
</button >
|
||||
</div >
|
||||
</div >
|
||||
<hr >
|
||||
<span class="count-dates" >
|
||||
<span class="count-dates title" >
|
||||
{{config.dateList.length}}
|
||||
</span >
|
||||
<span >
|
||||
@ -121,15 +137,19 @@
|
||||
name="dateChoices_{{id}}"
|
||||
type="date"
|
||||
>
|
||||
<pre class='debug padded warning' >
|
||||
choice.literal :
|
||||
{{choice.literal|json}}
|
||||
</pre >
|
||||
<button
|
||||
(click)="config.dateList.splice(id, 1)"
|
||||
class="btn btn-warning"
|
||||
>X
|
||||
><i class="fa fa-times" ></i >
|
||||
</button >
|
||||
<button
|
||||
(click)="addTimeToDate(choice, id)"
|
||||
*ngIf="config.allowSeveralHours=='true'"
|
||||
class="btn btn-primary"
|
||||
class="btn btn--primary"
|
||||
>
|
||||
{{"dates.add_time"|translate}}
|
||||
</button >
|
||||
@ -149,7 +169,7 @@
|
||||
<button
|
||||
(click)="choice.timeList.splice(idTime, 1)"
|
||||
class="btn btn-warning"
|
||||
>X
|
||||
><i class="fa fa-times" ></i >
|
||||
</button >
|
||||
</div >
|
||||
</div >
|
||||
|
||||
@ -2,10 +2,20 @@
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.date-interval {
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
:host {
|
||||
input, button {
|
||||
+ button {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@ import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
|
||||
import {ConfigService} from '../../services/config.service';
|
||||
import {BaseComponent} from '../base-page/base.component';
|
||||
import {DOCUMENT} from '@angular/common';
|
||||
import {MessageService} from "primeng/api";
|
||||
|
||||
@Component({
|
||||
selector: 'framadate-dates',
|
||||
@ -17,6 +18,7 @@ export class DatesComponent extends BaseComponent implements OnInit {
|
||||
|
||||
constructor(public config: ConfigService,
|
||||
private cd: ChangeDetectorRef,
|
||||
private messageService: MessageService,
|
||||
@Inject(DOCUMENT) private document: any
|
||||
) {
|
||||
super(config);
|
||||
@ -106,6 +108,12 @@ export class DatesComponent extends BaseComponent implements OnInit {
|
||||
this.config.dateList = [...new Set(converted)]; // add only dates that are not already present with a Set of unique items
|
||||
this.showDateInterval = false;
|
||||
|
||||
this.messageService.add({
|
||||
severity: 'success',
|
||||
summary: 'Dates ajoutées',
|
||||
detail: `les dates ont été ajoutées aux réponses possibles`
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -108,7 +108,7 @@ export class ConfigService extends PollConfig {
|
||||
},
|
||||
title: this.title,
|
||||
description: this.description,
|
||||
type: this.pollType,
|
||||
pollType: this.pollType,
|
||||
visibility: this.visibility,
|
||||
voteChoices: this.voteChoices,
|
||||
allowSeveralHours: this.allowSeveralHours,
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -34,17 +35,25 @@
|
||||
&--primary {
|
||||
@include btnTheme($primary_color);
|
||||
}
|
||||
|
||||
&--semi-bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&--black-text {
|
||||
color:black;
|
||||
}
|
||||
&--purple {
|
||||
background-color:$pale-purple;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&--alert {
|
||||
&--purple {
|
||||
background-color: $pale-purple;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
@include btnTheme($dusty-orange);
|
||||
}
|
||||
|
||||
&--alert,
|
||||
&--danger {
|
||||
@include btnTheme($red);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user