⚡ selector custom component for ui, half the visibility page

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import {BrowserModule} from '@angular/platform-browser';
-import {LOCALE_ID, NgModule} from '@angular/core';
+import {NgModule} from '@angular/core';
 
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
@@ -19,7 +19,6 @@ import {PicturesComponent} from './pages/pictures/pictures.component';
 import {AnswersComponent} from './pages/answers/answers.component';
 import {EndConfirmationComponent} from './pages/end-confirmation/end-confirmation.component';
 import {CreateOrRetrieveComponent} from './pages/create-or-retrieve/create-or-retrieve.component';
-import {CalendarComponent} from './calendar/calendar.component';
 import localeFr from '@angular/common/locales/fr';
 import localeEn from '@angular/common/locales/en';
 import {VotingSummaryComponent} from './pages/voting-summary/voting-summary.component';
@@ -41,6 +40,7 @@ import {TranslateHttpLoader} from '@ngx-translate/http-loader';
 import {PollGraphicComponent} from './poll-graphic/poll-graphic.component';
 
 import {AdminComponent} from './pages/admin/admin.component';
+import {SelectorComponent} from './ui/selector/selector.component';
 
 export class MyMissingTranslationHandler implements MissingTranslationHandler {
     handle(params: MissingTranslationHandlerParams) {
@@ -70,7 +70,6 @@ export function HttpLoaderFactory(http: HttpClient) {
         AnswersComponent,
         EndConfirmationComponent,
         CreateOrRetrieveComponent,
-        CalendarComponent,
         VotingSummaryComponent,
         VotingGraphComponent,
         VotingChoiceComponent,
@@ -79,6 +78,7 @@ export function HttpLoaderFactory(http: HttpClient) {
         PollGraphicComponent,
         VoteChoiceComponent,
         AdminComponent,
+        SelectorComponent,
 
     ],
     imports: [

src/app/calendar/calendar.component.html

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

src/app/calendar/calendar.component.html.save

@@ -1 +0,0 @@
-

src/app/calendar/calendar.component.ts

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

src/app/config/PollConfig.ts

@@ -27,6 +27,18 @@ export const defaultDates = [
         timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
     }
 ];
+export const defaultAnswers = [{
+    id: 0,
+    text: 'réponse de démo 1'
+},
+    {
+        id: 1,
+        text: 'réponse 2'
+    },
+    {
+        id: 2,
+        text: 'la réponse D'
+    }];
 
 /**
  * configuration of the poll, add new fields at will
@@ -43,23 +55,14 @@ export class PollConfig {
     allowSeveralHours = 'false';
     // access
     visibility = 'link_only'; // visible to anyone with the link:
+    voteChoices = 'only_yes'; // possible answers to a vote choice: only "yes", "yes, maybe, no"
     password = '';
     customUrl = '';
     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,
+    answers: any = defaultAnswers;
-        text: 'réponse de démo 1'
-    },
-        {
-            id: 1,
-            text: 'réponse 2'
-        },
-        {
-            id: 2,
-            text: 'la réponse D'
-        }];
 
 
 }

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

@@ -1,30 +1,60 @@
 <h1 i18n>
     {{"visibility.top_txt"|translate}}
+</h1>
+<section class="answers">
+
+    <h2>
         {{"visibility.title"|translate}}
-
+    </h2>
+    <span>
     {{"visibility.visibility_want"|translate}}
+    </span>
+    <select
+        name="visible_people"
+        id="visible_people"
+        [(ngModel)]="config.visibility"
+    >
+        <option value="link">
             {{"visibility.visibility_link"|translate}}
+        </option>
+        <option value="only_me">
             {{"visibility.visibility_nobody"|translate}}
+        </option>
+    </select>
+    <span>
     {{"visibility.visibility_see"|translate}}
-
+    </span>
-</h1>
-
-<section>
-    <h1>
-        {{"visibility.votes"|translate}}
-    </h1>
-    {{"visibility.votes_possible"|translate}}
-    {{"visibility.votes_possible_single"|translate}}
-    {{"visibility.votes_possible_normal"|translate}}
-    {{"visibility.votes_possible_full"|translate}}
-
 
 </section>
-<section class="visibility">
 
-    <h1>
+<section class="possible_votes">
+    <h2>
+        {{"visibility.votes"|translate}}
+    </h2>
+    <span>
+    {{"visibility.votes_possible"|translate}}
+    </span>
+    <select
+        name="votes"
+        id="votes"
+        [(ngModel)]="config.visibility"
+    >
+        <option value="only_yes">
+            {{"visibility.votes_possible_single"|translate}}
+        </option>
+        <option value="normal">
+            {{"visibility.votes_possible_normal"|translate}}
+        </option>
+        <option value="full">
+            {{"visibility.votes_possible_full"|translate}}
+        </option>
+    </select>
+</section>
+<section class="expiracy">
+    <span>
         {{"visibility.archiving"|translate}}
-    </h1>
+    </span>
+
     {{"visibility.archiving_start"|translate}}
     {{"visibility.archiving_can"|translate}}
     {{"visibility.archiving_can_not"|translate}}

src/app/ui/selector/selector.component.html

@@ -0,0 +1,9 @@
+<select
+    class="custom-selector"
+    name="{{selectorConfig.name}}"
+    id="{{selectorConfig.id}}"
+    [(ngModel)]="selectorConfig.selectorNgModel">
+    <option value="{{item.value}}" selected *ngFor="let item of selectorConfig.listItems">
+        {{item.label}}
+    </option>
+</select>

src/app/ui/selector/selector.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CalendarComponent } from './calendar.component';
+import { SelectorComponent } from './selector.component';
 
-describe('CalendarComponent', () => {
+describe('SelectorComponent', () => {
-  let component: CalendarComponent;
+  let component: SelectorComponent;
-  let fixture: ComponentFixture<CalendarComponent>;
+  let fixture: ComponentFixture<SelectorComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CalendarComponent ]
+      declarations: [ SelectorComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(CalendarComponent);
+    fixture = TestBed.createComponent(SelectorComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/ui/selector/selector.component.ts

@@ -0,0 +1,30 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+interface Item {
+    label: string,
+    value: string
+}
+
+interface SelectorConfig {
+    label: string,
+    name: string,
+    id: string,
+    selectorNgModel: any,
+    listItems: Item[]
+}
+
+@Component({
+    selector: 'framadate-selector',
+    templateUrl: './selector.component.html',
+    styleUrls: ['./selector.component.scss']
+})
+export class SelectorComponent implements OnInit {
+    @Input() selectorConfig: SelectorConfig;
+
+    constructor() {
+    }
+
+    ngOnInit() {
+    }
+
+}