Include basic schedules of tasks

backend/.idea/workspace.xml

@@ -5,9 +5,15 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="3a869f59-290a-4ab2-b036-a878ce801bc4" name="Changes" comment="Define Entity BasicTaskSchedule and Taskcontroller">
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/angular.json" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/angular.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/java/core/api/models/timemanager/tasks/TaskEntityInfo.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/api/models/timemanager/tasks/TaskEntityInfo.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/java/core/entities/timemanager/Task.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/entities/timemanager/Task.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/app/app.module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/app.module.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/app/schedules/scheduler/scheduler.component.css" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/schedules/scheduler/scheduler.component.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/app/schedules/scheduler/scheduler.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/schedules/scheduler/scheduler.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/app/schedules/scheduler/scheduler.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/schedules/scheduler/scheduler.component.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/app/tasks/task-detail-overview/task-detail-overview.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/tasks/task-detail-overview/task-detail-overview.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/index.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -95,7 +101,7 @@
       <workItem from="1697958118995" duration="5749000" />
       <workItem from="1697969480767" duration="6407000" />
       <workItem from="1697989716016" duration="3814000" />
-      <workItem from="1698067098771" duration="307000" />
+      <workItem from="1698067098771" duration="909000" />
     </task>
     <task id="LOCAL-00001" summary="Structure Taskgroups in Hierarchies">
       <option name="closed" value="true" />

frontend/angular.json

@@ -27,6 +27,7 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/angular-calendar/css/angular-calendar.css",
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
@@ -95,6 +96,7 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/angular-calendar/css/angular-calendar.css",
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],

frontend/package-lock.json

@@ -21,6 +21,8 @@
         "@angular/platform-browser": "^16.2.7",
         "@angular/platform-browser-dynamic": "^16.2.7",
         "@angular/router": "^16.2.7",
+        "angular-calendar": "^0.31.0",
+        "date-fns": "^2.29.3",
         "moment": "^2.29.4",
         "rxjs": "~7.5.0",
         "tslib": "^2.3.0",
@@ -2574,7 +2576,6 @@
       "version": "7.22.6",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
       "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -3953,6 +3954,11 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@mattlewis92/dom-autoscroller": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@mattlewis92/dom-autoscroller/-/dom-autoscroller-2.4.2.tgz",
+      "integrity": "sha512-YbrUWREPGEjE/FU6foXcAT1YbVwqD/jkYnY1dFb0o4AxtP3s4xKBthlELjndZih8uwsDWgQZx1eNskRNe2BgZQ=="
+    },
     "node_modules/@ngtools/webpack": {
       "version": "16.2.4",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-16.2.4.tgz",
@@ -4152,6 +4158,12 @@
         "node": ">=14"
       }
     },
+    "node_modules/@scarf/scarf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@scarf/scarf/-/scarf-1.3.0.tgz",
+      "integrity": "sha512-lHKK8M5CTcpFj2hZDB3wIjb0KAbEOgDmiJGDv1WBRfQgRm/a8/XMEkG/N1iM01xgbUDsPQwi42D+dFo1XPAKew==",
+      "hasInstallScript": true
+    },
     "node_modules/@schematics/angular": {
       "version": "16.2.4",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-16.2.4.tgz",
@@ -4904,6 +4916,48 @@
         "ajv": "^8.8.2"
       }
     },
