Add modules and lazy loading

- core modules contains core services
- shared module contains "dumb" components (directives, models)
  - used by nearly all modules
- site, it's children and projector are now feature modules
  - full lazy loading with independent routing
  - routing for children (extremely helpful for plugins (later))

client/package.json

@@ -3,7 +3,7 @@
     "version": "0.0.0",
     "scripts": {
         "ng": "ng",
-        "start": "ng serve --proxy-config proxy.conf.json --host=0.0.0.0",
+        "start": "ng serve --proxy-config proxy.conf.json --host=0.0.0.0 --aot",
         "build": "ng build",
         "test": "ng test",
         "lint": "ng lint",

client/src/app/app-routing.module.ts

@@ -1,30 +1,15 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-
 import { LoginComponent } from './site/login/login.component';
-import { ProjectorComponent } from './projector-container/projector/projector.component';
-import { ProjectorContainerComponent } from './projector-container/projector-container.component';
-import { SiteComponent } from './site/site.component';
-import { StartComponent } from './site/start/start.component';
-import { AgendaComponent } from './site/agenda/agenda.component';
-import { MotionsComponent } from './site/motions/motions.component';
-
 import { AuthGuard } from './core/services/auth-guard.service';
 
+/**
+ * Global app routing
+ */
 const routes: Routes = [
-    { path: 'projector/:id', component: ProjectorComponent },
-    { path: 'real-projector/:id', component: ProjectorContainerComponent },
     { path: 'login', component: LoginComponent },
-    {
-        path: '',
-        component: SiteComponent,
-        canActivate: [AuthGuard],
-        children: [
-            { path: '', component: StartComponent },
-            { path: 'agenda', component: AgendaComponent },
-            { path: 'motions', component: MotionsComponent }
-        ]
-    },
+    { path: 'projector', loadChildren: './projector-container/projector-container.module#ProjectorContainerModule' },
+    { path: '', loadChildren: './site/site.module#SiteModule', canActivate: [AuthGuard] },
     { path: '**', redirectTo: '' }
 ];
 

client/src/app/app.component.ts

@@ -1,7 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { AutoupdateService } from 'app/core/services/autoupdate.service';
-import { OperatorService } from 'app/core/services/operator.service';
 
 /**
  * Angular's global App Component
@@ -18,11 +16,7 @@ export class AppComponent {
      * @param autoupdate
      * @param translate
      */
-    constructor(
-        private operator: OperatorService,
-        private autoupdate: AutoupdateService,
-        private translate: TranslateService
-    ) {
+    constructor(private translate: TranslateService) {
         // manually add the supported languages
         translate.addLangs(['en', 'de', 'fr']);
         // this language will be used as a fallback when a translation isn't found in the current language

client/src/app/app.module.ts

@@ -1,54 +1,18 @@
 // angular modules
-import { BrowserModule, Title } from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpClientModule, HttpClient, HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HttpClientModule, HttpClient, HttpClientXsrfModule } from '@angular/common/http';
 
-// MaterialUI modules
-import {
-    MatButtonModule,
-    MatCheckboxModule,
-    MatToolbarModule,
-    MatCardModule,
-    MatInputModule,
-    MatProgressSpinnerModule,
-    MatSidenavModule,
-    MatSnackBarModule
-} from '@angular/material';
-import { MatListModule } from '@angular/material/list';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatMenuModule } from '@angular/material/menu';
-
-// FontAwesome modules
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { fas } from '@fortawesome/free-solid-svg-icons';
-
-// App components and services
-import { AppComponent } from './app.component';
-import { LoginComponent } from './site/login/login.component';
+// Elementary App Components
 import { AppRoutingModule } from './app-routing.module';
-import { ProjectorComponent } from './projector-container/projector/projector.component';
-import { MotionsComponent } from './site/motions/motions.component';
-import { AgendaComponent } from './site/agenda/agenda.component';
-import { SiteComponent } from './site/site.component';
-import { StartComponent } from './site/start/start.component';
-import { AddHeaderInterceptor } from './core/http-interceptor';
-import { ProjectorContainerComponent } from './projector-container/projector-container.component';
-
-// Root Services
-import { AuthGuard } from './core/services/auth-guard.service';
-import { AuthService } from './core/services/auth.service';
-import { AutoupdateService } from './core/services/autoupdate.service';
-import { DataStoreService } from './core/services/dataStore.service';
-import { OperatorService } from './core/services/operator.service';
-import { WebsocketService } from './core/services/websocket.service';
+import { AppComponent } from './app.component';
+import { CoreModule } from './core/core.module';
 
 // translation module.
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { PruningTranslationLoader } from './core/pruning-loader';
-import { OsPermsDirective } from './core/directives/os-perms.directive';
+import { LoginModule } from './site/login/login.module';
 
 /**
  * For the translation module. Loads a Custom 'translation loader' and provides it as loader.
@@ -57,23 +21,11 @@ import { OsPermsDirective } from './core/directives/os-perms.directive';
 export function HttpLoaderFactory(http: HttpClient) {
     return new PruningTranslationLoader(http);
 }
-
-//add font-awesome icons to library.
-//will blow up the code.
-library.add(fas);
-
+/**
+ * Global App Module. Keep it as clean as possible.
+ */
 @NgModule({
-    declarations: [
-        AppComponent,
-        LoginComponent,
-        ProjectorComponent,
-        MotionsComponent,
-        AgendaComponent,
-        SiteComponent,
-        StartComponent,
-        ProjectorContainerComponent,
-        OsPermsDirective
-    ],
+    declarations: [AppComponent],
     imports: [
         BrowserModule,
         HttpClientModule,
@@ -81,20 +33,7 @@ library.add(fas);
             cookieName: 'OpenSlidesCsrfToken',
             headerName: 'X-CSRFToken'
         }),
-        FormsModule,
-        BrowserAnimationsModule,
-        MatButtonModule,
-        MatCheckboxModule,
-        MatToolbarModule,
-        MatCardModule,
-        MatInputModule,
-        MatProgressSpinnerModule,
-        MatSidenavModule,
-        MatListModule,
-        MatExpansionModule,
-        MatMenuModule,
-        MatSnackBarModule,
-        FontAwesomeModule,
+        BrowserAnimationsModule, //TODO
         TranslateModule.forRoot({
             loader: {
                 provide: TranslateLoader,
@@ -102,21 +41,9 @@ library.add(fas);
                 deps: [HttpClient]
             }
         }),
-        AppRoutingModule
-    ],
-    providers: [
-        Title,
-        AuthGuard,
-        AuthService,
-        AutoupdateService,
-        DataStoreService,
-        OperatorService,
-        WebsocketService,
-        {
-            provide: HTTP_INTERCEPTORS,
-            useClass: AddHeaderInterceptor,
-            multi: true
-        }
+        AppRoutingModule,
+        CoreModule,
+        LoginModule
     ],
     bootstrap: [AppComponent]
 })

