sebastian/timemanager
Template
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases Wiki Activity

issue-92 #109

Merged
sebastian merged 4 commits from issue-92 into master 2024-03-17 13:21:28 +01:00
Conversation 0 Commits 4 Files Changed 12 +226 -9
12 changed files with 226 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/app-routing.module.ts
View File

@ -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({

3
frontend/src/app/app.component.html
View File

@ -6,10 +6,13 @@
<mat-menu #organizeMenu=matMenu>
<button mat-menu-item routerLink="taskgroups/" aria-label="Task groups">Taskgroups</button>
<button mat-menu-item routerLink="scheduler/" aria-label="Task groups">Scheduler</button>
<mat-divider></mat-divider>
<button mat-menu-item routerLink="active/" aria-label="Missed Schedules">Active Tasks</button>
<button mat-menu-item routerLink="upcoming/" aria-label="Upcoming Tasks">Upcoming Tasks</button>
<button mat-menu-item routerLink="overdue/" aria-label="Overdue Tasks">Overdue Tasks</button>
<button mat-menu-item routerLink="reschedule/" aria-label="Missed Schedules">Missed Schedules</button>
<mat-divider></mat-divider>
<button mat-menu-item routerLink="deadlines" aria-label="Upcoming Deadlines">Deadlines</button>
</mat-menu>
<mat-menu #statisticsMenu=matMenu>

5
frontend/src/app/app.module.ts
View File

@ -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,

11
frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.html
View File

@ -3,7 +3,14 @@
<app-navigation-link-list #navLinkList [navigationLinks]="defaultNavigationLinkPath"></app-navigation-link-list>
<div class="schedule-header">
<div class="calendar-control">
<button mat-flat-button color="primary" mwlCalendarPreviousView [view]="'week'" [(viewDate)]="viewDate">Previous</button>
<button mat-flat-button mwlCalendarToday (click)="resetCalendarToToday()">Today</button>
<button mat-flat-button color="primary" mwlCalendarNextView [view]="'week'" [(viewDate)]="viewDate">Next</button>
</div>
<div class="calendar-date-title">
<h1>Monday, {{ viewDate | calendarDate:(view + 'ViewTitle'):'en':1 }}</h1>
</div>
<mat-form-field style="float:right;">
<mat-label>Schedule Strategy</mat-label>
<mat-select [(ngModel)]="scheduleStrategy">
@ -13,11 +20,13 @@
</mat-select>
</mat-form-field>
</div>
<p>TZest</p>
<div style="display: flex; justify-content: space-between;">
<div style="width: 75%">
<mwl-calendar-week-view [viewDate]="viewDate" [daysInWeek]="daysInWeek" [dayStartHour]="7" [dayEndHour]="21" [refresh]="refresh"
<mwl-calendar-week-view [viewDate]="viewDate" [daysInWeek]="7" [dayStartHour]="7" [dayEndHour]="21" [refresh]="refresh"
[snapDraggedEvents]="false"
(eventTimesChanged)="eventDropped($event)" [events]="events" (eventClicked)="eventClicked('Click', $event.event)"
[weekStartsOn]="1"
>
</mwl-calendar-week-view>
</div>

9
frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.ts
View File

@ -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<string, EventColor> = {
`,
],
})
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();
}
}

17
frontend/src/app/schedules/scheduler/scheduler.component.css
View File

@ -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;
}

9
frontend/src/app/schedules/scheduler/scheduler.component.html
View File

@ -1,8 +1,15 @@
<div class="container">
<app-navigation-link-list #navLinkList [navigationLinks]="defaultNavigationLinkPath"></app-navigation-link-list>
<p>Tets</p>
<div class="schedule-header">
<div class="calendar-control">
<button mat-flat-button color="primary" mwlCalendarPreviousView [view]="'week'" [(viewDate)]="viewDate">Previous</button>
<button mat-flat-button mwlCalendarToday (click)="resetCalendarToToday()">Today</button>
<button mat-flat-button color="primary" mwlCalendarNextView [view]="'week'" [(viewDate)]="viewDate">Next</button>
</div>
<div class="calendar-date-title">
<h1>Monday, {{ viewDate | calendarDate:(view + 'ViewTitle'):'en':1 }}</h1>
</div>
<mat-form-field style="float:right;">
<mat-label>Schedule Strategy</mat-label>
<mat-select [(ngModel)]="scheduleStrategy">

7
frontend/src/app/schedules/scheduler/scheduler.component.ts
View File

@ -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();
}
}

43
frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.css Normal file
View File

@ -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;
}

17
frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.html Normal file
View File

@ -0,0 +1,17 @@
<div class="container">
<app-navigation-link-list [navigationLinks]="defaultNavigationLinkPath"></app-navigation-link-list>
<div class="calendar-header">
<div class="calendar-control">
<button mat-flat-button color="primary" mwlCalendarPreviousView [view]="'month'" [(viewDate)]="viewDate"
(viewDateChange)="closeOpenMonthViewDay()">Previous</button>
<button mat-flat-button mwlCalendarToday [(viewDate)]="viewDate">Today</button>
<button mat-flat-button color="primary" mwlCalendarNextView [view]="'month'" [(viewDate)]="viewDate"
(viewDateChange)="closeOpenMonthViewDay()">Next</button>
</div>
<h1 class="calendar-header-title">{{ viewDate | calendarDate:('month' + 'ViewTitle'):'en' }}</h1>
</div>
<mwl-calendar-month-view [viewDate]="viewDate" [events]="events" [refresh]="refresh" (dayClicked)="dayClicked($event.day)"
[activeDayIsOpen]="activeDayIsOpen"></mwl-calendar-month-view>
</div>

21
frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.spec.ts Normal file
View File

@ -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<UpcomingDeadlinesOverviewComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [UpcomingDeadlinesOverviewComponent]
});
fixture = TestBed.createComponent(UpcomingDeadlinesOverviewComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

87
frontend/src/app/upcoming-deadlines-overview/upcoming-deadlines-overview.component.ts Normal file
View File

@ -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<void> = new Subject<void>()
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;
}
}