Fix public folder api path; Add Army Overview

README.md

@@ -0,0 +1,11 @@
+
+#Operation Pandora Trigger Commandcenter
+
+_RESTful API using express.js and mongoose with mongodb + Angular4 Frontend_
+
+
+##Installation
+
+##Development
+
+##License Information

api/README.md

@@ -1,8 +0,0 @@
-
-#Operation Pandora Trigger Commandcenter RESTful API
-
-_node.js project using express.js and mongoose with mongodb_
-
-
-##Installation
-

api/server.js

@@ -35,8 +35,8 @@ mongoose.Promise = global.Promise;
 const app = express();
 
 // Middlewares *************************************************
-app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
+app.use(favicon(path.join(__dirname + '/..', 'public', 'favicon.ico')));
-app.use(express.static(path.join(__dirname, 'public')));
+app.use(express.static(path.join(__dirname + '/..', 'public')));
 app.use(bodyParser.json());
 
 // logging
@@ -63,7 +63,7 @@ app.use(urls.command, apiAuthenticationMiddleware, commandRouter);
 
 // send index.html on all different paths
 app.use(function (req, res) {
-  res.sendFile("public/index.html", {root: __dirname});
+  res.sendFile("public/index.html", {root: __dirname + '/..'});
 });
 
 

static/src/app/app.component.html

@@ -15,6 +15,9 @@
       <div class="collapse navbar-collapse" id="mynavbar">
 
         <ul class="nav navbar-nav">
+          <li *ngIf="loginService.isLoggedIn()" routerLinkActive="active">
+            <a routerLink='/cc-overview' class="link">Armeeübersicht</a>
+          </li>
           <li *ngIf="loginService.isLoggedIn()" routerLinkActive="active">
             <a routerLink='/cc-users' class="link">Teilnehmer</a>
           </li>
@@ -27,9 +30,6 @@
           <li *ngIf="loginService.isLoggedIn()" routerLinkActive="active">
             <a routerLink='/cc-ranks' class="link">Ränge</a>
           </li>
-          <!--<li routerLinkActive="active">-->
-          <!--<a routerLink='/settings' class="link">Einstellungen</a>-->
-          <!--</li>-->
         </ul>
 
         <ul class="nav navbar-nav" style="float: right">

static/src/app/app.config.ts