client/src/app/core/core.module.spec.ts

@@ -0,0 +1,13 @@
+import { CoreModule } from './core.module';
+
+describe('CoreModule', () => {
+    let coreModule: CoreModule;
+
+    beforeEach(() => {
+        coreModule = new CoreModule(parent);
+    });
+
+    it('should create an instance', () => {
+        expect(coreModule).toBeTruthy();
+    });
+});

client/src/app/core/core.module.ts

@@ -0,0 +1,46 @@
+import { NgModule, Optional, SkipSelf } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Title } from '@angular/platform-browser';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+
+// Core Services, Directives
+import { AuthGuard } from './services/auth-guard.service';
+import { AuthService } from './services/auth.service';
+import { AutoupdateService } from './services/autoupdate.service';
+import { DataStoreService } from './services/dataStore.service';
+import { OperatorService } from './services/operator.service';
+import { WebsocketService } from './services/websocket.service';
+import { AddHeaderInterceptor } from './http-interceptor';
+
+/** Global Core Module. Contains all global (singleton) services
+ *
+ */
+@NgModule({
+    imports: [CommonModule],
+    providers: [
+        Title,
+        AuthGuard,
+        AuthService,
+        AutoupdateService,
+        DataStoreService,
+        OperatorService,
+        WebsocketService,
+        {
+            provide: HTTP_INTERCEPTORS,
+            useClass: AddHeaderInterceptor,
+            multi: true
+        }
+    ]
+})
+export class CoreModule {
+    /** make sure CoreModule is imported only by one NgModule, the AppModule */
+    constructor(
+        @Optional()
+        @SkipSelf()
+        parentModule: CoreModule
+    ) {
+        if (parentModule) {
+            throw new Error('CoreModule is already loaded. Import only in AppModule');
+        }
+    }
+}

client/src/app/core/services/autoupdate.service.ts

@@ -3,24 +3,24 @@ import { Injectable } from '@angular/core';
 import { OpenSlidesComponent } from 'app/openslides.component';
 import { WebsocketService } from './websocket.service';
 // the Models
