Skip to content

Commit

Permalink
Merge pull request #479 from rsiminel/revamp-TP-calendar2
Browse files Browse the repository at this point in the history 
Revamp tp calendar
  • Loading branch information
@mboudet
mboudet authored Jul 11, 2024
2 parents 218a3a7 + a331f86 commit 1576ca8
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 40 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
* Prevented retroactive TP reservations
* Added checks to user registration form, the user information update form and the TP reservation form
* Added back button from single project view
* Improved TP calendar readability

## 1.4.29

Expand Down
32 changes: 24 additions & 8 deletions manager2/src/app/tps/tps.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,29 @@ <h3>Calendar {{viewDate.toLocaleDateString()}}</h3>
</div>
<div class="card-body">
<mwl-calendar-month-view
[viewDate]="viewDate"
[events]="events"
(eventClicked)="eventClicked($event)"
[refresh]="refresh"
(eventTimesChanged)="eventTimesChanged($event)">
>
</mwl-calendar-month-view>
[viewDate]="viewDate"
[events]="events"
[refresh]="refresh"
(eventTimesChanged)="eventTimesChanged($event)"
[cellTemplate]="customCellTemplate"
weekStartsOn=1>
</mwl-calendar-month-view>
<ng-template #customCellTemplate let-day="day">
<div class="cal-cell-top">
<span class="cal-day-number">{{day.date | calendarDate:'monthViewDayNumber':locale}}</span>
</div>
<div *ngIf="day.events" [ngStyle]="{'position': 'relative'}">
<p *ngFor="let event of day.events" (click)="eventClicked(event)" [ngStyle]="{
'background-color': event.color.primary,
'width': '100%', 'height': '20px', 'margin-bottom': '2px'
}">
<span class="text-white small" [ngStyle]="{
'overflow': 'hidden', 'white-space': 'nowrap', 'text-overflow': 'ellipsis',
'max-width': '92px', 'display': 'flex', 'justify-content': 'center'
}">{{event.meta?.name}}</span>
</p>
</div>
</ng-template>
</div>
</div>
</div>
Expand Down Expand Up @@ -99,7 +115,7 @@ <h3>Reservation</h3>
</table>
</div>

<button *ngIf="!selectedEvent.created && session_user.is_admin" class="p-button p-button-sm p-button-primary" (click)="create_reservation()">Create</button>
<button *ngIf="!selectedEvent.created && !selectedEvent.over && session_user.is_admin" class="p-button p-button-sm p-button-primary" (click)="create_reservation()">Create</button>
<button *ngIf="!selectedEvent.created && !selectedEvent.over && authorized" class="p-button p-button-sm p-button-secondary" (click)="cancel_reservation()">Cancel</button>
<button *ngIf="selectedEvent.created && !selectedEvent.over && session_user.is_admin" type="button" class="p-button p-button-sm p-button-primary" data-toggle="modal" data-target="#extend">Extend</button>
<button *ngIf="selectedEvent.created && !selectedEvent.over && session_user.is_admin" class="p-button p-button-sm p-button-warning" (click)="remove_reservation()">Remove</button>
Expand Down
87 changes: 55 additions & 32 deletions manager2/src/app/tps/tps.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,15 @@ import { NgForm } from '@angular/forms';
import { AuthService } from '../auth/auth.service';
import { ConfigService } from '../config.service'
import { TpserviceService } from './tpservice.service';
import { CalendarEventTimesChangedEvent } from 'angular-calendar';
import { CalendarEvent, CalendarEventTimesChangedEvent } from 'angular-calendar';
import { Subject } from 'rxjs';

const eventColors = {
created: { primary: '#00dd44' },
pending: { primary: '#0066ff' },
over: { primary: '#808080' }
};

