Merge branch 'master' into 'master'

SWTP Comment Project

Closes #3, #4, #5, and #8

See merge request arsnova/arsnova-lite!171

.gitlab-ci.yml

@@ -20,13 +20,7 @@ tslint:
   allow_failure: false
   dependencies: []
   script:
-    - echo "{}" > package.json
-    - npm install tslint-angular
-    - npm install tslint-eslint-rules
-    - npm install @angular/compiler
-    - npm install @angular/core
-    - npm install typescript
-    - npm install rxjs
+    - npm install
     - node_modules/tslint/bin/tslint -p ./tsconfig.json -c ./tslint.json --project
 
 unit_tests:

THEME-README.md

+# How to add a new Theme
+
+## Preparation
+
+Create a new directory with the name of the new theme in src/theme.
+
+## Create new theme
+
+1. Create a new scss file with the same structure as `_dark-theme.scss` and style it using material palette.
+
+2. Create a new scss file in your working theme directory named {YourThemeName}.const.ts and copy the structure of `darkTheme.const.ts`.
+
+## Add new theme to theme manager
+
+Import the file in `styles.scss` and add the new theme to theme menu in `header.component.html`.
+
+## Configure your theme 
+
+Start editing the variables and see the magic happen. We recommend to use [material colors](https://material.io/tools/color).

authors.md

@@ -8,3 +8,10 @@
 * thomas.lenz@mni.thm.de
 * lorenz.detterbeck@mni.thm.de
 * lukas.mauss@mni.thm.de
+* louis.peter@mni.thm.de
+* mariana.baho@mni.thm.de
+* berna.tuelek@mni.thm.de
+* thisari.muthuwahandi@mni.thm.de
+* sebastian.wittek@mni.thm.de
+* anris.ceta@mni.thm.de
+* thomas.gross@mni.thm.de

package.json

@@ -37,18 +37,19 @@
     "rxjs": "^6.3.3",
     "rxjs-compat": "^6.2.2",
     "tslint-eslint-rules": "^5.3.1",
+    "typescript-map": "0.0.7",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.10.0",
+    "@angular-devkit/build-angular": "^0.13.7",
     "@angular/cli": "7.0.6",
-    "@angular/compiler-cli": "7.1.0",
+    "@angular/compiler-cli": "^7.2.11",
     "@angular/language-service": "7.1.0",
     "@biesbjerg/ngx-translate-extract": "^2.3.4",
     "@types/jasmine": "^2.8.8",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "^6.0.116",
-    "codelyzer": "^4.4.4",
+    "codelyzer": "^4.5.0",
     "jasmine-core": "~2.8.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "^2.0.5",

proxy.conf.json

 {
+  "/api/comment": {
+    "target": "http://localhost:8088",
+    "secure": false,
+    "pathRewrite": {
+      "^/api": ""
+    },
+		"logLevel": "debug"
+  },
   "/api": {
     "target": "http://localhost:8080",
     "secure": false,

src/app/app.component.html

-<div fxLayout="column" fxFill>
-  <app-header></app-header>
-  <div fxFlex class="app-component">
-    <router-outlet></router-outlet>
+  <div fxLayout="column" fxFill appTheme>
+    <app-header #header></app-header>
+    <div fxFlex class="app-component">
+      <router-outlet></router-outlet>
+    </div>
+    <app-footer></app-footer>
   </div>
-  <app-footer></app-footer>
-</div>

src/app/app.component.scss

-@import '../theme/_variables.scss';
+@import '../theme/default-Theme/_variables.scss';
 
 .app-component {
   padding: 4%;
-  background-color: #b2dfdb;
+  background-color:var(--background);
 }
-
-

src/app/app.component.ts

 import { Component } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
+import { ThemeService } from '../theme/theme.service';
 
 @Component({
   selector: 'app-root',
@@ -8,7 +9,8 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class AppComponent {
 
-  constructor(private translationService: TranslateService) {
+  constructor(private translationService: TranslateService,
+              private themeService: ThemeService) {
 
     translationService.setDefaultLang(this.translationService.getBrowserLang());
     sessionStorage.setItem('currentLang', this.translationService.getBrowserLang());

src/app/app.module.ts

@@ -14,6 +14,7 @@ import { CommentService } from './services/http/comment.service';
 import { DataStoreService } from './services/util/data-store.service';
 import { ContentService } from './services/http/content.service';
 import { ContentAnswerService } from './services/http/content-answer.service';
+import { WsConnectorService } from './services/websockets/ws-connector.service';
 import { UserActivationComponent } from './components/home/_dialogs/user-activation/user-activation.component';
 import { AuthenticationInterceptor } from './interceptors/authentication.interceptor';
 import { EssentialsModule } from './components/essentials/essentials.module';
@@ -24,9 +25,8 @@ import { LanguageService } from './services/util/language.service';
 import { MarkdownService, MarkedOptions } from 'ngx-markdown';
 import { NewLandingComponent } from './components/home/new-landing/new-landing.component';
 import { HomePageComponent } from './components/home/home-page/home-page.component';
-import { InjectableRxStompConfig, RxStompService, rxStompServiceFactory } from '@stomp/ng2-stompjs';
-import { myRxStompConfig } from './rx-stomp.config';
 import { AppConfig } from './app.config';
+import { ThemeModule } from '../theme/theme.module';
 
 export function dialogClose(dialogResult: any) {
 }
@@ -54,7 +54,8 @@ export function initializeApp(appConfig: AppConfig) {
     BrowserModule,
     BrowserAnimationsModule,
     EssentialsModule,
-    SharedModule
+    SharedModule,
+    ThemeModule
   ],
   providers: [
     AppConfig,
@@ -67,15 +68,7 @@ export function initializeApp(appConfig: AppConfig) {
       useClass: AuthenticationInterceptor,
       multi: true
     },
-    {
-      provide: InjectableRxStompConfig,
-      useValue: myRxStompConfig
-    },
-    {
-      provide: RxStompService,
-      useFactory: rxStompServiceFactory,
-      deps: [InjectableRxStompConfig]
-    },
+    WsConnectorService,
     NotificationService,
     AuthenticationService,
     AuthenticationGuard,
@@ -88,6 +81,7 @@ export function initializeApp(appConfig: AppConfig) {
     MarkdownService,
     MarkedOptions,
     UserService,
+    WsConnectorService,
     {
       provide: MatDialogRef,
       useValue: {

src/app/components/creator/_dialogs/comment-export/comment-export.component.html

+<div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="35px">
+    <h3>{{'comment-page.delimiter' | translate}}</h3>
+    <mat-radio-group [(ngModel)]="exportType">
+      <div fxLayout="column">
+        <mat-radio-button value="comma" checked><h4>{{'comment-page.comma' | translate}}</h4></mat-radio-button>
+        <mat-radio-button value="semicolon"><h4>{{'comment-page.semicolon' | translate}}</h4></mat-radio-button>
+      </div>
+    </mat-radio-group>
+  <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="20px">
+  <button mat-raised-button color="warn" (click)="onNoClick()">{{'comment-page.abort' | translate}}</button>
+    <button mat-raised-button color="primary"
+            (click)="onExport(exportType)">{{'comment-page.export' | translate}}</button>
+  </div>
+</div>

src/app/components/creator/_dialogs/comment-export/comment-export.component.scss

+button {
+  min-width: 100px;
+}
+
+h3 {
+  font-size: large;
+  color: var(--text-2);
+}
+
+h4 {
+  margin: 15px 0 15px 0;
+}

src/app/components/creator/_dialogs/comment-export/comment-export.component.spec.ts

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

src/app/components/creator/_dialogs/comment-export/comment-export.component.ts

+import { Component, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material';
+import { CommentCreatorPageComponent } from '../../comment-creator-page/comment-creator-page.component';
+import { Comment } from '../../../../models/comment';
+
+@Component({
+  selector: 'app-comment-export',
+  templateUrl: './comment-export.component.html',
+  styleUrls: ['./comment-export.component.scss']
+})
+export class CommentExportComponent implements OnInit {
+  comments: Comment[];
+  exportType = 'comma';
+
+  constructor(public dialogRef: MatDialogRef<CommentCreatorPageComponent>) { }
+
+  ngOnInit() {
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  exportCsv(delimiter: string, date: string): void {
+    let csv: string;
+    let keyFields = '';
+    let valueFields = '';
+    keyFields = Object.keys(this.comments[0]).slice(3).join(delimiter) + '\r\n';
+    this.comments.forEach(element => {
+      element.body = '"' + element.body.replace(/[\r\n]/g, ' ').replace(/ +/g, ' ').replace(/"/g, '""') + '"';
+      valueFields += Object.values(element).slice(3).join(delimiter) + '\r\n';
+    });
+    csv = keyFields + valueFields;
+    const myBlob = new Blob([csv], { type: 'text/csv' });
+    const link = document.createElement('a');
+    const fileName = 'comments_' + date + '.csv';
+    link.setAttribute('download', fileName);
+    link.href = window.URL.createObjectURL(myBlob);
+    link.click();
+  }
+
+  onExport(exportType: string): void {
+    const date = new Date();
+    const dateString = date.getFullYear() + '_' + ('0' + (date.getMonth() + 1)).slice(-2) + '_' + ('0' + date.getDate()).slice(-2);
+    const timeString = ('0' + date.getHours()).slice(-2) + ('0' + date.getMinutes()).slice(-2) + ('0' + date.getSeconds()).slice(-2);
+    const timestamp = dateString + '_' + timeString;
+      if (exportType === 'comma') {
+        this.exportCsv(',', timestamp);
+        this.onNoClick();
+      }
+      if (exportType === 'semicolon') {
+        this.exportCsv(';', timestamp);
+        this.onNoClick();
+      }
+  }
+}

src/app/components/creator/_dialogs/content-edit/content-edit.component.html

 <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px">
   <mat-form-field>
-    <input matInput [(ngModel)]="content.subject" maxlength="20" placeholder="{{'content.subject' | translate}}" name="subject"/>
+    <input matInput [(ngModel)]="content.subject" maxlength="40" placeholder="{{'content.subject' | translate}}" name="subject"/>
   </mat-form-field>
   <mat-form-field>
-    <textarea matInput [(ngModel)]="content.body" rows="3" maxlength="100" placeholder="{{'content.body' | translate}}" name="body"></textarea>
+    <textarea matInput [(ngModel)]="content.body" rows="3" maxlength="255" placeholder="{{'content.body' | translate}}" name="body"></textarea>
   </mat-form-field>
   <h4>{{'content.answers' | translate}}</h4>
   <mat-table [dataSource]="displayAnswers">
     <ng-container matColumnDef="label">
       <mat-cell *matCellDef="let answer">
         <mat-form-field class="input-block">
-          <input matInput [(ngModel)]="answer.answerOption.label" maxlength="20" name="answer"/>
+          <input matInput [(ngModel)]="answer.answerOption.label" maxlength="50" name="answer"/>
         </mat-form-field>
       </mat-cell>
     </ng-container>

src/app/components/creator/_dialogs/content-edit/content-edit.component.scss

@@ -9,17 +9,17 @@ textarea {
 }
 
 mat-row {
-  background-color: #bbdefb;
-  border-color: #bbdefb;
+  background-color: var(--dialog);
+  border-color: var(--dialog);
 }
 
 h4 {
-  margin: 0px !important;
+  margin: 0 !important;
   padding-bottom: 10px;
-  color: #4db6ac;
+  color: var(--primary);
 }
 
 mat-cell {
-  padding-left: 0px!important;
+  padding-left: 0!important;
   padding-right: 10px!important;
 }

src/app/components/creator/_dialogs/room-delete/room-delete.component.ts

 import { Component, Inject, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
-import { NotificationService } from '../../../../services/util/notification.service';
 import { RoomCreateComponent } from '../../../shared/_dialogs/room-create/room-create.component';
-import { RoomService } from '../../../../services/http/room.service';
 import { Room } from '../../../../models/room';
 
 @Component({
@@ -14,10 +11,7 @@ import { Room } from '../../../../models/room';
 export class RoomDeleteComponent implements OnInit {
   room: Room;
 
-  constructor(private roomService: RoomService,
-              private router: Router,
-              private notification: NotificationService,
-              public dialogRef: MatDialogRef<RoomCreateComponent>,
+  constructor(              public dialogRef: MatDialogRef<RoomCreateComponent>,
               @Inject(MAT_DIALOG_DATA) public data: any) {
   }