-import { Item } from 'app/core/models/agenda/item';
-import { Assignment } from 'app/core/models/assignments/assignment';
-import { ChatMessage } from 'app/core/models/core/chat-message';
-import { Config } from 'app/core/models/core/config';
-import { Countdown } from 'app/core/models/core/countdown';
-import { ProjectorMessage } from 'app/core/models/core/projector-message';
-import { Projector } from 'app/core/models/core/projector';
-import { Tag } from 'app/core/models/core/tag';
-import { Mediafile } from 'app/core/models/mediafiles/mediafile';
-import { Category } from 'app/core/models/motions/category';
-import { MotionBlock } from 'app/core/models/motions/motion-block';
-import { MotionChangeReco } from 'app/core/models/motions/motion-change-reco';
-import { Motion } from 'app/core/models/motions/motion';
-import { Workflow } from 'app/core/models/motions/workflow';
-import { Topic } from 'app/core/models/topics/topic';
-import { Group } from 'app/core/models/users/group';
-import { PersonalNote } from 'app/core/models/users/personal-note';
-import { User } from 'app/core/models/users/user';
+import { Item } from 'app/shared/models/agenda/item';
+import { Assignment } from 'app/shared/models/assignments/assignment';
+import { ChatMessage } from 'app/shared/models/core/chat-message';
+import { Config } from 'app/shared/models/core/config';
+import { Countdown } from 'app/shared/models/core/countdown';
+import { ProjectorMessage } from 'app/shared/models/core/projector-message';
+import { Projector } from 'app/shared/models/core/projector';
+import { Tag } from 'app/shared/models/core/tag';
+import { Mediafile } from 'app/shared/models/mediafiles/mediafile';
+import { Category } from 'app/shared/models/motions/category';
+import { MotionBlock } from 'app/shared/models/motions/motion-block';
+import { MotionChangeReco } from 'app/shared/models/motions/motion-change-reco';
+import { Motion } from 'app/shared/models/motions/motion';
+import { Workflow } from 'app/shared/models/motions/workflow';
+import { Topic } from 'app/shared/models/topics/topic';
+import { Group } from 'app/shared/models/users/group';
+import { PersonalNote } from 'app/shared/models/users/personal-note';
+import { User } from 'app/shared/models/users/user';
 
 /**
  * Handles the initial update and automatic updates using the {@link WebsocketService}

client/src/app/core/services/dataStore.service.ts

@@ -4,7 +4,7 @@ import { Observable, of, BehaviorSubject } from 'rxjs';
 import { tap, map } from 'rxjs/operators';
 
 import { ImproperlyConfiguredError } from 'app/core/exceptions';
-import { BaseModel, ModelId } from 'app/core/models/base-model';
+import { BaseModel, ModelId } from 'app/shared/models/base.model';
 
 /**
  * represents a collection on the Django server, uses an ID to access a {@link BaseModel}.

client/src/app/core/services/operator.service.ts

@@ -3,7 +3,7 @@ import { Observable, BehaviorSubject } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { tap, catchError, share } from 'rxjs/operators';
 import { OpenSlidesComponent } from 'app/openslides.component';
-import { Group } from 'app/core/models/users/group';
+import { Group } from 'app/shared/models/users/group';
 
 /**
  * The operator represents the user who is using OpenSlides.

client/src/app/projector-container/projector-container.module.spec.ts

@@ -0,0 +1,13 @@
+import { ProjectorContainerModule } from './projector-container.module';
+
+describe('ProjectorContainerModule', () => {
+    let projectorContainerModule: ProjectorContainerModule;
+
+    beforeEach(() => {
+        projectorContainerModule = new ProjectorContainerModule();
+    });
+
+    it('should create an instance', () => {
+        expect(projectorContainerModule).toBeTruthy();
+    });
+});

client/src/app/projector-container/projector-container.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ProjectorContainerComponent } from './projector-container.component';
+import { SharedModule } from 'app/shared/shared.module';
+import { ProjectorComponent } from './projector/projector.component';
+import { ProjectorContainerRoutingModule } from './projector/projector-container.routing.module';
+
+@NgModule({
+    imports: [CommonModule, ProjectorContainerRoutingModule, SharedModule],
+    declarations: [ProjectorContainerComponent, ProjectorComponent]
+})
+export class ProjectorContainerModule {}

client/src/app/projector-container/projector/projector-container.routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule, Component } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ProjectorContainerComponent } from '../projector-container.component';
+import { ProjectorComponent } from './projector.component';
+
+const routes: Routes = [
+    { path: '', component: ProjectorContainerComponent },
+    { path: 'real', component: ProjectorComponent }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class ProjectorContainerRoutingModule {}

client/src/app/shared/directives/os-perms.directive.ts

@@ -1,8 +1,8 @@
 import { Directive, Input, ElementRef, TemplateRef, ViewContainerRef, OnInit } from '@angular/core';
 
 import { OperatorService } from 'app/core/services/operator.service';
-import { OpenSlidesComponent } from '../../openslides.component';
-import { Group } from 'app/core/models/users/group';
+import { OpenSlidesComponent } from 'app/openslides.component';
+import { Group } from 'app/shared/models/users/group';
 
 /**
  * Directive to check if the {@link OperatorService} has the correct permissions to access certain functions

client/src/app/shared/models/agenda/content-object.ts

@@ -1,5 +1,4 @@
-// import { Serializable } from 'app/core/models/serializable';
-import { Deserializable } from 'app/core/models/deserializable.model';
+import { Deserializable } from '../deserializable.model';
 
 /**
  * Representation of the content object in agenda item

client/src/app/shared/models/agenda/item.ts

@@ -1,4 +1,4 @@
-import { BaseModel } from 'app/core/models/base-model';
+import { BaseModel } from '../base.model';
 import { Speaker } from './speaker';
 import { ContentObject } from './content-object';
 

client/src/app/shared/models/agenda/speaker.ts

@@ -1,4 +1,4 @@
-import { Deserializable } from 'app/core/models/deserializable.model';
+import { Deserializable } from '../deserializable.model';
 
 /**
  * Representation of a speaker in an agenda item

client/src/app/shared/models/assignments/assignment.ts

@@ -1,4 +1,4 @@
-import { BaseModel } from '../base-model';
+import { BaseModel } from '../base.model';
 import { AssignmentUser } from './assignment-user';
 import { Poll } from './poll';
 

client/src/app/shared/models/core/chat-message.ts

@@ -1,4 +1,4 @@
-import { BaseModel } from '../base-model';
+import { BaseModel } from '../base.model';
 
 /**
  * Representation of chat messages.

client/src/app/shared/models/core/config.ts

@@ -1,4 +1,4 @@
-import { BaseModel } from '../base-model';
+import { BaseModel } from '../base.model';
 
 /**
  * Representation of a config variable

client/src/app/shared/models/core/countdown.ts

@@ -1,4 +1,4 @@
-import { BaseModel } from 'app/core/models/base-model';
+import { BaseModel } from '../base.model';
 
 /**
  * Representation of a countdown

client/src/app/shared/models/core/projector-message.ts

@@ -1,4 +1,4 @@
-import { BaseModel } from 'app/core/models/base-model';
+import { BaseModel } from '../base.model';
 
 /**
  * Representation of a projector message.

client/src/app/shared/models/core/projector.ts

@@ -1,4 +1,4 @@
-import { BaseModel } from 'app/core/models/base-model';
+import { BaseModel } from '../base.model';
 
 /**
  * Representation of a projector. Has the nested property "projectiondefaults"

client/src/app/shared/models/core/tag.ts

@@ -1,4 +1,4 @@
-import { BaseModel } from 'app/core/models/base-model';
+import { BaseModel } from '../base.model';
 
 /**
  * Representation of a tag.

client/src/app/shared/models/mediafiles/mediafile.ts

@@ -1,4 +1,4 @@
-import { BaseModel } from 'app/core/models/base-model';
+import { BaseModel } from '../base.model';
 import { File } from './file';
 
 /**

client/src/app/shared/models/motions/category.ts

@@ -1,4 +1,4 @@
-import { BaseModel } from 'app/core/models/base-model';
+import { BaseModel } from '../base.model';
 
 /**
  * Representation of a motion category. Has the nested property "File"

client/src/app/shared/models/motions/motion-block.ts

@@ -1,4 +1,4 @@
-import { BaseModel } from 'app/core/models/base-model';
+import { BaseModel } from '../base.model';
 
 /**
  * Representation of a motion block.

client/src/app/shared/models/motions/motion-change-reco.ts

@@ -1,4 +1,4 @@
-import { BaseModel } from 'app/core/models/base-model';
+import { BaseModel } from '../base.model';
 
 /**
  * Representation of a motion change recommendation.

client/src/app/shared/models/motions/motion.ts

@@ -1,4 +1,4 @@
-import { BaseModel } from 'app/core/models/base-model';
+import { BaseModel } from '../base.model';
 
 /**
  * Representation of Motion.

client/src/app/shared/models/motions/workflow.ts

@@ -1,4 +1,4 @@
-import { BaseModel } from 'app/core/models/base-model';
+import { BaseModel } from '../base.model';
 import { WorkflowState } from './workflow-state';
 
 /**

client/src/app/shared/models/topics/topic.ts

@@ -1,4 +1,4 @@
-import { BaseModel } from 'app/core/models/base-model';
+import { BaseModel } from '../base.model';
 
 /**
  * Representation of a topic.

client/src/app/shared/models/users/group.ts

@@ -1,4 +1,4 @@
-import { BaseModel } from 'app/core/models/base-model';
+import { BaseModel } from '../base.model';
 
 /**
  * Representation of user group.

client/src/app/shared/models/users/personal-note.ts

@@ -1,4 +1,4 @@
-import { BaseModel } from 'app/core/models/base-model';
+import { BaseModel } from '../base.model';
 
 /**
  * Representation of users personal note.

client/src/app/shared/models/users/user.ts

@@ -1,4 +1,4 @@
-import { BaseModel } from 'app/core/models/base-model';
+import { BaseModel } from '../base.model';
 
 /**
  * Representation of a user in contrast to the operator.

client/src/app/shared/shared.module.spec.ts

@@ -0,0 +1,13 @@
+import { SharedModule } from './shared.module';
+
+describe('SharedModule', () => {
+    let sharedModule: SharedModule;
+
+    beforeEach(() => {
+        sharedModule = new SharedModule();
+    });
+
+    it('should create an instance', () => {
+        expect(sharedModule).toBeTruthy();
+    });
+});

client/src/app/shared/shared.module.ts

@@ -0,0 +1,78 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+// MaterialUI modules
+import {
+    MatButtonModule,
+    MatCheckboxModule,
+    MatToolbarModule,
+    MatCardModule,
+    MatInputModule,
+    MatProgressSpinnerModule,
+    MatSidenavModule,
+    MatSnackBarModule
+} from '@angular/material';
+import { MatListModule } from '@angular/material/list';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatMenuModule } from '@angular/material/menu';
+
+// FontAwesome modules
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+
+// ngx-translate
+import { TranslateModule } from '@ngx-translate/core';
+
+// directives
+import { OsPermsDirective } from './directives/os-perms.directive';
+
+library.add(fas);
+
+/**
+ * Share Module for all "dumb" components and pipes.
+ *
+ * These components don not import and inject services from core or other features
+ * in their constructors.
+ *
+ * Should receive all data though attributes in the template of the component using them.
+ * No dependency to the rest of our application.
+ */
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        MatButtonModule,
+        MatCheckboxModule,
+        MatToolbarModule,
+        MatCardModule,
+        MatInputModule,
+        MatProgressSpinnerModule,
+        MatSidenavModule,
+        MatListModule,
+        MatExpansionModule,
+        MatMenuModule,
+        MatSnackBarModule,
+        FontAwesomeModule
+    ],
+    exports: [
+        FormsModule,
+        MatButtonModule,
+        MatCheckboxModule,
+        MatToolbarModule,
+        MatCardModule,
+        MatInputModule,
+        MatProgressSpinnerModule,
+        MatSidenavModule,
+        MatListModule,
+        MatExpansionModule,
+        MatMenuModule,
+        MatSnackBarModule,
+        FontAwesomeModule,
+        TranslateModule,
+        OsPermsDirective
+    ],
+    declarations: [OsPermsDirective]
+})
+export class SharedModule {}