@Component({
selector: 'app-tps',
templateUrl: './tps.component.html',
Expand All @@ -24,8 +30,9 @@ export class TpsComponent implements OnInit {
session_user: any

viewDate: Date
events: any
events: CalendarEvent[]
selectedEvent: any
refresh: Subject<any> = new Subject();

quantity: number
fromDate: Date
Expand All @@ -36,8 +43,6 @@ export class TpsComponent implements OnInit {
group_or_project: string
name: string

refresh: Subject<any> = new Subject();

activeDayIsOpen: boolean = true;

new_expire: Date
Expand All @@ -48,17 +53,28 @@ export class TpsComponent implements OnInit {
private tpService: TpserviceService
) { }

private choseColor(id: string, over: boolean, created: boolean) {
let color;
if (over) { color = eventColors.over; }
else {
if (created) { color = eventColors.created; }
else { color = eventColors.pending; }
const hash = id.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
const red = (3*hash % 128).toString(16).padStart(2, '0');
color.primary = `#${red}${color.primary.slice(3)}`;
}
return color;
}

private listEvents() {
this.tpService.list().subscribe(
resp => {
let events = [];
for(var i = 0; i < resp.length; i++) {
let event = resp[i];
events.push({
'title': event.owner + ', ' + event.quantity + ' students',
'start': new Date(event.from),
'end': new Date(event.to),
'allDay': false,
const events: CalendarEvent[] = resp.map(event => {
return {
title: `${event.owner}, ${event.quantity} students`,
start: new Date(event.from),
end: new Date(event.to),
color: this.choseColor(event._id, event.over, event.created),
meta: {
'id': event._id,
'owner': event.owner,
Expand All @@ -71,12 +87,12 @@ export class TpsComponent implements OnInit {
'group': event.group,
'project': event.project
}
});
}
}
});
this.events = events;
this.refresh.next();
},
err => console.log('failed to log tp reservations')
err => console.error('failed to log tp reservations', err)
);
}

Expand Down Expand Up @@ -166,33 +182,39 @@ export class TpsComponent implements OnInit {
this.msg = '';
this.errmsg = '';
this.tpService.cancel(this.selectedEvent.id).subscribe(
resp => this.msg = resp['message'],
resp => {
this.msg = resp['message'];
this.selectedEvent.over = true;
this.listEvents();
},
err => this.errmsg = err.error.message
);
this.selectedEvent.over = true;
this.listEvents();
}

create_reservation() {
this.msg = '';
this.errmsg = '';
this.tpService.create(this.selectedEvent.id).subscribe(
resp => this.msg = resp['message'],
resp => {
this.msg = resp['message'];
this.selectedEvent.created = true;
this.listEvents();
},
err => this.errmsg = err.error.message
);
this.selectedEvent.created = true;
this.listEvents();
}

remove_reservation() {
this.msg = '';
this.errmsg = '';
this.tpService.remove(this.selectedEvent.id).subscribe(
resp => this.msg = resp['message'],
resp => {
this.msg = resp['message'];
this.selectedEvent.over = true;
this.listEvents();
},
err => this.errmsg = err.error.message
);
this.selectedEvent.over = true;
this.listEvents();
}

extend_reservation() {
Expand All @@ -208,19 +230,20 @@ export class TpsComponent implements OnInit {
}
const extension = { 'to': new Date(this.new_expire).getTime() };
this.tpService.extend(this.selectedEvent.id, extension).subscribe(
resp => this.msg = resp['message'],
resp => {
this.msg = resp['message'];
this.listEvents();
},
err => this.errmsg = err.error.message
);
this.listEvents();
}

eventClicked(clickedEvent) {
let event = clickedEvent.event;
this.selectedEvent = event.meta;
this.selectedEvent.title = event.title;
this.selectedEvent.start = event.start;
this.selectedEvent.end = event.end;
if(!event.meta.group) {
this.selectedEvent = clickedEvent.meta;
this.selectedEvent.title = clickedEvent.title;
this.selectedEvent.start = clickedEvent.start;
this.selectedEvent.end = clickedEvent.end;
if (!clickedEvent.meta.group) {
this.selectedEvent.group = { }
}
}
Expand Down

0 comments on commit 1576ca8

Please sign in to comment.