selector custom component for ui, half the visibility page

This commit is contained in:
Baptiste Lemoine 2019-11-23 14:30:19 +01:00
parent 8ff8cbc408
commit d107978f2c
10 changed files with 115 additions and 60 deletions

View File

@ -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';
@ -29,7 +28,7 @@ import {PasswordComponent} from './pages/password/password.component';
import {HomeComponent} from './pages/home/home.component';
import {VoteChoiceComponent} from './vote-choice/vote-choice.component';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import { MarkdownModule } from 'ngx-markdown';
import {MarkdownModule} from 'ngx-markdown';
import {
MissingTranslationHandler,
MissingTranslationHandlerParams,
@ -38,9 +37,10 @@ import {
TranslateService
} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import { PollGraphicComponent } from './poll-graphic/poll-graphic.component';
import {PollGraphicComponent} from './poll-graphic/poll-graphic.component';
import { AdminComponent } from './pages/admin/admin.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: [

View File

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

View File

@ -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() {
}
}

View File

@ -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,
text: 'réponse de démo 1'
},
{
id: 1,
text: 'réponse 2'
},
{
id: 2,
text: 'la réponse D'
}];
answers: any = defaultAnswers;
}

View File

@ -1,30 +1,60 @@
<h1 i18n>
{{"visibility.top_txt"|translate}}
{{"visibility.title"|translate}}
{{"visibility.visibility_want"|translate}}
{{"visibility.visibility_link"|translate}}
{{"visibility.visibility_nobody"|translate}}
{{"visibility.visibility_see"|translate}}
</h1>
<section class="answers">
<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}}
<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>
</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}}

View File

@ -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>

View File

@ -1,20 +1,20 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CalendarComponent } from './calendar.component';
import { SelectorComponent } from './selector.component';
describe('CalendarComponent', () => {
let component: CalendarComponent;
let fixture: ComponentFixture<CalendarComponent>;
describe('SelectorComponent', () => {
let component: SelectorComponent;
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();
});

View File

@ -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() {
}
}