client/src/app/site/agenda/agenda-list/agenda-list.component.html

@@ -8,7 +8,7 @@
 
     <!-- download button on the right -->
     <span class='spacer'></span>
-    <button mat-icon-button (click)='drawer.toggle()'>
+    <button mat-icon-button (click)='downloadAgendaButton()'>
         <fa-icon icon='download'></fa-icon>
     </button>
 

client/src/app/site/agenda/agenda-list/agenda-list.component.spec.ts

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MotionsComponent } from './motions.component';
+import { AgendaListComponent } from './agenda-list.component';
 
-describe('MotionsComponent', () => {
-    let component: MotionsComponent;
-    let fixture: ComponentFixture<MotionsComponent>;
+describe('AgendaListComponent', () => {
+    let component: AgendaListComponent;
+    let fixture: ComponentFixture<AgendaListComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [MotionsComponent]
+            declarations: [AgendaListComponent]
         }).compileComponents();
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(MotionsComponent);
+        fixture = TestBed.createComponent(AgendaListComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });

client/src/app/site/agenda/agenda-list/agenda-list.component.ts

@@ -3,11 +3,11 @@ import { Title } from '@angular/platform-browser';
 import { BaseComponent } from 'app/base.component';
 
 @Component({
-    selector: 'app-agenda',
-    templateUrl: './agenda.component.html',
-    styleUrls: ['./agenda.component.css']
+    selector: 'app-agenda-list',
+    templateUrl: './agenda-list.component.html',
+    styleUrls: ['./agenda-list.component.css']
 })
-export class AgendaComponent extends BaseComponent implements OnInit {
+export class AgendaListComponent extends BaseComponent implements OnInit {
     constructor(titleService: Title) {
         super(titleService);
     }
@@ -16,4 +16,8 @@ export class AgendaComponent extends BaseComponent implements OnInit {
         //TODO translate
         super.setTitle('Agenda');
     }
+
+    downloadAgendaButton() {
+        console.log('Clock Download Button');
+    }
 }

client/src/app/site/agenda/agenda-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AgendaListComponent } from './agenda-list/agenda-list.component';
+
+const routes: Routes = [{ path: '', component: AgendaListComponent }];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class AgendaRoutingModule {}

client/src/app/site/agenda/agenda.module.spec.ts

@@ -0,0 +1,13 @@
+import { AgendaModule } from './agenda.module';
+
+describe('AgendaModule', () => {
+    let agendaModule: AgendaModule;
+
+    beforeEach(() => {
+        agendaModule = new AgendaModule();
+    });
+
+    it('should create an instance', () => {
+        expect(agendaModule).toBeTruthy();
+    });
+});

client/src/app/site/agenda/agenda.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AgendaRoutingModule } from './agenda-routing.module';
+import { SharedModule } from '../../shared/shared.module';
+import { AgendaListComponent } from './agenda-list/agenda-list.component';
+
+@NgModule({
+    imports: [CommonModule, AgendaRoutingModule, SharedModule],
+    declarations: [AgendaListComponent]
+})
+export class AgendaModule {}

