mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
Merge branch 'fix-dates' into 'dev'
Fix dates et intervalle #29 See merge request framasoft/framadate/funky-framadate-front!14
This commit is contained in:
ty kayn
commit
363188ba33
@ -33,9 +33,9 @@
|
||||
"@angular/cli": "~8.2.1",
|
||||
"@angular/compiler-cli": "~8.2.0",
|
||||
"@angular/language-service": "~8.2.0",
|
||||
"@types/node": "~8.9.4",
|
||||
"@types/jasmine": "~3.3.8",
|
||||
"@types/jasminewd2": "~2.0.3",
|
||||
"@types/node": "~8.9.4",
|
||||
"codelyzer": "^5.0.0",
|
||||
"jasmine-core": "~3.4.0",
|
||||
"jasmine-spec-reporter": "~4.2.1",
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import {Injectable} from '@angular/core';
|
||||
import {PollConfig} from './config/PollConfig';
|
||||
import {HttpClient} from "@angular/common/http";
|
||||
import {environment} from "../environments/environment";
|
||||
|
||||
|
||||
/**
|
||||
@ -9,9 +11,11 @@ import {PollConfig} from './config/PollConfig';
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ConfigService extends PollConfig {
|
||||
myEmail: string;
|
||||
myPolls: any;// list of retrieved polls from the backend api
|
||||
|
||||
|
||||
constructor() {
|
||||
constructor(public http: HttpClient) {
|
||||
super();
|
||||
}
|
||||
|
||||
@ -19,9 +23,15 @@ export class ConfigService extends PollConfig {
|
||||
this[key] = val;
|
||||
}
|
||||
|
||||
sendForm() {
|
||||
createPoll() {
|
||||
// todo
|
||||
console.log('sends the form');
|
||||
alert('envoi de formulaire en XHR à faire');
|
||||
alert('envoi de formulaire pour création de sondage en XHR à faire');
|
||||
const payload = this;
|
||||
this.http.post(`${environment.baseApiHref}/poll`, payload)
|
||||
.subscribe(res => {
|
||||
console.log('res', res)
|
||||
},
|
||||
err => console.error('err', err))
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,24 +2,28 @@
|
||||
* une option de date dans les sondages spéciaux
|
||||
*/
|
||||
export interface DateOption {
|
||||
timeList: any;
|
||||
literal: string;
|
||||
}
|
||||
|
||||
export const timeOfDay = [{literal: 'matin'},
|
||||
{literal: 'midi'},
|
||||
{literal: 'après-midi'},
|
||||
{literal: 'soirée'}];
|
||||
export const timeOfDay = [{
|
||||
timeList: [],
|
||||
literal: 'matin'
|
||||
},
|
||||
{timeList: [], literal: 'midi'},
|
||||
{timeList: [], literal: 'après-midi'},
|
||||
{timeList: [], literal: 'soirée'}];
|
||||
export const defaultDates = [
|
||||
{
|
||||
literal: `${new Date().getDate()}-${new Date().getMonth()}-${new Date().getFullYear()}`,
|
||||
literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`,
|
||||
timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
|
||||
},
|
||||
{
|
||||
literal: `${new Date().getDate() + 1}-${new Date().getMonth()}-${new Date().getFullYear()}`,
|
||||
literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 1}`,
|
||||
timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
|
||||
},
|
||||
{
|
||||
literal: `${new Date().getDate() + 2}-${new Date().getMonth()}-${new Date().getFullYear()}`,
|
||||
literal: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate() + 2}`,
|
||||
timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
|
||||
}
|
||||
];
|
||||
@ -34,10 +38,14 @@ export class PollConfig {
|
||||
title = '';
|
||||
description = '';
|
||||
myName = '';
|
||||
visibility = 'link_only';
|
||||
|
||||
// date specific poll
|
||||
allowSeveralHours = 'true';
|
||||
dateList: DateOption[] = defaultDates; // sets of days as strings
|
||||
allowSeveralHours = 'false';
|
||||
// access
|
||||
visibility = 'link_only'; // visible to anyone with the link:
|
||||
password = '';
|
||||
whoCanChangeAnswers = 'everybody';// everybody, self, nobody (= just admin)
|
||||
dateList: DateOption[] = defaultDates; // sets of days as strings, config to set identical time for days in a special days poll
|
||||
timeList: DateOption[] = timeOfDay; // ranges of time expressed as strings
|
||||
answers: any = [{
|
||||
id: 0,
|
||||
|
||||
@ -1,31 +1,34 @@
|
||||
import { KindComponent } from "../pages/kind/kind.component";
|
||||
import { DatesComponent } from "../pages/dates/dates.component";
|
||||
import { VisibilityComponent } from "../pages/visibility/visibility.component";
|
||||
import { ResumeComponent } from "../pages/resume/resume.component";
|
||||
import { PicturesComponent } from "../pages/pictures/pictures.component";
|
||||
import { EndConfirmationComponent } from "../pages/end-confirmation/end-confirmation.component";
|
||||
import { AnswersComponent } from "../pages/answers/answers.component";
|
||||
import { CreateOrRetrieveComponent } from "../pages/create-or-retrieve/create-or-retrieve.component";
|
||||
import { BaseComponent } from "../pages/base-page/base.component";
|
||||
import { HomeComponent } from "../pages/home/home.component";
|
||||
import { PollGraphicComponent } from '../poll-graphic/poll-graphic.component';
|
||||
import {KindComponent} from "../pages/kind/kind.component";
|
||||
import {DatesComponent} from "../pages/dates/dates.component";
|
||||
import {VisibilityComponent} from "../pages/visibility/visibility.component";
|
||||
import {ResumeComponent} from "../pages/resume/resume.component";
|
||||
import {PicturesComponent} from "../pages/pictures/pictures.component";
|
||||
import {EndConfirmationComponent} from "../pages/end-confirmation/end-confirmation.component";
|
||||
import {AnswersComponent} from "../pages/answers/answers.component";
|
||||
import {CreateOrRetrieveComponent} from "../pages/create-or-retrieve/create-or-retrieve.component";
|
||||
import {BaseComponent} from "../pages/base-page/base.component";
|
||||
import {HomeComponent} from "../pages/home/home.component";
|
||||
import {PollGraphicComponent} from '../poll-graphic/poll-graphic.component';
|
||||
import {VoteChoiceComponent} from "../vote-choice/vote-choice.component";
|
||||
|
||||
/**
|
||||
* each step in the form is a component
|
||||
*/
|
||||
export const Routes = [
|
||||
{ path: "", component: CreateOrRetrieveComponent },
|
||||
{ path: "home", component: HomeComponent },
|
||||
{ path: "base", component: BaseComponent },
|
||||
{ path: "step/creation", component: CreateOrRetrieveComponent },
|
||||
{ path: "step/date", component: DatesComponent },
|
||||
{ path: "step/kind", component: KindComponent },
|
||||
{ path: "step/answers", component: AnswersComponent },
|
||||
{ path: "step/pictures", component: PicturesComponent },
|
||||
{ path: "step/visibility", component: VisibilityComponent },
|
||||
{ path: "step/resume", component: ResumeComponent },
|
||||
{ path: "step/end", component: EndConfirmationComponent },
|
||||
{ path: "graphic/:poll", component: PollGraphicComponent },
|
||||
{ path: 'votechoice', component: VoteChoiceComponent}
|
||||
];
|
||||
export const Routes =
|
||||
[
|
||||
{path: '', component: CreateOrRetrieveComponent},
|
||||
{path: 'home', component: HomeComponent},
|
||||
{path: 'base', component: BaseComponent},
|
||||
{path: 'step/base', component: BaseComponent},
|
||||
{path: 'step/creation', component: CreateOrRetrieveComponent},
|
||||
{path: 'step/date', component: DatesComponent},
|
||||
{path: 'step/kind', component: KindComponent},
|
||||
{path: 'step/answers', component: AnswersComponent},
|
||||
{path: 'step/pictures', component: PicturesComponent},
|
||||
{path: 'step/visibility', component: VisibilityComponent},
|
||||
{path: 'step/resume', component: ResumeComponent},
|
||||
{path: 'step/end', component: EndConfirmationComponent},
|
||||
{path: 'graphic/:poll', component: PollGraphicComponent},
|
||||
{path: 'votechoice', component: VoteChoiceComponent},
|
||||
]
|
||||
;
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<li>
|
||||
config:
|
||||
<pre>
|
||||
{{config|json}}
|
||||
{{config.answers|json}}
|
||||
</pre>
|
||||
</li>
|
||||
</ul>
|
||||
@ -62,7 +62,7 @@
|
||||
<button
|
||||
class="btn btn--primary"
|
||||
i18n
|
||||
(click)="config.sendForm()"
|
||||
(click)="config.createPoll()"
|
||||
>
|
||||
Envoyer le formulaire
|
||||
</button>
|
||||
|
||||
@ -30,8 +30,7 @@
|
||||
{{"config.find_my_polls"|translate}}
|
||||
</h1>
|
||||
<form
|
||||
action="https://framadate.org/find_polls.php"
|
||||
method="post"
|
||||
(ngSubmit)="findMyPollsByEmail(emailToFind.value)"
|
||||
>
|
||||
<label
|
||||
class="description"
|
||||
@ -41,6 +40,7 @@
|
||||
{{"config.find_helper"|translate}} :
|
||||
</label>
|
||||
<input
|
||||
#emailToFind
|
||||
type="email"
|
||||
name="mail"
|
||||
id="email"
|
||||
@ -53,3 +53,8 @@
|
||||
/>
|
||||
</form>
|
||||
</section>
|
||||
<section class="list-my-polls">
|
||||
<ul class="poll-list" *ngFor="let poll of config.myPolls">
|
||||
<li> poll</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {BaseComponent} from "../base-page/base.component";
|
||||
import {ConfigService} from "../../config.service";
|
||||
import {PollServiceService} from "../../services/poll-service.service";
|
||||
|
||||
@Component({
|
||||
selector: 'framadate-create-or-retrieve',
|
||||
@ -9,11 +10,15 @@ import {ConfigService} from "../../config.service";
|
||||
})
|
||||
export class CreateOrRetrieveComponent extends BaseComponent implements OnInit {
|
||||
|
||||
constructor(public config: ConfigService) {
|
||||
constructor(public config: ConfigService, public pollService: PollServiceService) {
|
||||
super(config);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
findMyPollsByEmail(email: string) {
|
||||
this.pollService.findPollsByEmail(email);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -4,66 +4,100 @@
|
||||
|
||||
<div>
|
||||
<label for="multi_hours">
|
||||
<span i18n>
|
||||
Je souhaite mettre des créneaux horaires
|
||||
<span>
|
||||
{{"dates.hours_different"|translate}}
|
||||
</span>
|
||||
<select
|
||||
name="multi_hours"
|
||||
id="multi_hours"
|
||||
[(ngModel)]="config.allowSeveralHours"
|
||||
id="multi_hours"
|
||||
name="multi_hours"
|
||||
>
|
||||
<option value="true">{{"dates.multiple.different"|translate}}</option>
|
||||
<option value="false">{{"dates.multiple.identical"|translate}}</option>
|
||||
</select>
|
||||
<span i18n>
|
||||
pour chaque journée
|
||||
{{"dates.hours_each_day"|translate}}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
(click)="addDate()"
|
||||
class="btn btn-primary"
|
||||
id="add_date_button"
|
||||
>
|
||||
{{"dates.add"|translate}}
|
||||
</button>
|
||||
<button
|
||||
(click)="showDateInterval = !showDateInterval "
|
||||
[ngClass]="{active: showDateInterval}"
|
||||
class="btn btn-primary"
|
||||
(click)="addtime()"
|
||||
id="add_time_button"
|
||||
id="toggle_interval_button"
|
||||
>
|
||||
{{"dates.addTime"|translate}}
|
||||
{{"dates.add_interval"|translate}}
|
||||
</button>
|
||||
|
||||
|
||||
<button
|
||||
class="btn btn-warning"
|
||||
(click)="emptyAll()"
|
||||
class="btn btn-warning"
|
||||
id="empty_button"
|
||||
>{{"dates.empty"|translate}}
|
||||
</button>
|
||||
<section *ngIf="showDateInterval" class="date-interval">
|
||||
<!-- TODO à mettre en popup-->
|
||||
<hr>
|
||||
<h2> {{"dates.add_interval"|translate}}</h2>
|
||||
<p>
|
||||
{{"dates.interval_propose"|translate}}
|
||||
<input (change)="countDays()" [(ngModel)]="startDateInterval" type="date">
|
||||
{{"dates.interval_span"|translate}}
|
||||
<input (change)="countDays()" [(ngModel)]="endDateInterval" type="date">
|
||||
</p>
|
||||
<button (click)="addIntervalOfDates()"
|
||||
class="btn btn-block">
|
||||
{{"dates.interval_button"|translate}}
|
||||
{{intervalDays}}
|
||||
{{"dates.interval_button_dates"|translate}}
|
||||
</button>
|
||||
<hr>
|
||||
</section>
|
||||
<div class="dates-list">
|
||||
{{config.dateList.length}}
|
||||
<span>
|
||||
{{"dates.count_dates"|translate}}
|
||||
<span class="count-dates">
|
||||
{{config.timeList.length}}
|
||||
</span>
|
||||
<span class="count-dates-txt">
|
||||
{{"dates.count_time"|translate}}
|
||||
</span>
|
||||
<button
|
||||
(click)="addTime()"
|
||||
*ngIf="config.allowSeveralHours=='false'"
|
||||
class="btn btn-primary pull-right"
|
||||
id="add_time_button"
|
||||
>
|
||||
{{"dates.add_time"|translate}}
|
||||
</button>
|
||||
|
||||
<div
|
||||
class="identical-dates"
|
||||
*ngIf="'false'==config.allowSeveralHours"
|
||||
class="identical-dates"
|
||||
>
|
||||
<div
|
||||
class="time-choice"
|
||||
*ngFor="let choice of config.timeList; index as id"
|
||||
class="time-choice"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
name="timeChoices_{{id}}"
|
||||
[(ngModel)]="choice.literal"
|
||||
name="timeChoices_{{id}}"
|
||||
type="text"
|
||||
>
|
||||
<button (click)="config.timeList.splice(id, 1)">X</button>
|
||||
<button (click)="config.timeList.splice(id, 1)" class="btn btn-warning">X</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<span class="count-dates">
|
||||
{{config.dateList.length}}
|
||||
</span>
|
||||
<span>
|
||||
{{"dates.count_dates"|translate}}
|
||||
</span>
|
||||
@ -72,36 +106,38 @@
|
||||
class="date-choice"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
name="dateChoices_{{id}}"
|
||||
[(ngModel)]="choice.literal"
|
||||
name="dateChoices_{{id}}"
|
||||
type="date"
|
||||
>
|
||||
<button
|
||||
class="btn btn-warning"
|
||||
(click)="config.dateList.splice(id, 1)"
|
||||
class="btn btn-warning"
|
||||
>X
|
||||
</button>
|
||||
<button
|
||||
(click)="addTimeToDate(choice, id)"
|
||||
*ngIf="config.allowSeveralHours=='true'"
|
||||
class="btn btn-primary"
|
||||
(click)="addTimetoDate(choice, id)"
|
||||
> Ajouter un choix d'heure
|
||||
>
|
||||
{{"dates.add_time"|translate}}
|
||||
</button>
|
||||
<div
|
||||
class="several-times"
|
||||
*ngIf="'true'==config.allowSeveralHours"
|
||||
class="several-times"
|
||||
>
|
||||
<div
|
||||
class="time-choice"
|
||||
*ngFor="let time of choice.timeList; index as idTime"
|
||||
class="time-choice"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
name="dateTime_{{id}}_Choices_{{idTime}}"
|
||||
[(ngModel)]="time.literal"
|
||||
name="dateTime_{{id}}_Choices_{{idTime}}"
|
||||
type="text"
|
||||
>
|
||||
<button
|
||||
(click)="choice.timeList.splice(idTime, 1)"
|
||||
class="btn btn-warning"
|
||||
(click)="config.timeList.splice(idTime, 1)"
|
||||
>X
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
.several-times {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-right: 1em;
|
||||
:host {
|
||||
input, button {
|
||||
+ button {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
|
||||
import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
|
||||
import {ConfigService} from '../../config.service';
|
||||
import {BaseComponent} from '../base-page/base.component';
|
||||
import {DOCUMENT} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'framadate-dates',
|
||||
@ -8,41 +9,145 @@ import {BaseComponent} from '../base-page/base.component';
|
||||
styleUrls: ['./dates.component.scss']
|
||||
})
|
||||
export class DatesComponent extends BaseComponent implements OnInit {
|
||||
constructor(public config: ConfigService, private cd: ChangeDetectorRef) {
|
||||
showDateInterval: boolean = true;
|
||||
startDateInterval: any;
|
||||
intervalDays: any;
|
||||
intervalDaysDefault: number = 7;
|
||||
endDateInterval: any;
|
||||
|
||||
constructor(public config: ConfigService,
|
||||
private cd: ChangeDetectorRef,
|
||||
@Inject(DOCUMENT) private document: any
|
||||
) {
|
||||
super(config);
|
||||
}
|
||||
|
||||
countDays() {
|
||||
// compute the number of days in the date interval
|
||||
if (this.endDateInterval && this.startDateInterval) {
|
||||
this.intervalDays = (this.dayDiff(this.endDateInterval, this.startDateInterval)).toFixed(0)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* set the interval options
|
||||
*/
|
||||
ngOnInit() {
|
||||
let dateCurrent = new Date();
|
||||
const dateJson = dateCurrent.toISOString();
|
||||
this.startDateInterval = dateJson.substring(0, 10);
|
||||
this.endDateInterval = this.addDaysToDate(this.intervalDaysDefault, dateCurrent).toISOString().substring(0, 10);
|
||||
}
|
||||
|
||||
addDate() {
|
||||
this.config.dateList.push({literal: ''});
|
||||
this.config.dateList.push({literal: '', timeList: []});
|
||||
let selector = '[ng-reflect-name="dateChoices_' + (this.config.dateList.length - 1) + '"]';
|
||||
this.cd.detectChanges();
|
||||
const elem = this.document.querySelector(selector);
|
||||
if (elem) {
|
||||
elem.focus();
|
||||
}
|
||||
}
|
||||
|
||||
addtime() {
|
||||
this.config.timeList.push({literal: ''});
|
||||
addTime() {
|
||||
this.config.timeList.push({literal: '', timeList: []});
|
||||
}
|
||||
|
||||
/**
|
||||
* add some days to a date, to compute intervals
|
||||
* @param days
|
||||
* @param date
|
||||
*/
|
||||
addDaysToDate(days: number, date: Date) {
|
||||
date = new Date(date.valueOf());
|
||||
date.setDate(date.getDate() + days);
|
||||
return date;
|
||||
};
|
||||
|
||||
/**
|
||||
* add a time period to a specific date choice,
|
||||
* focus on the new input
|
||||
* @param config
|
||||
* @param id
|
||||
*/
|
||||
addTimetoDate(config: any, id: number) {
|
||||
addTimeToDate(config: any, id: number) {
|
||||
config.timeList.push({literal: ''});
|
||||
let selector = '[ng-reflect-name="dateTime_' + id + '_Choices_' + (config.timeList.length - 1) + '"]';
|
||||
console.log('selector', selector);
|
||||
this.cd.detectChanges();
|
||||
const elem = document.querySelector(selector);
|
||||
const elem = this.document.querySelector(selector);
|
||||
if (elem) {
|
||||
//this.elem.focus();
|
||||
elem.focus();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* remove all input contents, does not reset to default
|
||||
*/
|
||||
emptyAll() {
|
||||
this.config.dateList.forEach(element => {
|
||||
element.literal = '';
|
||||
element.timeList = ['', '', ''];
|
||||
});
|
||||
this.config.timeList.forEach(element => {
|
||||
element.literal = '';
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* add all the dates between the start and end dates in the interval section
|
||||
*/
|
||||
addIntervalOfDates() {
|
||||
let newIntervalArray = this.getDatesInRange(this.startDateInterval, this.endDateInterval, 1);
|
||||
|
||||
const converted = [];
|
||||
newIntervalArray.forEach(element => {
|
||||
converted.push({literal: element, timeList: []});
|
||||
});
|
||||
this.config.dateList = [...new Set(converted)]; // add only dates that are not already present with a Set of unique items
|
||||
this.showDateInterval = false;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param d1
|
||||
* @param d2
|
||||
* @param interval
|
||||
*/
|
||||
getDatesInRange(d1: Date, d2: Date, interval: number) {
|
||||
d1 = new Date(d1);
|
||||
d2 = new Date(d2);
|
||||
const dates = [];
|
||||
while (+d1 < +d2) {
|
||||
dates.push(this.formateDate(d1));
|
||||
d1.setDate(d1.getDate() + interval)
|
||||
}
|
||||
return dates.slice(0)
|
||||
}
|
||||
|
||||
/**
|
||||
* get the number of days between two dates
|
||||
* @param d1
|
||||
* @param d2
|
||||
*/
|
||||
dayDiff(d1: Date, d2: Date): Number {
|
||||
return Number(((d2.getTime()) - (d1.getTime()) / 31536000000));
|
||||
}
|
||||
|
||||
/**
|
||||
* format a date object to the date format used by the inputs of type date
|
||||
* YYYY-MM-DD
|
||||
* @param date
|
||||
*/
|
||||
formateDate(date) {
|
||||
return [
|
||||
date.getFullYear(),
|
||||
this.getDoubleDigits(date.getMonth() + 1),
|
||||
this.getDoubleDigits(date.getDate()),
|
||||
].join('-')
|
||||
}
|
||||
|
||||
getDoubleDigits(str) {
|
||||
return ("00" + str).slice(-2);
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,18 +3,17 @@
|
||||
name="selector"
|
||||
autofocus="autofocus"
|
||||
[(ngModel)]="isColorblind"
|
||||
(change)="setColorblind()"
|
||||
(change)="toggleColorblind()"
|
||||
>
|
||||
<option value="colorblind">
|
||||
<option value="true">
|
||||
{{ "pollGraphic.choiceColorblind" | translate }}
|
||||
</option>
|
||||
<option value="notColorblind">
|
||||
<option value="false">
|
||||
{{ "pollGraphic.choiceNotColorblind" | translate }}
|
||||
</option>
|
||||
</select>
|
||||
{{ "pollGraphic.colorblindText" | translate }}
|
||||
{{ "pollGraphic.colorblindText" | translate }}
|
||||
<div>
|
||||
<canvas id="graph" width="100" height="50"></canvas>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { Chart } from "chart.js";
|
||||
import {Component, OnInit} from "@angular/core";
|
||||
import {Chart} from "chart.js";
|
||||
|
||||
@Component({
|
||||
selector: "framadate-poll-graphic",
|
||||
@ -7,7 +7,7 @@ import { Chart } from "chart.js";
|
||||
styleUrls: ["./poll-graphic.component.scss"]
|
||||
})
|
||||
export class PollGraphicComponent implements OnInit {
|
||||
isColorblind: boolean;
|
||||
isColorblind: boolean = false;
|
||||
lineChart: Chart;
|
||||
pollData: any;
|
||||
yesList: number[] = [];
|
||||
@ -15,7 +15,9 @@ export class PollGraphicComponent implements OnInit {
|
||||
noList: number[] = [];
|
||||
nbPoll: number = 0;
|
||||
dateList: string[] = [];
|
||||
constructor() {}
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
var toto = {
|
||||
@ -100,11 +102,11 @@ export class PollGraphicComponent implements OnInit {
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: { display: false },
|
||||
legend: {display: false},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
gridLines: { drawBorder: false, display: false },
|
||||
gridLines: {drawBorder: false, display: false},
|
||||
display: false,
|
||||
stacked: true,
|
||||
ticks: {
|
||||
@ -116,7 +118,7 @@ export class PollGraphicComponent implements OnInit {
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
gridLines: { drawBorder: true, display: false },
|
||||
gridLines: {drawBorder: true, display: false},
|
||||
display: true,
|
||||
stacked: true
|
||||
}
|
||||
@ -126,7 +128,7 @@ export class PollGraphicComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
setColorblind() {
|
||||
toggleColorblind() {
|
||||
this.isColorblind = !this.isColorblind;
|
||||
}
|
||||
|
||||
@ -151,7 +153,7 @@ export class PollGraphicComponent implements OnInit {
|
||||
|
||||
initPollCounter() {
|
||||
this.nbPoll++;
|
||||
this.dateList[this.nbPoll -1] = "jeudi";
|
||||
this.dateList[this.nbPoll - 1] = "jeudi";
|
||||
this.maybeList[this.nbPoll - 1] = 0;
|
||||
this.yesList[this.nbPoll - 1] = 0;
|
||||
this.noList[this.nbPoll - 1] = 0;
|
||||
|
||||
12
src/app/services/poll-service.service.spec.ts
Normal file
12
src/app/services/poll-service.service.spec.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PollServiceService } from './poll-service.service';
|
||||
|
||||
describe('PollServiceService', () => {
|
||||
beforeEach(() => TestBed.configureTestingModule({}));
|
||||
|
||||
it('should be created', () => {
|
||||
const service: PollServiceService = TestBed.get(PollServiceService);
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
32
src/app/services/poll-service.service.ts
Normal file
32
src/app/services/poll-service.service.ts
Normal file
@ -0,0 +1,32 @@
|
||||
import {Injectable} from '@angular/core';
|
||||
import {ConfigService} from "../config.service";
|
||||
import {HttpClient} from "@angular/common/http";
|
||||
import {environment} from "../../environments/environment";
|
||||
|
||||
class JsonResponse {
|
||||
message: string;
|
||||
data: string;
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class PollServiceService {
|
||||
|
||||
private baseHref: string = environment.baseApiHref;
|
||||
|
||||
constructor(private configService: ConfigService,
|
||||
private http: HttpClient) {
|
||||
}
|
||||
|
||||
findPollsByEmail(email: string) {
|
||||
// TODO check if the person has a key to retrieve her polls
|
||||
// If no key is found in the localstorage, ask the backend to send an email to the user
|
||||
|
||||
this.configService.myEmail = email;
|
||||
this.http.get(this.baseHref + '/').subscribe(res => {
|
||||
this.configService.myPolls = res;
|
||||
}, err => console.error('err', err)
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -23,6 +23,9 @@
|
||||
<a [routerLink]="'/step/kind'" i18n>
|
||||
Page démo
|
||||
</a>
|
||||
<a [routerLink]="'/graphic/toto'" i18n>
|
||||
Graphique
|
||||
</a>
|
||||
<a [routerLink]="'/home'" i18n>
|
||||
Accueil
|
||||
</a>
|
||||
|
||||
@ -37,8 +37,15 @@
|
||||
"identical": "same",
|
||||
"different": "possibly different"
|
||||
},
|
||||
"add": "Add a date range",
|
||||
"count_dates": "choices of dates"
|
||||
"add": "Add a date choice",
|
||||
"add_time": "Add a time span",
|
||||
"count_dates": "choices of dates",
|
||||
"count_time": "choices of hour span",
|
||||
"add_interval": "Add a date interval",
|
||||
"interval_propose": "I want to suggest all the dates from",
|
||||
"interval_span": "to",
|
||||
"interval_button": "Add these",
|
||||
"interval_button_dates": "dates"
|
||||
},
|
||||
"choices": {
|
||||
"title": "Write the proposals",
|
||||
|
||||
@ -32,15 +32,22 @@
|
||||
},
|
||||
"dates": {
|
||||
"title": "Config spécialement pour les dates ",
|
||||
"hours_different": "Je souhaite mettre des créneaux horaires pour chaque journée",
|
||||
"hours_different": "Je souhaite mettre des créneaux horaires",
|
||||
"hours_each_day": "pour chaque journée",
|
||||
"multiple": {
|
||||
"identical": "identiques",
|
||||
"different": "possiblement différentes"
|
||||
},
|
||||
"add": "Ajouter une plage de dates",
|
||||
"addTime": "Ajouter une plage d'heure",
|
||||
"add_time": "Ajouter une plage d'heure",
|
||||
"empty": "Vider",
|
||||
"count_dates": "choix de dates"
|
||||
"count_dates": "choix de dates",
|
||||
"count_time": "choix de plages horaires",
|
||||
"add_interval": "Ajouter une intervalle de dates",
|
||||
"interval_propose": "Je souhaite proposer pour mon sondage toutes les dates entre le",
|
||||
"interval_span": "et le",
|
||||
"interval_button": "Ajouter ces",
|
||||
"interval_button_dates": "dates"
|
||||
},
|
||||
"choices": {
|
||||
"title": "Choisir les propositions",
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
export const environment = {
|
||||
production: true
|
||||
production: true,
|
||||
baseApiHref : 'http://127.0.0.1:8000/api/v1/'
|
||||
};
|
||||
|
||||
@ -3,7 +3,8 @@
|
||||
// The list of file replacements can be found in `angular.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false
|
||||
production: false,
|
||||
baseApiHref: "http://127.0.0.1:8000/api/v1/"
|
||||
};
|
||||
|
||||
/*
|
||||
|
||||
35
yarn.lock
35
yarn.lock
@ -1452,6 +1452,29 @@ chardet@^0.7.0:
|
||||
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
|
||||
integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
|
||||
|
||||
chart.js@^2.8.0:
|
||||
version "2.9.3"
|
||||
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.3.tgz#ae3884114dafd381bc600f5b35a189138aac1ef7"
|
||||
integrity sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==
|
||||
dependencies:
|
||||
chartjs-color "^2.1.0"
|
||||
moment "^2.10.2"
|
||||
|
||||
chartjs-color-string@^0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
|
||||
integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
|
||||
dependencies:
|
||||
color-name "^1.0.0"
|
||||
|
||||
chartjs-color@^2.1.0:
|
||||
version "2.4.1"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
|
||||
integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
|
||||
dependencies:
|
||||
chartjs-color-string "^0.6.0"
|
||||
color-convert "^1.9.3"
|
||||
|
||||
"chokidar@>=2.0.0 <4.0.0":
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.0.2.tgz#0d1cd6d04eb2df0327446188cd13736a3367d681"
|
||||
@ -1606,7 +1629,7 @@ collection-visit@^1.0.0:
|
||||
map-visit "^1.0.0"
|
||||
object-visit "^1.0.0"
|
||||
|
||||
color-convert@^1.9.0:
|
||||
color-convert@^1.9.0, color-convert@^1.9.3:
|
||||
version "1.9.3"
|
||||
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
|
||||
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
|
||||
@ -1618,6 +1641,11 @@ color-name@1.1.3:
|
||||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
|
||||
integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
|
||||
|
||||
color-name@^1.0.0:
|
||||
version "1.1.4"
|
||||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
|
||||
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
|
||||
|
||||
colors@1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
|
||||
@ -4391,6 +4419,11 @@ mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
|
||||
dependencies:
|
||||
minimist "0.0.8"
|
||||
|
||||
moment@^2.10.2:
|
||||
version "2.24.0"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
|
||||
integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
|
||||
|
||||
move-concurrently@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user