⚡ split poll display components

src/app/app.module.ts

@@ -54,6 +54,9 @@ import {ConfirmDialogModule} from 'primeng/confirmdialog';
 import {DialogModule} from 'primeng/dialog';
 import {DateValueAccessorModule} from "angular-date-value-accessor";
 import {CopyTextComponent} from './ui/copy-text/copy-text.component';
+import { CommentsListComponent } from './pages/voting/comments-list/comments-list.component';
+import { ChoicesListComponent } from './pages/voting/choices-list/choices-list.component';
+import { VotingNavigationComponent } from './pages/voting/voting-navigation/voting-navigation.component';
 
 export class MyMissingTranslationHandler implements MissingTranslationHandler {
     handle(params: MissingTranslationHandlerParams) {
@@ -97,6 +100,9 @@ export function HttpLoaderFactory(http: HttpClient) {
         ResettableInputDirective,
         ErasableInputComponent,
         CopyTextComponent,
+        CommentsListComponent,
+        ChoicesListComponent,
+        VotingNavigationComponent,
 
     ],
     imports: [

src/app/config/PollConfig.ts

@@ -56,7 +56,7 @@ export class PollConfig {
     urlAdmin = environment.baseHref + '/#/admin/d65es45fd45sdf45sd345f312sdf31sgfd345';
     adminKey = ''; // key to change config of the poll
     owner_modifier_token = ''; // key to change a vote stack
-    canModifyAnswers = 1;// everybody, self, nobody (= just admin)
+    canModifyAnswers = true;// bool for the frontend selector
     whoModifiesAnswers = "everybody";// everybody, self, nobody (= just admin)
     whoCanChangeAnswers = 'everybody';// everybody, self, nobody (= just admin)
     dateList: any = defaultDates; // sets of days as strings, config to set identical time for days in a special days poll

src/app/pages/poll-display/poll-display.component.html

@@ -1,162 +1,73 @@
-<div class="poll" >
-    <div id='table' >
-        <framadate-voting-summary ></framadate-voting-summary >
-    </div >
-    <!--    <nav class='sections-nav' >-->
-    <!--        <ul >-->
-    <!--            <li >-->
-    <!--                <a href='#title' >-->
-    <!--                    {{config.currentPoll.poll.title}}-->
-    <!--                </a >-->
-    <!--            </li >-->
-    <!--            <li >-->
-    <!--                <a href='#table' >-->
-    <!--                    {{config.currentPoll.stacks.length}}-->
-    <!--                    votes-->
-    <!--                </a >-->
-    <!--            </li >-->
-    <!--            <li >-->
-    <!--                <a href='#graph' >-->
-    <!--                    Graphique-->
-    <!--                </a >-->
-    <!--            </li >-->
-    <!--            <li >-->
-    <!--                <a href='#comments' >-->
-    <!--                    <i class='fa fa-comments' ></i >-->
-    <!--                    <span-->
-    <!--                        *ngIf='config.currentPoll && config.currentPoll.comments'-->
-    <!--                        class='comments-count' >-->
-    <!--                        {{config.currentPoll.comments.length}}-->
-    <!--                    </span >-->
-    <!--                    commentaires-->
-    <!--                </a >-->
-    <!--            </li >-->
-    <!--        </ul >-->
-    <!--    </nav >-->
-
-</div >
-<section class="name" >
-    <label for="name" >
-        <i class='fa fa-user' ></i >
-        Votre nom :</label >
-    <input
-        type="text"
-        name="name"
-        id="name"
-        [(ngModel)]="config.myName" >
-    <input
-        type="text"
-        name="name"
-        id="email"
-        [(ngModel)]="config.myEmail" >
-    <i class='fa fa-envelope' ></i >
-</section >
 <div
-    *ngIf='config.currentPoll'
-    class="list-of-choices" >
-    <div *ngFor="let choice of config.currentPoll.choices" >
-
-        <framadate-voting-choice
-            [choice]="choice"
-            [choices_count]="config.currentPoll.choices_count"
-            [pollIsSpecialDate]="config.currentPoll.poll.kind == 'date'"
-            [poll]='config.currentPoll' ></framadate-voting-choice >
-    </div >
-</div >
-<button
-    class='btn  btn-block submit-votestack'
-    (click)='config.addVote()'
-    [disabled]='!config.myTempVoteStack'
-    [ngClass]='{"btn--primary" : config.myTempVoteStack } '
-    *ngIf='!config.myVoteStack || !config.myVoteStack.id' >
-    <i class='fa fa-paper-plane' ></i > Envoyer
-
-</button >
-<button
-    class='btn btn--primary btn-block submit-votestack update'
-    (click)='config.updateVote(config.myVoteStack)'
-    *ngIf='config.myVoteStack && config.myVoteStack.id' >
-    <i class='fa fa-pencil' ></i > Mettre à jour
-</button >
-<hr >
-<div id='graph' >
-
-    <!--<framadate-voting-graph ></framadate-voting-graph >-->
-</div >
-
-<div
-    class="comments"
-    id='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" >
-    <input
-        type="text"
-        name="cremail"
-        id="email_comment"
-        [(ngModel)]="config.myEmail" >
-    <label for='email_comment' >
-        <i class='fa fa-envelope' ></i >
-    </label >
-    <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()' >
+    class="poll"
+>
     <div
-        class='comments-part'
-        *ngIf='config.currentPoll' >
-
-        <framadate-voting-comment
-            [comment]="c"
-            *ngFor="let c of config.currentPoll.comments " >
-        </framadate-voting-comment >
+        class='loading'
+        *ngIf='config.loading' >
+        <i class='fa fa-refresh fa-spin' ></i >
     </div >
-</div >
-<div
-    class="sharing"
-    *ngIf='config.currentPoll' >
-    <h3 class="margin-top-x8" >Partager le sondage
+    <div
+        class='loaded-poll'
+        *ngIf='!config.loading && config.currentPoll' >
+        <div id='table' >
+            <!--        <framadate-voting-navigation ></framadate-voting-navigation >-->
+            <framadate-voting-summary ></framadate-voting-summary >
+        </div >
 
-        <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.currentPoll.urlPublic}}' >
-            {{config.currentPoll.urlPublic}}
-        </a >
-    </p >
+        <div id='poll_comments' >
+            <framadate-comments-list ></framadate-comments-list >
+        </div >
+        <div id='choices' >
+
+            <framadate-choices-list ></framadate-choices-list >
+        </div >
+
+        <div id='graph' >
+            <!--<framadate-voting-graph ></framadate-voting-graph >-->
+        </div >
+        <div id='export_and_share' >
+
+            <div
+                class="sharing"
+                *ngIf='config.currentPoll' >
+                <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.currentPoll.urlPublic}}' >
+                        {{config.currentPoll.urlPublic}}
+                    </a >
+                </p >
+
+                <framadate-copy-text [textToCopy]='config.currentPoll.urlPublic' ></framadate-copy-text >
+                <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 >
+
+        </div >
+    </div >
+    <div
+        class='badly-loaded'
+        *ngIf='config.loading && !config.currentPoll' >
+        <div class='well is-warning' >
+
+            No current poll available
+        </div >
+    </div >
 