client/src/app/site/assignments/assignment-list/assignment-list.component.html

@@ -0,0 +1,3 @@
+<p>
+  assignment-list works!
+</p>

client/src/app/site/assignments/assignment-list/assignment-list.component.spec.ts

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

client/src/app/site/assignments/assignment-list/assignment-list.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-assignment-list',
+    templateUrl: './assignment-list.component.html',
+    styleUrls: ['./assignment-list.component.css']
+})
+export class AssignmentListComponent implements OnInit {
+    constructor() {}
+
+    ngOnInit() {}
+}

client/src/app/site/assignments/assignments-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AssignmentListComponent } from './assignment-list/assignment-list.component';
+
+const routes: Routes = [{ path: '', component: AssignmentListComponent }];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class AssignmentsRoutingModule {}

client/src/app/site/assignments/assignments.module.spec.ts

@@ -0,0 +1,13 @@
+import { AssignmentsModule } from './assignments.module';
+
+describe('AssignmentsModule', () => {
+    let assignmentsModule: AssignmentsModule;
+
+    beforeEach(() => {
+        assignmentsModule = new AssignmentsModule();
+    });
+
+    it('should create an instance', () => {
+        expect(assignmentsModule).toBeTruthy();
+    });
+});

client/src/app/site/assignments/assignments.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AssignmentsRoutingModule } from './assignments-routing.module';
+import { SharedModule } from '../../shared/shared.module';
+import { AssignmentListComponent } from './assignment-list/assignment-list.component';
+
+@NgModule({
+    imports: [CommonModule, AssignmentsRoutingModule, SharedModule],
+    declarations: [AssignmentListComponent]
+})
+export class AssignmentsModule {}

