Merge pull request #12 from klassecloud/Kalender

Kalender

.gitignore

@@ -1,5 +1,10 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
-
+/node_modules
+.idea/workspace.xml
+.idea/vcs.xml
+.idea/modules.xml
+.idea/misc.xml
+.idea/inspectionProfiles/Project_Default.xml
+.idea/frontendTeacher.iml
 # compiled output
 /dist
 /tmp

package.json

@@ -22,6 +22,9 @@
     "@angular/platform-browser": "~9.1.7",
     "@angular/platform-browser-dynamic": "~9.1.7",
     "@angular/router": "~9.1.7",
+    "@fullcalendar/angular": "^5.1.0",
+    "@fullcalendar/daygrid": "^5.1.0",
+    "@fullcalendar/interaction": "^5.1.0",
     "ng-katex": "^2.0.3",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",

src/app/app-routing.module.ts

@@ -4,13 +4,15 @@ import { PreloadAllModules, Routes, RouterModule } from '@angular/router';
 import { TaskListComponent } from './task-list/task-list.component';
 import { TaskComponent } from './task/task.component';
 import { EditTaskComponent } from './edit-task/edit-task.component';
+import { CalendarComponent } from './calendar/calendar.component';
 import { TaskDetailsComponent } from './task-details/task-details.component';
 
 const routes: Routes = [
-{path: '', redirectTo: "tasklist", pathMatch: 'full'},
+{path: '', redirectTo: 'tasklist', pathMatch: 'full'},
 {path: 'tasklist', component: TaskListComponent},
 {path: 'newtask', component: EditTaskComponent},
 {path: 'edittask/:id', component: EditTaskComponent},
+{path: 'calendar', component: CalendarComponent},
 {path: 'taskdetails/:id', component: TaskDetailsComponent},
 ];
 

src/app/app.component.html

@@ -4,4 +4,5 @@
 <br>
 
 <button [routerLink]="'/newtask'">New task</button>
-<button [routerLink]="'/tasklist'">Tasklist</button>
+<button [routerLink]="'/tasklist'">Tasklist</button>
+<button [routerLink]="'/calendar'">calendar</button>

src/app/app.module.ts

@@ -1,32 +1,43 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
+import { FullCalendarModule } from '@fullcalendar/angular';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import interactionPlugin from '@fullcalendar/interaction';
+
+
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
-import {HttpClientModule} from '@angular/common/http';
+import { HttpClientModule} from '@angular/common/http';
 
 import { TaskComponent } from './task/task.component';
 
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { MatGridListModule } from '@angular/material/grid-list';
 import { MaterialModule } from './material-module';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { TaskListComponent } from './task-list/task-list.component';
 
 import { EditTaskComponent } from './edit-task/edit-task.component';
 import { FormsModule } from '@angular/forms';
+import { CalendarComponent } from './calendar/calendar.component';
 import { KatexModule } from 'ng-katex';
 import { TaskDetailsComponent } from './task-details/task-details.component';
 import { KatexInputComponent } from './katex-input/katex-input.component';
 
+FullCalendarModule.registerPlugins([ // register FullCalendar plugins
+  dayGridPlugin,
+  interactionPlugin
+]);
 
 @NgModule({
   declarations: [
     AppComponent,
     TaskComponent,
     TaskListComponent,
     EditTaskComponent,
+    CalendarComponent,
     TaskDetailsComponent,
     KatexInputComponent
   ],
@@ -37,7 +48,9 @@ import { KatexInputComponent } from './katex-input/katex-input.component';
     FlexLayoutModule,
     FormsModule,
     HttpClientModule,
-    KatexModule
+    FullCalendarModule,
+    BrowserAnimationsModule,
+    KatexModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/calendar/calendar.component.css

@@ -0,0 +1,8 @@
+h3 {
+    margin: 0 0 10px;
+}
+
+pre {
+    background-color: #f5f5f5;
+    padding: 15px;
+}

src/app/calendar/calendar.component.html

@@ -0,0 +1,8 @@
+
+<button (click)="toggleWeekends()">toggle weekends</button>
+<button (click)="toggleBar()">toggle Bar</button>
+<button (click)="activateStartDate()">activate start Date</button>
+<button (click)="activateEndDate()">activate end Date</button>
+
+<full-calendar [options]="calendarOptions" ></full-calendar>
+

src/app/calendar/calendar.component.spec.ts

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

src/app/calendar/calendar.component.ts

@@ -0,0 +1,105 @@
+import {Component, Input, OnInit} from '@angular/core';
+import { CalendarOptions } from '@fullcalendar/angular';
+import {Task_Interface} from '../task-interface';
+import { Tasks } from '../task-data';
+
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './calendar.component.html',
+  styleUrls: ['./calendar.component.scss']
+})
+export class CalendarComponent implements OnInit{
+
+  @Input() tasks: Task_Interface[] = [];
+  activatebar = false;
+  activateend = false;
+  activatestart = false;
+
+  // @ts-ignore
+  calendarOptions: CalendarOptions = {
+    initialView: 'dayGridMonth',
+    weekends: true, // initial value
+    events: [],
+  };
+
+  toggleWeekends() {
+    this.calendarOptions.weekends = !this.calendarOptions.weekends; // toggle the boolean!
+  }
+  showCalendar()
+  {
+    this.tasks = Tasks;
+    const name = [];
+    const start = [];
+    const end = [];
+    const color = [];
+    let zaehler = 0;
+    for (let index = 0; index < this.tasks.length; index++)
+    {
+      if (this.activatestart)
+      {
+        zaehler++;
+        name.push('Anfang: ' + Tasks[index].name);
+        start.push(Tasks[index].start);
+        end.push(Tasks[index].start);
+        if (Tasks[index].uebung) {
+          color.push('green');
+        }
+        else { color.push('purple'); }
+      }
+      if (this.activateend)
+      {
+        zaehler++;
+        name.push('Abgabe: ' + Tasks[index].name);
+        start.push(Tasks[index].end);
+        end.push(Tasks[index].end);
+        if (Tasks[index].uebung) {
+          color.push('green');
+        }
+        else { color.push('purple'); }
+      }
+      if (this.activatebar)
+      {
+        zaehler++;
+        name.push(Tasks[index].name);
+        start.push(Tasks[index].start);
+        end.push(Tasks[index].end);
+        if (Tasks[index].uebung) {
+          color.push('green');
+        } else {
+          color.push('purple');
+        }
+      }
+    }
+    const newEvents = [];
+    // tslint:disable-next-line:prefer-for-of
+    for (let index = 0; index <= zaehler; index++)
+    {
+      newEvents.push({ title: name.pop(), color: color.pop(), start: start.pop(), end: end.pop() });
+    }
+    this.calendarOptions.events = newEvents;
+  }
+  activateEndDate()
+  {
+    this.activateend = !this.activateend;
+    this.showCalendar();
+  }
+
+  activateStartDate()
+  {
+    this.activatestart = !this.activatestart;
+    this.showCalendar();
+  }
+
+  toggleBar()
+  {
+    this.activatebar = !this.activatebar;
+    this.showCalendar();
+  }
+  constructor() {
+  }
+  ngOnInit() {
+    this.toggleBar();
+  }
+
+}

src/app/edit-task/edit-task.component.html

@@ -64,7 +64,10 @@
   <div class="input-title">Schüler:</div>
   <div class="students">{{task.allocate}}</div>
 </div>
-
+  <div class="flex-container">
+    <div class="input-title">Auswahl Übung oder Vorlesung:</div>
+    <button (click)="toggleUebung()" > {{ buttonheader }} > </button>
+  </div>
 </div>