-    <framadate-copy-text [textToCopy]='config.currentPoll.urlPublic' ></framadate-copy-text >
-    <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 >

src/app/pages/poll-display/poll-display.component.ts

@@ -31,7 +31,6 @@ export class PollDisplayComponent extends BaseComponent implements OnInit {
 
     ngOnInit() {
 
-        this.config.exportCSV();
     }
 
 

src/app/pages/visibility/visibility.component.html

@@ -66,10 +66,10 @@
             name="modificationAbility"
             id="modificationAbility"
             [(ngModel)]="config.canModifyAnswers" >
-            <option value="1" >
+            <option value=true >
                 {{"visibility.archiving_can"|translate}}
             </option >
-            <option value=0 >
+            <option value=false >
                 {{"visibility.archiving_can_not"|translate}}
             </option >
         </select >
@@ -77,15 +77,15 @@
             {{"visibility.archiving_end"|translate}}
         </label >
 
-        <span *ngIf="'0' == config.canModifyAnswers" >
+        <span *ngIf="false == !!config.canModifyAnswers" >
         {{"visibility.modfiy_their"|translate}}
         </span >
         <select
             name="modificationScope"
             id="modificationScope"
-            *ngIf="'1' ==config.canModifyAnswers"
+            *ngIf="true == !!config.canModifyAnswers"
             [(ngModel)]="config.whoModifiesAnswers"
-            [disabled]="'0' == config.canModifyAnswers" >
+            [disabled]="false == !!config.canModifyAnswers" >
             <option value="self" >
                 {{"visibility.modfiy_their"|translate}}
             </option >

src/app/pages/voting/choices-list/choices-list.component.html

@@ -0,0 +1,28 @@
+
+<div
+    *ngIf='config.currentPoll'
+    class="list-of-choices" >
+    <div *ngFor="let choice of config.currentPoll.choices" >
+
+        <framadate-voting-choice
+            [choice]="choice"
+            [choices_count]="config.currentPoll.choices_count"
+            [pollIsSpecialDate]="config.currentPoll.poll.kind == 'date'"
+            [poll]='config.currentPoll' ></framadate-voting-choice >
+    </div >
+</div >
+<button
+    class='btn  btn-block submit-votestack'
+    (click)='config.addVote()'
+    [disabled]='!config.myTempVoteStack'
+    [ngClass]='{"btn--primary" : config.myTempVoteStack } '
+    *ngIf='!config.myVoteStack || !config.myVoteStack.id' >
+    <i class='fa fa-paper-plane' ></i > Envoyer
+
+</button >
+<button
+    class='btn btn--primary btn-block submit-votestack update'
+    (click)='config.updateVote(config.myVoteStack)'
+    *ngIf='config.myVoteStack && config.myVoteStack.id' >
+    <i class='fa fa-pencil' ></i > Mettre à jour
+</button >

src/app/pages/voting/choices-list/choices-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChoicesListComponent } from './choices-list.component';
+
+describe('ChoicesListComponent', () => {
+  let component: ChoicesListComponent;
+  let fixture: ComponentFixture<ChoicesListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChoicesListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChoicesListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/voting/choices-list/choices-list.component.ts

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {ConfigService} from "../../../services/config.service";
+
+@Component({
+    selector: 'framadate-choices-list',
+    templateUrl: './choices-list.component.html',
+    styleUrls: ['./choices-list.component.scss']
+})
+export class ChoicesListComponent {
+
+    constructor(public config: ConfigService) {
+
+    }
+
+}

src/app/pages/voting/comments-list/comments-list.component.html

@@ -0,0 +1,61 @@
+<section class="name" >
+    <label for="name" >
+        <i class='fa fa-user' ></i >
+        Votre nom :</label >
+    <input
+        type="text"
+        name="name"
+        id="name"
+        [(ngModel)]="config.myName" >
+    <input
+        type="text"
+        name="name"
+        id="email"
+        [(ngModel)]="config.myEmail" >
+    <i class='fa fa-envelope' ></i >
+</section >
+<div
+    class="comments"
+    id='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" >
+    <input
+        type="text"
+        name="cremail"
+        id="email_comment"
+        [(ngModel)]="config.myEmail" >
+    <label for='email_comment' >
+        <i class='fa fa-envelope' ></i >
+    </label >
+    <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()' >
+    <div
+        class='comments-part'
+        *ngIf='config.currentPoll' >
+
+        <framadate-voting-comment
+            [comment]="c"
+            *ngFor="let c of config.currentPoll.comments " >
+        </framadate-voting-comment >
+    </div >
+</div >

src/app/pages/voting/comments-list/comments-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommentsListComponent } from './comments-list.component';
+
+describe('CommentsListComponent', () => {
+  let component: CommentsListComponent;
+  let fixture: ComponentFixture<CommentsListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommentsListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CommentsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/voting/comments-list/comments-list.component.ts

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {ConfigService} from "../../../services/config.service";
+
+@Component({
+    selector: 'framadate-comments-list',
+    templateUrl: './comments-list.component.html',
+    styleUrls: ['./comments-list.component.scss']
+})
+export class CommentsListComponent {
+
+    constructor(public config: ConfigService) {
+
+    }
+
+}

src/app/pages/voting/navigation/navigation.component.html

@@ -0,0 +1 @@
+<p>navigation works!</p>

src/app/pages/voting/navigation/navigation.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavigationComponent } from './navigation.component';
+
+describe('NavigationComponent', () => {
+  let component: NavigationComponent;
+  let fixture: ComponentFixture<NavigationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavigationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavigationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/voting/navigation/navigation.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'framadate-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.scss']
+})
+export class NavigationComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/voting/voting-choice/voting-choice.component.scss

@@ -43,16 +43,6 @@ $breakpoint-responsive: 640px; // à définir
         font-weight: 700;
         background: #e9bdeb;
     }