client/src/app/site/login/login.component.html

@@ -21,7 +21,7 @@
                 </tr>
             </table>
         </form>
-    <mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner>
+        <!-- <mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner> -->
     </mat-card-content>
     <mat-card-actions>
         <button mat-raised-button (click)="formLogin()" color="primary">Login</button>

client/src/app/site/login/login.module.spec.ts

@@ -0,0 +1,13 @@
+import { LoginModule } from './login.module';
+
+describe('LoginModule', () => {
+    let loginModule: LoginModule;
+
+    beforeEach(() => {
+        loginModule = new LoginModule();
+    });
+
+    it('should create an instance', () => {
+        expect(loginModule).toBeTruthy();
+    });
+});

client/src/app/site/login/login.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LoginComponent } from './login.component';
+import { SharedModule } from '../../shared/shared.module';
+
+@NgModule({
+    imports: [CommonModule, SharedModule],
+    declarations: [LoginComponent]
+})
+export class LoginModule {}

client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.html

@@ -0,0 +1,3 @@
+<p>
+  mediafile-list works!
+</p>

client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.spec.ts

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

client/src/app/site/mediafiles/mediafile-list/mediafile-list.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-mediafile-list',
+    templateUrl: './mediafile-list.component.html',
+    styleUrls: ['./mediafile-list.component.css']
+})
+export class MediafileListComponent implements OnInit {
+    constructor() {}
+
+    ngOnInit() {}
+}

client/src/app/site/mediafiles/mediafiles-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule, Component } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { MediafileListComponent } from './mediafile-list/mediafile-list.component';
+
+const routes: Routes = [{ path: '', component: MediafileListComponent }];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class MediafilesRoutingModule {}

client/src/app/site/mediafiles/mediafiles.module.spec.ts

@@ -0,0 +1,13 @@
+import { MediafilesModule } from './mediafiles.module';
+
+describe('MediafilesModule', () => {
+    let mediafilesModule: MediafilesModule;
+
+    beforeEach(() => {
+        mediafilesModule = new MediafilesModule();
+    });
+
+    it('should create an instance', () => {
+        expect(mediafilesModule).toBeTruthy();
+    });
+});

client/src/app/site/mediafiles/mediafiles.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MediafilesRoutingModule } from './mediafiles-routing.module';
+import { SharedModule } from '../../shared/shared.module';
+import { MediafileListComponent } from './mediafile-list/mediafile-list.component';
+
+@NgModule({
+    imports: [CommonModule, MediafilesRoutingModule, SharedModule],
+    declarations: [MediafileListComponent]
+})
+export class MediafilesModule {}

client/src/app/site/motions/motion-list/motion-list.component.html

@@ -9,7 +9,7 @@
 
     <!-- download button on the right -->
     <span class='spacer'></span>
-    <button mat-icon-button (click)='drawer.toggle()'>
+    <button mat-icon-button (click)='downloadMotionsButton()'>
         <fa-icon icon='download'></fa-icon>
     </button>
 

client/src/app/site/motions/motion-list/motion-list.component.spec.ts

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

client/src/app/site/motions/motion-list/motion-list.component.ts

