diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 1d22ed5..8c64c79 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -17,6 +17,7 @@ import { } from "./dashboard/forgotten-task-start-dialog/forgotten-task-start-dialog.component"; import {TaskgroupActivityComponent} from "./statistics/taskgroup-activity/taskgroup-activity.component"; import {ScheduleHistoryComponent} from "./statistics/schedule-history/schedule-history.component"; +import {UpcomingDeadlinesOverviewComponent} from "./upcoming-deadlines-overview/upcoming-deadlines-overview.component"; const routes: Routes = [ {path: '', component: MainComponent}, @@ -35,6 +36,7 @@ const routes: Routes = [ {path: 'forgotten', component: ForgottenTaskStartDialogComponent}, {path: 'statistics/taskgroup-activity', component: TaskgroupActivityComponent}, {path: 'statistics/schedule-history', component: ScheduleHistoryComponent}, + {path: 'deadlines', component: UpcomingDeadlinesOverviewComponent} ]; @NgModule({ diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 9e0ad25..9116ab0 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -6,10 +6,13 @@ + + + diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 71ac5f2..ca3c8e4 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -94,6 +94,8 @@ import { NtfySettingsComponent } from './user-settings/connection-settings/ntfy- import { TaskSeriesCreatorComponent } from './tasks/task-series-creator/task-series-creator.component'; import {MatStepperModule} from "@angular/material/stepper"; import { TaskWeeklySeriesCreatorComponent } from './tasks/task-weekly-series-creator/task-weekly-series-creator.component'; +import { UpcomingDeadlinesOverviewComponent } from './upcoming-deadlines-overview/upcoming-deadlines-overview.component'; +import {CommonModule} from "@angular/common"; @NgModule({ declarations: [ AppComponent, @@ -143,6 +145,7 @@ import { TaskWeeklySeriesCreatorComponent } from './tasks/task-weekly-series-cre NtfySettingsComponent, TaskSeriesCreatorComponent, TaskWeeklySeriesCreatorComponent, + UpcomingDeadlinesOverviewComponent, ], imports: [ BrowserModule, @@ -186,7 +189,7 @@ import { TaskWeeklySeriesCreatorComponent } from './tasks/task-weekly-series-cre NgApexchartsModule, MatButtonToggleModule, MatGridListModule, - MatStepperModule, + MatStepperModule ], providers: [ HttpClientModule, diff --git a/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.html b/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.html index 3e1412a..341ccd1 100644 --- a/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.html +++ b/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.html @@ -3,7 +3,14 @@
-

Monday, {{ viewDate | calendarDate:(view + 'ViewTitle'):'en':1 }}

+
+ + + +
+
+

Monday, {{ viewDate | calendarDate:(view + 'ViewTitle'):'en':1 }}

+
Schedule Strategy @@ -13,11 +20,13 @@
+

TZest

-
diff --git a/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.ts b/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.ts index 23e6ac5..b5a1e2f 100644 --- a/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.ts +++ b/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.ts @@ -1,4 +1,4 @@ -import {Component, ViewChild} from '@angular/core'; +import {Component, OnInit, ViewChild} from '@angular/core'; import {NavigationLink, NavigationLinkListComponent} from "../../navigation-link-list/navigation-link-list.component"; import { AdvancedScheduleInfo, @@ -47,7 +47,7 @@ const colors: Record = { `, ], }) -export class DraggableSchedulerComponent { +export class DraggableSchedulerComponent implements OnInit{ defaultNavigationLinkPath: NavigationLink[] = [ { linkText: "Dashboard", @@ -104,6 +104,7 @@ export class DraggableSchedulerComponent { } ngOnInit() { + this.viewDate = moment().startOf('isoWeek').toDate() this.scheduleService.schedulesGet().subscribe({ next: resp => { resp.forEach(schedule => { @@ -282,4 +283,8 @@ export class DraggableSchedulerComponent { } } + + resetCalendarToToday() { + this.viewDate = moment().startOf('isoWeek').toDate(); + } } diff --git a/frontend/src/app/schedules/scheduler/scheduler.component.css b/frontend/src/app/schedules/scheduler/scheduler.component.css index abdc086..cc03881 100644 --- a/frontend/src/app/schedules/scheduler/scheduler.component.css +++ b/frontend/src/app/schedules/scheduler/scheduler.component.css @@ -29,3 +29,20 @@ ::ng-deep .cal-event-title { white-space: normal; } + +.calendar-header { + display: flex; + align-items: center; +} + +.calendar-control { + display: flex; +} + +.calendar-header-title { + align-content: center; + flex-grow: 1; + flex-shrink: 0; + text-align: center; + margin-right: auto; +} diff --git a/frontend/src/app/schedules/scheduler/scheduler.component.html b/frontend/src/app/schedules/scheduler/scheduler.component.html index c8456e3..b42cfbe 100644 --- a/frontend/src/app/schedules/scheduler/scheduler.component.html +++ b/frontend/src/app/schedules/scheduler/scheduler.component.html @@ -1,8 +1,15 @@
- +

Tets

-

Monday, {{ viewDate | calendarDate:(view + 'ViewTitle'):'en':1 }}

+
+ + + +
+
+

Monday, {{ viewDate | calendarDate:(view + 'ViewTitle'):'en':1 }}

+
Schedule Strategy diff --git a/frontend/src/app/schedules/scheduler/scheduler.component.ts b/frontend/src/app/schedules/scheduler/scheduler.component.ts index b71223d..c8799da 100644 --- a/frontend/src/app/schedules/scheduler/scheduler.component.ts +++ b/frontend/src/app/schedules/scheduler/scheduler.component.ts @@ -80,6 +80,7 @@ export class SchedulerComponent implements OnInit{ } ngOnInit(): void { + this.viewDate = moment().startOf('isoWeek').toDate(); this.activatedRoute.paramMap.subscribe(params => { if (params.has('taskgroupID')) { this.taskgroupID = Number(params.get('taskgroupID')); @@ -131,8 +132,6 @@ export class SchedulerComponent implements OnInit{ protected readonly CalendarView = CalendarView; timeClick(clickedDate: Date) { - - console.log(clickedDate) if(this.basicScheduler != undefined && this.scheduleStrategy === 1) { this.basicScheduler.setDate(clickedDate) } else if(this.advancedScheduler != undefined && this.scheduleStrategy === 3) { @@ -335,4 +334,8 @@ export class SchedulerComponent implements OnInit{ }) this.refresh.next(); } + resetCalendarToToday() { + this.viewDate = moment().startOf('isoWeek').toDate(); + } + } diff --git a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css new file mode 100644 index 0000000..6b0ea97 --- /dev/null +++ b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css @@ -0,0 +1,43 @@ +.container { + margin: 20px auto; + width: 70%; +} + +.spacer { + margin-bottom: 2.5%; +} + + +@media screen and (max-width: 600px) { + .container { + width: 100%; + margin: 20px 10px; + } +} + + +.undecorated-link { + text-decoration: none; + color: black; +} + +.undecorated-link:hover { + color: #3498db; +} + +.calendar-header { + display: flex; + align-items: center; +} + +.calendar-control { + display: flex; +} + +.calendar-header-title { + align-content: center; + flex-grow: 1; + flex-shrink: 0; + text-align: center; + margin-right: auto; +} diff --git a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html new file mode 100644 index 0000000..96bb4e9 --- /dev/null +++ b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html @@ -0,0 +1,17 @@ +
+ + +
+
+ + + +
+

{{ viewDate | calendarDate:('month' + 'ViewTitle'):'en' }}

+
+ + +
diff --git a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.spec.ts b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.spec.ts new file mode 100644 index 0000000..82860b9 --- /dev/null +++ b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UpcomingDeadlinesOverviewComponent } from './upcoming-deadlines-overview.component'; + +describe('UpcomingDeadlinesOverviewComponent', () => { + let component: UpcomingDeadlinesOverviewComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [UpcomingDeadlinesOverviewComponent] + }); + fixture = TestBed.createComponent(UpcomingDeadlinesOverviewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts new file mode 100644 index 0000000..82382cf --- /dev/null +++ b/frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts @@ -0,0 +1,87 @@ +import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core'; +import {NavigationLink} from "../navigation-link-list/navigation-link-list.component"; +import {TaskService, TaskTaskgroupInfo} from "../../api"; +import {CalendarEvent} from "angular-calendar"; +import * as moment from "moment"; +import {locale} from "moment"; +import {Subject} from "rxjs"; + +@Component({ + selector: 'app-upcoming-deadlines-overview', + templateUrl: './upcoming-deadlines-overview.component.html', + styleUrls: ['./upcoming-deadlines-overview.component.css'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class UpcomingDeadlinesOverviewComponent implements OnInit{ + defaultNavigationLinkPath: NavigationLink[] = [ + { + linkText: "Dashboard", + routerLink: ['/'] + }, + { + linkText: "Upcoming Deadlines", + routerLink: ["/deadlines"] + } + ] + + events: CalendarEvent[] = [{ + title: "testdkjawfwekjdbjfbjsekdhwadvsjfbsadgascbsdadkawsdjkasfc", + start: moment("2024-03-18").toDate(), + end: moment("2024-03-18").toDate(), + resizable: { + beforeStart: false, + afterEnd: false + }, + draggable: false, + allDay: true, + color: { + primary: '#1e90ff', + secondary: '#D1E8FF', + } + }] + viewDate = new Date() + refresh: Subject = new Subject() + activeDayIsOpen = false; + + constructor(private taskService: TaskService) { + } + + + ngOnInit() { + this.taskService.tasksAllScopeDetailedGet("UNFINISHED", true).subscribe({ + next: resp => { + resp.forEach(taskShortInfo => { + const task_taskgroupInfo = taskShortInfo as TaskTaskgroupInfo + this.events.push({ + title: task_taskgroupInfo.taskName, + start: moment(task_taskgroupInfo.deadline).toDate(), + end: moment(task_taskgroupInfo.deadline).toDate(), + resizable: { + beforeStart: false, + afterEnd: false + }, + draggable: false, + allDay: true, + color: { + primary: '#1e90ff', + secondary: '#D1E8FF', + } + }) + }) + this.refresh.next() + } + }) + } + + dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void { + if (moment(date).isSame(this.viewDate, 'month')) { + this.activeDayIsOpen = !((moment(date).isSame(this.viewDate, 'day') && this.activeDayIsOpen) || + events.length === 0); + this.viewDate = date; + } + } + + closeOpenMonthViewDay() { + this.activeDayIsOpen = false; + } +}