+    "node_modules/angular-calendar": {
+      "version": "0.31.0",
+      "resolved": "https://registry.npmjs.org/angular-calendar/-/angular-calendar-0.31.0.tgz",
+      "integrity": "sha512-QGPObUmOYLr4IeSaj1pzZjcycN6otYx+SbeezJuujstXR9f2wo4CtMlBQ+SU+ZF5VFfrdYge8qkxMGCLBLBRrw==",
+      "dependencies": {
+        "@scarf/scarf": "^1.1.1",
+        "angular-draggable-droppable": "^8.0.0",
+        "angular-resizable-element": "^7.0.0",
+        "calendar-utils": "^0.10.4",
+        "positioning": "^2.0.1",
+        "tslib": "^2.4.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mattlewis92"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=15.0.0"
+      }
+    },
+    "node_modules/angular-draggable-droppable": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/angular-draggable-droppable/-/angular-draggable-droppable-8.0.0.tgz",
+      "integrity": "sha512-+gpSNBbygjV1pxTxsM3UPJKcXHXJabYoTtKcgQe74rGnb1umKc07XCBD1qDzvlG/kocthvhQ12qfYOYzHnE3ZA==",
+      "dependencies": {
+        "@mattlewis92/dom-autoscroller": "^2.4.2",
+        "tslib": "^2.4.1"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=15.0.0"
+      }
+    },
+    "node_modules/angular-resizable-element": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-7.0.2.tgz",
+      "integrity": "sha512-/BGuNiA38n9klexHO1xgnsA3VYigj9v+jUGjKtBRgfB26bCxZKsNWParSu2k3EqbATrfAJC4Nl8f7cORpJFf4w==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=15.0.0"
+      }
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -5403,6 +5457,11 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/calendar-utils": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.10.4.tgz",
+      "integrity": "sha512-gBK4xCJ42yjaUKwuUha6cZOfxAmGzvSgbdAaX3xLRioeKbYoOK1x1qeD6dch72rsMZlTgATPbBBx42bnkStqgQ=="
+    },
     "node_modules/call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -6153,6 +6212,21 @@
         "node": ">=10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/date-format": {
       "version": "4.0.14",
       "resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.14.tgz",
@@ -10574,6 +10648,11 @@
         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
       }
     },