@@ -3,11 +3,11 @@ import { Title } from '@angular/platform-browser';
 import { BaseComponent } from 'app/base.component';
 
 @Component({
-    selector: 'app-motions',
-    templateUrl: './motions.component.html',
-    styleUrls: ['./motions.component.css']
+    selector: 'app-motion-list',
+    templateUrl: './motion-list.component.html',
+    styleUrls: ['./motion-list.component.css']
 })
-export class MotionsComponent extends BaseComponent implements OnInit {
+export class MotionListComponent extends BaseComponent implements OnInit {
     constructor(titleService: Title) {
         super(titleService);
     }
@@ -15,4 +15,8 @@ export class MotionsComponent extends BaseComponent implements OnInit {
     ngOnInit() {
         super.setTitle('Motions');
     }
+
+    downloadMotionsButton() {
+        console.log('Download Motions Button');
+    }
 }

client/src/app/site/motions/motions-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { MotionListComponent } from './motion-list/motion-list.component';
+
+const routes: Routes = [{ path: '', component: MotionListComponent }];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class MotionsRoutingModule {}

client/src/app/site/motions/motions.module.spec.ts

@@ -0,0 +1,13 @@
+import { MotionsModule } from './motions.module';
+
+describe('MotionsModule', () => {
+    let motionsModule: MotionsModule;
+
+    beforeEach(() => {
+        motionsModule = new MotionsModule();
+    });
+
+    it('should create an instance', () => {
+        expect(motionsModule).toBeTruthy();
+    });
+});

client/src/app/site/motions/motions.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MotionsRoutingModule } from './motions-routing.module';
+import { SharedModule } from '../../shared/shared.module';
+import { MotionListComponent } from './motion-list/motion-list.component';
+
+@NgModule({
+    imports: [CommonModule, MotionsRoutingModule, SharedModule],
+    declarations: [MotionListComponent]
+})
+export class MotionsModule {}

client/src/app/site/settings/settings-list/settings-list.component.html

@@ -0,0 +1,3 @@
+<p>
+  settings-list works!
+</p>

client/src/app/site/settings/settings-list/settings-list.component.spec.ts

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

client/src/app/site/settings/settings-list/settings-list.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-settings-list',
+    templateUrl: './settings-list.component.html',
+    styleUrls: ['./settings-list.component.css']
+})
+export class SettingsListComponent implements OnInit {
+    constructor() {}
+
+    ngOnInit() {}
+}

client/src/app/site/settings/settings-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { SettingsListComponent } from './settings-list/settings-list.component';
+
+const routes: Routes = [{ path: '', component: SettingsListComponent }];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class SettingsRoutingModule {}

client/src/app/site/settings/settings.module.spec.ts

@@ -0,0 +1,13 @@
+import { SettingsModule } from './settings.module';
+
+describe('SettingsModule', () => {
+    let settingsModule: SettingsModule;
+
+    beforeEach(() => {
+        settingsModule = new SettingsModule();
+    });
+
+    it('should create an instance', () => {
+        expect(settingsModule).toBeTruthy();
+    });
+});

client/src/app/site/settings/settings.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../../shared/shared.module';
+import { SettingsRoutingModule } from './settings-routing.module';
+import { SettingsListComponent } from './settings-list/settings-list.component';
+
+@NgModule({
+    imports: [CommonModule, SettingsRoutingModule, SharedModule],
+    declarations: [SettingsListComponent]
+})
+export class SettingsModule {}

client/src/app/site/site-routing.module.ts