-
-    @media (min-width: $breakpoint-responsive) {
-        align-items: center;
-        justify-content: space-between;
-        min-height: auto;
-    }
-
-    .title {
-        max-width: 25%;
-    }
 }
 
 .choicebox__subject {

src/app/pages/voting/voting-navigation/voting-navigation.component.html

@@ -0,0 +1,34 @@
+<nav id='navigation'>
+
+    <nav class='sections-nav' >
+        <ul >
+            <li >
+                <a href='#title' >
+                    {{config.currentPoll.poll.title}}
+                </a >
+            </li >
+            <li >
+                <a href='#table' >
+                    {{config.currentPoll.stacks.length}}
+                    votes
+                </a >
+            </li >
+            <li >
+                <a href='#graph' >
+                    Graphique
+                </a >
+            </li >
+            <li >
+                <a href='#comments' >
+                    <i class='fa fa-comments' ></i >
+                    <span
+                        *ngIf='config.currentPoll && config.currentPoll.comments'
+                        class='comments-count' >
+                            {{config.currentPoll.comments.length}}
+                        </span >
+                    commentaires
+                </a >
+            </li >
+        </ul >
+    </nav >
+</nav>

src/app/pages/voting/voting-navigation/voting-navigation.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VotingNavigationComponent } from './voting-navigation.component';
+
+describe('VotingNavigationComponent', () => {
+  let component: VotingNavigationComponent;
+  let fixture: ComponentFixture<VotingNavigationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VotingNavigationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VotingNavigationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/voting/voting-navigation/voting-navigation.component.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {ConfigService} from "../../../services/config.service";
+
+@Component({
+    selector: 'framadate-voting-navigation',
+    templateUrl: './voting-navigation.component.html',
+    styleUrls: ['./voting-navigation.component.scss']
+})
+export class VotingNavigationComponent {
+
+    constructor(public config: ConfigService) {
+    }
+
+}