+    "node_modules/positioning": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/positioning/-/positioning-2.0.1.tgz",
+      "integrity": "sha512-DsAgM42kV/ObuwlRpAzDTjH9E8fGKkMDJHWFX+kfNXSxh7UCCQxEmdjv/Ws5Ft1XDnt3JT8fIDYeKNSE2TbttA=="
+    },
     "node_modules/postcss": {
       "version": "8.4.27",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz",
@@ -10974,8 +11053,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
-      "dev": true
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.2",

frontend/package.json

@@ -23,6 +23,8 @@
     "@angular/platform-browser": "^16.2.7",
     "@angular/platform-browser-dynamic": "^16.2.7",
     "@angular/router": "^16.2.7",
+    "angular-calendar": "^0.31.0",
+    "date-fns": "^2.29.3",
     "moment": "^2.29.4",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",

frontend/src/api/api/schedule.service.ts

@@ -19,6 +19,7 @@ import { CustomHttpParameterCodec }                          from '../encoder';
 import { Observable }                                        from 'rxjs';
 
 import { BasicScheduleEntityInfo } from '../model/models';
+import { BasicScheduleFieldInfo } from '../model/models';
 import { SimpleStatusResponse } from '../model/models';
 
 import { BASE_PATH, COLLECTION_FORMATS }                     from '../variables';
@@ -86,6 +87,76 @@ export class ScheduleService {
         return httpParams;
     }
 
+    /**
+     * creates basic schedule for task
+     * creates a basic schedule for a task
+     * @param taskID internal id of task
+     * @param basicScheduleFieldInfo 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public schedulesTaskIDBasicPut(taskID: number, basicScheduleFieldInfo?: BasicScheduleFieldInfo, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<BasicScheduleEntityInfo>;
+    public schedulesTaskIDBasicPut(taskID: number, basicScheduleFieldInfo?: BasicScheduleFieldInfo, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpResponse<BasicScheduleEntityInfo>>;
+    public schedulesTaskIDBasicPut(taskID: number, basicScheduleFieldInfo?: BasicScheduleFieldInfo, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpEvent<BasicScheduleEntityInfo>>;
+    public schedulesTaskIDBasicPut(taskID: number, basicScheduleFieldInfo?: BasicScheduleFieldInfo, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<any> {
+        if (taskID === null || taskID === undefined) {
+            throw new Error('Required parameter taskID was null or undefined when calling schedulesTaskIDBasicPut.');
+        }
+
+        let localVarHeaders = this.defaultHeaders;
+
+        let localVarCredential: string | undefined;
+        // authentication (API_TOKEN) required
+        localVarCredential = this.configuration.lookupCredential('API_TOKEN');
+        if (localVarCredential) {
+            localVarHeaders = localVarHeaders.set('Authorization', 'Bearer ' + localVarCredential);
+        }
+
+        let localVarHttpHeaderAcceptSelected: string | undefined = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts: string[] = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+
+        let localVarHttpContext: HttpContext | undefined = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+            'application/json'
+        ];
+        const httpContentTypeSelected: string | undefined = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
+        }
+
+        let responseType_: 'text' | 'json' = 'json';
+        if(localVarHttpHeaderAcceptSelected && localVarHttpHeaderAcceptSelected.startsWith('text')) {
+            responseType_ = 'text';
+        }
+
+        return this.httpClient.put<BasicScheduleEntityInfo>(`${this.configuration.basePath}/schedules/${encodeURIComponent(String(taskID))}/basic`,
+            basicScheduleFieldInfo,
+            {
+                context: localVarHttpContext,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
     /**
      * gets schedules of task
      * gets schedules of task

frontend/src/app/app.module.ts

@@ -45,7 +45,7 @@ import {MatTableModule} from "@angular/material/table";
 import {MatCheckboxModule} from "@angular/material/checkbox";
 import {MatCardModule} from "@angular/material/card";
 import {MatListModule} from "@angular/material/list";
-import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatNativeDateModule} from "@angular/material/core";
+import {MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatNativeDateModule} from "@angular/material/core";
 import {MatMomentDateModule, MomentDateModule} from "@angular/material-moment-adapter";
 import { TaskDashboardComponent } from './tasks/task-dashboard/task-dashboard.component';
 import {MatSlideToggleModule} from "@angular/material/slide-toggle";
@@ -57,6 +57,10 @@ import { TaskDetailOverviewComponent } from './tasks/task-detail-overview/task-d
 import {MatProgressBarModule} from "@angular/material/progress-bar";
 import {MatExpansionModule} from "@angular/material/expansion";
 import { SchedulerComponent } from './schedules/scheduler/scheduler.component';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+import {MatSelectModule} from "@angular/material/select";
+import { BasicSchedulerComponent } from './schedules/basic-scheduler/basic-scheduler.component';
 
 @NgModule({
   declarations: [
@@ -82,7 +86,8 @@ import { SchedulerComponent } from './schedules/scheduler/scheduler.component';
     ClearTaskDialogComponent,
     NavigationLinkListComponent,
     TaskDetailOverviewComponent,
-    SchedulerComponent
+    SchedulerComponent,
+    BasicSchedulerComponent
   ],
   imports: [
     BrowserModule,
@@ -115,7 +120,9 @@ import { SchedulerComponent } from './schedules/scheduler/scheduler.component';
     MatSortModule,
     MatPaginatorModule,
     MatProgressBarModule,
-    MatExpansionModule
+    MatExpansionModule,
+    CalendarModule.forRoot({provide: DateAdapter, useFactory: adapterFactory}),
+    MatSelectModule
   ],
   providers: [
     HttpClientModule,

frontend/src/app/schedules/basic-scheduler/basic-scheduler.component.css

@@ -0,0 +1,3 @@
+mat-form-field {
+  width: 100%;
+}

frontend/src/app/schedules/basic-scheduler/basic-scheduler.component.html

@@ -0,0 +1,8 @@
+<mat-form-field>
+  <input matInput [matDatepicker]="picker" [formControl]="dateCtrl">
+  <mat-hint>MM/DD/YYYY</mat-hint>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker #picker></mat-datepicker>
+</mat-form-field>
+
+<button mat-raised-button color="primary" (click)="schedule()">Schedule</button>

frontend/src/app/schedules/basic-scheduler/basic-scheduler.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BasicSchedulerComponent } from './basic-scheduler.component';
+
+describe('BasicSchedulerComponent', () => {
+  let component: BasicSchedulerComponent;
+  let fixture: ComponentFixture<BasicSchedulerComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [BasicSchedulerComponent]
+    });
+    fixture = TestBed.createComponent(BasicSchedulerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/schedules/basic-scheduler/basic-scheduler.component.ts

@@ -0,0 +1,37 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {FormControl, Validators} from "@angular/forms";
+import {BasicScheduleEntityInfo, ScheduleService, TaskEntityInfo} from "../../../api";
+import {MatSnackBar} from "@angular/material/snack-bar";
+
+@Component({
+  selector: 'app-basic-scheduler',
+  templateUrl: './basic-scheduler.component.html',
+  styleUrls: ['./basic-scheduler.component.css']
+})
+export class BasicSchedulerComponent {
+
+  dateCtrl: FormControl = new FormControl('', [Validators.required])
+  @Input('task') task: TaskEntityInfo | undefined
+  @Output('onSchedule') scheduleEmitter: EventEmitter<BasicScheduleEntityInfo> = new EventEmitter<BasicScheduleEntityInfo>();
+
+  constructor(private scheduleService: ScheduleService,
+              private snackbar: MatSnackBar) {
+  }
+
+  setDate(date: Date) {
+    this.dateCtrl.setValue(date);
+  }
+
+  schedule() {
+    if(this.task != undefined) {
+      this.scheduleService.schedulesTaskIDBasicPut(this.task.taskID, {
+        scheduleDate: this.dateCtrl.value
+      }).subscribe({
+        next: resp => {
+          this.scheduleEmitter.emit(resp);
+        }
+      })
+    }
+
+  }
+}

frontend/src/app/schedules/scheduler/scheduler.component.css

@@ -14,3 +14,14 @@
     margin: 20px 10px;
   }
 }
+
+.schedule-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.long-form {
+  width: 100%;
+}

frontend/src/app/schedules/scheduler/scheduler.component.html

@@ -1,5 +1,24 @@
+
 <div class="container">
   <app-navigation-link-list #navLinkList [navigationLinks]="defaultNavigationLinkPath"></app-navigation-link-list>
 
+  <div class="schedule-header">
+    <h1>Monday, {{ viewDate | calendarDate:(view + 'ViewTitle'):'en':1 }}</h1>
+      <mat-form-field style="float:right;">
+        <mat-label>Schedule Strategy</mat-label>
+        <mat-select [(ngModel)]="scheduleStrategy">
+          <mat-option [value]="1">Basic</mat-option>
+          <mat-option [value]="2">Moderate</mat-option>
+          <mat-option [value]="3">Advanced</mat-option>
+        </mat-select>
+      </mat-form-field>
+  </div>
+  <mwl-calendar-week-view [viewDate]="viewDate" [daysInWeek]="daysInWeek" [dayStartHour]="7" [dayEndHour]="21" [refresh]="refresh"
+                          (dayHeaderClicked)="timeClick($event.day.date)"
+                          (hourSegmentClicked)="timeClick($event.date)" [events]="events"
+  >
+  </mwl-calendar-week-view>
+
+  <app-basic-scheduler #basicScheduler [task]="task" (onSchedule)="onBasicSchedule($event)"></app-basic-scheduler>
 
 </div>

frontend/src/app/schedules/scheduler/scheduler.component.ts

@@ -1,8 +1,34 @@
-import {Component, OnChanges, OnInit, SimpleChanges, ViewChild} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {NavigationLink, NavigationLinkListComponent} from "../../navigation-link-list/navigation-link-list.component";
-import {TaskEntityInfo, TaskgroupEntityInfo, TaskgroupService, TaskService} from "../../../api";
+import {
+  BasicScheduleEntityInfo,
+  TaskEntityInfo,
+  TaskgroupEntityInfo,
+  TaskgroupService,
+  TaskService
+} from "../../../api";
 import {ActivatedRoute} from "@angular/router";
+import {CalendarDateFormatter, CalendarEvent, CalendarView} from "angular-calendar";
+import { Subject } from 'rxjs';
+import {CalendarDatePipe} from "angular-calendar/modules/common/calendar-date/calendar-date.pipe";
+import {BasicSchedulerComponent} from "../basic-scheduler/basic-scheduler.component";
+import * as events from "events";
+import { EventColor } from 'calendar-utils';
 
+const colors: Record<string, EventColor> = {
+  red: {
+    primary: '#ad2121',
+    secondary: '#FAE3E3',
+  },
+  blue: {
+    primary: '#1e90ff',
+    secondary: '#D1E8FF',
+  },
+  yellow: {
+    primary: '#e3bc08',
+    secondary: '#FDF1BA',
+  },
+};
 @Component({
   selector: 'app-scheduler',
   templateUrl: './scheduler.component.html',
@@ -26,6 +52,31 @@ export class SchedulerComponent implements OnInit{
   @ViewChild('navLinkList') navLinkListComponent: NavigationLinkListComponent | undefined
 
   task: TaskEntityInfo | undefined
+  scheduleStrategy: number = 1
+
+
+  /**************************************************/
+  //Calendar-Stuff
+  /**************************************************/
+  view: CalendarView = CalendarView.Week;
+  viewDate = new Date();
+  daysInWeek = 7;
+  refresh: Subject<void> = new Subject<void>()
+  events: CalendarEvent[] = [
+    {
+      title: 'An all day event',
+      color: colors['yellow'],
+      start: new Date(),
+      allDay: true,
+    },
+    {
+      title: 'A non all day event',
+      color: colors['blue'],
+      start: new Date(),
+    },
+  ]
+
+  @ViewChild('basicScheduler') basicScheduler: BasicSchedulerComponent | undefined
 
   constructor(private activatedRoute: ActivatedRoute,
               private taskgroupService: TaskgroupService,
@@ -67,4 +118,23 @@ export class SchedulerComponent implements OnInit{
       this.navLinkListComponent!.addNavigationLink('Schedule', [this.taskgroup!.taskgroupID.toString(), 'tasks', this.task.taskID.toString(), 'schedule'])
     }
   }
+
+  protected readonly CalendarView = CalendarView;
+
+  timeClick(clickedDate: Date) {
+    if(this.basicScheduler != undefined) {
+      this.basicScheduler.setDate(clickedDate)
+    }
+  }
+
+  onBasicSchedule(scheduleInfo: BasicScheduleEntityInfo) {
+    this.events.push({
+      start: new Date(scheduleInfo.scheduleDate),
+      title: this.task!.taskName,
+      color: colors['red'],
+      allDay: true
+    })
+    this.refresh.next();
+    console.log(this.events)
+  }
 }