@@ -10,6 +10,7 @@ export class AppConfig {
   public readonly apiRankPath           = '/ranks/';
   public readonly apiSquadPath          = '/squads/';
   public readonly apiUserPath           = '/users/';
+  public readonly apiOverviewPath       = '/overview';
 
   public getAuthenticationHeader() :Headers {
     let currentUser = JSON.parse(localStorage.getItem('currentUser'));

static/src/app/app.module.ts

@@ -25,6 +25,7 @@ import {AppConfig} from "./app.config";
 import {LoginGuard} from "./login/login.guard";
 import {AwardingService} from "./services/awarding-service/awarding.service";
 import {HttpClient} from "./services/http-client";
+import {ArmyService} from "./services/army-service/army.service";
 
 @NgModule({
   imports: [BrowserModule, FormsModule, ReactiveFormsModule, appRouting, HttpModule],
@@ -32,6 +33,7 @@ import {HttpClient} from "./services/http-client";
     HttpClient,
     LoginService,
     LoginGuard,
+    ArmyService,
     UserService,
     UserStore,
     SquadService,

static/src/app/app.routing.ts

@@ -6,10 +6,13 @@ import {usersRoutes, usersRoutingComponents} from "./users/users.routing";
 import {squadsRoutes, squadsRoutingComponents} from "./squads/squads.routing";
 import {decorationsRoutes, decorationsRoutingComponents} from "./decorations/decoration.routing";
 import {ranksRoutes, ranksRoutingComponents} from "./ranks/ranks.routing";
+import {ArmyComponent} from "./army/army.component";
 
 
 export const appRoutes: Routes = [
 
+  {path: 'cc-overview', component: ArmyComponent},
+
   {path: 'login', component: LoginComponent},
   {path: 'cc-users', children: usersRoutes, canActivate: [LoginGuard]},
   {path: '', redirectTo: '/cc-users', pathMatch: 'full'},
@@ -18,18 +21,14 @@ export const appRoutes: Routes = [
   {path: 'cc-decorations', children: decorationsRoutes, canActivate: [LoginGuard]},
   {path: 'cc-ranks', children: ranksRoutes, canActivate: [LoginGuard]},
 
-
   /** Redirect Konfigurationen **/
-
-
   {path: '404', component: NotFoundComponent},
-
   {path: '**', redirectTo: '/404'}, // immer als letztes konfigurieren - erste Route die matched wird angesteuert
 ];
 
 export const appRouting = RouterModule.forRoot(appRoutes);
 
-export const routingComponents = [LoginComponent, NotFoundComponent, ...usersRoutingComponents,
+export const routingComponents = [LoginComponent, ArmyComponent, NotFoundComponent, ...usersRoutingComponents,
   ...squadsRoutingComponents, ...decorationsRoutingComponents, ...ranksRoutingComponents];
 
 export const routingProviders = [LoginGuard];

static/src/app/army/army.component.css

@@ -0,0 +1,32 @@
+h1 {
+  width: 920px;
+  float: left;
+  margin-bottom: 50px;
+}
+
+img{
+  margin-top: 10px;
+  padding-right: 30px;
+}
+
+
+.div-table {
+  display: table;
+  border-radius: 10px;
+  margin-left: 1%;
+  width: auto;
+  background-color: rgba(240, 248, 255, 0.29);
+  border-spacing: 5px; /* cellspacing:poor IE support for  this */
+}
+
+.div-table-row {
+  display: table-row;
+  width: auto;
+  clear: both;
+}
+
+.div-table-col {
+  float: left; /* fix for  buggy browsers */
+  display: table-column;
+  padding: 5px 15px 5px 15px;
+}

static/src/app/army/army.component.html

@@ -0,0 +1,61 @@
+<h1>Übersicht über alle Spieler, Squads und Armeen</h1>
+
+<div style="width: 1000px;">
+
+  <div class="div-table" style="width: 490px; float:left">
+    <h3 style="color: darkslateblue; font-weight: bolder; text-align: center;">NATO</h3>
+    <div *ngFor="let squad of army.NATO.squads">
+      <div class="div-table-row">
+
+        <div class="div-table-col">
+          <img src="resource/squad/{{squad._id}}.png">
+        </div>
+        <div class="div-table-col">
+          <div class=" div-table-row">
+            <h4>{{squad.name}}</h4>
+          </div>
+          <div class=" div-table-row">
+            <div *ngFor="let member of squad.members">
+              <div>{{member.rank}} {{member.username}}</div>
+            </div>
+            <br>
+            <br>
+            Mitglieder: {{squad.memberCount}}
+          </div>
+        </div>
+      </div>
+    </div>
+    <br>
+    <br>
+    <div style="padding-left: 80px">Armeemitglieder: {{army.NATO.memberCount}}</div>
+  </div>
+
+  <div class="div-table" style="width: 490px; float:right">
+    <h3 style="color: firebrick; font-weight: bolder; text-align: center">CSAT</h3>
+    <div *ngFor="let squad of army.CSAT.squads">
+      <div class="div-table-row">
+
+        <div class="div-table-col">
+          <img src="resource/squad/{{squad._id}}.png">
+        </div>
+        <div class="div-table-col">
+          <div class=" div-table-row">
+            <h4>{{squad.name}}</h4>
+          </div>
+          <div class=" div-table-row">
+            <div *ngFor="let member of squad.members">
+              <div>{{member.rank}} {{member.username}}</div>
+            </div>
+            <br>
+            <br>
+            Mitglieder: {{squad.memberCount}}
+          </div>
+        </div>
+      </div>
+    </div>
+    <br>
+    <br>
+    <div style="padding-left: 80px">Armeemitglieder: {{army.CSAT.memberCount}}</div>
+  </div>
+
+</div>

static/src/app/army/army.component.ts

@@ -0,0 +1,26 @@
+import {Component} from "@angular/core";
+import {Army} from "../models/model-interfaces";
+import {ArmyService} from "../services/army-service/army.service";
+
+
+@Component({
+  selector: 'army',
+  templateUrl: './army.component.html',
+  styleUrls: ['./army.component.css']
+})
+export class ArmyComponent {
+
+  army: Army = {NATO: {squads: [], memberCount: 0}, CSAT: {squads: [], memberCount:0}};
+
+  constructor(private armyService: ArmyService) {
+  }
+
+
+  ngOnInit() {
+    this.armyService.getArmy()
+      .subscribe(army => {
+        this.army = army;
+        console.log(army)
+      });
+  };
+}

static/src/app/models/model-interfaces.ts

@@ -39,6 +39,35 @@ export interface Decoration {
   isMedal?: boolean;
 }
 
+export interface Army {
+  NATO: {
+    squads: {
+      _id,
+      name,
+      memberCount,
+      members: {
+        _id,
+        username,
+        rank
+      }[],
+    }[],
+    memberCount
+  },
+  CSAT: {
+    squads: {
+      _id,
+      name,
+      memberCount,
+      members: {
+        _id,
+        username,
+        rank
+      }[],
+    }[],
+    memberCount
+  },
+}
+
 export interface Tag {
   label: string;
 }

static/src/app/services/army-service/army.service.ts

@@ -0,0 +1,19 @@
+import {Injectable} from "@angular/core";
+import {AppConfig} from "../../app.config";
+import {Http} from "@angular/http";
+
+
+@Injectable()
+export class ArmyService {
+
+  constructor(private http: Http,
+              private config: AppConfig) {
+  }
+
+  getArmy() {
+    return this.http.get(this.config.apiUrl + this.config.apiOverviewPath)
+      .map(res => res.json());
+  }
+
+}
+