display time slices

This commit is contained in:
Tykayn 2021-05-03 15:34:26 +02:00 committed by tykayn
parent c0ca623885
commit af4dfacec9
4 changed files with 31 additions and 12 deletions

View File

@ -22,7 +22,12 @@ const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth();
const currentDay = new Date().getDate();
export const basicSlicesOfDay: TimeSlices[] = [{ literal: 'matin' }, { literal: 'midi' }, { literal: 'soir' }];
export const basicSlicesOfDay: TimeSlices[] = [
{ literal: 'matin' },
{ literal: 'midi' },
{ literal: 'après-midi' },
{ literal: 'soir' },
];
export const otherSlicesOfDay: TimeSlices[] = [
{ literal: 'aux aurores' },
{ literal: 'au petit dej' },

View File

@ -8,6 +8,7 @@ import { Choice } from '../models/choice.model';
import { Vote } from '../models/vote.model';
import { environment } from '../../../environments/environment';
import {
basicSlicesOfDay,
DateChoice,
moreTimeOfDay,
otherDefaultDates,
@ -33,7 +34,7 @@ export class StorageService {
public dateList: DateChoice[] = otherDefaultDates;
@LocalStorage()
public timeSlices: TimeSlices[] = moreTimeOfDay;
public timeSlices: TimeSlices[] = basicSlicesOfDay;
@LocalStorage()
public vote_stack: Stack = new Stack();

View File

@ -111,6 +111,7 @@
</button>
</div>
</div>
<div class="range-time" *ngIf="!form.value.hasSeveralHours">
<h2>
<span class="count-dates-txt">
@ -130,21 +131,20 @@
[cdkDropListData]="timeList"
(cdkDropListDropped)="dropTimeItem($event)"
>
<div *ngFor="let time of timeList; index as time_id" class="time-choice" cdkDrag>
<div *ngFor="let time of timeList; index as time_id" class="time-choice movable" cdkDrag>
<div class="columns">
<div class="column movable">
<label [for]="'timeChoices_' + time_id">
<i class="fa fa-clock-o" aria-hidden="true"></i>
<div class="column">
<label class="button pull-left" [for]="'timeChoices_' + time_id">
<i class="icon fa fa-arrows-v" aria-hidden="true"></i>
</label>
<input
class="pull-left"
[(ngModel)]="time.literal"
name="timeChoices_{{ time_id }}"
type="text"
id="timeChoices_{{ time_id }}"
/>
</div>
<div class="column">
<button (click)="timeList.splice(time_id, 1)" class="btn btn-warning">
<button (click)="timeList.splice(time_id, 1)" class="button is-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
@ -214,6 +214,7 @@
</div>
</div>
</div>
<!-- date picker calendrier-->
<!-- <div class="column calendar-column">-->
<!-- <button class="btn" (click)="selectionKind = 'range'" [class.is-primary]="selectionKind == 'range'">-->
<!-- plage de jours-->

View File

@ -1,7 +1,7 @@
:host {
.time-choice {
background: rgba(255, 255, 255, 0.8);
border: solid 1px #dedede;
background: rgba(255, 255, 255, 1);
//border: solid 1px #dedede;
padding: 0.5em;
//padding: 20px 10px;
border-bottom: solid 1px #ccc;
@ -10,6 +10,17 @@
cursor: move;
background: white;
font-size: 14px;
padding-top: 1em;
padding-bottom: 1em;
input {
display: inline-block;
width: 70% !important;
margin-right: 1ch;
margin-left: 1ch;
}
.button {
margin: 0;
}
}
.btn i + span {
margin-left: 1ch;
@ -24,7 +35,8 @@
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);
background: blue;
display: block;
}
.cdk-drag-placeholder {