mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
⚡ example of navigation
This commit is contained in:
tykayn
parent
c048c35b9d
commit
42f229f686
@ -1,12 +1,17 @@
|
||||
<!--The content below is only a placeholder and can be replaced.-->
|
||||
<div style="text-align:center">
|
||||
<h1 >
|
||||
<span i18n>Bienvenue sur </span>
|
||||
<span class="logo_first">Frama</span>
|
||||
<span class="logo_second">date</span>
|
||||
</h1>
|
||||
<p i18n>
|
||||
Ceci est une démo
|
||||
</p>
|
||||
<a [routerLink]="'home'"
|
||||
class="home_link"
|
||||
aria-roledescription="home">
|
||||
<h1>
|
||||
<span i18n>Bienvenue sur </span>
|
||||
<span class="logo_first">Frama</span>
|
||||
<span class="logo_second">date</span>
|
||||
</h1>
|
||||
</a>
|
||||
<i i18n>
|
||||
Ceci est une démo
|
||||
</i>
|
||||
</div>
|
||||
<router-outlet></router-outlet>
|
||||
<framadate-navigation></framadate-navigation>
|
||||
<framadate-debugger></framadate-debugger>
|
||||
|
||||
@ -12,6 +12,8 @@ import {NavigationComponent} from './ui/navigation/navigation.component';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {Routes} from './config/Routes';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import { DatesComponent } from './pages/dates/dates.component';
|
||||
import { DebuggerComponent } from './debugger/debugger.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
@ -22,6 +24,8 @@ import {CommonModule} from '@angular/common';
|
||||
PageKindComponent,
|
||||
HeaderComponent,
|
||||
NavigationComponent,
|
||||
DatesComponent,
|
||||
DebuggerComponent,
|
||||
|
||||
],
|
||||
imports: [
|
||||
|
||||
39
src/app/config.service.ts
Normal file
39
src/app/config.service.ts
Normal file
@ -0,0 +1,39 @@
|
||||
import {Injectable} from '@angular/core';
|
||||
|
||||
/**
|
||||
* une option de date dans les sondages spéciaux
|
||||
*/
|
||||
export interface DateOption {
|
||||
text: string;
|
||||
start?: string;
|
||||
end?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* le service transverse à chaque page qui permet de syncroniser la configuration de sondage souhaitée
|
||||
*/
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ConfigService {
|
||||
step = 0;
|
||||
stepMax = 3;
|
||||
pollType = 'classic';
|
||||
title = '';
|
||||
description = '';
|
||||
allowSeveralHours = true;
|
||||
dateList: DateOption[] = [];
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
set(key, val) {
|
||||
this[key] = val;
|
||||
}
|
||||
|
||||
sendForm() {
|
||||
// todo
|
||||
console.log('sends the form');
|
||||
alert('envoi de formulaire en XHR à faire');
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
/**
|
||||
* used as a global form configuration object to generate the form to send
|
||||
*/
|
||||
export var PollConfig = {
|
||||
poll_type: "simple",
|
||||
allow_stuff: true,
|
||||
};
|
||||
@ -1,12 +1,15 @@
|
||||
import {FormContainerComponent} from '../form-container/form-container.component';
|
||||
import {PageKindComponent} from '../pages/page-kind/page-kind.component';
|
||||
import {DatesComponent} from '../pages/dates/dates.component';
|
||||
|
||||
/**
|
||||
* each step in the form is a component inheriting from the base
|
||||
* each step in the form is a component
|
||||
*/
|
||||
export const Routes =
|
||||
[
|
||||
{path: '', component: FormContainerComponent},
|
||||
{path: 'step/1', component: PageKindComponent}
|
||||
]
|
||||
[
|
||||
{path: '', component: FormContainerComponent},
|
||||
{path: 'home', component: FormContainerComponent},
|
||||
{path: 'step/date', component: DatesComponent},
|
||||
{path: 'step/kind', component: PageKindComponent}
|
||||
]
|
||||
;
|
||||
|
||||
@ -1,92 +1,56 @@
|
||||
<div class="description">
|
||||
<router-outlet></router-outlet>
|
||||
<h2 class="title" i18n>
|
||||
titre de question
|
||||
</h2>
|
||||
<span class="pre-selector" i18n>
|
||||
Je veux créer un sondage
|
||||
<fieldset>
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
<span class="pre-selector" i18n>
|
||||
Je veux créer un sondage
|
||||
</span>
|
||||
<select
|
||||
id="selector"
|
||||
name="selector"
|
||||
[(ngModel)]="config.pollType"
|
||||
>
|
||||
<option value="dates">
|
||||
spécial dates
|
||||
</option>
|
||||
<option value="classic">
|
||||
classique
|
||||
</option>
|
||||
</select>
|
||||
<span class="post-selector">
|
||||
</span>
|
||||
<select id="selector" name="selector" [(ngModel)]="pollConfig.poll_type">
|
||||
<option value="dates">
|
||||
spécial dates
|
||||
</option>
|
||||
<option value="classic">
|
||||
classique
|
||||
</option>
|
||||
</select>
|
||||
<span class="post-selector">
|
||||
</span>
|
||||
<hr>
|
||||
<label for="poll_title" class="title-label" i18n>
|
||||
Dont le titre sera
|
||||
</label>
|
||||
<input type="text" id="poll_title" name="poll_title" [(ngModel)]="pollConfig.title">
|
||||
<hr>
|
||||
<div>
|
||||
|
||||
<label for="poll_description" class="title-label" i18n>
|
||||
et la description serait
|
||||
</label>
|
||||
<input type="text" id="poll_description" name="poll_description" [(ngModel)]="pollConfig.description" max="1000">
|
||||
<label for="poll_title" class="title-label" i18n>
|
||||
Dont le titre sera
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="poll_title"
|
||||
name="poll_title"
|
||||
[(ngModel)]="config.title">
|
||||
|
||||
<hr>
|
||||
<span i18n>
|
||||
Choix cornélien:
|
||||
</span>
|
||||
<!-- todo: factoriser les boutons-->
|
||||
<button
|
||||
(click)="selectOption('poll_type' , 'classic')"
|
||||
[class.active]="pollConfig.type_classic"
|
||||
[disabled]="!formIsValid"
|
||||
class="btn btn-primary next"
|
||||
>
|
||||
<span i18n>
|
||||
sondage classique
|
||||
</span>
|
||||
<span *ngIf="pollConfig.poll_type == 'classic'">
|
||||
[x]
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</button>
|
||||
<button
|
||||
(click)="selectOption('poll_type' ,'dates')"
|
||||
[class.active]="pollConfig.type_dates"
|
||||
[disabled]="!formIsValid"
|
||||
class="btn btn-primary next"
|
||||
>
|
||||
<span i18n>
|
||||
sondage spécial date
|
||||
</span>
|
||||
<span *ngIf="pollConfig.poll_type == 'dates'">
|
||||
[x]
|
||||
</span>
|
||||
<label for="poll_description" class="title-label" i18n>
|
||||
et la description serait
|
||||
</label>
|
||||
<textarea
|
||||
id="poll_description"
|
||||
name="poll_description"
|
||||
[(ngModel)]="config.description"
|
||||
cols="50" lines="5"></textarea>
|
||||
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<hr>
|
||||
<framadate-navigation></framadate-navigation>
|
||||
<hr>
|
||||
<div class="well debug">
|
||||
<strong>
|
||||
|
||||
<span i18n>
|
||||
infos de debug
|
||||
</span>
|
||||
</strong>
|
||||
<ul>
|
||||
<li>
|
||||
étape actuelle {{progressionStep}} / {{progressionStepMax}}
|
||||
</li>
|
||||
<li>
|
||||
formulaire valide : {{formIsValid}}
|
||||
</li>
|
||||
<li>
|
||||
type de formulaire: {{pollConfig.poll_type}}
|
||||
</li>
|
||||
<li>
|
||||
pollConfig:
|
||||
<pre>
|
||||
{{pollConfig|json}}
|
||||
</pre>
|
||||
</li>
|
||||
</ul>
|
||||
<a
|
||||
[routerLink]="'/step/kind'"
|
||||
class="btn striked"
|
||||
i18n="start_form">
|
||||
C'est parti
|
||||
</a>
|
||||
<hr>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {ProgressionService} from '../progression.service';
|
||||
import {ConfigService} from '../config.service';
|
||||
|
||||
// import {PollConfig} from '../config/PollConfig';
|
||||
|
||||
@ -14,18 +14,10 @@ import {ProgressionService} from '../progression.service';
|
||||
*/
|
||||
export class FormContainerComponent implements OnInit {
|
||||
|
||||
// todo make a class in the config folder of this
|
||||
private pollConfig: any = {
|
||||
poll_type: 'classic',
|
||||
title: '',
|
||||
description: '',
|
||||
allow_stuff: true,
|
||||
};
|
||||
private progressionStep = 0;
|
||||
private progressionStepMax = 0;
|
||||
private formIsValid = true;
|
||||
|
||||
constructor(private progression: ProgressionService) {
|
||||
|
||||
constructor(private config: ConfigService) {
|
||||
|
||||
}
|
||||
|
||||
@ -40,11 +32,6 @@ export class FormContainerComponent implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
selectOption(key: string, val: any) {
|
||||
this.pollConfig[key] = val;
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
checkValidity() {
|
||||
// TODO with form controls
|
||||
|
||||
@ -1,18 +1,20 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {ConfigService} from '../../config.service';
|
||||
|
||||
@Component({
|
||||
selector: 'framadate-base-page',
|
||||
templateUrl: './base-page.component.html',
|
||||
styleUrls: ['./base-page.component.scss']
|
||||
selector: 'framadate-base-page',
|
||||
templateUrl: './base-page.component.html',
|
||||
styleUrls: ['./base-page.component.scss']
|
||||
})
|
||||
/**
|
||||
* base page is aware of the state of the filling
|
||||
*/
|
||||
export class BasePageComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
constructor(private config: ConfigService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
30
src/app/pages/dates/dates.component.html
Normal file
30
src/app/pages/dates/dates.component.html
Normal file
@ -0,0 +1,30 @@
|
||||
<div i18n>
|
||||
Config spécialement pour les dates
|
||||
</div>
|
||||
<div>
|
||||
<select name="multi_hours" id="multi_hours"
|
||||
[(ngModel)]="config.allowSeveralHours">
|
||||
<option value="yes"></option>
|
||||
<option value="no"></option>
|
||||
</select>
|
||||
<label for="multi_hours" i18n>
|
||||
Je souhaite mettre des créneaux horaires différents pour chaque jour
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<button
|
||||
(click)="addDate()"
|
||||
i18n>
|
||||
Ajouter une plage de dates
|
||||
</button>
|
||||
<div class="dates-list">
|
||||
{{config.dateList.length}}
|
||||
<span i18n>
|
||||
choix de Dates
|
||||
</span>
|
||||
<div
|
||||
*ngFor="let choice of config.dateList"
|
||||
class="date-choice">
|
||||
{{choice.text}}
|
||||
</div>
|
||||
</div>
|
||||
0
src/app/pages/dates/dates.component.scss
Normal file
0
src/app/pages/dates/dates.component.scss
Normal file
25
src/app/pages/dates/dates.component.spec.ts
Normal file
25
src/app/pages/dates/dates.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DatesComponent } from './dates.component';
|
||||
|
||||
describe('DatesComponent', () => {
|
||||
let component: DatesComponent;
|
||||
let fixture: ComponentFixture<DatesComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DatesComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DatesComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
22
src/app/pages/dates/dates.component.ts
Normal file
22
src/app/pages/dates/dates.component.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {ConfigService} from '../../config.service';
|
||||
import {BasePageComponent} from '../base-page/base-page.component';
|
||||
|
||||
@Component({
|
||||
selector: 'framadate-dates',
|
||||
templateUrl: './dates.component.html',
|
||||
styleUrls: ['./dates.component.scss']
|
||||
})
|
||||
export class DatesComponent extends BasePageComponent implements OnInit {
|
||||
|
||||
constructor(config: ConfigService) {
|
||||
super(config);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
addDate() {
|
||||
console.log('TODO');
|
||||
}
|
||||
}
|
||||
@ -1 +1,2 @@
|
||||
<p>page-kind works!</p>
|
||||
<p>cette étape est en cours de développement. <br> S'inspirer de la page de FormContainer pour réaliser d'autres pages
|
||||
</p>
|
||||
|
||||
@ -1,18 +1,19 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {BasePageComponent} from '../base-page/base-page.component';
|
||||
import {ConfigService} from '../../config.service';
|
||||
|
||||
@Component({
|
||||
selector: 'framadate-page-kind',
|
||||
templateUrl: './page-kind.component.html',
|
||||
styleUrls: ['./page-kind.component.scss']
|
||||
selector: 'framadate-page-kind',
|
||||
templateUrl: './page-kind.component.html',
|
||||
styleUrls: ['./page-kind.component.scss']
|
||||
})
|
||||
export class PageKindComponent extends BasePageComponent implements OnInit {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
constructor(config: ConfigService) {
|
||||
super(config);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ProgressionService } from './progression.service';
|
||||
import { ConfigService } from './config.service';
|
||||
|
||||
describe('ProgressionService', () => {
|
||||
describe('ConfigService', () => {
|
||||
beforeEach(() => TestBed.configureTestingModule({}));
|
||||
|
||||
it('should be created', () => {
|
||||
const service: ProgressionService = TestBed.get(ProgressionService);
|
||||
const service: ConfigService = TestBed.get(ConfigService);
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
import {Injectable} from '@angular/core';
|
||||
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ProgressionService {
|
||||
private step: number;
|
||||
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
@ -1,22 +1,39 @@
|
||||
<div class="choices">
|
||||
<button
|
||||
(click)="nextPage()"
|
||||
[disabled]="!formIsValid"
|
||||
class="btn btn-primary next"
|
||||
>
|
||||
|
||||
<a
|
||||
class="btn btn-primary"
|
||||
[routerLink]="'/step/date'">
|
||||
Aller aux dates
|
||||
</a>
|
||||
<a
|
||||
class="btn btn-primary"
|
||||
[routerLink]="'/step/kind'">
|
||||
Aller aux options classiques
|
||||
</a>
|
||||
<a
|
||||
class="btn btn-primary"
|
||||
[routerLink]="'/home'">
|
||||
Accueil
|
||||
</a>
|
||||
<br>
|
||||
<button
|
||||
(click)="nextPage()"
|
||||
[disabled]="!formIsValid"
|
||||
class="btn btn-primary next"
|
||||
>
|
||||
<span i18n>
|
||||
précédent
|
||||
</span>
|
||||
<i class="fa fa-arrow-right"></i>
|
||||
</button>
|
||||
<button
|
||||
(click)="nextPage()"
|
||||
[disabled]="!formIsValid"
|
||||
class="btn btn-primary next"
|
||||
>
|
||||
<i class="fa fa-arrow-right"></i>
|
||||
</button>
|
||||
<button
|
||||
(click)="nextPage()"
|
||||
[disabled]="!formIsValid"
|
||||
class="btn btn-primary next"
|
||||
>
|
||||
<span i18n>
|
||||
suivant
|
||||
</span>
|
||||
<i class="fa fa-arrow-right"></i>
|
||||
</button>
|
||||
<i class="fa fa-arrow-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
7
src/assets/_font.scss
Normal file
7
src/assets/_font.scss
Normal file
@ -0,0 +1,7 @@
|
||||
body {
|
||||
font-family: "DejaVu Sans Light", "Arial", "DejaVu Sans Mono";
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: "Brie Light", "Arial", "DejaVu Sans Mono";
|
||||
}
|
||||
@ -1,21 +1,40 @@
|
||||
input{
|
||||
background: $light;
|
||||
padding: 0.5em;
|
||||
border:0;
|
||||
border-bottom: 3px solid $main_color;
|
||||
input, textarea,
|
||||
select {
|
||||
@extend .funky-box;
|
||||
}
|
||||
|
||||
select{
|
||||
.funky-box {
|
||||
background: $light;
|
||||
padding: 0.5em;
|
||||
border:0;
|
||||
padding: 1em;
|
||||
border-radius: 0.25em;
|
||||
border: 1px solid $main_color;
|
||||
border-bottom: 3px solid $main_color_strong;
|
||||
|
||||
&:focus {
|
||||
color: $main_color_strong;
|
||||
}
|
||||
}
|
||||
|
||||
.btn{
|
||||
// buttons
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 1em;
|
||||
border-radius: 0.25em;
|
||||
background: $main_color_strong;
|
||||
color: $light;
|
||||
border: 0;
|
||||
margin: 0 0.5em;
|
||||
margin: 1em;
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.home_link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.striked {
|
||||
background: linear-gradient($main_color, $main_color_strong);
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
@import "assets/variables";
|
||||
@import "assets/font";
|
||||
@import "assets/global_layout";
|
||||
@import "assets/logo";
|
||||
@import "assets/debug";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user