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 currentMonth = new Date().getMonth();
const currentDay = new Date().getDate(); 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[] = [ export const otherSlicesOfDay: TimeSlices[] = [
{ literal: 'aux aurores' }, { literal: 'aux aurores' },
{ literal: 'au petit dej' }, { literal: 'au petit dej' },

View File

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

View File

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

View File

@ -1,7 +1,7 @@
:host { :host {
.time-choice { .time-choice {
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 1);
border: solid 1px #dedede; //border: solid 1px #dedede;
padding: 0.5em; padding: 0.5em;
//padding: 20px 10px; //padding: 20px 10px;
border-bottom: solid 1px #ccc; border-bottom: solid 1px #ccc;
@ -10,6 +10,17 @@
cursor: move; cursor: move;
background: white; background: white;
font-size: 14px; 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 { .btn i + span {
margin-left: 1ch; 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), 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); 0 3px 14px 2px rgba(0, 0, 0, 0.12);
border: 2px solid #ccc; border: 2px solid #ccc;
background: rgba(255, 255, 255, 0.8); background: blue;
display: block;
} }
.cdk-drag-placeholder { .cdk-drag-placeholder {