style for calendar in step 3

This commit is contained in:
Tykayn 2021-11-08 09:32:50 +01:00 committed by tykayn
parent 938a8e72d9
commit c67f309180
6 changed files with 88 additions and 7 deletions

View File

@ -12,6 +12,7 @@ import { FramaKeyboardShortcuts } from './shared/shortcuts/main';
import { ShortcutEventOutput, ShortcutInput } from 'ng-keyboard-shortcuts'; import { ShortcutEventOutput, ShortcutInput } from 'ng-keyboard-shortcuts';
import { PollService } from './core/services/poll.service'; import { PollService } from './core/services/poll.service';
import { Poll } from './core/models/poll.model'; import { Poll } from './core/models/poll.model';
import { PollDTO } from './core/models/poll.DTO.model';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@ -42,7 +43,6 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
printpath(parent: string, config: Route[]) { printpath(parent: string, config: Route[]) {
for (let i = 0; i < config.length; i++) { for (let i = 0; i < config.length; i++) {
const route = config[i]; const route = config[i];
console.info(parent + '/' + route.path);
if (route.children) { if (route.children) {
const currentPath = route.path ? parent + '/' + route.path : parent; const currentPath = route.path ? parent + '/' + route.path : parent;
this.printpath(currentPath, route.children); this.printpath(currentPath, route.children);
@ -53,8 +53,6 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
ngOnInit(): void { ngOnInit(): void {
this.printpath('', this.router.config); this.printpath('', this.router.config);
this.router.events.subscribe((evt) => { this.router.events.subscribe((evt) => {
console.log('route changed', evt);
if (!(evt instanceof NavigationEnd)) { if (!(evt instanceof NavigationEnd)) {
return; return;
} }

View File

@ -0,0 +1,46 @@
import { Choice, ChoiceGroup } from './choice.model';
import { DateChoice, TimeSlices } from './dateChoice.model';
export class PollDTO {
menuVisible = true;
expiracyDateDefaultInDays;
deletionDateAfterLastModification;
pollType: string = 'date'; // classic or dates
title;
description;
myName;
myComment = '';
isAdmin; // when we create a poll; we are admin on it
myVoteStack;
myTempVoteStack;
myEmail;
myPolls; // list of retrieved polls from the backend api
allowSeveralHours;
visibility; // visible to one with the link:
voteChoices = 'yes; maybe; no'; // possible answers to a vote choice: only "yes"; "yes; maybe; no"
created_at;
expirationDate; // expiracy date
voteStackId; // id of the vote stack to update
pollId; // id of the current poll when created. data given by the backend api
pollSlug; // id of the current poll when created. data given by the backend api
currentPoll; // current poll selected with createPoll or getPoll of ConfigService
passwordAccess;
password;
customUrl; // custom slug in the url; must be unique
customUrlIsUnique; // given by the backend
urlSlugPublic;
urlPublic;
urlAdmin;
adminKey; // key to change config of the poll
owner_modifier_token; // key to change a vote stack
canModifyAnswers; // bool for the frontend selector
whoModifiesAnswers; // everybody; self; nobody (: just admin)
whoCanChangeAnswers; // everybody; self; nobody (: just admin)
dateList; // sets of days as strings; config to set identical time for days in a special days poll
timeList; // ranges of time expressed as strings
answers;
displayConfirmVoteModalAdmin;
constructor() {}
}

View File

@ -491,6 +491,10 @@ export class PollService implements Resolve<Poll> {
return list; return list;
} }
convertCalendarDatesToChoices(array_dates) {
return array_dates;
}
newPollFromForm(form: any): any { newPollFromForm(form: any): any {
const newpoll = new Poll( const newpoll = new Poll(
this.userService.getCurrentUser(), this.userService.getCurrentUser(),

View File

@ -78,9 +78,9 @@
[showWeek]="true" [showWeek]="true"
></p-calendar> ></p-calendar>
</div> </div>
<!-- <div class="debug">--> <div class="debug">
<!-- <pre>{{pollService.calendar |json}}</pre>--> <pre>{{ pollService.calendar | json }}</pre>
<!-- </div>--> </div>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">

View File

@ -235,3 +235,37 @@ mat-checkbox {
width: 100%; width: 100%;
padding: 1em; padding: 1em;
} }
// calendar primeng
.p-datepicker {
border: solix 1px $logo_color;
margin: 1em auto;
.p-datepicker-month {
margin-right: 1em;
}
.p-datepicker-weeknumber span {
border-right: 1px solid $legend_color;
}
.p-datepicker-today span {
font-weight: bold;
border: solid 1px $legend_color;
}
.p-datepicker-calendar td span {
padding: 1em;
width: 3.5em;
transition: all ease 0.5s;
&:hover {
background: mix($white, $legend_color);
color: $white;
transition: all ease 0.2s;
}
}
.p-highlight {
background: $legend_color;
color: $white;
border-radius: 100%;
}
}

View File

@ -2,7 +2,6 @@
background: $primary; background: $primary;
main { main {
padding: 0;
margin-bottom: 2em; margin-bottom: 2em;
padding-bottom: 5em; padding-bottom: 5em;
padding-top: 1em; padding-top: 1em;