mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
⚡ toast todo things
This commit is contained in:
parent
113609e945
commit
7b790e3cdc
4580
package-lock.json
generated
4580
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -45,7 +45,7 @@
|
||||
"@angular/language-service": "~8.2.14",
|
||||
"@types/jasmine": "~3.3.8",
|
||||
"@types/jasminewd2": "~2.0.8",
|
||||
"@types/node": "~8.9.4",
|
||||
"@types/node": "^13.1.7",
|
||||
"codelyzer": "^5.2.1",
|
||||
"jasmine-core": "~3.4.0",
|
||||
"jasmine-spec-reporter": "~4.2.1",
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<header style="text-align:center">
|
||||
<header style="text-align:center" >
|
||||
<a
|
||||
[routerLink]="'home'"
|
||||
class="home_link"
|
||||
aria-roledescription="home"
|
||||
>
|
||||
<h1>
|
||||
<span class="logo_first">Frama</span>
|
||||
<span class="logo_second">date</span>
|
||||
</h1>
|
||||
<div class="legend">proposé par
|
||||
<span class="legend_first">Frama</span>
|
||||
<span class="legend_second">soft</span>
|
||||
</div>
|
||||
</a>
|
||||
<div id="translate_example">
|
||||
<div class="wrapper">
|
||||
<h1 >
|
||||
<span class="logo_first" >Frama</span >
|
||||
<span class="logo_second" >date</span >
|
||||
</h1 >
|
||||
<div class="legend" >proposé par
|
||||
<span class="legend_first" >Frama</span >
|
||||
<span class="legend_second" >soft</span >
|
||||
</div >
|
||||
</a >
|
||||
<div id="translate_example" >
|
||||
<div class="wrapper" >
|
||||
<img
|
||||
src="assets/img/icone-langue.svg"
|
||||
alt="location icon"
|
||||
@ -37,20 +37,25 @@
|
||||
value="d"
|
||||
default
|
||||
class="select_language"
|
||||
>{{"Language" | translate}}</option>
|
||||
<option value="en">English</option>
|
||||
<option value="fr">Français</option>
|
||||
</select>
|
||||
<span (click)="toggleMenu()" class="menu_label">Menu</span>
|
||||
</div>
|
||||
>{{"Language" | translate}}</option >
|
||||
<option value="en" >English</option >
|
||||
<option value="fr" >Français</option >
|
||||
</select >
|
||||
<span
|
||||
(click)="toggleMenu()"
|
||||
class="menu_label" >Menu</span >
|
||||
</div >
|
||||
|
||||
</div>
|
||||
</div >
|
||||
|
||||
</header>
|
||||
<framadate-navigation *ngIf="menuVisible" [step]="step"></framadate-navigation>
|
||||
<main>
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
<framadate-debugger></framadate-debugger>
|
||||
<p-toast position="top-right"></p-toast>
|
||||
</header >
|
||||
|
||||
<main >
|
||||
<router-outlet ></router-outlet >
|
||||
</main >
|
||||
<framadate-debugger ></framadate-debugger >
|
||||
<framadate-navigation
|
||||
*ngIf="menuVisible"
|
||||
[step]="step" ></framadate-navigation >
|
||||
<p-toast position="top-right" ></p-toast >
|
||||
|
||||
|
||||
@ -31,15 +31,18 @@ export const defaultDates = [
|
||||
];
|
||||
export const defaultAnswers = [{
|
||||
id: 0,
|
||||
text: 'réponse de démo 1'
|
||||
text: 'réponse de démo 1',
|
||||
pictureUrl: '',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
text: 'réponse 2'
|
||||
text: 'réponse 2',
|
||||
pictureUrl: '',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: 'la réponse D'
|
||||
text: 'la réponse D',
|
||||
pictureUrl: '',
|
||||
}];
|
||||
|
||||
/**
|
||||
@ -54,6 +57,7 @@ export class PollConfig {
|
||||
title = 'titre';
|
||||
description = 'ma description';
|
||||
myName = 'mon pseudo';
|
||||
myComment = 'wouah trop bien framadate!';
|
||||
myEmail: string = "";
|
||||
// date specific poll, we have the choice to setup different hours (timeList) for all possible dates (dateList), or use the same hours for all dates
|
||||
allowSeveralHours = 'false';
|
||||
|
||||
@ -1,48 +1,52 @@
|
||||
<div class="well debug">
|
||||
<strong>
|
||||
<h2 i18n>
|
||||
<div class="well debug" >
|
||||
<strong >
|
||||
<h2 i18n >
|
||||
infos de debug
|
||||
</h2>
|
||||
<span class="demo">
|
||||
</h2 >
|
||||
<span class="demo" >
|
||||
{{"config.demo"|translate}}
|
||||
</span>
|
||||
</strong>
|
||||
<ul>
|
||||
<li>
|
||||
</span >
|
||||
</strong >
|
||||
<ul >
|
||||
<li >
|
||||
étape actuelle {{config.step}} / {{config.stepMax}}
|
||||
</li>
|
||||
<li>
|
||||
</li >
|
||||
<li >
|
||||
formulaire valide : {{formIsValid}}
|
||||
</li>
|
||||
<li>
|
||||
</li >
|
||||
<li >
|
||||
type de formulaire: {{config.pollType}}
|
||||
</li>
|
||||
</ul>
|
||||
</li >
|
||||
</ul >
|
||||
<button
|
||||
class="btn btn--primary"
|
||||
i18n
|
||||
(click)="config.createPoll()"
|
||||
>
|
||||
Envoyer le formulaire
|
||||
</button>
|
||||
</button >
|
||||
<button
|
||||
class="btn btn--primary"
|
||||
i18n
|
||||
(click)="config.getPollById(1, 'example password')"
|
||||
>
|
||||
get poll 1
|
||||
</button>
|
||||
</button >
|
||||
<button
|
||||
class="btn btn--primary"
|
||||
i18n
|
||||
(click)="config.getMyPolls( 'tktest@tktest.com')"
|
||||
>
|
||||
get my polls
|
||||
</button>
|
||||
<button class="btn btn--success" (click)="launchToast()">
|
||||
</button >
|
||||
<button
|
||||
class="btn btn--success"
|
||||
(click)="launchToast()" >
|
||||
launch success toast
|
||||
</button>
|
||||
<a [routerLink]="'/vote/poll/id/3'" class="btn btn--success">
|
||||
</button >
|
||||
<a
|
||||
[routerLink]="'/vote/poll/id/3'"
|
||||
class="btn btn--success" >
|
||||
See example of vote page
|
||||
</a>
|
||||
</div>
|
||||
</a >
|
||||
</div >
|
||||
|
||||
@ -1,26 +1,40 @@
|
||||
<div class="answers">
|
||||
<h1 i18n>
|
||||
<div class="answers" >
|
||||
<h1 i18n >
|
||||
Choisir les propositions
|
||||
</h1>
|
||||
</h1 >
|
||||
|
||||
<p class="subtitle" i18n>
|
||||
Vous pouvez utiliser la syntaxe markdown
|
||||
</p>
|
||||
<p
|
||||
class="subtitle"
|
||||
i18n >
|
||||
Vous pouvez utiliser la syntaxe markdown, et naviguer entre les inputs avec les flèches du clavier.
|
||||
</p >
|
||||
|
||||
<ol>
|
||||
<li #answers *ngFor="let answer of config.answers; index as i;trackBy trackFunction"
|
||||
class="answer-item">
|
||||
<ol >
|
||||
<li
|
||||
#answers
|
||||
*ngFor="let answer of config.answers; index as i;trackBy trackFunction"
|
||||
class="answer-item" >
|
||||
<button
|
||||
class='btn btn--default'
|
||||
title='ajouter une image'
|
||||
(click)='showModalForPictureOfAnswer(answer)' >
|
||||
<i class='fa fa-image' ></i >
|
||||
</button >
|
||||
<input
|
||||
type="name"
|
||||
class="answer"
|
||||
id='answer_{{answer.id}}'
|
||||
[(ngModel)]="answer.text"
|
||||
(keyup.enter)="addAnswer()"
|
||||
(keyup)="navigateOrDelete($event,i)"
|
||||
placeholder="réponse"
|
||||
>
|
||||
<button class="btn btn--alert" (click)="config.answers.splice(i,1)">X</button>
|
||||
</li>
|
||||
</ol>
|
||||
<button
|
||||
class="btn btn--alert"
|
||||
(click)="config.answers.splice(i,1)" >X
|
||||
</button >
|
||||
</li >
|
||||
</ol >
|
||||
|
||||
<button
|
||||
class="btn btn--primary btn--outline"
|
||||
@ -28,16 +42,19 @@
|
||||
i18n
|
||||
>
|
||||
Ajouter une proposition
|
||||
</button>
|
||||
<br>
|
||||
</button >
|
||||
<br >
|
||||
<button
|
||||
[routerLink]="'/step/resume'"
|
||||
class="btn btn--primary"
|
||||
i18n
|
||||
>
|
||||
Voyons ce que ça donne
|
||||
</button>
|
||||
<a class="prev" i18n>
|
||||
</button >
|
||||
<br >
|
||||
<a
|
||||
class="prev"
|
||||
i18n >
|
||||
Retour
|
||||
</a>
|
||||
</div>
|
||||
</a >
|
||||
</div >
|
||||
|
||||
@ -64,4 +64,9 @@ export class AnswersComponent extends BaseComponent implements OnInit, AfterView
|
||||
this.focusOnAnswer(i + 1);
|
||||
}
|
||||
}
|
||||
|
||||
showModalForPictureOfAnswer(answer) {
|
||||
// TODO
|
||||
this.config.todo();
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ import {ConfigService} from '../../services/config.service';
|
||||
*/
|
||||
export class BaseComponent implements OnInit {
|
||||
|
||||
constructor(config: ConfigService) {
|
||||
constructor(private config: ConfigService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
@ -20,11 +20,13 @@ export class BaseComponent implements OnInit {
|
||||
|
||||
checkValidity() {
|
||||
// TODO with form controls
|
||||
this.config.todo();
|
||||
return true;
|
||||
}
|
||||
|
||||
displayErrorMessage() {
|
||||
// TODO
|
||||
this.config.todo();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,47 +1,97 @@
|
||||
<div class="poll">
|
||||
<div class="poll" >
|
||||
|
||||
<h1>{{pollConfigFetched.data.title}}</h1>
|
||||
<p>{{pollConfigFetched.data.description}}</p>
|
||||
<p class="creationDate">{{pollConfigFetched.data.creationDate.date}}</p>
|
||||
<p class="expiracyDate">{{pollConfigFetched.data.creationDate.date}}</p>
|
||||
<p class="votants">
|
||||
<h1 >{{pollConfigFetched.data.title}}</h1 >
|
||||
<p >{{pollConfigFetched.data.description}}</p >
|
||||
<p class="creationDate" >{{pollConfigFetched.data.creationDate.date}}</p >
|
||||
<p class="expiracyDate" >{{pollConfigFetched.data.creationDate.date}}</p >
|
||||
<p class="votants" >
|
||||
{{pollConfigFetched.stacks_count}} votants,
|
||||
{{pollConfigFetched.choices_count}} choix,
|
||||
</p>
|
||||
</div>
|
||||
<section class="row name">
|
||||
<label for="name">Votre nom :</label>
|
||||
<input type="text" name="name" id="name" [(ngModel)]="config.myName">
|
||||
</section>
|
||||
<div class="list-of-choices">
|
||||
<div *ngFor="let choice of pollConfigFetched.choices">
|
||||
<framadate-vote-choice [choice]="choice"></framadate-vote-choice>
|
||||
</div>
|
||||
</div>
|
||||
<framadate-voting-graph></framadate-voting-graph>
|
||||
<framadate-voting-summary></framadate-voting-summary>
|
||||
<div class="comments">
|
||||
<h2 class="margin-top-x7">Laisser un commentaire</h2>
|
||||
<label for="crname">Votre nom :</label>
|
||||
<input type="text" class="margin-btm-x3" name="crname" id="crname">
|
||||
<div>
|
||||
<label for="comment">Votre commentaire :</label>
|
||||
<textarea name="comment" id="comment">
|
||||
</textarea>
|
||||
</div>
|
||||
<input type="submit" name="add-comment" class="btn btn--primary btn--outline" value="Ajouter mon commentaire">
|
||||
<framadate-voting-comment [comment]="c" *ngFor="let c of comments"></framadate-voting-comment>
|
||||
</p >
|
||||
</div >
|
||||
<section class="name" >
|
||||
<label for="name" >Votre nom :</label >
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
[(ngModel)]="config.myName" >
|
||||
</section >
|
||||
<div class="list-of-choices" >
|
||||
<div *ngFor="let choice of pollConfigFetched.choices" >
|
||||
<framadate-vote-choice [choice]="choice" ></framadate-vote-choice >
|
||||
</div >
|
||||
</div >
|
||||
<button
|
||||
class='btn btn--primary btn-block'
|
||||
(click)='config.addVote()' >
|
||||
<i class='fa fa-paper-plane' ></i > Envoyer
|
||||
</button >
|
||||
<framadate-voting-graph ></framadate-voting-graph >
|
||||
<framadate-voting-summary ></framadate-voting-summary >
|
||||
<div class="comments" >
|
||||
<h2 class="margin-top-x7" >Laisser un commentaire</h2 >
|
||||
<label for="crname" >Votre nom :</label >
|
||||
<input
|
||||
type="text"
|
||||
class="margin-btm-x3"
|
||||
name="crname"
|
||||
[(ngModel)]='config.myName'
|
||||
id="crname" >
|
||||
<div >
|
||||
<label for="comment" >Votre commentaire :</label >
|
||||
<br >
|
||||
<textarea
|
||||
name="comment"
|
||||
id="comment"
|
||||
[(ngModel)]='config.myComment'
|
||||
>
|
||||
</textarea >
|
||||
</div >
|
||||
<input
|
||||
type="submit"
|
||||
name="add-comment"
|
||||
class="btn btn--primary btn--outline"
|
||||
value="Ajouter mon commentaire"
|
||||
(click)='config.addComment()' >
|
||||
<framadate-voting-comment
|
||||
[comment]="c"
|
||||
*ngFor="let c of comments" >
|
||||
|
||||
</div>
|
||||
<div class="sharing">
|
||||
<h3 class="margin-top-x8">Partager le sondage</h3>
|
||||
<label class="nobold text-14" for="copyLink">Pour partager le sondage, vous pouvez diffuser ce lien :
|
||||
<code>
|
||||
{{config.urlAdmin}}
|
||||
</code>
|
||||
</label>
|
||||
<input type="submit" name="copy-link" class=" btn btn--primary btn--outline" value="Copier le lien" id="copyLink">
|
||||
<h3 class="margin-top-x6 margin-btm-x3">Exporter/Imprimer</h3>
|
||||
<input type="submit" name="export" class="margin-btm-x3 btn btn--primary btn--outline" value="Exporter en .csv" (click)="exportCSV()">
|
||||
<input type="submit" name="copy-link" class="btn btn--primary btn--outline" value="Imprimer le sondage">
|
||||
</div>
|
||||
</framadate-voting-comment >
|
||||
</div >
|
||||
<div class="sharing" >
|
||||
<h3 class="margin-top-x8" >Partager le sondage
|
||||
|
||||
<i class='fa fa-share' ></i ></h3 >
|
||||
<p
|
||||
class="nobold text-14"
|
||||
for="copyLink" >Pour partager le sondage, vous pouvez diffuser ce lien :
|
||||
<a href='{{config.urlPublic}}' >
|
||||
{{config.urlPublic}}
|
||||
</a >
|
||||
</p >
|
||||
<button
|
||||
class=" btn btn--primary btn--outline"
|
||||
[ngxClipboard]
|
||||
[cbContent]="config.urlPublic"
|
||||
id="copyLink" >
|
||||
<i class='fa fa-copy' ></i >
|
||||
{{"admin.copy_link" |translate}}
|
||||
</button >
|
||||
<h3 class="margin-top-x6 margin-btm-x3" >
|
||||
Exporter/Imprimer
|
||||
</h3 >
|
||||
<input
|
||||
type="submit"
|
||||
name="export"
|
||||
class="margin-btm-x3 btn btn--primary btn--outline"
|
||||
value="Exporter en .csv"
|
||||
(click)="config.exportCSV()" >
|
||||
<input
|
||||
type="submit"
|
||||
name="copy-link"
|
||||
class="btn btn--primary btn--outline"
|
||||
value="Imprimer le sondage"
|
||||
(click)="config.print()" >
|
||||
</div >
|
||||
|
||||
@ -23,7 +23,4 @@ export class PollDisplayComponent extends BaseComponent implements OnInit {
|
||||
// store it in the poll property here
|
||||
}
|
||||
|
||||
exportCSV() {
|
||||
// TODO
|
||||
}
|
||||
}
|
||||
|
||||
@ -185,7 +185,6 @@ export class ConfigService extends PollConfig {
|
||||
* @param err
|
||||
*/
|
||||
handleError(err: any) {
|
||||
// TODO handle a toast message
|
||||
console.error('err', err);
|
||||
this.loading = false;
|
||||
this.messageService.add({severity: 'warning', summary: "Erreur lors de l'appel ", detail: err.message});
|
||||
@ -294,7 +293,13 @@ export class ConfigService extends PollConfig {
|
||||
* /api/v1/poll/{id}/vote
|
||||
* @param voteStack
|
||||
*/
|
||||
addVote(voteStack: any) {
|
||||
addVote(voteStack?: any) {
|
||||
if (!voteStack) {
|
||||
voteStack = {
|
||||
pseudo: this.myName,
|
||||
answers: this.answers
|
||||
}
|
||||
}
|
||||
this.http.post(
|
||||
`${this.baseHref}/poll/${this.pollId}/vote`,
|
||||
voteStack,
|
||||
@ -334,7 +339,13 @@ export class ConfigService extends PollConfig {
|
||||
* /api/v1/poll/{id}/comment
|
||||
* @param comment
|
||||
*/
|
||||
addComment(comment: any) {
|
||||
addComment(comment?: any) {
|
||||
if (!comment) {
|
||||
comment = {
|
||||
pseudo: this.myName,
|
||||
comment: this.myComment,
|
||||
}
|
||||
}
|
||||
this.http.post(
|
||||
`${this.baseHref}/poll/${this.pollId}/comment`,
|
||||
comment,
|
||||
@ -345,6 +356,8 @@ export class ConfigService extends PollConfig {
|
||||
summary: 'Commentaire Créé',
|
||||
detail: 'Via MessageService'
|
||||
});
|
||||
// empty comment after success
|
||||
this.myComment = '';
|
||||
}, (e) => {
|
||||
this.handleError(e)
|
||||
}
|
||||
@ -456,4 +469,38 @@ export class ConfigService extends PollConfig {
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* export all the poll data available to the public as a CSV single file
|
||||
*/
|
||||
exportCSV() {
|
||||
|
||||
// TODO
|
||||
const rows = [
|
||||
["name1", "city1", "some other info"],
|
||||
["name2", "city2", "more info"]
|
||||
];
|
||||
|
||||
let csvContent = "data:text/csv;charset=utf-8,"
|
||||
+ rows.map(e => e.join(",")).join("\n");
|
||||
var encodedUri = encodeURI(csvContent);
|
||||
var link = document.createElement("a");
|
||||
link.setAttribute("href", encodedUri);
|
||||
link.setAttribute("download", this.makeSlug() + "_export_" + new Date() + ".csv");
|
||||
document.body.appendChild(link); // Required for FF
|
||||
this.todo();
|
||||
link.click(); // This will download the data file named "my_data.csv".
|
||||
}
|
||||
|
||||
print() {
|
||||
alert('TODO');
|
||||
}
|
||||
|
||||
todo() {
|
||||
this.messageService.add({
|
||||
severity: 'info',
|
||||
detail: "cette fonctionnalité n'est pas encore disponible. Venez en discuter sur framateam.org / Ux et design libre / Framasoft",
|
||||
summary: "Work in progress",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -164,3 +164,8 @@ select, input, textarea {
|
||||
color: $primary_color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -2,7 +2,12 @@
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
"types": [
|
||||
"node"
|
||||
],
|
||||
"typeRoots": [
|
||||
"./node_modules/@types"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts",
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"node": true,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
@ -11,6 +12,9 @@
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2018",
|
||||
"types": [
|
||||
"node"
|
||||
],
|
||||
"typeRoots": [
|
||||
"node_modules/@types"
|
||||
],
|
||||
|
||||
@ -1187,10 +1187,10 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.7.4.tgz#64db61e0359eb5a8d99b55e05c729f130a678b04"
|
||||
integrity sha512-W0+n1Y+gK/8G2P/piTkBBN38Qc5Q1ZSO6B5H3QmPCUewaiXOo2GCAWZ4ElZCcNhjJuBSUSLGFUJnmlCn5+nxOQ==
|
||||
|
||||
"@types/node@~8.9.4":
|
||||
version "8.9.5"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-8.9.5.tgz#162b864bc70be077e6db212b322754917929e976"
|
||||
integrity sha512-jRHfWsvyMtXdbhnz5CVHxaBgnV6duZnPlQuRSo/dm/GnmikNcmZhxIES4E9OZjUmQ8C+HCl4KJux+cXN/ErGDQ==
|
||||
"@types/node@^13.1.7":
|
||||
version "13.1.7"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-13.1.7.tgz#db51d28b8dfacfe4fb2d0da88f5eb0a2eca00675"
|
||||
integrity sha512-HU0q9GXazqiKwviVxg9SI/+t/nAsGkvLDkIdxz+ObejG2nX6Si00TeLqHMoS+a/1tjH7a8YpKVQwtgHuMQsldg==
|
||||
|
||||
"@types/q@^0.0.32":
|
||||
version "0.0.32"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user