@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SiteComponent } from './site.component';
+
+import { StartComponent } from './start/start.component';
+// import { LoginComponent } from './login/login.component';
+
+/**
+ * Routung to all OpenSlides apps
+ *
+ * TODO: Plugins will have to append to the Routes-Array
+ */
+const routes: Routes = [
+    // { path: 'login', component: LoginComponent },
+    {
+        path: '',
+        component: SiteComponent,
+        children: [
+            { path: '', component: StartComponent },
+            { path: 'agenda', loadChildren: './agenda/agenda.module#AgendaModule' },
+            { path: 'assignments', loadChildren: './assignments/assignments.module#AssignmentsModule' },
+            { path: 'mediafiles', loadChildren: './mediafiles/mediafiles.module#MediafilesModule' },
+            { path: 'motions', loadChildren: './motions/motions.module#MotionsModule' },
+            { path: 'settings', loadChildren: './settings/settings.module#SettingsModule' },
+            { path: 'users', loadChildren: './users/users.module#UsersModule' }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class SiteRoutingModule {}

client/src/app/site/site.component.html

@@ -21,18 +21,34 @@
 
         <!-- navigation -->
         <mat-nav-list>
-            <a mat-list-item routerLink='/' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
+            <a *appOsPerms="['core.can_see_frontpage']" mat-list-item routerLink='/' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
                 <fa-icon icon='home'></fa-icon>
                 <span translate>Home</span>
             </a>
-            <a mat-list-item routerLink='/agenda' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
+            <a *appOsPerms="['agenda.can_see']" mat-list-item routerLink='/agenda' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
                 <fa-icon icon='calendar'></fa-icon>
                 <span translate>Agenda</span>
             </a>
-            <a mat-list-item routerLink='/motions' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
+            <a *appOsPerms="['motions.can_see']" mat-list-item routerLink='/motions' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
                 <fa-icon icon='file-alt'></fa-icon>
                 <span translate>Motions</span>
             </a>
+            <a *appOsPerms="['assignments.can_see']" mat-list-item routerLink='/assignments' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
+                <fa-icon icon='chart-pie'></fa-icon>
+                <span translate>Assignments</span>
+            </a>
+            <a *appOsPerms="['users.can_see_name']" mat-list-item routerLink='/users' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
+                <fa-icon icon='user'></fa-icon>
+                <span translate>Participants</span>
+            </a>
+            <a *appOsPerms="['mediafiles.can_see']" mat-list-item routerLink='/mediafiles' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
+                <fa-icon icon='paperclip'></fa-icon>
+                <span translate>Files</span>
+            </a>
+            <a *appOsPerms="['core.can_manage_config']" mat-list-item routerLink='/settings' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
+                <fa-icon icon='cog'></fa-icon>
+                <span translate>Settings</span>
+            </a>
         </mat-nav-list>
 
     </mat-sidenav>

client/src/app/site/site.component.ts

@@ -5,8 +5,6 @@ import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/l
 import { AuthService } from 'app/core/services/auth.service';
 import { AutoupdateService } from 'app/core/services/autoupdate.service';
 import { OperatorService } from 'app/core/services/operator.service';
-import { Subject } from 'rxjs';
-import { tap } from 'rxjs/operators';
 
 import { TranslateService } from '@ngx-translate/core'; //showcase
 import { BaseComponent } from 'app/base.component';

client/src/app/site/site.module.spec.ts

@@ -0,0 +1,13 @@
+import { SiteModule } from './site.module';
+
+describe('SiteModule', () => {
+    let siteModule: SiteModule;
+
+    beforeEach(() => {
+        siteModule = new SiteModule();
+    });
+
+    it('should create an instance', () => {
+        expect(siteModule).toBeTruthy();
+    });
+});

client/src/app/site/site.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SiteRoutingModule } from './site-routing.module';
+import { SharedModule } from 'app/shared/shared.module';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { SiteComponent } from './site.component';
+import { StartComponent } from './start/start.component';
+
+@NgModule({
+    imports: [CommonModule, SharedModule, SiteRoutingModule, TranslateModule.forChild()],
+    declarations: [SiteComponent, StartComponent]
+})
+export class SiteModule {}

client/src/app/site/start/start.component.ts

@@ -6,8 +6,7 @@ import { TranslateService } from '@ngx-translate/core'; //showcase
 
 // for testing the DS and BaseModel
 import { OperatorService } from 'app/core/services/operator.service';
-import { User } from 'app/core/models/users/user';
-import { Group } from 'app/core/models/users/group';
+import { User } from 'app/shared/models/users/user';
 
 @Component({
     selector: 'app-start',

client/src/app/site/users/user-list/user-list.component.html

@@ -0,0 +1,3 @@
+<p>
+  user-list works!
+</p>

client/src/app/site/users/user-list/user-list.component.spec.ts

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AgendaComponent } from './agenda.component';
+import { UserListComponent } from './user-list.component';
 
-describe('AgendaComponent', () => {
-    let component: AgendaComponent;
-    let fixture: ComponentFixture<AgendaComponent>;
+describe('UserListComponent', () => {
+    let component: UserListComponent;
+    let fixture: ComponentFixture<UserListComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [AgendaComponent]
+            declarations: [UserListComponent]
         }).compileComponents();
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(AgendaComponent);
+        fixture = TestBed.createComponent(UserListComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });

client/src/app/site/users/user-list/user-list.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-user-list',
+    templateUrl: './user-list.component.html',
+    styleUrls: ['./user-list.component.css']
+})
+export class UserListComponent implements OnInit {
+    constructor() {}
+
+    ngOnInit() {}
+}

client/src/app/site/users/users-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { UserListComponent } from './user-list/user-list.component';
+
+const routes: Routes = [{ path: '', component: UserListComponent }];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class UsersRoutingModule {}

client/src/app/site/users/users.module.spec.ts

@@ -0,0 +1,13 @@
+import { UsersModule } from './users.module';
+
+describe('UsersModule', () => {
+    let usersModule: UsersModule;
+
+    beforeEach(() => {
+        usersModule = new UsersModule();
+    });
+
+    it('should create an instance', () => {
+        expect(usersModule).toBeTruthy();
+    });
+});

client/src/app/site/users/users.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { UsersRoutingModule } from './users-routing.module';
+import { SharedModule } from '../../shared/shared.module';
+import { UserListComponent } from './user-list/user-list.component';
+
+@NgModule({
+    imports: [CommonModule, UsersRoutingModule, SharedModule],
+    declarations: [UserListComponent]
+})
+export class UsersModule {}