diff --git a/client/src/app/core/services/viewport.service.ts b/client/src/app/core/services/viewport.service.ts
index 14b360001..1874d0a5c 100644
--- a/client/src/app/core/services/viewport.service.ts
+++ b/client/src/app/core/services/viewport.service.ts
@@ -1,6 +1,25 @@
import { Injectable } from '@angular/core';
import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
+/**
+ * Viewport Service
+ *
+ * Uses breakpoint observers to determine the size of the users/operators viewport size (the device)
+ *
+ * ## Example:
+ *
+ * Provide the service via constructor and just use it like
+ *
+ * ```html
+ *
Will only be shown of not mobile
+ * ```
+ * or
+ * ```ts
+ * if (this.vp.isMobile) {
+ * ...
+ * }
+ * ```
+ */
@Injectable({
providedIn: 'root'
})
@@ -10,8 +29,17 @@ export class ViewportService {
*/
private _isMobile = false;
+ /**
+ * Get the BreakpointObserver
+ *
+ * @param breakpointObserver
+ */
constructor(private breakpointObserver: BreakpointObserver) {}
+ /**
+ * Needs to be called (exactly) once.
+ * Will observe breakpoints and updates the _isMobile variable
+ */
checkForChange() {
this.breakpointObserver
.observe([Breakpoints.Small, Breakpoints.HandsetPortrait])
diff --git a/client/src/app/shared/components/head-bar/head-bar.component.html b/client/src/app/shared/components/head-bar/head-bar.component.html
new file mode 100644
index 000000000..c92a32747
--- /dev/null
+++ b/client/src/app/shared/components/head-bar/head-bar.component.html
@@ -0,0 +1,22 @@
+
+
+
+
+ {{ appName | translate }}
+
+
+
+
+
+
+
+
+
+
diff --git a/client/src/app/shared/components/head-bar/head-bar.component.scss b/client/src/app/shared/components/head-bar/head-bar.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/app/shared/components/head-bar/head-bar.component.spec.ts b/client/src/app/shared/components/head-bar/head-bar.component.spec.ts
new file mode 100644
index 000000000..65fae7079
--- /dev/null
+++ b/client/src/app/shared/components/head-bar/head-bar.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeadBarComponent } from './head-bar.component';
+
+describe('HeadBarComponent', () => {
+ let component: HeadBarComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [HeadBarComponent]
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HeadBarComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/client/src/app/shared/components/head-bar/head-bar.component.ts b/client/src/app/shared/components/head-bar/head-bar.component.ts
new file mode 100644
index 000000000..d44985c0c
--- /dev/null
+++ b/client/src/app/shared/components/head-bar/head-bar.component.ts
@@ -0,0 +1,105 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+/**
+ * Reusable head bar component for Apps.
+ *
+ * Will translate the title automatically.
+ *
+ * Use `PlusButton=true` and `(plusButtonClicked)=myFunction()` if a plus button is needed
+ *
+ * Use `[menuLust]=myArray` and `(ellipsisMenuItem)=myFunction($event)` if a menu is needed
+ *
+ * ## Examples:
+ *
+ * ### Usage of the selector:
+ *
+ * ```html
+ *
+ *
+ * ```
+ *
+ * ### Declaration of a menu provided as `[menuList]=myMenu`:
+ *
+ * ```ts
+ * myMenu = [
+ * {
+ * text: 'Download All',
+ * icon: 'download',
+ * action: 'downloadAllFiles'
+ * },
+ * ];
+ * ```
+ * The parent needs to react to `action` like the following.
+ * This will execute a function with the name provided in the
+ * `action` field.
+ * ```ts
+ * onEllipsisItem(event: any) {
+ * if (event.action) {
+ * this[event.action]();
+ * }
+ * }
+ * ```
+ */
+@Component({
+ selector: 'app-head-bar',
+ templateUrl: './head-bar.component.html',
+ styleUrls: ['./head-bar.component.scss']
+})
+export class HeadBarComponent implements OnInit {
+ /**
+ * Input declaration for the app name
+ */
+ @Input() appName: string;
+
+ /**
+ * Determine if there should be a plus button.
+ */
+ @Input() plusButton: false;
+
+ /**
+ * If not empty shows a ellipsis menu on the right side
+ *
+ * The parent needs to provide a menu, i.e `[menuList]=myMenu`.
+ */
+ @Input() menuList: any[];
+
+ /**
+ * Emit a signal to the parent component if the plus button was clicked
+ */
+ @Output() plusButtonClicked = new EventEmitter();
+
+ /**
+ * Emit a signal to the parent of an item in the menuList was selected.
+ */
+ @Output() ellipsisMenuItem = new EventEmitter();
+
+ /**
+ * Empty constructor
+ */
+ constructor() {}
+
+ /**
+ * empty onInit
+ */
+ ngOnInit() {}
+
+ /**
+ * Emits a signal to the parent if an item in the menu was clicked.
+ * @param item
+ */
+ clickMenu(item: any) {
+ this.ellipsisMenuItem.emit(item);
+ }
+
+ /**
+ * Emits a signal to the parent if
+ */
+ clickPlusButton() {
+ this.plusButtonClicked.emit(true);
+ }
+}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index f596c455f..21df10880 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -34,6 +34,7 @@ import { TranslateModule } from '@ngx-translate/core';
// directives
import { OsPermsDirective } from './directives/os-perms.directive';
import { DomChangeDirective } from './directives/dom-change.directive';
+import { HeadBarComponent } from './components/head-bar/head-bar.component';
library.add(fas);
@@ -68,6 +69,7 @@ library.add(fas);
MatMenuModule,
MatSnackBarModule,
MatDialogModule,
+ TranslateModule.forChild(),
FontAwesomeModule
],
exports: [
@@ -92,8 +94,10 @@ library.add(fas);
MatSnackBarModule,
FontAwesomeModule,
TranslateModule,
- OsPermsDirective
+ OsPermsDirective,
+ DomChangeDirective,
+ HeadBarComponent
],
- declarations: [OsPermsDirective, DomChangeDirective]
+ declarations: [OsPermsDirective, DomChangeDirective, HeadBarComponent]
})
export class SharedModule {}
diff --git a/client/src/app/site/agenda/agenda-list/agenda-list.component.html b/client/src/app/site/agenda/agenda-list/agenda-list.component.html
index 490db8ae3..8003ad42e 100644
--- a/client/src/app/site/agenda/agenda-list/agenda-list.component.html
+++ b/client/src/app/site/agenda/agenda-list/agenda-list.component.html
@@ -1,18 +1,4 @@
-
-
-
-
- Agenda
-
-
-
-
-
-
+
@@ -26,4 +12,4 @@
Only permitted users should see this
-
\ No newline at end of file
+
diff --git a/client/src/app/site/agenda/agenda-list/agenda-list.component.ts b/client/src/app/site/agenda/agenda-list/agenda-list.component.ts
index 19cab2e3f..74c4c4503 100644
--- a/client/src/app/site/agenda/agenda-list/agenda-list.component.ts
+++ b/client/src/app/site/agenda/agenda-list/agenda-list.component.ts
@@ -3,21 +3,39 @@ import { Title } from '@angular/platform-browser';
import { BaseComponent } from 'app/base.component';
import { TranslateService } from '@ngx-translate/core';
+/**
+ * List view for the agenda.
+ *
+ * TODO: Not yet implemented
+ */
@Component({
selector: 'app-agenda-list',
templateUrl: './agenda-list.component.html',
styleUrls: ['./agenda-list.component.css']
})
export class AgendaListComponent extends BaseComponent implements OnInit {
+ /**
+ * The usual constructor for components
+ * @param titleService
+ * @param translate
+ */
constructor(titleService: Title, protected translate: TranslateService) {
super(titleService, translate);
}
+ /**
+ * Init function.
+ * Sets the title
+ */
ngOnInit() {
super.setTitle('Agenda');
}
- downloadAgendaButton() {
- console.log('Clock Download Button');
+ /**
+ * Handler for the plus button.
+ * Comes from the HeadBar Component
+ */
+ onPlusButton() {
+ console.log('create new motion');
}
}
diff --git a/client/src/app/site/assignments/assignment-list/assignment-list.component.html b/client/src/app/site/assignments/assignment-list/assignment-list.component.html
index 316891366..a6359530a 100644
--- a/client/src/app/site/assignments/assignment-list/assignment-list.component.html
+++ b/client/src/app/site/assignments/assignment-list/assignment-list.component.html
@@ -1,4 +1,4 @@
-
+
-
+ -->
+
+
assignment-list works!
-
\ No newline at end of file
+
diff --git a/client/src/app/site/assignments/assignment-list/assignment-list.component.ts b/client/src/app/site/assignments/assignment-list/assignment-list.component.ts
index 74a4b4ab6..abc6bd927 100644
--- a/client/src/app/site/assignments/assignment-list/assignment-list.component.ts
+++ b/client/src/app/site/assignments/assignment-list/assignment-list.component.ts
@@ -3,21 +3,68 @@ import { BaseComponent } from '../../../base.component';
import { TranslateService } from '@ngx-translate/core';
import { Title } from '@angular/platform-browser';
+/**
+ * Listview for the assignments
+ *
+ * TODO: not yet implemented
+ */
@Component({
selector: 'app-assignment-list',
templateUrl: './assignment-list.component.html',
styleUrls: ['./assignment-list.component.css']
})
export class AssignmentListComponent extends BaseComponent implements OnInit {
+ /**
+ * Constructor.
+ * @param titleService
+ * @param translate
+ */
constructor(titleService: Title, protected translate: TranslateService) {
super(titleService, translate);
}
+ /**
+ * Define the content of the ellipsis menu.
+ * Give it to the HeadBar to display them.
+ */
+ assignmentMenu = [
+ {
+ text: 'Download All',
+ icon: 'download',
+ action: 'downloadAssignmentButton'
+ }
+ ];
+
+ /**
+ * Click on the plus button delegated from head-bar
+ */
+ onPlusButton() {
+ console.log('create new assignments');
+ }
+
+ /**
+ * Init function. Sets the title.
+ */
ngOnInit() {
super.setTitle('Assignments');
}
+ /**
+ * Function to download the assignment list
+ * TODO: Not yet implemented
+ */
downloadAssignmentButton(): void {
console.log('Hello World');
}
+
+ /**
+ * handler function for clicking on items in the ellipsis menu.
+ *
+ * @param event clicked entry from ellipsis menu
+ */
+ onEllipsisItem(event: any) {
+ if (event.action) {
+ this[event.action]();
+ }
+ }
}
diff --git a/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.html b/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.html
index 9e36cb240..db619f039 100644
--- a/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.html
+++ b/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.html
@@ -1,13 +1,7 @@
-
+
+
-
-
- Files
-
-
mediafile-list works!
-
\ No newline at end of file
+
diff --git a/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.ts b/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.ts
index 97791fb52..aad742c7c 100644
--- a/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.ts
+++ b/client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.ts
@@ -1,19 +1,76 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
import { Title } from '@angular/platform-browser';
+
import { TranslateService } from '@ngx-translate/core';
+
import { BaseComponent } from '../../../base.component';
+/**
+ * Lists all the uploaded mediafiles.
+ *
+ * Not yet implemented
+ */
@Component({
selector: 'app-mediafile-list',
templateUrl: './mediafile-list.component.html',
styleUrls: ['./mediafile-list.component.css']
})
export class MediafileListComponent extends BaseComponent implements OnInit {
+ /**
+ * Constructor
+ *
+ * @param titleService
+ * @param translate
+ */
constructor(titleService: Title, protected translate: TranslateService) {
super(titleService, translate);
}
+ /**
+ * Define the content of the ellipsis menu.
+ * Give it to the HeadBar to display them.
+ */
+ extraMenu = [
+ {
+ text: 'Download',
+ icon: 'download',
+ action: 'downloadAllFiles'
+ }
+ ];
+
+ /**
+ * Init.
+ * Set the title
+ */
ngOnInit() {
super.setTitle('Files');
}
+
+ /**
+ * Click on the plus button delegated from head-bar
+ */
+ onPlusButton() {
+ console.log('clicked plus (mediafile)');
+ }
+
+ /**
+ * function to Download all files
+ * (serves as example to use functions on head bar)
+ *
+ * TODO: Not yet implemented, might not even be required
+ */
+ deleteAllFiles() {
+ console.log('do download');
+ }
+
+ /**
+ * handler function for clicking on items in the ellipsis menu.
+ *
+ * @param event clicked entry from ellipsis menu
+ */
+ onEllipsisItem(event: any) {
+ if (event.action) {
+ this[event.action]();
+ }
+ }
}
diff --git a/client/src/app/site/motions/category-list/category-list.component.html b/client/src/app/site/motions/category-list/category-list.component.html
index 58493c916..8fa62310c 100644
--- a/client/src/app/site/motions/category-list/category-list.component.html
+++ b/client/src/app/site/motions/category-list/category-list.component.html
@@ -1,24 +1,4 @@
-
-
-
-
- Category
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/client/src/app/site/motions/category-list/category-list.component.ts b/client/src/app/site/motions/category-list/category-list.component.ts
index 7896dd665..135e2bd1f 100644
--- a/client/src/app/site/motions/category-list/category-list.component.ts
+++ b/client/src/app/site/motions/category-list/category-list.component.ts
@@ -1,11 +1,16 @@
import { Component, OnInit, ViewChild } from '@angular/core';
-import { Category } from '../../../shared/models/motions/category';
import { Title } from '@angular/platform-browser';
-import { TranslateService } from '@ngx-translate/core';
-import { Router } from '@angular/router';
-import { BaseComponent } from '../../../base.component';
import { MatSort, MatTable, MatTableDataSource } from '@angular/material';
+import { TranslateService } from '@ngx-translate/core';
+import { BaseComponent } from '../../../base.component';
+import { Category } from '../../../shared/models/motions/category';
+
+/**
+ * List view for the categories.
+ *
+ * TODO: Creation of new Categories
+ */
@Component({
selector: 'app-category-list',
templateUrl: './category-list.component.html',
@@ -32,10 +37,20 @@ export class CategoryListComponent extends BaseComponent implements OnInit {
*/
@ViewChild(MatSort) sort: MatSort;
- constructor(protected titleService: Title, protected translate: TranslateService, private router: Router) {
+ /**
+ * The usual component constructor
+ * @param titleService
+ * @param translate
+ */
+ constructor(protected titleService: Title, protected translate: TranslateService) {
super(titleService, translate);
}
+ /**
+ * Init function.
+ *
+ * Sets the title and gets/observes categories from DataStore
+ */
ngOnInit() {
super.setTitle('Category');
this.categoryArray = this.DS.get(Category) as Category[];
@@ -51,4 +66,13 @@ export class CategoryListComponent extends BaseComponent implements OnInit {
}
});
}
+
+ /**
+ * Add a new Category.
+ *
+ * TODO: Not yet implemented
+ */
+ onPlusButton() {
+ console.log('Add New Category');
+ }
}
diff --git a/client/src/app/site/motions/motion-list/motion-list.component.html b/client/src/app/site/motions/motion-list/motion-list.component.html
index c85a7c19f..69ab25169 100644
--- a/client/src/app/site/motions/motion-list/motion-list.component.html
+++ b/client/src/app/site/motions/motion-list/motion-list.component.html
@@ -1,4 +1,4 @@
-
+
+
-
+
-
+ -->
+
+