home display stored polls

src/app/core/components/home/home.component.html

@@ -2,10 +2,63 @@
 	<div class="hero-body">
 		<div class="container">
 			<div class="column">
+				<section class="creation">
+					<h1 class="title is-1 is-centered">
+						{{ 'home.create_button' | translate }}
+					</h1>
+					<p class="subtitle">
+						{{
+							'SENTENCES.framadate-is-an-online-service-for-planning-an-appointment-or-making-a-decision-quickly-and-easily'
+								| translate
+						}}
+					</p>
+
+					<div class="container is-max-desktop">
+						<a role="button" class="button is-fullwidth is-primary is-size-3" routerLink="administration">
+							{{ 'config.letsgo' | translate }}
+						</a>
+					</div>
+				</section>
+				<section class="search">
+					<h1 class="title is-1 is-centered">
+						{{ 'home.search_title' | translate }}
+					</h1>
+
+					<ul class="poll-list">
+						<li *ngFor="let p of storageService.userPolls">
+							<a
+								class="button is-fullwidth padded"
+								[routerLink]="'poll/' + p.custom_url + '/consultation'"
+							>
+								{{ p.title }}
+								<i class="fa fa-arrow-right pull-right"></i>
+							</a>
+						</li>
+					</ul>
+					<form (ngSubmit)="searchMyPolls()">
+						<div class="search-others">
+							<label for="search_others">
+								Je cherche d'autres sondages, qui correspondent à mon mail :
+							</label>
+							<input type="email" id="search_others" [ngModel]="storageService.vote_stack.owner.email" />
+							<button
+								type="submit"
+								role="button"
+								class="button is-outlined is-fullwidth is-info is-size-3"
+								[disabled]="!storageService.vote_stack.owner.email.length"
+								routerLink="user/polls"
+							>
+								<i class="fa fa-search"></i>
+								{{ 'home.search_button' | translate }}
+							</button>
+						</div>
+					</form>
+				</section>
+
 				<blockquote class="notification is-info is-light content is-size-3 has-text-weight-light">
 					<h1 class="title">
 						{{ 'home.title' | translate }}
-						{{ env.appTitle }}
+						{{ environment.appTitle }}
 					</h1>
 					<i class="fa fa-poll"></i>
 					{{
@@ -22,25 +75,11 @@
 						{{ 'home.subtitle' | translate }}
 					</h2>
 				</div>
-				<div class="column">
-					<h2 class="subtitle">
-						{{ 'home.search_title' | translate }}
-					</h2>
-				</div>
+				<div class="column"></div>
 			</div>
 			<div class="columns">
+				<div class="column"></div>
 				<div class="column">
-					<a role="button" class="button is-fullwidth is-primary is-size-3" routerLink="administration">
-						<i class="fa fa-plus-circle"></i>
-						{{ 'home.create_button' | translate }}
-					</a>
-					<img src="assets/img/kind/date.jpeg" alt="sondage date" />
-				</div>
-				<div class="column">
-					<a role="button" class="button is-fullwidth is-info is-size-3" routerLink="user/polls">
-						<i class="fa fa-search"></i>
-						{{ 'home.search_button' | translate }}
-					</a>
 					<img src="assets/img/kind/classic.jpeg" alt="sondage date" />
 				</div>
 			</div>

src/app/core/components/home/home.component.scss

@@ -3,4 +3,25 @@
 	a .fa {
 		margin-right: 1ch;
 	}
+	.subtitle {
+		min-height: 4em;
+	}
+	.creation,
+	.search {
+		min-height: 20em;
+		max-width: 40em;
+		margin-bottom: 10em;
+		margin-left: auto;
+		margin-right: auto;
+		.title {
+			margin-bottom: 2em;
+		}
+		.button {
+			border: 0;
+		}
+	}
+
+	.poll-list {
+		margin: 2em 0;
+	}
 }

src/app/core/components/home/home.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { environment } from '../../../../environments/environment';
+import { StorageService } from '../../services/storage.service';
 
 @Component({
 	selector: 'app-home',
@@ -7,5 +8,8 @@ import { environment } from '../../../../environments/environment';
 	styleUrls: ['./home.component.scss'],
 })
 export class HomeComponent {
-	public env = environment;
+	public environment = environment;
+	constructor(public storageService: StorageService) {}
+
+	searchMyPolls() {}
 }

src/app/core/services/storage.service.ts

@@ -13,6 +13,8 @@ import {
 	otherDefaultDates,
 	TimeSlices,
 } from '../../../../mocks/old-stuff/config/defaultConfigs';
+import { Poll } from '../models/poll.model';
+import { Owner } from '../models/owner.model';
 
 @Injectable({
 	providedIn: 'root',
@@ -25,7 +27,7 @@ export class StorageService {
 	public language: Language;
 
 	@LocalStorage()
-	public userPollsIds: string[];
+	public userPolls: Poll[] = [];
 
 	@LocalStorage()
 	public dateList: DateChoice[] = otherDefaultDates;
@@ -36,6 +38,16 @@ export class StorageService {
 	@LocalStorage()
 	public vote_stack: Stack = new Stack();
 
+	constructor() {
+		if (environment.autofill) {
+			this.userPolls.push(new Poll(new Owner(), 'Démo: Anniversaire de tonton Patrick', 'aujourdhui-ou-demain'));
+			this.userPolls.push(new Poll(new Owner(), 'Démo: Atelier cuisine du quartier', 'aujourdhui-ou-demain'));
+			this.userPolls.push(
+				new Poll(new Owner(), 'Démo: Réunion du département des chatons', 'aujourdhui-ou-demain')
+			);
+		}
+	}
+
 	setChoicesForVoteStack(choices_list: Choice[]) {
 		this.vote_stack.votes = [];
 

src/app/shared/components/feedback/feedback.component.scss

@@ -1,7 +1,7 @@
 :host {
 	position: fixed;
 	bottom: 4em;
-	right: 1em;
+	left: 1em;
 	color: white;
 	.feedback-choices {
 		&.active {

src/environments/environment.ts

@@ -21,7 +21,7 @@ export const environment = {
 	frontDomain: 'http://tktest.lan',
 	production: false,
 	display_routes: true,
-	autofill: false,
+	autofill: true,
 	showDemoWarning: true,
 	autoSendNewPoll: false,
 	appTitle: 'FramaDate Funky',

src/styles/partials/_buttons.scss

@@ -24,10 +24,3 @@ button,
 .btn--danger {
 	@extend .is-danger;
 }
-
-main {
-	[ng-reflect-router-link] {
-		min-width: 50%;
-		margin: 0.5em;
-	}
-}