display hour ranges

src/app/features/administration/form/date-select/date-select.component.html

@@ -41,27 +41,34 @@
 		</fieldset>
 	</form>
 	<div class="dates-list">
+		<button
+			class="btn"
+			[class.is-primary]="form.value.configuration.hasSeveralHours"
+			(click)="
+				form.patchValue({
+					configuration: { hasSeveralHours: !form.value.configuration.hasSeveralHours }
+				})
+			"
+		>
+			<i class="fa fa-clock-o"></i>
+
+			<span> horaires avancées</span>
+		</button>
+		<div class="is-info notification">
+			<span *ngIf="form.value.configuration.hasSeveralHours">
+				Chaque jour aura ses plages de temps personnalisées
+			</span>
+			<span *ngIf="!form.value.configuration.hasSeveralHours">
+				Tous les jours auront les mêmes plages de temps
+			</span>
+		</div>
 		<fieldset class="range-container is-boxed">
 			<div class="actions columns">
-				<div class="column">
+				<div class="column"></div>
-					<button
+				<div class="column has-text-right">
-						class="btn"
-						[class.is-primary]="form.value.configuration.hasSeveralHours"
-						(click)="
-							form.patchValue({
-								configuration: { hasSeveralHours: !form.value.configuration.hasSeveralHours }
-							})
-						"
-					>
-						<i class="fa fa-clock-o"></i>
-
-						<span> horaires différentes à chaque jour </span>
-					</button>
-				</div>
-				<div class="column">
 					<button
 						(click)="addTime()"
-						*ngIf="form.value.configuration.hasSeveralHours"
+						*ngIf="!form.value.configuration.hasSeveralHours"
 						class="btn btn--primary"
 						id="add_time_button"
 					>
@@ -94,15 +101,17 @@
 					</button>
 				</div>
 			</div>
-			<div class="range-time" *ngIf="form.value.configuration.hasSeveralHours">
+			<div class="range-time" *ngIf="!form.value.configuration.hasSeveralHours">
-				<div class="title">
+				<h2>
-					<span class="count-dates">
-						{{ timeList.length }}
-					</span>
 					<span class="count-dates-txt">
 						{{ 'dates.count_time' | translate }}
 						(identique pour chaque jour)
 					</span>
+				</h2>
+				<div class="title">
+					<span class="count-dates">
+						{{ timeList.length }}
+					</span>
 				</div>
 				<div class="identical-dates" cdkDropListGroup>
 					<div
@@ -157,6 +166,7 @@
 
 			<div class="columns">
 				<div class="column">
+					<!--					TODO lier au formulaire les valeurs des dates-->
 					<h2>Dates</h2>
 					<div *ngFor="let choice of dateList; index as id" class="date-choice">
 						{{ id }})

src/app/features/administration/form/date-select/date-select.component.scss

@@ -1,4 +1,16 @@
 :host {
+	.time-choice {
+		background: rgba(255, 255, 255, 0.8);
+		border: solid 1px #dedede;
+		padding: 0.5em;
+		//padding: 20px 10px;
+		border-bottom: solid 1px #ccc;
+		color: rgba(0, 0, 0, 0.87);
+		box-sizing: border-box;
+		cursor: move;
+		background: white;
+		font-size: 14px;
+	}
 	.btn i + span {
 		margin-left: 1ch;
 	}
@@ -17,13 +29,14 @@
 		box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
 			0 3px 14px 2px rgba(0, 0, 0, 0.12);
 		border: 2px solid #ccc;
+		background: rgba(255, 255, 255, 0.8);
 	}
 
 	.cdk-drag-placeholder {
 		* {
 			opacity: 0;
 		}
-		background: #ccc;
+		background: #dedede;
 	}
 
 	.cdk-drag-animating {

src/app/features/administration/form/date-select/date-select.component.ts

@@ -142,8 +142,6 @@ export class DateSelectComponent implements OnInit {
 	addTimeToDate(config: any, id: number) {
 		this.timeList.push({
 			literal: '',
-			timeList: [],
-			date_object: new Date(),
 		});
 		const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]';
 		// this.cd.detectChanges();