frontend/src/app/tasks/task-detail-overview/task-detail-overview.component.html

@@ -35,7 +35,7 @@
     </mat-card-actions>
   </mat-card>
 
-  <mat-expansion-panel>
+  <mat-expansion-panel *ngIf="taskgroup != undefined && task != undefined">
     <mat-expansion-panel-header>Schedules</mat-expansion-panel-header>
     <div>
       <button style="float: right" mat-raised-button color="primary" [routerLink]="['/taskgroups', taskgroup!.taskgroupID, 'tasks', task!.taskID, 'schedule']">Add</button>

frontend/src/index.html

@@ -13,5 +13,22 @@
 </head>
 <body class="mat-typography">
   <app-root></app-root>
+
+  <style type="text/css">
+
+    .cal-week-view .cal-time-events {
+      max-height: 400px;
+      overflow-y: auto;
+    }
+
+    .cal-day-headers {
+
+    }
+
+    .cal-day-columns {
+      height: 100%;
+    }
+
+  </style>
 </body>
 </html>

openapi.yaml

@@ -1203,8 +1203,49 @@ paths:
               schema:
                 type: object
                 $ref: "#/components/schemas/SimpleStatusResponse"
-
+  /schedules/{taskID}/basic:
-      
+    put:
+      security:
+        - API_TOKEN: []
+      tags:
+        - schedule
+      description: creates a basic schedule for a task
+      summary: creates basic schedule for task
+      parameters:
+        - name: taskID
+          in: path
+          description: internal id of task
+          required: true
+          schema:
+            type: number
+            example: 1
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/BasicScheduleFieldInfo'
+      responses:
+        200:
+          description: operation successfull
+          content:
+            application/json:
+              schema:
+                type: object
+                $ref: '#/components/schemas/BasicScheduleEntityInfo'
+        403:
+          description: No permission
+          content:
+            'application/json':
+              schema:
+                type: object
+                $ref: "#/components/schemas/SimpleStatusResponse"
+        404:
+          description: Taskgroup does not exist
+          content:
+            'application/json':
+              schema:
+                type: object
+                $ref: "#/components/schemas/SimpleStatusResponse"
 components:
   securitySchemes:
    API_TOKEN: