Merge branch 'release/v1.8.0' of hardi/opt-cc into master

api/apib/army-management/awardings.apib

@@ -1,4 +1,4 @@
-### Get Awardings [GET /awardings{?userId,inProgress,fractFilter}]
+### Get Awardings [GET /awardings{?userId,inProgress,fractFilter,squadId}]
 
 List all awardings
 
@@ -19,6 +19,9 @@ List all awardings
             + `OPFOR`
             + `GLOBAL`
 
+    + squadId: `5aba54eaeadcce6332c6a774` (string, optional)
+        unique id of the squad
+
 
 + Response 200 (application/json; charset=utf-8)
 
@@ -58,16 +61,3 @@ Create a new awarding proposal, that needs to be approved by higher permission l
 + Response 201 (application/json; charset=utf-8)
 
     + Attributes (Awarding, fixed-type)
-
-### Get Unprocessed Squad Awardings [GET /awardings/unprocessed/{squadId}]
-
-List all awardings that are requested and in pending decision status
-
-**Permission: 1**
-
-+ Parameters
-    + squadId: `5aba54eaeadcce6332c6a774` (string, required) - unique id of the squad in which awardings are requested
-
-+ Response 200 (application/json; charset=utf-8)
-
-    + Attributes (array[AwardingPopulated], fixed-type)

api/apib/army-management/users.apib

@@ -5,14 +5,17 @@ Get single army member information
 + Parameters
     + q: `hardi` (string, optional) - filter string which filters for partial username
 
-    + fractFilter: `BLUFOR` (enum[string], optional)
-        Field to filter by fraction
+    + fractFilter: `BLUFOR` (enum[string], optional) - Field to filter by fraction
 
         + Members
             + `BLUFOR`
             + `OPFOR`
             + `GLOBAL`
 
+    + squadId: `591470249e9fae286e008e31` (string, optional) - Field to filter by membership of certain squad
+
+    + decorationId: `5abd3dff6e6a0334d95b8ba0` (string, optional) - Field to filter by ownership of certain decoration
+
     + limit: 20 (number, optional)
         Maximum number of users to return
 

api/apib/statistics/campaigns.apib

@@ -1,3 +1,12 @@
+### Get Campaigns [GET /campaigns]
+
+Get all campaigns information
+
+
++ Response 200 (application/json; charset=utf-8)
+
+    + Attributes (array[Campaign], fixed-type)
+
 ### Get Campaign [GET /campaigns/{id}]
 
 Get single campaign information

api/routes/authenticate.js

@@ -78,10 +78,10 @@ authenticate.route('/signup')
             .post((req, res, next) => {
               create(req.body)
                 .then(() => {
-                  res.send(201, {message: 'User successfully created'});
+                  res.status(codes.created).send({message: 'User successfully created'});
                 })
                 .catch((err) => {
-                  res.status(400).send(err);
+                  res.status(codes.wrongrequest).send(err);
                 });
             })
 

api/routes/awardings.js

@@ -12,7 +12,6 @@ const routerHandling = require('../middleware/router-handling');
 
 const apiAuthenticationMiddleware = require('../middleware/auth-middleware');
 const checkHl = require('../middleware/permission-check').checkHl;
-const checkSql = require('../middleware/permission-check').checkSql;
 
 // Mongoose Model using mongoDB
 const AwardingModel = require('../models/awarding');
@@ -25,19 +24,14 @@ const resultSet = {
 
 const awarding = new express.Router();
 
-
 // routes **********************
 awarding.route('/')
         .get((req, res, next) => {
-          const filter = {};
-          if (req.query.userId) {
-            filter.userId = req.query.userId;
-          }
-          if (req.query.inProgress) {
-            filter.confirmed = 0;
-          }
+          const listAwardsCall = (filter) =>
             AwardingModel.find(filter, {}, {sort: {date: 'desc'}})
-                       .populate('decorationId').populate('proposer', resultSet).populate('userId')
+                         .populate('decorationId')
+                         .populate('proposer', resultSet)
+                         .populate('userId')
                          .exec((err, items) => {
                            if (err) {
                              err.status = codes.servererror;
@@ -56,10 +50,26 @@ awarding.route('/')
                            } else {
                              res.locals.items = items;
                            }
-
                            res.locals.processed = true;
-                         next();
+                           return next();
                          });
+
+          const filter = {};
+          if (req.query.userId) {
+            filter.userId = req.query.userId;
+          }
+          if (req.query.inProgress === 'true') {
+            filter.confirmed = 0;
+          }
+          if (req.query.squadId) {
+            UserModel.find({squadId: req.query.squadId}, (err, users) => {
+              const squadUserIds = users.map((user) => new mongoose.Types.ObjectId(user._id));
+              filter.userId = {$in: squadUserIds};
+              return listAwardsCall(filter);
+            });
+          } else {
+            return listAwardsCall(filter);
+          }
         })
 
         .post(apiAuthenticationMiddleware, checkHl, (req, res, next) => {
@@ -81,25 +91,6 @@ awarding.route('/')
 
         .all(routerHandling.httpMethodNotAllowed);
 
-awarding.route('/unprocessed/:squadId')
-        .get(apiAuthenticationMiddleware, checkSql, (req, res, next) => {
-          const filter = {squadId: req.params.squadId};
-          UserModel.find(filter, (err, users) => {
-            if (!users || users.length === 0) {
-              return next();
-            }
-            const squadUserIds = users.map((user) => new mongoose.Types.ObjectId(user._id));
-            AwardingModel.find({userId: {$in: squadUserIds}, confirmed: 0})
-                         .populate('decorationId')
-                         .populate('proposer', resultSet)
-                         .populate('userId')
-                         .exec((err, awards) => {
-                           res.locals.items = awards;
-                           next();
-                         });
-          });
-        });
-
 awarding.route('/:id')
         .patch(apiAuthenticationMiddleware, checkHl, (req, res, next) => {
           if (!req.body || (req.body._id && req.body._id !== req.params.id)) {

api/routes/campaigns.js

@@ -24,6 +24,26 @@ const campaigns = new express.Router();
 
 // routes **********************
 campaigns.route('/')
+         .get((req, res, next) => {
+           CampaignModel.find({}, {}, {
+             sort: {
+               timestamp: 'desc',
+             },
+           }, (err, items) => {
+             if (err) {
+               err.status = codes.servererror;
+               return next(err);
+             }
+             if (items && items.length > 0) {
+               res.locals.items = items;
+             } else {
+               res.locals.items = [];
+             }
+             res.locals.processed = true;
+             next();
+           });
+         })
+
          .post(apiAuthenticationMiddleware, checkMT, (req, res, next) => {
            const campaign = new CampaignModel(req.body);
            // timestamp and default are set automatically by Mongoose Schema Validation

api/routes/users.js

@@ -29,29 +29,7 @@ users.get('/', offsetlimitMiddleware);
 // routes **********************
 users.route('/')
      .get((req, res, next) => {
-       const userQuery = () => {
-         UserModel.find(dbFilter, res.locals.filter, res.locals.limitskip)
-                  .populate('squadId')
-                  .collation({locale: 'en', strength: 2}) // case insensitive order
-                  .sort('username').exec((err, users) => {
-           if (err) return next(err);
-           if (users.length === 0) {
-             res.locals.items = users;
-             res.locals.processed = true;
-             return next();
-           }
-           UserModel.count(dbFilter, (err, totalCount) => {
-             res.set('x-total-count', totalCount);
-             res.locals.items = users;
-             res.locals.processed = true;
-             return next();
-           });
-         });
-       };
-
-       if (!req.query.q) req.query.q = '';
-       const dbFilter = {username: {'$regex': req.query.q, '$options': 'i'}};
-       if (req.query.squadId) dbFilter['squadId'] = {'$eq': req.query.squadId};
+       const finishFiltersAndExecute = () => {
          // squad / fraction filter setup
          if (req.query.fractFilter && req.query.fractFilter !== 'UNASSIGNED' && !req.query.squadId) {
            SquadModel.find({'fraction': req.query.fractFilter}, {_id: 1}, (err, squads) => {
@@ -64,6 +42,47 @@ users.route('/')
            }
            userQuery();
          }
+       };
+
+       const userQuery = () => {
+         UserModel.find(dbFilter, res.locals.filter, res.locals.limitskip)
+                  .populate('squadId')
+                  .collation({locale: 'en', strength: 2}) // case insensitive order
+                  .sort('username')
+                  .exec((err, users) => {
+                    if (err) return next(err);
+                    if (users.length === 0) {
+                      res.locals.items = users;
+                      res.locals.processed = true;
+                      return next();
+                    }
+
+                    UserModel.count(dbFilter, (err, totalCount) => {
+                      res.set('x-total-count', totalCount);
+                      res.locals.items = users;
+                      res.locals.processed = true;
+                      return next();
+                    });
+                  });
+       };
+
+       const nameQuery = (!req.query.q) ? '' : req.query.q;
+
+       const dbFilter = {username: {'$regex': nameQuery, '$options': 'i'}};
+
+       if (req.query.squadId) dbFilter['squadId'] = {'$eq': req.query.squadId};
+
+       // decoration filter
+       const queryDecoId = req.query.decorationId;
+       if (queryDecoId) {
+         AwardingModel.find({decorationId: queryDecoId}, (err, awards) => {
+           const userIds = [...new Set(awards.map((award) => award.userId))];
+           dbFilter._id = {'$in': userIds};
+           finishFiltersAndExecute();
+         });
+       } else {
+         finishFiltersAndExecute();
+       }
      })
 
      .post(apiAuthenticationMiddleware, checkHl, (req, res, next) => {
@@ -148,6 +167,7 @@ users.route('/:id')
              res.locals.items = item;
            } else {
              err.status = codes.wrongrequest;
+             console.log(err);
              err.message += ' in fields: ' + Object.getOwnPropertyNames(err.errors);
            }
 
@@ -195,7 +215,6 @@ users.route('/:id')
        routerHandling.httpMethodNotAllowed
      );
 
-
 // this middleware function can be used, if you like or remove it
 // it looks for object(s) in res.locals.items and if they exist, they are send to the client as json
 users.use(routerHandling.emptyResponse);

docs/infra/codestyle/cc-intellij-idea-javascript-typescript-style.xml

@@ -1,9 +1,10 @@
-<code_scheme name="OPT-CC copy" version="173">
+<code_scheme name="OPT-CC" version="173">
   <option name="FORMATTER_TAGS_ENABLED" value="true" />
   <JSCodeStyleSettings>
     <option name="USE_CHAINED_CALLS_GROUP_INDENTS" value="true" />
   </JSCodeStyleSettings>
   <TypeScriptCodeStyleSettings>
+    <option name="USE_DOUBLE_QUOTES" value="false" />
     <option name="USE_CHAINED_CALLS_GROUP_INDENTS" value="true" />
   </TypeScriptCodeStyleSettings>
   <codeStyleSettings language="JavaScript">

package-lock.json

@@ -1,32 +1,29 @@
 {
   "name": "opt-cc",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "ajv": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.3.0.tgz",
-      "integrity": "sha1-RBT/dKUIecII7l/cgm4ywwNUnto=",
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+      "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
       "dev": true,
       "requires": {
         "co": "4.6.0",
-        "fast-deep-equal": "1.0.0",
+        "fast-deep-equal": "1.1.0",
         "fast-json-stable-stringify": "2.0.0",
         "json-schema-traverse": "0.3.1"
       }
     },
-    "ansi-regex": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
-      "integrity": "sha1-DY6UaWej2BQ/k+JOKYUl/BsiNfk=",
-      "dev": true
-    },
     "ansi-styles": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz",
-      "integrity": "sha1-6uy/Zs1waIJ2Cy9GkVgrj1XXp94=",
-      "dev": true
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "1.9.2"
+      }
     },
     "asn1": {
       "version": "0.2.3",
@@ -53,29 +50,26 @@
       "dev": true
     },
     "aws4": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
-      "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.7.0.tgz",
+      "integrity": "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w==",
       "dev": true
     },
     "bcrypt-pbkdf": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
-      "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
       "dev": true,
       "optional": true,
       "requires": {
         "tweetnacl": "0.14.5"
       }
     },
-    "boom": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/boom/-/boom-4.3.1.tgz",
-      "integrity": "sha1-T4owBctKfjiJ90kDD9JbluAdLjE=",
-      "dev": true,
-      "requires": {
-        "hoek": "4.2.0"
-      }
+    "builtin-modules": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
+      "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=",
+      "dev": true
     },
     "caseless": {
       "version": "0.12.0",
@@ -84,23 +78,24 @@
       "dev": true
     },
     "chalk": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
-      "integrity": "sha1-Zjs6ZItotV0EaQ1JFnqoN4WPIXQ=",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
+      "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
       "dev": true,
       "requires": {
-        "ansi-styles": "1.1.0",
+        "ansi-styles": "3.2.1",
         "escape-string-regexp": "1.0.5",
-        "has-ansi": "0.1.0",
-        "strip-ansi": "0.3.0",
-        "supports-color": "0.2.0"
+        "supports-color": "5.4.0"
       },
       "dependencies": {
         "supports-color": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz",
-          "integrity": "sha1-2S3iaU6z9nMjlz1649i1W0wiGQo=",
-          "dev": true
+          "version": "5.4.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
+          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
         }
       }
     },
@@ -110,10 +105,25 @@
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
       "dev": true
     },
+    "color-convert": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.2.tgz",
+      "integrity": "sha512-3NUJZdhMhcdPn8vJ9v2UQJoH0qqoGUkYTgFEPZaPjEtwmmKUfNV46zZmgB2M5M4DCEQHMaCfWHCxiBflLm04Tg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.1"
+      }
+    },
+    "color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok=",
+      "dev": true
+    },
     "combined-stream": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
-      "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz",
+      "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=",
       "dev": true,
       "requires": {
         "delayed-stream": "1.0.0"
@@ -126,15 +136,16 @@
       "dev": true
     },
     "concurrently": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-3.5.0.tgz",
-      "integrity": "sha1-jPG3cHppFqeKT/W3e7BN7FSzebI=",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-3.6.0.tgz",
+      "integrity": "sha512-6XiIYtYzmGEccNZFkih5JOH92jLA4ulZArAYy5j1uDSdrPLB3KzdE8GW7t2fHPcg9ry2+5LP9IEYzXzxw9lFdA==",
       "dev": true,
       "requires": {
-        "chalk": "0.5.1",
+        "chalk": "2.4.1",
         "commander": "2.6.0",
         "date-fns": "1.29.0",
-        "lodash": "4.17.4",
+        "lodash": "4.17.10",
+        "read-pkg": "3.0.0",
         "rx": "2.3.24",
         "spawn-command": "0.0.2-1",
         "supports-color": "3.2.3",
@@ -142,9 +153,9 @@
       }
     },
     "core-js": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.1.tgz",
-      "integrity": "sha1-rmh03GaTd4m4B1T/VCjfZoGcpQs=",
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
+      "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==",
       "dev": true
     },
     "core-util-is": {
@@ -153,26 +164,6 @@
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
-    "cryptiles": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-3.1.2.tgz",
-      "integrity": "sha1-qJ+7Ig9c4l7FboxKqKT9e1sNKf4=",
-      "dev": true,
-      "requires": {
-        "boom": "5.2.0"
-      },
-      "dependencies": {
-        "boom": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/boom/-/boom-5.2.0.tgz",
-          "integrity": "sha512-Z5BTk6ZRe4tXXQlkqftmsAUANpXmuwlsF5Oov8ThoMbQRzdGTA1ngYRW160GexgOgjsFOKJz0LYhoNi+2AMBUw==",
-          "dev": true,
-          "requires": {
-            "hoek": "4.2.0"
-          }
-        }
-      }
-    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -204,6 +195,15 @@
         "jsbn": "0.1.1"
       }
     },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "0.2.1"
+      }
+    },
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -223,9 +223,9 @@
       "dev": true
     },
     "fast-deep-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz",
-      "integrity": "sha1-liVqO8l1WV6zbYLpkp0GDYk0Of8=",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
+      "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=",
       "dev": true
     },
     "fast-json-stable-stringify": {
@@ -241,14 +241,14 @@
       "dev": true
     },
     "form-data": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.1.tgz",
-      "integrity": "sha1-b7lPvXGIUwbXPRXMSX/kzE7NRL8=",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.2.tgz",
+      "integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=",
       "dev": true,
       "requires": {
         "asynckit": "0.4.0",
-        "combined-stream": "1.0.5",
-        "mime-types": "2.1.17"
+        "combined-stream": "1.0.6",
+        "mime-types": "2.1.18"
       }
     },
     "getpass": {
@@ -260,6 +260,12 @@
         "assert-plus": "1.0.0"
       }
     },
+    "graceful-fs": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+      "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+      "dev": true
+    },
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -272,41 +278,26 @@
       "integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=",
       "dev": true,
       "requires": {
-        "ajv": "5.3.0",
+        "ajv": "5.5.2",
         "har-schema": "2.0.0"
       }
     },
-    "has-ansi": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-      "integrity": "sha1-hPJlqujA5qiKEtcCKJS3VoiUxi4=",
-      "dev": true,
-      "requires": {
-        "ansi-regex": "0.2.1"
-      }
-    },
     "has-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-      "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
       "dev": true
     },
-    "hawk": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/hawk/-/hawk-6.0.2.tgz",
-      "integrity": "sha512-miowhl2+U7Qle4vdLqDdPt9m09K6yZhkLDTWGoUiUzrQCn+mHHSmfJgAyGaLRZbPmTqfFFjRV1QWCW0VWUJBbQ==",
-      "dev": true,
-      "requires": {
-        "boom": "4.3.1",
-        "cryptiles": "3.1.2",
-        "hoek": "4.2.0",
-        "sntp": "2.1.0"
-      }
-    },
     "hoek": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.0.tgz",
-      "integrity": "sha512-v0XCLxICi9nPfYrS9RL8HbYnXi9obYAeLbSP00BmnZwCK9+Ih9WOjoZ8YoHCoav2csqn4FOz4Orldsy2dmDwmQ==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
+      "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==",
+      "dev": true
+    },
+    "hosted-git-info": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.6.1.tgz",
+      "integrity": "sha512-Ba4+0M4YvIDUUsprMjhVTU1yN9F2/LJSAl69ZpzaLT4l4j5mwTS6jqqW9Ojvj6lKz/veqPzpJBqGbXspOb533A==",
       "dev": true
     },
     "http-signature": {
@@ -317,7 +308,22 @@
       "requires": {
         "assert-plus": "1.0.0",
         "jsprim": "1.4.1",
-        "sshpk": "1.13.1"
+        "sshpk": "1.14.2"
+      }
+    },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
+      "dev": true
+    },
+    "is-builtin-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
+      "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=",
+      "dev": true,
+      "requires": {
+        "builtin-modules": "1.1.1"
       }
     },
     "is-typedarray": {
@@ -350,10 +356,10 @@
       "integrity": "sha1-M4WseQGSEwy+Iw6ALsAskhW7/to=",
       "dev": true,
       "requires": {
-        "hoek": "4.2.0",
+        "hoek": "4.2.1",
         "isemail": "2.2.1",
         "items": "2.1.1",
-        "moment": "2.19.1",
+        "moment": "2.22.2",
         "topo": "2.0.2"
       }
     },
@@ -364,6 +370,12 @@
       "dev": true,
       "optional": true
     },
+    "json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true
+    },
     "json-schema": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
@@ -394,25 +406,37 @@
         "verror": "1.10.0"
       }
     },
+    "load-json-file": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
+      "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "4.1.11",
+        "parse-json": "4.0.0",
+        "pify": "3.0.0",
+        "strip-bom": "3.0.0"
+      }
+    },
     "lodash": {
-      "version": "4.17.4",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-      "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
+      "version": "4.17.10",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+      "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
       "dev": true
     },
     "mime-db": {
-      "version": "1.30.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.30.0.tgz",
-      "integrity": "sha1-dMZD2i3Z1qRTmZY0ZbJtXKfXHwE=",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
+      "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==",
       "dev": true
     },
     "mime-types": {
-      "version": "2.1.17",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.17.tgz",
-      "integrity": "sha1-Cdejk/A+mVp5+K+Fe3Cp4KsWVXo=",
+      "version": "2.1.18",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
+      "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
       "dev": true,
       "requires": {
-        "mime-db": "1.30.0"
+        "mime-db": "1.33.0"
       }
     },
     "minimist": {
@@ -422,23 +446,60 @@
       "dev": true
     },
     "moment": {
-      "version": "2.19.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.19.1.tgz",
-      "integrity": "sha1-VtoaLRy/AdOLfhr8McELz6GSkWc=",
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
+      "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y=",
       "dev": true
     },
+    "normalize-package-data": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
+      "integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==",
+      "dev": true,
+      "requires": {
+        "hosted-git-info": "2.6.1",
+        "is-builtin-module": "1.0.0",
+        "semver": "5.5.0",
+        "validate-npm-package-license": "3.0.3"
+      }
+    },
     "oauth-sign": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
       "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=",
       "dev": true
     },
+    "parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+      "dev": true,
+      "requires": {
+        "error-ex": "1.3.2",
+        "json-parse-better-errors": "1.0.2"
+      }
+    },
+    "path-type": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
+      "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
+      "dev": true,
+      "requires": {
+        "pify": "3.0.0"
+      }
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
       "dev": true
     },
+    "pify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+      "dev": true
+    },
     "punycode": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
@@ -446,39 +507,48 @@
       "dev": true
     },
     "qs": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz",
-      "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==",
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
       "dev": true
     },
+    "read-pkg": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
+      "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
+      "dev": true,
+      "requires": {
+        "load-json-file": "4.0.0",
+        "normalize-package-data": "2.4.0",
+        "path-type": "3.0.0"
+      }
+    },
     "request": {
-      "version": "2.83.0",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.83.0.tgz",
-      "integrity": "sha512-lR3gD69osqm6EYLk9wB/G1W/laGWjzH90t1vEa2xuxHD5KUrSzp9pUSfTm+YC5Nxt2T8nMPEvKlhbQayU7bgFw==",
+      "version": "2.87.0",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.87.0.tgz",
+      "integrity": "sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==",
       "dev": true,
       "requires": {
         "aws-sign2": "0.7.0",
-        "aws4": "1.6.0",
+        "aws4": "1.7.0",
         "caseless": "0.12.0",
-        "combined-stream": "1.0.5",
+        "combined-stream": "1.0.6",
         "extend": "3.0.1",
         "forever-agent": "0.6.1",
-        "form-data": "2.3.1",
+        "form-data": "2.3.2",
         "har-validator": "5.0.3",
-        "hawk": "6.0.2",
         "http-signature": "1.2.0",
         "is-typedarray": "1.0.0",
         "isstream": "0.1.2",
         "json-stringify-safe": "5.0.1",
-        "mime-types": "2.1.17",
+        "mime-types": "2.1.18",
         "oauth-sign": "0.8.2",
         "performance-now": "2.1.0",
-        "qs": "6.5.1",
-        "safe-buffer": "5.1.1",
-        "stringstream": "0.0.5",
-        "tough-cookie": "2.3.3",
+        "qs": "6.5.2",
+        "safe-buffer": "5.1.2",
+        "tough-cookie": "2.3.4",
         "tunnel-agent": "0.6.0",
-        "uuid": "3.1.0"
+        "uuid": "3.3.2"
       }
     },
     "rx": {
@@ -488,19 +558,22 @@
       "dev": true
     },
     "safe-buffer": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
-      "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "dev": true
     },
-    "sntp": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/sntp/-/sntp-2.1.0.tgz",
-      "integrity": "sha512-FL1b58BDrqS3A11lJ0zEdnJ3UOKqVxawAkF3k7F0CVN7VQ34aZrV+G8BZ1WC9ZL7NyrwsW0oviwsWDgRuVYtJg==",
-      "dev": true,
-      "requires": {
-        "hoek": "4.2.0"
-      }
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
+    },
+    "semver": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
+      "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==",
+      "dev": true
     },
     "spawn-command": {
       "version": "0.0.2-1",
@@ -508,37 +581,61 @@
       "integrity": "sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A=",
       "dev": true
     },
+    "spdx-correct": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.0.tgz",
+      "integrity": "sha512-N19o9z5cEyc8yQQPukRCZ9EUmb4HUpnrmaL/fxS2pBo2jbfcFRVuFZ/oFC+vZz0MNNk0h80iMn5/S6qGZOL5+g==",
+      "dev": true,
+      "requires": {
+        "spdx-expression-parse": "3.0.0",
+        "spdx-license-ids": "3.0.0"
+      }
+    },
+    "spdx-exceptions": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.1.0.tgz",
+      "integrity": "sha512-4K1NsmrlCU1JJgUrtgEeTVyfx8VaYea9J9LvARxhbHtVtohPs/gFGG5yy49beySjlIMhhXZ4QqujIZEfS4l6Cg==",
+      "dev": true
+    },
+    "spdx-expression-parse": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz",
+      "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==",
+      "dev": true,
+      "requires": {
+        "spdx-exceptions": "2.1.0",
+        "spdx-license-ids": "3.0.0"
+      }
+    },
+    "spdx-license-ids": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.0.tgz",
+      "integrity": "sha512-2+EPwgbnmOIl8HjGBXXMd9NAu02vLjOO1nWw4kmeRDFyHn+M/ETfHxQUK0oXg8ctgVnl9t3rosNVsZ1jG61nDA==",
+      "dev": true
+    },
     "sshpk": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.1.tgz",
-      "integrity": "sha1-US322mKHFEMW3EwY/hzx2UBzm+M=",
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.2.tgz",
+      "integrity": "sha1-xvxhZIo9nE52T9P8306hBeSSupg=",
       "dev": true,
       "requires": {
         "asn1": "0.2.3",
         "assert-plus": "1.0.0",
-        "bcrypt-pbkdf": "1.0.1",
+        "bcrypt-pbkdf": "1.0.2",
         "dashdash": "1.14.1",
         "ecc-jsbn": "0.1.1",
         "getpass": "0.1.7",
         "jsbn": "0.1.1",
+        "safer-buffer": "2.1.2",
         "tweetnacl": "0.14.5"
       }
     },
-    "stringstream": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
-      "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=",
+    "strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
       "dev": true
     },
-    "strip-ansi": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
-      "integrity": "sha1-JfSOoiynkYfzF0pNuHWTR7sSYiA=",
-      "dev": true,
-      "requires": {
-        "ansi-regex": "0.2.1"
-      }
-    },
     "supports-color": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
@@ -546,6 +643,14 @@
       "dev": true,
       "requires": {
         "has-flag": "1.0.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+          "dev": true
+        }
       }
     },
     "topo": {
@@ -554,13 +659,13 @@
       "integrity": "sha1-zVYVdSU5BXwNwEkaYhw7xvvh0YI=",
       "dev": true,
       "requires": {
-        "hoek": "4.2.0"
+        "hoek": "4.2.1"
       }
     },
     "tough-cookie": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.3.tgz",
-      "integrity": "sha1-C2GKVWW23qkL80JdBNVe3EdadWE=",
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz",
+      "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==",
       "dev": true,
       "requires": {
         "punycode": "1.4.1"
@@ -578,7 +683,7 @@
       "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
       "dev": true,
       "requires": {
-        "safe-buffer": "5.1.1"
+        "safe-buffer": "5.1.2"
       }
     },
     "tweetnacl": {
@@ -589,11 +694,21 @@
       "optional": true
     },
     "uuid": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz",
-      "integrity": "sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
       "dev": true
     },
+    "validate-npm-package-license": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz",
+      "integrity": "sha512-63ZOUnL4SIXj4L0NixR3L1lcjO38crAbgrTpl28t8jjrfuiOBL5Iygm+60qPs/KsZGzPNg6Smnc/oY16QTjF0g==",
+      "dev": true,
+      "requires": {
+        "spdx-correct": "3.0.0",
+        "spdx-expression-parse": "3.0.0"
+      }
+    },
     "verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
@@ -606,15 +721,15 @@
       }
     },
     "wait-on": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-2.0.2.tgz",
-      "integrity": "sha1-CoT9BwJMb8Joyw6r5YW+IXqvK6o=",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-2.1.0.tgz",
+      "integrity": "sha512-hDwJ674+7dfiiK/cxtYCwPxlnjXDjto/pCz1PF02sXUhqCqCWsgvxZln0699PReWqXXgkxqkF6DDo5Rj9sjNvw==",
       "dev": true,
       "requires": {
-        "core-js": "2.5.1",
+        "core-js": "2.5.7",
         "joi": "9.2.0",
         "minimist": "1.2.0",
-        "request": "2.83.0",
+        "request": "2.87.0",
         "rx": "4.1.0"
       },
       "dependencies": {

package.json

@@ -1,13 +1,14 @@
 {
   "name": "opt-cc",
-  "version": "1.7.7",
+  "version": "1.8.0",
   "author": "Florian Hartwich <hardi@noarch.de>",
   "private": true,
   "scripts": {
     "start": "npm run deploy-static-prod && npm start --prefix ./api",
     "dev": "npm run deploy-static && npm run dev --prefix ./api",
-    "deploy-static": "npm run build --prefix=static && npm run deploy-static:link-resource && npm run deploy-static:api-docs",
-    "deploy-static:prod": "npm run build:prod --prefix=static && npm run deploy-static:link-resource && npm run deploy-static:api-docs",
+    "pre-deploy-clean": "rm -f ./public/resource",
+    "deploy-static": "npm run pre-deploy-clean && npm run build --prefix=static && npm run deploy-static:link-resource && npm run deploy-static:api-docs",
+    "deploy-static:prod": "npm run pre-deploy-clean && npm run build:prod --prefix=static && npm run deploy-static:link-resource && npm run deploy-static:api-docs",
     "deploy-static:link-resource": "ln -s ../api/resource/ public/resource",
     "deploy-static:api-docs": "npm run api:docs --prefix=api",
     "postinstall": "npm install --prefix ./static && npm install --prefix  ./api",

static/.angular-cli.json

@@ -1,66 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "optCC"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "../public",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "styles.css",
-        "../node_modules/jquery-ui-bundle/jquery-ui.css",
-        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
-      ],
-      "scripts": [
-        "../node_modules/jquery/dist/jquery.js",
-        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
-      ],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts",
-        "e2e": "environments/environment.e2e.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "files": "src/**/*.ts",
-      "project": "src/tsconfig.app.json"
-    },
-    {
-      "files": "src/**/*.ts",
-      "project": "src/tsconfig.spec.json"
-    },
-    {
-      "files": "src/**/*.ts",
-      "project": "e2e/tsconfig.e2e.json"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "css",
-    "component": {}
-  }
-}

static/angular.json

@@ -0,0 +1,149 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "optCC": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "../public",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "src/styles.css",
+              "node_modules/jquery-ui-bundle/jquery-ui.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css"
+            ],
+            "scripts": [
+              "node_modules/jquery/dist/jquery.js",
+              "node_modules/bootstrap/dist/js/bootstrap.min.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            },
+            "e2e": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.e2e.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "optCC:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "optCC:build:production"
+            },
+            "e2e": {
+              "browserTarget": "optCC:build:e2e"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "optCC:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [
+              "node_modules/jquery/dist/jquery.js",
+              "node_modules/bootstrap/dist/js/bootstrap.min.js"
+            ],
+            "styles": [
+              "src/styles.css",
+              "node_modules/jquery-ui-bundle/jquery-ui.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    },
+    "optCC-e2e": {
+      "root": "",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "optCC:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "optCC",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}

static/karma.conf.js

@@ -4,33 +4,30 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-remap-istanbul'),
       require('karma-spec-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     files: [
       {pattern: './src/test.ts', watched: false}
     ],
     preprocessors: {
-      './src/test.ts': ['@angular/cli']
+      
     },
     mime: {
       'text/x-typescript': ['ts', 'tsx']
     },
     remapIstanbulReporter: {
-      reports: {
+      dir: require('path').join(__dirname, 'coverage'), reports: {
         html: 'coverage',
         lcovonly: './coverage/coverage.lcov'
       }
     },
-    angularCli: {
-      config: './.angular-cli.json',
-      environment: 'dev'
-    },
+    
     reporters: config.angularCli && config.angularCli.codeCoverage
       ? ['spec', 'karma-remap-istanbul']
       : ['spec'],

static/package.json

@@ -15,45 +15,48 @@
     "e2e": "ng e2e --serve=false"
   },
   "dependencies": {
-    "@angular/animations": "^5.0.0",
-    "@angular/cli": "^1.5.0",
-    "@angular/common": "^5.0.0",
-    "@angular/compiler": "^5.0.0",
-    "@angular/compiler-cli": "^5.0.0",
-    "@angular/core": "^5.0.0",
-    "@angular/forms": "^5.0.0",
-    "@angular/http": "^5.0.0",
-    "@angular/platform-browser": "^5.0.0",
-    "@angular/platform-browser-dynamic": "^5.0.0",
-    "@angular/router": "^5.0.0",
-    "@swimlane/ngx-charts": "^7.1.0",
-    "@swimlane/ngx-datatable": "^11.0.4",
+    "@angular/animations": "^6.0.7",
+    "@angular/cdk": "^6.0.7",
+    "@angular/cli": "^6.0.7",
+    "@angular/common": "^6.0.7",
+    "@angular/compiler": "^6.0.7",
+    "@angular/compiler-cli": "^6.0.7",
+    "@angular/core": "^6.0.7",
+    "@angular/forms": "^6.0.7",
+    "@angular/http": "^6.0.7",
+    "@angular/material": "^6.0.7",
+    "@angular/platform-browser": "^6.0.7",
+    "@angular/platform-browser-dynamic": "^6.0.7",
+    "@angular/router": "^6.0.7",
+    "@swimlane/ngx-charts": "^8.1.0",
     "bootstrap": "^3.3.7",
     "d3": "^4.11.0",
     "file-saver": "^1.3.8",
     "jquery": "^3.1.0",
     "jquery-ui": "^1.12.0",
     "jquery-ui-bundle": "^1.11.4",
-    "ngx-bootstrap": "^2.0.0-beta.8",
-    "ngx-clipboard": "^8.1.0",
-    "ngx-cookie-service": "^1.0.9",
+    "ngx-clipboard": "^11.1.1",
+    "ngx-cookie-service": "^1.0.10",
     "ngx-infinite-scroll": "^0.5.2",
+    "rxjs-compat": "^6.2.1",
     "ts-helpers": "^1.1.2",
-    "typescript": "^2.6.1"
+    "zone.js": "^0.8.26"
   },
   "devDependencies": {
     "@types/jasmine": "2.5.38",
     "@types/node": "^6.0.89",
-    "codelyzer": "~2.0.0-beta.1",
+    "codelyzer": "^4.4.2",
     "jasmine-core": "^2.5.2",
     "jasmine-spec-reporter": "^3.2.0",
-    "karma": "^1.5.0",
+    "karma": "^2.0.4",
     "karma-chrome-launcher": "^2.0.0",
     "karma-jasmine": "^1.1.0",
     "karma-spec-reporter": "0.0.30",
-    "protractor": "~5.1.1",
+    "protractor": "^5.3.2",
     "protractor-jasmine2-screenshot-reporter": "^0.3.2",
     "ts-node": "1.2.1",
-    "tslint": "^4.3.0"
+    "tslint": "^5.10.0",
+    "@angular-devkit/build-angular": "~0.6.8",
+    "typescript": "^2.7.2"
   }
 }

static/src/app/admin/admin.component.css

@@ -1,5 +1,5 @@
 .overview {
-  padding: 80px 0 0 10% !important;
+  padding-bottom: 50px!important;
 }
 
 .trash {

static/src/app/admin/admin.component.html

@@ -2,11 +2,6 @@
 
   <h2>Admin Panel</h2>
 
-  <span *ngIf="showSuccessLabel"
-        class="absolute-label label label-success label-small">
-        Erfolgreich gespeichert
-  </span>
-
   <div class="pull-left" style="margin-top:20px;">
     <div class="table-container" style="width: 75%; min-width: 500px">
       <table class="table table-hover">
@@ -59,7 +54,7 @@
             </select>
           </td>
           <td class="text-center">
-            <span class="glyphicon glyphicon-trash trash" title="Löschen" (click)="deleteUser(user)"></span>
+            <span class="glyphicon glyphicon-trash trash" matTooltip="Löschen" (click)="deleteUser(user)"></span>
           </td>
         </tr>
         </tbody>

static/src/app/admin/admin.component.ts

@@ -4,6 +4,8 @@ import {Observable} from 'rxjs/Observable';
 import {AppUserService} from '../services/app-user-service/app-user.service';
 import {SquadService} from '../services/army-management/squad.service';
 import {Fraction} from '../utils/fraction.enum';
+import {SnackBarService} from '../services/user-interface/snack-bar/snack-bar.service';
+import {Message} from '../i18n/de.messages';
 
 
 @Component({
@@ -17,12 +19,11 @@ export class AdminComponent implements OnInit {
 
   squads: Squad[] = [];
 
-  showSuccessLabel = false;
-
   readonly fraction = Fraction;
 
   constructor(private appUserService: AppUserService,
-              private squadService: SquadService) {
+              private squadService: SquadService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -46,10 +47,7 @@ export class AdminComponent implements OnInit {
 
     this.appUserService.updateUser(updateObject)
         .subscribe(resUser => {
-          this.showSuccessLabel = true;
-          setTimeout(() => {
-            this.showSuccessLabel = false;
-          }, 2000);
+          this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
         });
   }
 

static/src/app/app.component.css

@@ -13,16 +13,6 @@ li {
   padding-right: 15px;
 }
 
-.right {
-  float: right;
-  width: 300px;
-}
-
-.left {
-  float: left;
-  width: calc(100% - 400px);
-}
-
 .scrollable-menu {
   height: auto;
   max-height: 200px;
@@ -30,32 +20,23 @@ li {
 }
 
 .version-label {
-  display: block;
-  position: fixed;
-  top: 32px;
-  left: 106px;
+  position: absolute;
+  top: 27px;
+  left: 115px;
   font-size: 12px;
-  color: #7e7d64;
+  color: #bebebe;
 }
 
 #scrollTopBtn {
-  position: fixed; /* Fixed/sticky position */
+  position: fixed;
   bottom: 20px;
   right: 30px;
   z-index: 99;
-  border: none;
-  outline: none;
-  background-color: #101010;
-  color: white;
-  font-weight: bolder;
-  cursor: pointer;
-  padding: 7px 25px 10px 25px;
-  border-radius: 20px;
-  font-size: 22px;
+  background: rgba(16, 16, 16, 0.8);
 }
 
 #scrollTopBtn:hover {
-  background-color: rgba(25, 142, 25, 1);
+  background: rgba(16, 16, 16);
 }
 
 .unprocessed {
@@ -70,10 +51,6 @@ li {
   background-color: orange;
 }
 
-unprocessed-child:hover {
-  background-color: orange;
-}
-
 /* Safari 4.0 - 8.0 */
 @-webkit-keyframes color-blink {
   from {

static/src/app/app.component.html

@@ -3,11 +3,6 @@
     <div class="container-fluid">
 
       <div class="navbar-header">
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
         <a class="navbar-brand" href="#" style="padding-top: 2px">
           <img height="40px" src="assets/opt-logo-klein.png">
         </a>
@@ -22,21 +17,37 @@
           <li routerLinkActive="active">
             <a routerLink='{{config.overviewPath}}' class="link">Armeeübersicht</a>
           </li>
+          <li routerLinkActive="active">
+            <a [routerLink]="[config.publicPath.concat('/').concat(config.rankPath)]" class="link">Ränge</a>
+          </li>
+          <li routerLinkActive="active">
+            <a [routerLink]="[config.publicPath.concat('/').concat(config.decorationPath)]" class="link">Auszeichnungen</a>
+          </li>
           <li routerLinkActive="active">
             <a routerLink='{{config.statsPath}}' class="link">Statistiken</a>
           </li>
-          <li *ngIf="loginService.hasPermission(2)" routerLinkActive="active">
+          <li *ngIf="loginService.hasPermission(2)"
+              class="dropdown">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
+               aria-expanded="false">
+              Verwaltung
+              <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu">
+              <li routerLinkActive="active">
                 <a routerLink='{{config.userPath}}' class="link">Teilnehmer</a>
               </li>
-          <li *ngIf="loginService.hasPermission(2)" routerLinkActive="active">
+              <li routerLinkActive="active">
                 <a routerLink='{{config.squadPath}}' class="link">Squads</a>
               </li>
-          <li *ngIf="loginService.hasPermission(2)" routerLinkActive="active">
+              <li routerLinkActive="active">
                 <a routerLink='{{config.decorationPath}}' class="link">Auszeichnungen</a>
               </li>
-          <li *ngIf="loginService.hasPermission(2)" routerLinkActive="active">
+              <li routerLinkActive="active">
                 <a routerLink='{{config.rankPath}}' class="link">Ränge</a>
               </li>
+            </ul>
+          </li>
           <li *ngIf="loginService.hasPermission(1) && !loginService.hasPermission(2) && loginService.hasSquad()"
               class="dropdown">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
@@ -91,20 +102,27 @@
       </div>
     </div>
   </nav>
-
-  <button (click)="scrollToTop()" *ngIf="scrollTopVisible" id="scrollTopBtn" title="Zum Seitenanfang">△</button>
-
 </div>
 
 <div>
-  <span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
-  <div id="left">
   <router-outlet></router-outlet>
+
+  <div id="left">
+    <router-outlet name="left"></router-outlet>
   </div>
+
   <div id="right">
     <router-outlet name="right"></router-outlet>
   </div>
-  <div id="footer">
-    <router-outlet name="footer"></router-outlet>
-  </div>
 </div>
+
+<span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
+
+<button mat-icon-button
+        mat-mini-fab
+        id="scrollTopBtn"
+        *ngIf="scrollTopVisible"
+        matTooltip="Zum Seitenanfang"
+        (click)="scrollToTop()">
+  <mat-icon svgIcon="arrow-up"></mat-icon>
+</button>

static/src/app/app.component.ts

@@ -5,6 +5,9 @@ import {PromotionService} from './services/army-management/promotion.service';
 import {AwardingService} from './services/army-management/awarding.service';
 import {RouteConfig} from './app.config';
 import {DOCUMENT} from '@angular/common';
+import {DomSanitizer} from '@angular/platform-browser';
+import {MatIconRegistry} from '@angular/material';
+import {SpinnerService} from './services/user-interface/spinner/spinner.service';
 
 declare function require(url: string);
 
@@ -23,34 +26,78 @@ export class AppComponent implements OnInit {
 
   scrollBtnVisibleVal = 100;
 
+  // a map of svgIcon names and associated svg file names
+  // to load from assets/icon folder
+  svgIcons = {
+    'add': 'outline-add_box-24px',
+    'add-user': 'twotone-person_add-24px',
+    'edit': 'baseline-edit-24px',
+    'delete': 'baseline-delete-24px',
+    'stats-detail': 'round-assessment-24px',
+    'chevron-left': 'baseline-chevron_left-24px',
+    'chevron-right': 'baseline-chevron_right-24px',
+    'arrow-up': 'baseline-arrow_upward-24px',
+    'more-vert': 'baseline-more_vert-24px',
+    // --------STATISTICS---------
+    'award': 'stats/award',
+    'battle': 'stats/battle',
+    'flagTouch': 'stats/flagTouch',
+    'friendlyFire': 'stats/friendlyFire',
+    'highscore': 'stats/highscore',
+    'kill': 'stats/kill',
+    'respawn': 'stats/respawn',
+    'revive': 'stats/respawn',
+    'stats-chart': 'stats/statsChart',
+  };
+
   version = 'v'.concat(require('./../../../package.json').version);
 
   constructor(public loginService: LoginService,
               private promotionService: PromotionService,
               private awardingService: AwardingService,
               private router: Router,
+              private iconRegistry: MatIconRegistry,
+              private sanitizer: DomSanitizer,
+              private spinnerService: SpinnerService,
               @Inject(DOCUMENT) private document) {
+    this.initMaterialSvgIcons();
+
+    this.spinnerService.spinnerActive.subscribe(active => this.toggleSpinner(active));
+
     router.events.subscribe(event => {
       if (event instanceof NavigationStart) {
-        this.loading = true;
+        this.spinnerService.activate();
       }
       if (event instanceof NavigationEnd) {
-        this.loading = false;
+        this.spinnerService.deactivate();
+        const currentUrl = this.router.url;
+
         // scroll to top on route from army overview to user detail and back
-        if (router.url.includes('overview')) {
+        if (currentUrl.includes('/overview') || currentUrl.includes('/public')) {
           this.scrollToTop();
         }
       }
     });
   }
 
+  toggleSpinner(active) {
+    this.loading = active;
+  }
+
+  initMaterialSvgIcons() {
+    Object.keys(this.svgIcons).forEach(key => {
+      const fileUri = '../assets/icon/'.concat(this.svgIcons[key])
+                                       .concat('.svg');
+      this.iconRegistry.addSvgIcon(key, this.sanitizer.bypassSecurityTrustResourceUrl(fileUri));
+    });
+  }
+
   @HostListener('window:scroll', [])
   onWindowScroll() {
     this.scrollTopVisible = document.body.scrollTop > this.scrollBtnVisibleVal
       || document.documentElement.scrollTop > this.scrollBtnVisibleVal;
   }
 
-
   ngOnInit() {
     if (this.loginService.hasPermission(2)) {
       const fraction = this.loginService.getCurrentUser().squad.fraction;
@@ -61,14 +108,14 @@ export class AppComponent implements OnInit {
 
   logout() {
     this.loginService.logout();
+    setTimeout(() => {
       this.router.navigate([RouteConfig.overviewPath]);
-    return false;
+    }, 500);
   }
 
   scrollToTop() {
     this.document.body.scrollTop = 0; // For Safari
     this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
   }
-
 }
 

static/src/app/app.config.ts

@@ -5,7 +5,6 @@ export class AppConfig {
   public readonly apiAppUserPath = this.apiUrl + '/account/';
   public readonly apiAuthenticationPath = this.apiUrl + '/authenticate';
   public readonly apiAwardPath = this.apiUrl + '/awardings';
-  public readonly apiAwardSquadPath = this.apiUrl + '/awardings/unprocessed';
   public readonly apiCampaignPath = this.apiUrl + '/campaigns';
   public readonly apiDecorationPath = this.apiUrl + '/decorations/';
   public readonly apiLogsPath = this.apiUrl + '/logs';
@@ -36,4 +35,7 @@ export const RouteConfig = {
   confirmAwardPath: 'confirm-award',
   confirmPromotionPath: 'confirm-promotion',
   sqlDashboardPath: 'sql-dashboard',
+  publicPath: 'public',
+  rankOverviewPath: 'public/ranks',
+  decorationOverviewPath: 'public/decorations',
 };

static/src/app/app.module.ts

@@ -11,7 +11,7 @@ import {DecorationService} from './services/army-management/decoration.service';
 import {RankStore} from './services/stores/rank.store';
 import {RankService} from './services/army-management/rank.service';
 import {AppConfig} from './app.config';
-import {LoginGuardAdmin, LoginGuardHL, LoginGuardSQL} from './login/login.guard';
+import {LoginGuardAdmin, LoginGuardHL, LoginGuardSQL} from './login';
 import {AwardingService} from './services/army-management/awarding.service';
 import {HttpClient} from './services/http-client';
 import {ArmyService} from './services/army-service/army.service';
@@ -22,9 +22,14 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {UserService} from './services/army-management/user.service';
 import {UserStore} from './services/stores/user.store';
 import {CookieService} from 'ngx-cookie-service';
+import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service';
+import {HttpClientModule} from '@angular/common/http';
+import {SpinnerService} from './services/user-interface/spinner/spinner.service';
+import {MatSnackBarModule} from '@angular/material';
 
 @NgModule({
-  imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, ClipboardModule],
+  imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, HttpClientModule,
+    ClipboardModule, MatSnackBarModule],
   providers: [
     HttpClient,
     LoginService,
@@ -44,7 +49,9 @@ import {CookieService} from 'ngx-cookie-service';
     PromotionService,
     AppConfig,
     routingProviders,
-    CookieService
+    CookieService,
+    SnackBarService,
+    SpinnerService,
   ],
   declarations: [
     AppComponent,

static/src/app/app.routing.ts

@@ -42,6 +42,10 @@ export const appRoutes: Routes = [
     loadChildren: './ranks/ranks.module#RanksModule',
     canActivate: [LoginGuardHL]
   },
+  {
+    path: RouteConfig.publicPath,
+    loadChildren: './pub/public.module#PublicModule'
+  },
   {
     path: RouteConfig.adminPanelPath,
     loadChildren: './admin/admin.module#AdminModule',

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

@@ -1,3 +1,18 @@
+:host {
+  display: flow-root;
+  height: 100%;
+  min-height: 100vh;
+  width: 100%;
+  margin-top: -23px;
+  padding-top: 23px;
+  padding-bottom: 23px;
+  background-image: url('../../../assets/bg.jpg');
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: top;
+  background-repeat: no-repeat;
+}
+
 .army-member-view {
   width: 90%;
   height: 100vh;
@@ -12,8 +27,8 @@
 }
 
 .return-button {
-  display: block;
-  width: auto;
+  position: absolute;
+  padding-left: 5px;
 }
 
 .table {
@@ -39,3 +54,7 @@ tbody {
 .cell-outline {
   outline: 1px solid #D4D4D4;
 }
+
+tr.cell-outline:hover {
+  background-color: #ffffff;
+}

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

@@ -1,12 +1,16 @@
 <div class="army-member-view">
   <div class="army-member-view-container">
     <div class="return-button">
-      <span class="btn btn-default" style="position:absolute;" (click)="backToOverview()">< zurück zur Übersicht</span>
+      <button mat-raised-button (click)="backToOverview()">
+        <mat-icon svgIcon="chevron-left"></mat-icon>
+        Zurück
+      </button>
+    </div>
+
     <h3 class="text-center" style="font-weight: 600"
         [style.color]="user.squadId?.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
       Auszeichnungen von {{user.username}}
     </h3>
-    </div>
 
     <div class="text-center">
       <img src="{{signatureUrl}}">
@@ -21,7 +25,7 @@
 
     <div class="pull-left" style="margin-top:20px;">
       <div class="table-container" style="min-width: 500px">
-        <table class="table table-hover">
+        <table class="table">
           <thead>
           <tr class="table-head">
             <th class="col-sm-1" style="border-radius: 10px 0 0 0;"></th>

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

@@ -1,21 +1,19 @@
 import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
-import {Award, User} from '../models/model-interfaces';
+import {Award, User} from '../../models/model-interfaces';
 import {ActivatedRoute, Router} from '@angular/router';
-import {UserService} from '../services/army-management/user.service';
+import {UserService} from '../../services/army-management/user.service';
 import {Subscription} from 'rxjs/Subscription';
-import {RouteConfig} from '../app.config';
-import {AwardingService} from '../services/army-management/awarding.service';
-import {Fraction} from '../utils/fraction.enum';
-import {DOCUMENT} from '@angular/common';
-import {CSSHelpers} from '../global.helpers';
-
+import {RouteConfig} from '../../app.config';
+import {AwardingService} from '../../services/army-management/awarding.service';
+import {Fraction} from '../../utils/fraction.enum';
+import {Location} from '@angular/common';
 
 @Component({
   selector: 'army-member',
   templateUrl: './army-member.component.html',
   styleUrls: ['./army-member.component.css']
 })
-export class ArmyMemberComponent implements OnInit, OnDestroy {
+export class ArmyMemberComponent implements OnInit {
 
   subscription: Subscription;
 
@@ -33,12 +31,10 @@ export class ArmyMemberComponent implements OnInit, OnDestroy {
               private route: ActivatedRoute,
               private userService: UserService,
               private awardingService: AwardingService,
-              @Inject(DOCUMENT) private document) {
+              private location: Location) {
   }
 
   ngOnInit() {
-    // set background image css
-    this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));
 
     this.subscription = this.route.params
                             .map(params => params['id'])
@@ -51,17 +47,9 @@ export class ArmyMemberComponent implements OnInit, OnDestroy {
                                 this.awards = awards;
                               }));
                             });
-
   };
 
-  ngOnDestroy() {
-    if (this.router.url !== '/' + RouteConfig.overviewPath) {
-      this.document.getElementById('right').setAttribute('style', '');
-    }
-  }
-
   backToOverview() {
-    this.router.navigate([RouteConfig.overviewPath]);
+    this.location.back();
   }
-
 }

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

@@ -0,0 +1,70 @@
+.squad-layout {
+  overflow: hidden;
+  padding: 6px 0;
+}
+
+.squad-layout > div {
+  clear: both;
+}
+
+.squad-layout > div:first-child {
+  background: rgb(34, 34, 34);
+  border-radius: 12px 12px 0 0;
+}
+
+.squad-layout > div:last-child {
+  display: flex;
+  background: rgb(34, 34, 34);
+  border-radius: 0 0 12px 12px;
+}
+
+.squad-cell {
+  display: table-cell;
+  padding: 5px;
+}
+
+.squad-member-count {
+  float:left;
+  color: whitesmoke;
+  margin-left: 42px
+}
+
+.middle-row {
+  min-height: 120px;
+  padding: 5px;
+  border: rgb(34, 34, 34);
+  background-color: rgba(255, 255, 255, 0.88);
+  border-left-style: solid;
+  border-right-style: solid;
+}
+
+.member-link {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+img {
+  position: absolute;
+  margin-top: 8px;
+  margin-left: 25px;
+}
+
+.title {
+  color: whitesmoke;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.name-cell {
+  display: inherit;
+  margin-left: 200px;
+}
+
+
+.colored-row {
+  background: rgb(34, 34, 34);
+}
+
+.footer-row {
+  border-radius: 0 0 12px 12px;
+}

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

@@ -0,0 +1,24 @@
+<div class="squad-layout">
+  <div>
+    <div class="squad-cell pull-left">
+      <img src="resource/squad/{{squad._id}}.png">
+    </div>
+    <div class="squad-cell title name-cell">{{squad.name}}</div>
+  </div>
+  <div class=" middle-row">
+    <div class="name-cell">
+      <div [style.color]="squadFraction === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR"
+           *ngFor="let member of squad.members">
+          <span class="member-link"
+                (click)="select(member._id)">
+            {{member.rank}} {{member.username}}
+          </span>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="squad-cell squad-member-count">
+      Mitglieder: {{squad.memberCount}}
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,26 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+import {Fraction} from '../../utils/fraction.enum';
+
+@Component({
+  selector: 'cc-army-squad',
+  templateUrl: './army-squad.component.html',
+  styleUrls: ['./army-squad.component.css']
+})
+export class ArmySquadComponent {
+
+  @Input() squad;
+
+  @Input() squadFraction: String;
+
+  @Output() memberSelect = new EventEmitter();
+
+  readonly fraction = Fraction;
+
+  constructor() {
+  }
+
+  select(memberId) {
+    this.memberSelect.emit(memberId);
+  }
+}

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

@@ -1,63 +1,26 @@
-.squad-layout {
-  overflow: hidden;
-  padding: 5px 15px 5px 15px;
+:host {
+  display: flow-root;
+  height: 100%;
+  min-height: 100vh;
+  width: 100%;
+  margin-top: -23px;
+  padding-top: 23px;
+  padding-bottom: 23px;
+  background-image: url('../../assets/bg.jpg');
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: top;
+  background-repeat: no-repeat;
 }
 
-.row {
-  clear: both;
-}
-
-.squad-cell {
-  display: table-cell;
-  padding: 5px;
-}
-
-.colored-row {
-  background: rgb(34, 34, 34);
-}
-
-.title-row {
-  border-radius: 12px 12px 0 0;
-}
-
-.footer-row {
-  border-radius: 0 0 12px 12px;
-}
-
-.middle-row {
-  min-height: 120px;
-  border: rgb(34, 34, 34);
-  background-color: rgba(255, 255, 255, 0.88);
-  border-left-style: solid;
-  border-right-style: solid;
-}
-
-.title {
-  color: whitesmoke;
-  font-weight: bold;
-  font-size: 14px;
-}
-
-.name-cell {
-  display: inherit;
-  margin-left: 200px;
+.army-column {
+  width: 45%;
 }
 
 h1 {
   text-align: center;
 }
 
-img {
-  position: absolute;
-  margin-top: 8px;
-  margin-left: 25px;
-}
-
-.member-link {
-  cursor: pointer;
-  text-decoration: underline;
-}
-
 .army-head {
   font-weight: bolder;
   text-align: center
@@ -72,4 +35,3 @@ img {
   background: #222222;
   border-radius: 12px;
 }
-

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

@@ -1,62 +1,23 @@
 <div style="width: 1100px; margin:auto; position: relative;">
   <h1>Übersicht über alle Spieler, Squads und Armeen</h1>
 
-  <div class="pull-left" style="width: 45%;">
+  <div class="pull-left army-column">
     <h3 class="army-head" [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
-    <div class="squad-layout" *ngFor="let squad of army[0].squads">
-      <div class="row colored-row title-row">
-        <div class="squad-cell pull-left"><img
-          src="resource/squad/{{squad._id}}.png"></div>
-        <div class="squad-cell title name-cell">{{squad.name}}</div>
-      </div>
-      <div class="row middle-row">
-        <div class="squad-cell name-cell">
-        <span style="display: block"
-              [style.color]="fraction.COLOR_BLUFOR"
-              *ngFor="let member of squad.members">
-          <span class="member-link"
-                (click)="select(member._id)">
-            {{member.rank}} {{member.username}}
-          </span>
-        </span>
-        </div>
-      </div>
-      <div class="row colored-row footer-row">
-        <div class="squad-cell pull-left" style="color: whitesmoke; margin-left: 42px">
-          Mitglieder: {{squad.memberCount}}
-        </div>
-      </div>
-    </div>
+    <cc-army-squad *ngFor="let squad of army[0].squads"
+                   [squad]="squad"
+                   squadFraction="BLUFOR"
+                   (memberSelect)="select($event)">
+    </cc-army-squad>
     <div class="member-count">Armeemitglieder: {{army[0].memberCount}}</div>
   </div>
 
-  <div class="pull-right" style="width: 45%;">
+  <div class="pull-right army-column">
     <h3 class="army-head" [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
-    <div class="squad-layout" *ngFor="let squad of army[1].squads">
-      <div class="row colored-row title-row">
-        <div class="squad-cell pull-left"><img
-          src="resource/squad/{{squad._id}}.png"></div>
-        <div class="squad-cell title name-cell">{{squad.name}}</div>
-      </div>
-      <div class="row middle-row">
-        <div class="squad-cell name-cell">
-        <span style="display: block"
-              [style.color]="fraction.COLOR_OPFOR"
-              *ngFor="let member of squad.members">
-          <span class="member-link"
-                (click)="select(member._id)">
-            {{member.rank}} {{member.username}}
-          </span>
-        </span>
-        </div>
-      </div>
-      <div class="row colored-row footer-row">
-        <div class="squad-cell pull-left" style="color: whitesmoke; margin-left: 42px">
-          Mitglieder: {{squad.memberCount}}
-        </div>
-      </div>
-    </div>
+    <cc-army-squad *ngFor="let squad of army[1].squads"
+                   [squad]="squad"
+                   squadFraction="OPFOR"
+                   (memberSelect)="select($event)">
+    </cc-army-squad>
     <div class="member-count">Armeemitglieder: {{army[1].memberCount}}</div>
   </div>
-
 </div>

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

@@ -1,11 +1,8 @@
-import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Army} from '../models/model-interfaces';
 import {ArmyService} from '../services/army-service/army.service';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Fraction} from '../utils/fraction.enum';
-import {DOCUMENT} from '@angular/common';
-import {RouteConfig} from '../app.config';
-import {CSSHelpers} from '../global.helpers';
 
 
 @Component({
@@ -13,7 +10,7 @@ import {CSSHelpers} from '../global.helpers';
   templateUrl: './army.component.html',
   styleUrls: ['./army.component.css']
 })
-export class ArmyComponent implements OnInit, OnDestroy {
+export class ArmyComponent implements OnInit {
 
   army: Army[] = [{}, {}];
 
@@ -21,14 +18,10 @@ export class ArmyComponent implements OnInit, OnDestroy {
 
   constructor(private router: Router,
               private route: ActivatedRoute,
-              private armyService: ArmyService,
-              @Inject(DOCUMENT) private document) {
+              private armyService: ArmyService) {
   }
 
   ngOnInit() {
-    // set background image css
-    this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));
-
     // init army data
     this.armyService.getArmy()
         .subscribe(army => {
@@ -36,14 +29,8 @@ export class ArmyComponent implements OnInit, OnDestroy {
         });
   };
 
-  ngOnDestroy() {
-    if (!this.router.url.includes(RouteConfig.overviewPath)) {
-      this.document.getElementById('right').setAttribute('style', '');
-    }
-  }
-
   select(memberId) {
-    this.router.navigate([{outlets: {'right': ['member', memberId]}}], {relativeTo: this.route});
+    this.router.navigate(['member', memberId], {relativeTo: this.route});
   }
 
 }

static/src/app/army/army.routing.ts

@@ -1,20 +1,17 @@
 import {Routes} from '@angular/router';
 import {ArmyComponent} from './army.component';
-import {ArmyMemberComponent} from './army-member.component';
-
+import {ArmyMemberComponent} from './army-member/army-member.component';
+import {ArmySquadComponent} from './army-squad/army-squad.component';
 
 export const armyRoutes: Routes = [
   {
     path: '',
     component: ArmyComponent,
-    outlet: 'right'
   },
   {
     path: 'member/:id',
     component: ArmyMemberComponent,
-    outlet: 'right'
   }
 ];
 
-export const armyRoutingComponents = [ArmyComponent, ArmyMemberComponent];
-
+export const armyRoutingComponents = [ArmyComponent, ArmySquadComponent, ArmyMemberComponent];

static/src/app/common/show-error/show-error.component.ts

@@ -12,8 +12,10 @@ import {FormGroup, NgForm} from '@angular/forms';
 })
 export class ShowErrorComponent {
 
+  // tslint:disable-next-line:no-input-rename
   @Input('controlPath') controlPath;
 
+  // tslint:disable-next-line:no-input-rename
   @Input('displayName') displayName = '';
 
   private form: FormGroup;

static/src/app/common/user-interface/list-filter/list-filter.component.css

@@ -0,0 +1,34 @@
+.list-header {
+  width: 100%;
+  padding-bottom: 20px;
+}
+
+.add-btn {
+  margin-right: 16px;
+  margin-top: -3px;
+  float: right;
+}
+
+:host/deep/.mat-icon {
+  height: 32px;
+  width: 32px;
+}
+
+:host/deep/.mat-icon > svg {
+  color: #222222;
+}
+
+:host/deep/.mat-icon {
+  height: 32px;
+  width: 32px;
+}
+
+:host/deep/.mat-button-toggle {
+  background: white;
+  color: darkslategrey;
+}
+
+:host/deep/.mat-button-toggle-checked {
+  background: rgba(51, 122, 183, 0.64);
+  color: white;
+}

static/src/app/common/user-interface/list-filter/list-filter.component.html

@@ -0,0 +1,14 @@
+<div class="input-group list-header pull-left">
+  <mat-button-toggle-group #group="matButtonToggleGroup">
+    <mat-button-toggle *ngFor="let button of filterButtons" value="{{button.value}}" (change)="execute(group)">
+      {{button.label}}
+    </mat-button-toggle>
+  </mat-button-toggle-group>
+  <button mat-icon-button
+          class="add-btn"
+          matTooltip="{{addButton.tooltip}}"
+          (click)="add()">
+      <mat-icon svgIcon="{{addButton.svgIcon}}">
+    </mat-icon>
+  </button>
+</div>

static/src/app/common/user-interface/list-filter/list-filter.component.ts

@@ -0,0 +1,28 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+  selector: 'cc-list-filter',
+  templateUrl: './list-filter.component.html',
+  styleUrls: ['./list-filter.component.css']
+})
+export class ListFilterComponent {
+
+  @Input() filterButtons: any[];
+
+  @Input() addButton: any;
+
+  @Output() executeSearch = new EventEmitter();
+
+  @Output() openAddFrom = new EventEmitter();
+
+  constructor() {
+  }
+
+  execute(group) {
+    this.executeSearch.emit(group);
+  }
+
+  add() {
+    this.openAddFrom.emit();
+  }
+}

static/src/app/common/user-interface/search-field/search-field.component.css

@@ -0,0 +1,4 @@
+.list-header {
+  width: 100%;
+  padding-bottom: 20px;
+}

static/src/app/common/user-interface/search-field/search-field.component.html

@@ -0,0 +1,12 @@
+<div class="input-group list-header">
+  <input id="search-field"
+         type="text" #query class="form-control"
+         (keyup.enter)="emitSearch()"
+         [formControl]="searchTerm">
+  <span class="input-group-btn">
+      <button class="btn btn-default" type="button"
+              (click)="emitSearch()">
+        Suchen
+      </button>
+    </span>
+</div>

static/src/app/common/user-interface/search-field/search-field.component.ts

@@ -0,0 +1,43 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Location} from '@angular/common';
+import {ActivatedRoute} from '@angular/router';
+
+@Component({
+  selector: 'cc-list-search',
+  templateUrl: './search-field.component.html',
+  styleUrls: ['./search-field.component.css']
+})
+export class SearchFieldComponent implements OnInit {
+
+  @Input() searchTerm;
+
+  @Output() executeSearch = new EventEmitter();
+
+  @Output() searchTermStream = new EventEmitter();
+
+  constructor(private route: ActivatedRoute,
+              private location: Location) {
+  }
+
+  ngOnInit() {
+    const paramsObservable = this.route.queryParams
+                             .map(params => decodeURI(params['query'] || ''))
+                             .do(query => this.searchTerm.setValue(query));
+
+    const searchTermObservable = this.searchTerm.valueChanges
+                                .debounceTime(400)
+                                .do(query => this.adjustBrowserUrl(query));
+    this.searchTermStream.emit({params: paramsObservable, searchTerm: searchTermObservable});
+  }
+
+  emitSearch() {
+    this.executeSearch.emit();
+  }
+
+  adjustBrowserUrl(queryString = '') {
+    const absoluteUrl = this.location.path().split('?')[0];
+    const queryPart = queryString !== '' ? `query=${queryString}` : '';
+
+    this.location.replaceState(absoluteUrl, queryPart);
+  }
+}

static/src/app/decorations/decoration-list/decoration-item.component.html

@@ -18,7 +18,7 @@
            [style.max-width]="imgStyle.width"
            [style.margin-top]="imgStyle.marginTop"
            class="decoration-list-preview">
-      <span (click)="delete(); $event.stopPropagation()" title="Löschen" class="glyphicon glyphicon-trash trash"></span>
+      <span (click)="delete(); $event.stopPropagation()" matTooltip="Löschen" class="glyphicon glyphicon-trash trash"></span>
     </div>
   </div>
 </div>

static/src/app/decorations/decoration-list/decoration-list.component.html

@@ -1,33 +1,22 @@
 <div class="select-list">
-  <div class="input-group list-header pull-left">
-    <div class="btn-group" (click)="filterDecorations()">
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="BLUFOR" uncheckable>{{fraction.BLUFOR}}</label>
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="OPFOR" uncheckable>{{fraction.OPFOR}}</label>
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="GLOBAL" uncheckable>Global</label>
-    </div>
-    <a class="pull-right btn btn-success" (click)="openNewDecorationForm()">+</a>
-  </div>
+  <cc-list-filter
+    [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
+                      {label: fraction.OPFOR, value: 'OPFOR'},
+                      {label: 'Global', value: 'GLOBAL'}]"
+    [addButton]="{svgIcon: 'add', tooltip: 'Neue Auszeichnung hinzufügen'}"
+    (executeSearch)="filterDecorations($event)"
+    (openAddFrom)="openNewDecorationForm()">
+  </cc-list-filter>
 
-  <div class="input-group list-header">
-    <input id="search-tasks"
-           type="text" #query class="form-control"
-           (keyup.enter)="filterDecorations()"
-           [formControl]="searchTerm">
-    <span class="input-group-btn">
-      <button class="btn btn-default" type="button"
-              (click)="filterDecorations()">
-        Suchen
-      </button>
-    </span>
-  </div>
+  <cc-list-search [searchTerm]="searchTerm"
+                  (searchTermStream)="initObservable($event)"
+                  (executeSearch)="filterDecorations()">
+  </cc-list-search>
 
-  <div>
   <decoration-item *ngFor="let decoration of decorations$ | async"
                    [decoration]="decoration"
                    (decorationDelete)="deleteDecoration(decoration)"
                    (decorationSelected)="selectDecoration($event)"
                    [selected]="decoration._id == selectedDecorationId">
   </decoration-item>
-  </div>
-
 </div>

static/src/app/decorations/decoration-list/decoration-list.component.ts

@@ -1,5 +1,4 @@
 import {Component, OnInit} from '@angular/core';
-import {Location} from '@angular/common';
 
 import {FormControl} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
@@ -7,9 +6,11 @@ import {Observable} from 'rxjs/Observable';
 import {Decoration} from '../../models/model-interfaces';
 import {DecorationService} from '../../services/army-management/decoration.service';
 import {Fraction} from '../../utils/fraction.enum';
+import {MatButtonToggleGroup} from '@angular/material';
+import {UIHelpers} from '../../utils/global.helpers';
 
 @Component({
-  selector: 'decoration-list',
+  selector: 'cc-decoration-list',
   templateUrl: './decoration-list.component.html',
   styleUrls: ['./decoration-list.component.css', '../../style/select-list.css']
 })
@@ -21,28 +22,21 @@ export class DecorationListComponent implements OnInit {
 
   searchTerm = new FormControl();
 
-  public radioModel: string;
+  radioModel = '';
 
   readonly fraction = Fraction;
 
   constructor(private decorationService: DecorationService,
               private router: Router,
-              private route: ActivatedRoute,
-              private location: Location) {
+              private route: ActivatedRoute) {
   }
 
   ngOnInit() {
     this.decorations$ = this.decorationService.decorations$;
+  }
 
-    const paramsStream = this.route.queryParams
-                             .map(params => decodeURI(params['query'] || ''))
-                             .do(query => this.searchTerm.setValue(query));
-
-    const searchTermStream = this.searchTerm.valueChanges
-                                 .debounceTime(400)
-                                 .do(query => this.adjustBrowserUrl(query));
-
-    Observable.merge(paramsStream, searchTermStream)
+  initObservable(observables: any) {
+    Observable.merge(observables.params as Observable<string>, observables.searchTerm)
               .distinctUntilChanged()
               .switchMap(query => this.decorationService.findDecorations(query, this.radioModel))
               .subscribe();
@@ -73,15 +67,8 @@ export class DecorationListComponent implements OnInit {
     }
   }
 
-  filterDecorations() {
+  filterDecorations(group?: MatButtonToggleGroup) {
+    this.radioModel = UIHelpers.toggleReleaseButton(this.radioModel, group);
     this.decorations$ = this.decorationService.findDecorations(this.searchTerm.value, this.radioModel);
   }
-
-  adjustBrowserUrl(queryString = '') {
-    const absoluteUrl = this.location.path().split('?')[0];
-    const queryPart = queryString !== '' ? `query=${queryString}` : '';
-
-    this.location.replaceState(absoluteUrl, queryPart);
-  }
-
 }

static/src/app/decorations/decoration.component.html

@@ -1 +0,0 @@
-<router-outlet></router-outlet>

static/src/app/decorations/decoration.component.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'cc-decorations',
-  templateUrl: './decoration.component.html',
-  styleUrls: ['./decoration.component.css']
-})
-export class DecorationComponent {
-  constructor() {
-  }
-}

static/src/app/decorations/decoration.module.ts

@@ -4,11 +4,10 @@ import {CommonModule} from '@angular/common';
 import {DecorationStore} from '../services/stores/decoration.store';
 import {DecorationService} from '../services/army-management/decoration.service';
 import {NgModule} from '@angular/core';
-import {ButtonsModule} from 'ngx-bootstrap';
 
 @NgModule({
   declarations: decorationsRoutingComponents,
-  imports: [CommonModule, SharedModule, ButtonsModule.forRoot(), decorationRoutesModule],
+  imports: [CommonModule, SharedModule, decorationRoutesModule],
   providers: [DecorationStore, DecorationService]
 })
 export class DecorationsModule {

static/src/app/decorations/decoration.routing.ts

@@ -1,19 +1,15 @@
 import {RouterModule, Routes} from '@angular/router';
-import {DecorationComponent} from './decoration.component';
 import {DecorationListComponent} from './decoration-list/decoration-list.component';
 import {EditDecorationComponent} from './edit-decoration/edit-decoration.component';
 import {ModuleWithProviders} from '@angular/core';
 import {DecorationItemComponent} from './decoration-list/decoration-item.component';
 
-export const decorationsRoutes: Routes = [{
-  path: '', component: DecorationComponent,
-  children: [
+export const decorationsRoutes: Routes = [
   {
     path: '',
-      component: DecorationListComponent
-    }
-  ]
-},
+    component: DecorationListComponent,
+    outlet: 'left'
+  },
   {
     path: 'new',
     component: EditDecorationComponent,
@@ -27,6 +23,5 @@ export const decorationsRoutes: Routes = [{
 
 export const decorationRoutesModule: ModuleWithProviders = RouterModule.forChild(decorationsRoutes);
 
-export const decorationsRoutingComponents = [DecorationItemComponent, DecorationComponent, DecorationListComponent,
-  EditDecorationComponent];
+export const decorationsRoutingComponents = [DecorationItemComponent, DecorationListComponent, EditDecorationComponent];
 

static/src/app/decorations/edit-decoration/edit-decoration.component.html

@@ -1,4 +1,4 @@
-<form #form="ngForm" class="overview">
+<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
   <h3 *ngIf="decoration._id">Auszeichnung editieren</h3>
   <h3 *ngIf="!decoration._id">Neue Auszeichnung hinzufügen</h3>
 
@@ -70,16 +70,10 @@
   </button>
 
   <button id="save"
+          type="submit"
           (click)="saveDecoration(fileInput)"
           class="btn btn-default"
           [disabled]="!form.valid">
     Bestätigen
   </button>
-
-  <span *ngIf="showSuccessLabel"
-        class="label label-success label-small"
-        style="margin-left: inherit">
-        Erfolgreich gespeichert
-  </span>
-
 </form>

static/src/app/decorations/edit-decoration/edit-decoration.component.ts

@@ -5,6 +5,8 @@ import {Decoration} from '../../models/model-interfaces';
 import {DecorationService} from '../../services/army-management/decoration.service';
 import {Subscription} from 'rxjs/Subscription';
 import {Fraction} from '../../utils/fraction.enum';
+import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
+import {Message} from '../../i18n/de.messages';
 
 @Component({
   templateUrl: './edit-decoration.component.html',
@@ -22,15 +24,14 @@ export class EditDecorationComponent implements OnInit, OnDestroy {
 
   imagePreviewSrc;
 
-  showSuccessLabel = false;
-
   @ViewChild(NgForm) form: NgForm;
 
   readonly fraction = Fraction;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private decorationService: DecorationService) {
+              private decorationService: DecorationService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -81,10 +82,7 @@ export class EditDecorationComponent implements OnInit, OnDestroy {
               this.imagePreviewSrc = 'resource/decoration/' + this.decoration._id + '.png?' + Date.now();
             }, 300);
             fileInput.value = '';
-            this.showSuccessLabel = true;
-            setTimeout(() => {
-              this.showSuccessLabel = false;
-            }, 2000);
+            this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
           });
     }
   }

static/src/app/global.helpers.ts

@@ -1,9 +0,0 @@
-export const CSSHelpers = {
-  getBackgroundCSS: (imageUrl) => {
-    return 'background-image: url(' + imageUrl + ');' +
-      'background-size: cover;' +
-      'background-attachment: fixed;' +
-      'background-position: center;' +
-      'background-repeat: no-repeat;';
-  }
-};

static/src/app/i18n/de.messages.ts

@@ -0,0 +1,5 @@
+export enum Message {
+  SIGN_UP_SUCCESS = 'Account erfolgreich erstellt',
+  SUCCESS_SAVE = 'Erfolgreich gespeichert',
+  DUPLICATED_NAME_ERR = 'Benutzername existiert bereits',
+}

static/src/app/login/login.component.css

@@ -4,6 +4,14 @@
   margin: 0 auto;
 }
 
+.form-signin > .row {
+  width: 400px;
+}
+
+.form-signin-heading {
+  text-align: center;
+}
+
 .form-signin .form-signin-heading, .form-signin .checkbox, #inputEmail {
   margin-bottom: 10px;
 }
@@ -38,39 +46,8 @@
   border-top-right-radius: 0;
 }
 
-.account-wall {
-  margin-top: 20px;
-  padding: 40px 0px 20px 0px;
-  background-color: #f7f7f7;
-  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-}
-
-.login-title {
-  color: #555;
-  font-size: 18px;
-  font-weight: 400;
-  display: block;
-}
-
-.profile-img {
-  width: 96px;
-  height: 96px;
-  margin: 0 auto 10px;
-  display: block;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-
-.need-help {
-  margin-top: 10px;
-}
-
-.new-account {
-  display: block;
-  margin-top: 10px;
+button {
+  width: 100%;
 }
 
 /* Loading Animation */

static/src/app/login/login.component.html

@@ -1,7 +1,6 @@
 <form class="form-signin" (ngSubmit)="login(userName.value, password.value)">
-
-  <div class="row" style="position: absolute;width: 400px;left: 40%;">
-    <h2 style="text-align: center;" class="form-signin-heading">Anmelden</h2>
+  <div class="row">
+    <h2 class="form-signin-heading">Login</h2>
 
     <label for="inputEmail" class="sr-only">Benutzername</label>
     <input #userName id="inputEmail" class="form-control" placeholder="Benutzername" required="" autofocus="">
@@ -9,19 +8,12 @@
     <label for="inputPassword" class="sr-only">Passwort</label>
     <input #password type="password" id="inputPassword" class="form-control" placeholder="Passwort" required="">
 
-
     <div class="form-group">
-      <button type="submit" class="btn btn-lg btn-block btn-primary">
+      <button mat-stroked-button type="submit">
         <span *ngIf="!loading">Anmelden</span>
         <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
       </button>
-      <span *ngIf="showErrorLabel"
-            class="center-block label label-danger" style="font-size: medium; padding: 2px; margin-top: 2px">
-        {{error}}
-      </span>
     </div>
-
-
   </div>
 </form>
 

static/src/app/login/login.component.ts

@@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
 import {LoginService} from '../services/app-user-service/login-service';
 import {RouteConfig} from '../app.config';
+import {SnackBarService} from '../services/user-interface/snack-bar/snack-bar.service';
 
 
 @Component({
@@ -12,16 +13,13 @@ import {RouteConfig} from '../app.config';
 
 export class LoginComponent implements OnInit {
 
-  showErrorLabel = false;
-
-  error: string;
-
   loading = false;
 
   returnUrl: string;
 
   constructor(private router: Router,
-              private loginService: LoginService) {
+              private loginService: LoginService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -40,11 +38,7 @@ export class LoginComponent implements OnInit {
               this.router.navigate([this.returnUrl]);
             },
             error => {
-              this.error = error._body;
-              this.showErrorLabel = true;
-              setTimeout(() => {
-                this.showErrorLabel = false;
-              }, 4000);
+              this.snackBarService.showError(error._body, 15000);
               this.loading = false;
             });
     }

static/src/app/login/signup.component.html

@@ -1,11 +1,11 @@
 <form class="form-signin" (ngSubmit)="login(userName.value, password.value, secret.value)">
 
-  <div class="row">
+  <div class="row" style="position: absolute;width: 500px;left: 40%;">
     <h2 style="text-align: center;" class="form-signin-heading">Registrieren</h2>
 
     <p>Dieses Formular nur ausfüllen wenn du einer <b>HL</b> angehörst oder <b>SQL</b> bist. Dabei den Nutzernamen aus
       dem OPT Forum verwenden!
-      Im Forum eine Nachricht an <a href="https://operation-pandora.com/dashboard/index.php?conversation-add/&userID=9"
+      Im Forum eine Nachricht an <a href="https://www.opt4.net/dashboard/index.php?conversation-add/&userID=9"
                                     target="_blank">HardiReady</a>
       senden, in welcher der 'geheime Text' steht, den du bei der Registrierung nutzt.<br>
       Dabei kann es sich um irgend eine willkürliche Zeichenfolge oder einen Satz handeln - dient nur dem Abgleich.
@@ -21,28 +21,12 @@
     <input #secret type="text" id="inputSecret" class="form-control" placeholder="Geheimer Text für PN Abgleich"
            required="">
 
-
     <div class="form-group">
       <button type="submit" class="btn btn-lg btn-block btn-primary">
         <span *ngIf="!loading">Registrieren</span>
         <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
       </button>
-      <h3 class="text-center">
-        <span *ngIf="showSuccessLabel"
-              class="label label-success label-small"
-              style="margin-left: inherit">
-          Account erfolgreich erstellt
-        </span>
-      </h3>
-      <span *ngIf="showErrorLabel"
-            class="center-block label label-danger" style="font-size: medium; padding: 2px; margin-top: 2px">
-        {{error}}
-    </span>
     </div>
-
-
   </div>
-
-
 </form>
 

static/src/app/login/signup.component.ts

@@ -2,6 +2,8 @@ import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {LoginService} from '../services/app-user-service/login-service';
 import {RouteConfig} from '../app.config';
+import {Message} from '../i18n/de.messages';
+import {SnackBarService} from '../services/user-interface/snack-bar/snack-bar.service';
 
 
 @Component({
@@ -12,19 +14,14 @@ import {RouteConfig} from '../app.config';
 
 export class SignupComponent implements OnInit {
 
-  showErrorLabel = false;
-
-  showSuccessLabel = false;
-
-  error: string;
-
   loading = false;
 
   returnUrl: string;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private loginService: LoginService) {
+              private loginService: LoginService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -41,15 +38,11 @@ export class SignupComponent implements OnInit {
           .subscribe(
             data => {
               this.loading = false;
-              this.showSuccessLabel = true;
+              this.snackBarService.showSuccess(Message.SIGN_UP_SUCCESS);
             },
             error => {
-              this.error = error;
-              this.showErrorLabel = true;
-              setTimeout(() => {
-                this.showErrorLabel = false;
-              }, 4000);
               this.loading = false;
+              this.snackBarService.showError(error, 10000);
             });
     }
   }

static/src/app/pub/decoration-overview/decoration-overview.component.css

@@ -0,0 +1,94 @@
+:host {
+  display: flow-root;
+  height: 100%;
+  width: 100%;
+  margin-top: -23px;
+  padding-top: 23px;
+  padding-bottom: 23px;
+  background-image: url('../../../assets/bg.jpg');
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: top;
+  background-repeat: no-repeat;
+}
+
+h1 {
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.decoration-overview-container {
+  position: relative;
+  margin: auto 140px 30px;
+}
+
+:host /deep/ .mat-tab-header {
+  background-color: #222222;
+}
+
+:host /deep/ .mat-tab-label {
+  font-size: 16px;
+  color: #dadada;
+}
+
+:host /deep/ .mat-tab-group.mat-primary .mat-ink-bar {
+  background-color: #ffd740;
+}
+
+:host /deep/ .mat-tab-group.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus {
+  background-color: #222222;
+}
+
+:host /deep/ div.mat-tab-body-wrapper {
+  box-shadow: #666666 2px 2px 8px;
+}
+
+:host /deep/ .mat-tab-body-content {
+  background-color: rgba(255, 255, 255, 0.35);
+  height: calc(100vh - 241px);
+  min-width: 560px;
+  padding: 1em 1.5em;
+}
+
+.fraction-side-bar {
+  float: left;
+  width: 10%;
+  min-width: 100px;
+  height: calc(100vh - 192px);
+  background: #222222;;
+  box-shadow: #666666 2px 2px 8px;
+}
+
+.fraction-side-bar > div {
+  text-align: center;
+  padding: 12px 25px;
+  margin-bottom: 15px;
+  font-size: 16px;
+  color: #666;
+  cursor: pointer;
+  border-top: 1px solid #666666;
+  border-bottom: 1px solid #666666;
+}
+
+.fraction-side-bar > div:first-child {
+  margin-top: 100%;
+}
+
+.fraction-side-bar > div.active {
+  background-color: #080808;
+  color: white;
+}
+
+/* SCROLL BAR */
+
+:host /deep/ .mat-tab-body-content::-webkit-scrollbar {
+  width: 12px;
+}
+
+:host /deep/ .mat-tab-body-content::-webkit-scrollbar-track {
+  border-left: 1px solid #080808;
+}
+
+:host /deep/ .mat-tab-body-content::-webkit-scrollbar-thumb {
+  background: #222222;
+}

static/src/app/pub/decoration-overview/decoration-overview.component.html

@@ -0,0 +1,28 @@
+<div class="decoration-overview-container">
+  <h1>Übersicht über alle Auszeichnungen</h1>
+
+  <div class="fraction-side-bar">
+    <div [ngClass]="{active: active === 'BLUFOR'}" (click)="switchFraction('BLUFOR')">{{fraction.BLUFOR}}</div>
+    <div [ngClass]="{active: active === 'OPFOR'}" (click)="switchFraction('OPFOR')">{{fraction.OPFOR}}</div>
+    <div [ngClass]="{active: active === 'GLOBAL'}" (click)="switchFraction('GLOBAL')">GLOBAL</div>
+  </div>
+
+  <mat-tab-group [selectedIndex]="selectedType" (selectedIndexChange)="switchTab($event)">
+    <mat-tab label="Orden">
+      <ng-template matTabContent>
+        <cc-decoration-panel *ngFor="let decoration of medals"
+                             [decoration]="decoration"
+                             (select)="select($event)">
+        </cc-decoration-panel>
+      </ng-template>
+    </mat-tab>
+    <mat-tab label="Ordensbänder">
+      <ng-template matTabContent>
+        <cc-decoration-panel *ngFor="let decoration of ribbons"
+                             [decoration]="decoration"
+                             (select)="select($event)">
+        </cc-decoration-panel>
+      </ng-template>
+    </mat-tab>
+  </mat-tab-group>
+</div>

static/src/app/pub/decoration-overview/decoration-overview.component.ts

@@ -0,0 +1,84 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+
+import {Fraction} from '../../utils/fraction.enum';
+import {Decoration} from '../../models/model-interfaces';
+import {DecorationService} from '../../services/army-management/decoration.service';
+import {MatBottomSheet} from '@angular/material';
+import {UserListSheetComponent} from '../user-list-sheet/user-list-sheet.component';
+import {Location} from '@angular/common';
+
+
+@Component({
+  selector: 'cc-decoration-overview',
+  templateUrl: './decoration-overview.component.html',
+  styleUrls: ['./decoration-overview.component.css']
+})
+export class DecorationOverviewComponent implements OnInit {
+
+  decorations: Decoration[];
+
+  medals: Decoration[];
+
+  ribbons: Decoration[];
+
+  active: string;
+
+  selectedType = 0;
+
+  readonly fraction = Fraction;
+
+  constructor(private router: Router,
+              private route: ActivatedRoute,
+              private location: Location,
+              private decorationService: DecorationService,
+              private bottomSheet: MatBottomSheet) {
+  }
+
+  ngOnInit() {
+    // init decoration data
+    this.decorationService.findDecorations()
+        .subscribe(decorations => {
+          this.decorations = decorations;
+          const queryParams = this.route.snapshot.queryParams;
+          if (queryParams.type < 2) {
+            this.selectedType = queryParams.type;
+          }
+
+          const fract = queryParams.fraction;
+          if (fract && (fract === 'BLUFOR' || fract === 'OPFOR' || fract === 'GLOBAL')) {
+            this.switchFraction(queryParams.fraction);
+          } else {
+            this.switchFraction('BLUFOR');
+          }
+        });
+  };
+
+  switchFraction(value: any) {
+    this.medals = this.decorations.filter(d => d.fraction === value && d.isMedal);
+    this.ribbons = this.decorations.filter(d => d.fraction === value && !d.isMedal);
+    this.active = value;
+    this.adjustBrowserUrl(value)
+  }
+
+  switchTab(tabIndex) {
+    this.selectedType = tabIndex;
+    this.adjustBrowserUrl(this.active)
+  }
+
+  select(decoration: Decoration) {
+    this.bottomSheet.open(UserListSheetComponent, {data: {decoration: decoration}});
+  }
+
+  adjustBrowserUrl(fractionKey = '') {
+    const absoluteUrl = this.location.path().split('?')[0];
+    if (fractionKey === 'BLUFOR' && this.selectedType === 0) {
+      this.location.replaceState(absoluteUrl);
+      return;
+    }
+    const queryPart = fractionKey !== '' ? 'fraction='.concat(fractionKey)
+                                                      .concat('&type=' + this.selectedType) : 'type=0';
+
+    this.location.replaceState(absoluteUrl, queryPart);
+  }
+}

static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css

@@ -0,0 +1,67 @@
+.decoration-card {
+  background: rgba(255, 255, 255, 0.87);
+  width: 213px;
+  height: 258px;
+  margin: 7px 12px;
+  padding: 0;
+  overflow: hidden;
+  float: left;
+  cursor: pointer;
+}
+
+.decoration-card:hover {
+  background: #ffffff;
+  overflow: visible;
+  box-shadow: 0 0 18px 2px #666666;
+}
+
+.decoration-description {
+  text-align: left;
+}
+
+.decoration-card:hover .decoration-description {
+  background: #ffffff;
+  position: relative;
+  z-index: 5;
+}
+
+.image-head {
+  height: 100px;
+  text-align: center;
+  padding: 12px;
+}
+
+.decoration-card .mat-card-content > div {
+  padding: 8px;
+}
+
+.decoration-card .mat-card-content > div:first-child {
+  color: white;
+  display: inherit;
+  text-align: center;
+  word-wrap: break-word;
+}
+
+img.img-medal {
+  height: 100%;
+}
+
+img.img-ribbon {
+  padding-top: 10%;
+  width: 55%;
+}
+
+.gradient {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 24px;
+  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(70%, rgba(255, 255, 255, 0.84)));
+  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
+  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
+  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
+}

static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.html

@@ -0,0 +1,18 @@
+<mat-card class="decoration-card" (click)="selectDecoration()">
+  <div class="image-head">
+    <img src="resource/decoration/{{decoration._id}}.png"
+         alt="{{decoration.name}}"
+         [class]="decoration.isMedal ? 'img-medal' : 'img-ribbon'">
+  </div>
+  <mat-card-content>
+    <div [style.background]="decoration.fraction === 'BLUFOR' ?
+    fraction.COLOR_BLUFOR : decoration.fraction === 'OPFOR' ? fraction.COLOR_OPFOR : '#666666'">
+      {{decoration.name}}
+    </div>
+    <div class="decoration-description">
+      {{decoration.description}}
+    </div>
+    <div class="gradient">
+    </div>
+  </mat-card-content>
+</mat-card>

static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.ts

@@ -0,0 +1,23 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+import {Decoration} from '../../../models/model-interfaces';
+import {Fraction} from '../../../utils/fraction.enum';
+
+
+@Component({
+  selector: 'cc-decoration-panel',
+  templateUrl: './decoration-panel.component.html',
+  styleUrls: ['./decoration-panel.component.css']
+})
+export class DecorationPanelComponent {
+
+  @Input() decoration: Decoration;
+
+  @Output() select = new EventEmitter();
+
+  readonly fraction = Fraction;
+
+  selectDecoration() {
+    this.select.emit(this.decoration);
+  }
+}

static/src/app/pub/public.module.ts

@@ -0,0 +1,23 @@
+import {NgModule} from '@angular/core';
+import {SharedModule} from '../shared.module';
+import {CommonModule} from '@angular/common';
+import {RankService} from '../services/army-management/rank.service';
+import {pubRouterModule, pubRoutingComponents} from './public.routing';
+import {DecorationService} from '../services/army-management/decoration.service';
+import {MatTableModule} from '@angular/material/table';
+import {MatCardModule} from '@angular/material/card';
+import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
+import {MatListModule} from '@angular/material/list';
+import {MatTabsModule} from '@angular/material/tabs';
+import {UserListSheetComponent} from './user-list-sheet/user-list-sheet.component';
+
+@NgModule({
+  declarations: pubRoutingComponents,
+  entryComponents: [UserListSheetComponent],
+  imports: [CommonModule, SharedModule, MatTableModule, MatCardModule, MatBottomSheetModule, MatListModule,
+    MatTabsModule, pubRouterModule],
+  providers: [DecorationService, RankService]
+})
+export class PublicModule {
+  static routes = pubRouterModule;
+}

static/src/app/pub/public.routing.ts

@@ -0,0 +1,29 @@
+import {RouterModule, Routes} from '@angular/router';
+import {RankOverviewComponent} from './rank-overview/rank-overview.component';
+import {ModuleWithProviders} from '@angular/core';
+import {DecorationOverviewComponent} from './decoration-overview/decoration-overview.component';
+import {DecorationPanelComponent} from './decoration-overview/decoration-panel/decoration-panel.component';
+import {RankPanelComponent} from './rank-overview/rank-panel/rank-panel.component';
+import {UserListSheetComponent} from './user-list-sheet/user-list-sheet.component';
+
+export const publicRoutes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: 'ranks',
+        component: RankOverviewComponent,
+      },
+      {
+        path: 'decorations',
+        component: DecorationOverviewComponent,
+      },
+    ]
+  },
+];
+
+export const pubRouterModule: ModuleWithProviders = RouterModule.forChild(publicRoutes);
+
+export const pubRoutingComponents = [RankOverviewComponent, DecorationOverviewComponent, DecorationPanelComponent,
+  RankPanelComponent, UserListSheetComponent];
+

static/src/app/pub/rank-overview/rank-overview.component.css

@@ -0,0 +1,49 @@
+:host {
+  display: flow-root;
+  height: 100%;
+  min-height: 100vh;
+  width: 100%;
+  margin-top: -23px;
+  padding-top: 23px;
+  padding-bottom: 23px;
+  background-image: url('../../../assets/bg.jpg');
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: top;
+  background-repeat: no-repeat;
+}
+
+table {
+  width: 100%;
+}
+
+:host /deep/ table.mat-table {
+  background: rgba(255, 255, 255, 0.6);
+}
+
+:host /deep/ tr.mat-row:hover {
+  background: #ffffff;
+  cursor: pointer;
+}
+
+td > img {
+  height: 120px;
+  padding: 8px;
+}
+
+h1, h3 {
+  text-align: center;
+}
+
+h3 {
+  font-weight: bolder;
+  padding-bottom: 14px;
+  padding-top: 11px;
+  margin-bottom: 0;
+  background: #222222;
+}
+
+.column-container {
+  width: 48%;
+  padding-bottom: 20px;
+}

static/src/app/pub/rank-overview/rank-overview.component.html

@@ -0,0 +1,43 @@
+<div style="width: 1000px; margin:auto; position: relative;">
+  <h1>Übersicht über alle Ränge</h1>
+
+  <div class="column-container pull-left">
+    <h3 [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
+
+    <table mat-table [dataSource]="ranksBlufor" class="mat-elevation-z8">
+
+      <ng-container matColumnDef="picture">
+        <th mat-header-cell *matHeaderCellDef> Rankabzeichen</th>
+        <td mat-cell *matCellDef="let element"><img src="resource/rank/{{element._id}}.png"></td>
+      </ng-container>
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name</th>
+        <td mat-cell *matCellDef="let element"> {{element.name}}</td>
+      </ng-container>
+
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>
+    </table>
+  </div>
+
+  <div class="column-container pull-right">
+    <h3 [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
+
+    <table mat-table [dataSource]="ranksOpfor" class="pull-right mat-elevation-z8">
+
+      <ng-container matColumnDef="picture">
+        <th mat-header-cell *matHeaderCellDef> Rankabzeichen</th>
+        <td mat-cell *matCellDef="let element"><img src="resource/rank/{{element._id}}.png"></td>
+      </ng-container>
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name</th>
+        <td mat-cell *matCellDef="let element">{{element.name}}</td>
+      </ng-container>
+
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>
+    </table>
+  </div>
+
+
+</div>

static/src/app/pub/rank-overview/rank-overview.component.ts

@@ -0,0 +1,43 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Fraction} from '../../utils/fraction.enum';
+import {Rank} from '../../models/model-interfaces';
+import {RankService} from '../../services/army-management/rank.service';
+import {MatBottomSheet} from '@angular/material';
+import {UserListSheetComponent} from '../user-list-sheet/user-list-sheet.component';
+
+
+@Component({
+  selector: 'cc-rank-overview',
+  templateUrl: './rank-overview.component.html',
+  styleUrls: ['./rank-overview.component.css']
+})
+export class RankOverviewComponent implements OnInit {
+
+  ranksOpfor: Rank[];
+
+  ranksBlufor: Rank[];
+
+  displayedColumns: string[] = ['picture', 'name'];
+
+  readonly fraction = Fraction;
+
+  constructor(private router: Router,
+              private route: ActivatedRoute,
+              private rankService: RankService,
+              private bottomSheet: MatBottomSheet) {
+  }
+
+  ngOnInit() {
+    // init rank data
+    this.rankService.findRanks()
+        .subscribe(ranks => {
+          this.ranksBlufor = ranks.filter(r => r.fraction === 'BLUFOR');
+          this.ranksOpfor = ranks.filter(r => r.fraction === 'OPFOR');
+        });
+  };
+
+  selectRow(rank: Rank) {
+    this.bottomSheet.open(UserListSheetComponent, {data: {rank: rank}});
+  }
+}

static/src/app/pub/rank-overview/rank-panel/rank-panel.component.css

@@ -0,0 +1,30 @@
+.rank-card {
+  background: rgba(255, 255, 255, 0.87);
+  width: 275px;
+  height: 160px;
+  margin: 6px;
+  padding: 0;
+  overflow: hidden;
+  float: left;
+  cursor: pointer;
+}
+
+.rank-card:hover {
+  background: #ffffff;
+  overflow: visible;
+  box-shadow: 0 0 18px 2px #666666;
+}
+
+.rank-image {
+  float: left;
+  padding: 20px 20px 20px 25px;
+}
+
+.rank-name {
+  width: 169px;
+  height: 100%;
+  display: table-cell;
+  padding-top: 36%;
+  word-break: break-all;
+  word-wrap: break-word;
+}

static/src/app/pub/rank-overview/rank-panel/rank-panel.component.html

@@ -0,0 +1,11 @@
+<mat-card class="rank-card" (click)="selectRank()">
+  <mat-card-content>
+    <div class="rank-image">
+      <img src="resource/rank/{{rank._id}}.png"
+           alt="{{rank.name}}">
+    </div>
+    <div class="rank-name">
+      {{rank.name}}
+    </div>
+  </mat-card-content>
+</mat-card>

static/src/app/pub/rank-overview/rank-panel/rank-panel.component.ts

@@ -0,0 +1,21 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Rank} from '../../../models/model-interfaces';
+import {Fraction} from '../../../utils/fraction.enum';
+
+@Component({
+  selector: 'cc-rank-panel',
+  templateUrl: './rank-panel.component.html',
+  styleUrls: ['./rank-panel.component.css']
+})
+export class RankPanelComponent {
+
+  @Input() rank: Rank;
+
+  @Output() select = new EventEmitter();
+
+  readonly fraction = Fraction;
+
+  selectRank() {
+    this.select.emit(this.rank);
+  }
+}

static/src/app/pub/user-list-sheet/user-list-sheet.component.html

@@ -0,0 +1,28 @@
+<div *ngIf="data.rank">
+  <img src="resource/rank/{{data.rank._id}}.png" height="65" style="float:left;">
+  <h4 style="text-align: center;height: 65px; padding-top: 20px;">
+    Aktive Teilnehmer mit Rang: {{data.rank.name}}
+  </h4>
+</div>
+
+<div *ngIf="data.decoration">
+  <img src="resource/decoration/{{data.decoration._id}}.png"
+       height="{{data.decoration.isMedal ? 65 : 32}}"
+       style="float:left;">
+  <h4 style="text-align: center;"
+      [style.height]="data.decoration.isMedal ? '65px' : 'inherit'"
+      [style.padding-top]="data.decoration.isMedal ? '20px' : 'inherit'">
+    Aktive Teilnehmer mit {{data.decoration.isMedal ? 'Orden' : 'Ordensband'}}: {{data.decoration.name}}
+  </h4>
+</div>
+
+<mat-nav-list *ngFor="let user of users">
+  <a mat-list-item (click)="selectUser(user)">
+      <span mat-line>
+        {{user.username}}
+      </span>
+    <span mat-line [style.color]="user.squadId.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR :fraction.COLOR_OPFOR">
+        {{user.squadId.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}} -  {{user.squadId.name}}
+      </span>
+  </a>
+</mat-nav-list>

static/src/app/pub/user-list-sheet/user-list-sheet.component.ts

@@ -0,0 +1,53 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef} from '@angular/material';
+import {RankOverviewComponent} from '../rank-overview/rank-overview.component';
+import {ActivatedRoute, Router} from '@angular/router';
+import {RankService} from '../../services/army-management/rank.service';
+import {DecorationService} from '../../services/army-management/decoration.service';
+import {UserService} from '../../services/army-management/user.service';
+import {User} from '../../models/model-interfaces';
+import {Fraction} from '../../utils/fraction.enum';
+
+@Component({
+  selector: 'cc-user-list-sheet',
+  templateUrl: 'user-list-sheet.component.html',
+})
+export class UserListSheetComponent implements OnInit {
+
+  users: User[];
+
+  readonly fraction = Fraction;
+
+  constructor(private router: Router,
+              private route: ActivatedRoute,
+              private userService: UserService,
+              private rankService: RankService,
+              private decorationService: DecorationService,
+              private bottomSheetRef: MatBottomSheetRef<RankOverviewComponent>,
+              @Inject(MAT_BOTTOM_SHEET_DATA) public data: any) {
+  }
+
+  ngOnInit() {
+    if (this.data.decoration) {
+      const itemId = this.data.decoration._id;
+      this.decorationService.getDecoration(itemId).subscribe(decoration => {
+        this.userService.findUsers({decorationId: decoration._id}).subscribe(users => {
+          this.users = users.filter(user => user.squadId != null);
+        });
+      });
+    } else if (this.data.rank) {
+      // Rank
+      const itemId = this.data.rank._id;
+      this.rankService.getRank(itemId).subscribe(rank => {
+        this.userService.findUsers({fraction: rank.fraction}).subscribe(users => {
+          this.users = users.filter(user => user.squadId != null && user.rankLvl === rank.level);
+        });
+      });
+    }
+  }
+
+  selectUser(user) {
+    this.bottomSheetRef.dismiss();
+    this.router.navigate(['overview', 'member', user._id]);
+  }
+}

static/src/app/ranks/edit-rank/edit-rank.component.html

@@ -1,4 +1,4 @@
-<form #form="ngForm" class="overview">
+<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
   <h3 *ngIf="rank._id">Rang editieren</h3>
   <h3 *ngIf="!rank._id">Neuen Rang hinzufügen</h3>
 
@@ -51,16 +51,10 @@
   </button>
 
   <button id="save"
+          type="submit"
           (click)="saveRank(fileInput)"
           class="btn btn-default"
           [disabled]="!form.valid">
     Bestätigen
   </button>
-
-  <span *ngIf="showSuccessLabel"
-        class="label label-success label-small"
-        style="margin-left: inherit">
-        Erfolgreich gespeichert
-  </span>
-
 </form>

static/src/app/ranks/edit-rank/edit-rank.component.ts

@@ -5,6 +5,8 @@ import {Rank} from '../../models/model-interfaces';
 import {RankService} from '../../services/army-management/rank.service';
 import {Subscription} from 'rxjs/Subscription';
 import {Fraction} from '../../utils/fraction.enum';
+import {Message} from '../../i18n/de.messages';
+import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
 
 
 @Component({
@@ -25,15 +27,14 @@ export class EditRankComponent implements OnInit, OnDestroy {
 
   imagePreviewSrc;
 
-  showSuccessLabel = false;
-
   @ViewChild(NgForm) form: NgForm;
 
   readonly fraction = Fraction;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private rankService: RankService) {
+              private rankService: RankService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -85,10 +86,7 @@ export class EditRankComponent implements OnInit, OnDestroy {
               this.imagePreviewSrc = 'resource/rank/' + this.rank._id + '.png?' + Date.now();
             }, 300);
             fileInput.value = '';
-            this.showSuccessLabel = true;
-            setTimeout(() => {
-              this.showSuccessLabel = false;
-            }, 2000);
+            this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
           });
     }
   }

static/src/app/ranks/rank-list/rank-item.component.html

@@ -13,7 +13,7 @@
 
     <div class="col-xs-4">
       <img src="{{imageSrc}}" class="rank-list-preview">
-      <span (click)="delete(); $event.stopPropagation()" title="Löschen" class="glyphicon glyphicon-trash trash"></span>
+      <span (click)="delete(); $event.stopPropagation()" matTooltip="Löschen" class="glyphicon glyphicon-trash trash"></span>
     </div>
 
   </div>

static/src/app/ranks/rank-list/rank-list.component.html

@@ -1,32 +1,22 @@
 <div class="select-list">
-  <div class="input-group list-header">
-    <div class="btn-group" (click)="filterRanks()">
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="BLUFOR" uncheckable>{{fraction.BLUFOR}}</label>
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="OPFOR" uncheckable>{{fraction.OPFOR}}</label>
-    </div>
-    <a class="pull-right btn btn-success" (click)="openNewRankForm()">+</a>
-  </div>
+  <cc-list-filter
+    [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
+                      {label: fraction.OPFOR, value: 'OPFOR'}]"
+    [addButton]="{svgIcon: 'add', tooltip: 'Neuen Rang hinzufügen'}"
+    (executeSearch)="filterRanks($event)"
+    (openAddFrom)="openNewRankForm()">
+  </cc-list-filter>
 
-  <div class="input-group list-header">
-    <input id="search-tasks"
-           type="text" #query class="form-control"
-           (keyup.enter)="filterRanks()"
-           [formControl]="searchTerm">
-    <span class="input-group-btn">
-      <button class="btn btn-default" type="button"
-              (click)="filterRanks()">
-        Suchen
-      </button>
-    </span>
-  </div>
+  <cc-list-search [searchTerm]="searchTerm"
+                  (searchTermStream)="initObservable($event)"
+                  (executeSearch)="filterRanks()">
+  </cc-list-search>
 
-  <div>
   <pjm-rank-item *ngFor="let rank of ranks$ | async"
                  [rank]="rank"
                  (rankDelete)="deleteRank(rank)"
                  (rankSelected)="selectRank($event)"
                  [selected]="rank._id == selectedRankId">
   </pjm-rank-item>
-  </div>
 
 </div>

static/src/app/ranks/rank-list/rank-list.component.ts

@@ -1,5 +1,4 @@
 import {Component, OnInit} from '@angular/core';
-import {Location} from '@angular/common';
 
 import {FormControl} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
@@ -7,9 +6,11 @@ import {Observable} from 'rxjs/Observable';
 import {Rank} from '../../models/model-interfaces';
 import {RankService} from '../../services/army-management/rank.service';
 import {Fraction} from '../../utils/fraction.enum';
+import {UIHelpers} from '../../utils/global.helpers';
+import {MatButtonToggleGroup} from '@angular/material';
 
 @Component({
-  selector: 'rank-list',
+  selector: 'cc-rank-list',
   templateUrl: './rank-list.component.html',
   styleUrls: ['./rank-list.component.css', '../../style/select-list.css']
 })
@@ -21,35 +22,27 @@ export class RankListComponent implements OnInit {
 
   searchTerm = new FormControl();
 
-  public radioModel: string;
+  radioModel = '';
 
   readonly fraction = Fraction;
 
   constructor(private rankService: RankService,
               private router: Router,
-              private route: ActivatedRoute,
-              private location: Location) {
+              private route: ActivatedRoute) {
   }
 
   ngOnInit() {
-
     this.ranks$ = this.rankService.ranks$;
+  }
 
-    const paramsStream = this.route.queryParams
-                             .map(params => decodeURI(params['query'] || ''))
-                             .do(query => this.searchTerm.setValue(query));
-
-    const searchTermStream = this.searchTerm.valueChanges
-                                 .debounceTime(400)
-                                 .do(query => this.adjustBrowserUrl(query));
-
-    Observable.merge(paramsStream, searchTermStream)
+  initObservable(observables: any) {
+    Observable.merge(observables.params as Observable<string>, observables.searchTerm)
               .distinctUntilChanged()
               .switchMap(query => this.rankService.findRanks(query, this.radioModel))
               .subscribe();
-
   }
 
+
   openNewRankForm() {
     this.selectedRankId = null;
     this.router.navigate([{outlets: {'right': ['new']}}], {relativeTo: this.route});
@@ -60,7 +53,8 @@ export class RankListComponent implements OnInit {
     this.router.navigate([{outlets: {'right': ['edit', rankId]}}], {relativeTo: this.route});
   }
 
-  filterRanks() {
+  filterRanks(group?: MatButtonToggleGroup) {
+    this.radioModel = UIHelpers.toggleReleaseButton(this.radioModel, group);
     this.ranks$ = this.rankService.findRanks(this.searchTerm.value, this.radioModel);
   }
 
@@ -72,12 +66,4 @@ export class RankListComponent implements OnInit {
           });
     }
   }
-
-  adjustBrowserUrl(queryString = '') {
-    const absoluteUrl = this.location.path().split('?')[0];
-    const queryPart = queryString !== '' ? `query=${queryString}` : '';
-
-    this.location.replaceState(absoluteUrl, queryPart);
-  }
-
 }

static/src/app/ranks/ranks.component.html

@@ -1 +0,0 @@
-<router-outlet></router-outlet>

static/src/app/ranks/ranks.component.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'cc-ranks',
-  templateUrl: './ranks.component.html',
-  styleUrls: ['./ranks.component.css']
-})
-export class RankComponent {
-  constructor() {
-  }
-}

static/src/app/ranks/ranks.module.ts

@@ -4,11 +4,10 @@ import {SharedModule} from '../shared.module';
 import {CommonModule} from '@angular/common';
 import {RankService} from '../services/army-management/rank.service';
 import {RankStore} from '../services/stores/rank.store';
-import {ButtonsModule} from 'ngx-bootstrap';
 
 @NgModule({
   declarations: ranksRoutingComponents,
-  imports: [CommonModule, SharedModule, ButtonsModule.forRoot(), rankRouterModule],
+  imports: [CommonModule, SharedModule, rankRouterModule],
   providers: [RankStore, RankService]
 })
 export class RanksModule {

static/src/app/ranks/ranks.routing.ts

@@ -1,20 +1,15 @@
 import {RouterModule, Routes} from '@angular/router';
-import {RankComponent} from './ranks.component';
 import {RankListComponent} from './rank-list/rank-list.component';
 import {EditRankComponent} from './edit-rank/edit-rank.component';
 import {RankItemComponent} from './rank-list/rank-item.component';
 import {ModuleWithProviders} from '@angular/core';
 
-
-export const ranksRoutes: Routes = [{
-  path: '', component: RankComponent,
-  children: [
+export const ranksRoutes: Routes = [
   {
     path: '',
-      component: RankListComponent
-    }
-  ]
-},
+    component: RankListComponent,
+    outlet: 'left'
+  },
   {
     path: 'new',
     component: EditRankComponent,
@@ -28,5 +23,5 @@ export const ranksRoutes: Routes = [{
 
 export const rankRouterModule: ModuleWithProviders = RouterModule.forChild(ranksRoutes);
 
-export const ranksRoutingComponents = [RankComponent, RankItemComponent, RankListComponent, EditRankComponent];
+export const ranksRoutingComponents = [RankItemComponent, RankListComponent, EditRankComponent];
 

static/src/app/request/award/req-award.component.html

@@ -62,11 +62,6 @@
     Bestätigen
   </button>
 
-  <span *ngIf="showSuccessLabel"
-        class="absolute-label label label-success label-small">
-  Erfolgreich gespeichert
-  </span>
-
   <div class="table-container" *ngIf="showForm">
     <table class="table table-hover">
       <thead>

static/src/app/request/award/req-award.component.ts

@@ -6,6 +6,8 @@ import {AwardingService} from '../../services/army-management/awarding.service';
 import {DecorationService} from '../../services/army-management/decoration.service';
 import {UserService} from '../../services/army-management/user.service';
 import {LoginService} from '../../services/app-user-service/login-service';
+import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
+import {Message} from '../../i18n/de.messages';
 
 
 @Component({
@@ -18,8 +20,6 @@ export class RequestAwardComponent implements OnInit {
 
   showForm = false;
 
-  showSuccessLabel = false;
-
   user: User = {_id: '0'};
 
   decoration: Decoration = {_id: '0'};
@@ -39,12 +39,13 @@ export class RequestAwardComponent implements OnInit {
               private userService: UserService,
               private awardingService: AwardingService,
               private decorationService: DecorationService,
-              private loginService: LoginService) {
+              private loginService: LoginService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
     const currentUser = this.loginService.getCurrentUser();
-    this.userService.findUsers('', undefined, currentUser.squad._id).subscribe(users => {
+    this.userService.findUsers({squadId: currentUser.squad._id}).subscribe(users => {
       this.users = users;
     });
     this.decorationService.findDecorations('', currentUser.squad.fraction).subscribe(decorations => {
@@ -93,10 +94,7 @@ export class RequestAwardComponent implements OnInit {
               this.decoration = {_id: '0'};
               this.reason = previewImage.src = descriptionField.innerHTML = '';
               this.decoPreviewDisplay = 'none';
-              this.showSuccessLabel = true;
-              setTimeout(() => {
-                this.showSuccessLabel = false;
-              }, 2000);
+              this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
             });
       });
     }

static/src/app/request/confirm-award/confirm-award.component.html

@@ -1,11 +1,6 @@
 <form #form="ngForm" class="overview">
   <h3>Offene Anträge - Auszeichnungen</h3>
 
-  <span *ngIf="showSuccessLabel"
-        class="absolute-label label label-success label-small">
-  Erfolgreich gespeichert
-  </span>
-
   <div class="table-container">
     <table class="table table-hover">
       <thead>
@@ -37,7 +32,6 @@
         <td>
           <textarea style="width:100%;"
                     rows="3"
-                    title="reason"
                     #reason>{{award.reason}}</textarea>
         </td>
         <td>
@@ -49,7 +43,6 @@
         <td>
           <textarea style="width: 100%;"
                     rows="3"
-                    title="rejectReason"
                     placeholder="Begründung für Ablehnung (optional)"
                     #rejectReason></textarea>
         </td>

static/src/app/request/confirm-award/confirm-award.component.ts

@@ -2,6 +2,8 @@ import {Component, OnInit} from '@angular/core';
 import {Award} from '../../models/model-interfaces';
 import {AwardingService} from '../../services/army-management/awarding.service';
 import {LoginService} from '../../services/app-user-service/login-service';
+import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
+import {Message} from '../../i18n/de.messages';
 
 
 @Component({
@@ -12,10 +14,9 @@ export class ConfirmAwardComponent implements OnInit {
 
   awards: Award[];
 
-  showSuccessLabel = false;
-
   constructor(private awardingService: AwardingService,
-              private loginService: LoginService) {
+              private loginService: LoginService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -46,13 +47,8 @@ export class ConfirmAwardComponent implements OnInit {
         if (awards.length < 1) {
           this.awardingService.hasUnprocessedAwards = false;
         }
-        this.showSuccessLabel = true;
-        setTimeout(() => {
-          this.showSuccessLabel = false;
-        }, 2000);
+        this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
       });
     });
   }
-
-
 }

static/src/app/request/confirm-promotion/confirm-promotion.component.html

@@ -1,11 +1,6 @@
 <form #form="ngForm" class="overview">
   <h3>Offene Anträge - Beförderung</h3>
 
-  <span *ngIf="showSuccessLabel"
-        class="absolute-label label label-success label-small">
-  Erfolgreich gespeichert
-  </span>
-
   <div class="table-container">
     <table class="table table-hover">
       <thead>
@@ -43,7 +38,6 @@
         <td>
           <textarea style="width: 100%;"
                     rows="3"
-                    title="rejectReason"
                     placeholder="Begründung für Ablehnung (optional)"
                     #rejectReason></textarea>
         </td>
@@ -55,6 +49,4 @@
       </tbody>
     </table>
   </div>
-
-
 </form>

static/src/app/request/confirm-promotion/confirm-promotion.component.ts

@@ -3,6 +3,8 @@ import {Promotion, Rank} from '../../models/model-interfaces';
 import {RankService} from '../../services/army-management/rank.service';
 import {PromotionService} from '../../services/army-management/promotion.service';
 import {LoginService} from '../../services/app-user-service/login-service';
+import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
+import {Message} from '../../i18n/de.messages';
 
 
 @Component({
@@ -11,15 +13,14 @@ import {LoginService} from '../../services/app-user-service/login-service';
 })
 export class ConfirmPromotionComponent implements OnInit {
 
-  showSuccessLabel = false;
-
   ranks: Rank[];
 
   promotions: Promotion[];
 
   constructor(private rankService: RankService,
               private promotionService: PromotionService,
-              private loginService: LoginService) {
+              private loginService: LoginService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -50,12 +51,8 @@ export class ConfirmPromotionComponent implements OnInit {
         if (promotions.length < 1) {
           this.promotionService.hasUnprocessedPromotion = false;
         }
-        this.showSuccessLabel = true;
-        setTimeout(() => {
-          this.showSuccessLabel = false;
-        }, 2000);
+        this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
       });
     });
   }
-
 }

static/src/app/request/promotion/req-promotion.component.html

@@ -57,12 +57,6 @@
     Bestätigen
   </button>
 
-  <span *ngIf="showSuccessLabel"
-        class="absolute-label label label-success label-small">
-  Erfolgreich gespeichert
-  </span>
-
-
   <div class="table-container">
     <label>Beförderungsanträge</label>
     <table class="table table-hover">

static/src/app/request/promotion/req-promotion.component.ts

@@ -6,6 +6,8 @@ import {UserService} from '../../services/army-management/user.service';
 import {RankService} from '../../services/army-management/rank.service';
 import {PromotionService} from '../../services/army-management/promotion.service';
 import {LoginService} from '../../services/app-user-service/login-service';
+import {Message} from '../../i18n/de.messages';
+import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
 
 
 @Component({
@@ -18,8 +20,6 @@ export class RequestPromotionComponent implements OnInit {
 
   showForm = false;
 
-  showSuccessLabel = false;
-
   user: User = {_id: '0'};
 
   newLevel: number;
@@ -37,13 +37,14 @@ export class RequestPromotionComponent implements OnInit {
               private userService: UserService,
               private rankService: RankService,
               private promotionService: PromotionService,
-              private loginService: LoginService) {
+              private loginService: LoginService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
     const currentUser = this.loginService.getCurrentUser();
     // show only current users squad members
-    this.userService.findUsers('', undefined, currentUser.squad._id).subscribe(users => {
+    this.userService.findUsers({squadId: currentUser.squad._id}).subscribe(users => {
       this.users = users;
     });
     this.rankService.findRanks('', currentUser.squad.fraction).subscribe(ranks => {
@@ -79,10 +80,7 @@ export class RequestPromotionComponent implements OnInit {
         this.uncheckedPromotions = promotions;
         this.showForm = false;
         this.user = {_id: '0'};
-        this.showSuccessLabel = true;
-        setTimeout(() => {
-          this.showSuccessLabel = false;
-        }, 2000);
+        this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
       });
     });
   }

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

@@ -12,30 +12,13 @@ export class AwardingService {
               private config: AppConfig) {
   }
 
-  getUnconfirmedAwards(fraction?: string) {
-    return this.http.get(this.config.apiAwardPath + '?inProgress=true&fractFilter=' + fraction)
-               .map(res => res.json());
-  }
-
-  checkUnprocessedAwards(fraction?: string) {
-    this.getUnconfirmedAwards(fraction).subscribe((items) => {
-      if (items.length > 0) {
-        this.hasUnprocessedAwards = true;
-      }
-    });
-  }
-
-  getUnprocessedSquadAwards(squadId?: string) {
-    return this.http.get(this.config.apiAwardSquadPath.concat('/').concat(squadId))
-               .map(res => res.json());
-  }
-
-  /**
-   * get awards array with populated decorations
-   */
-  getUserAwardings(userId: string) {
-    return this.http.get(this.config.apiAwardPath + '?userId=' + userId)
-               .map(res => res.json());
+  getAwardings(fraction = '' , userId = '', inProgress = false, squadId = '') {
+    const getUrl = this.config.apiAwardPath
+                       .concat('?inProgress=').concat(inProgress.toString())
+                       .concat('&fractFilter=').concat(fraction)
+                       .concat('&userId=').concat(userId)
+                       .concat('&squadId=').concat(squadId);
+    return this.http.get(getUrl).map(res => res.json());
   }
 
   addAwarding(award: Award) {
@@ -55,5 +38,27 @@ export class AwardingService {
     return this.http.delete(this.config.apiAwardPath + '/' + awardingId);
   }
 
+  getUnconfirmedAwards(fraction?: string) {
+    return this.getAwardings(fraction, '', true);
+  }
+
+  checkUnprocessedAwards(fraction?: string) {
+    this.getUnconfirmedAwards(fraction).subscribe((items) => {
+      if (items.length > 0) {
+        this.hasUnprocessedAwards = true;
+      }
+    });
+  }
+
+  getUnprocessedSquadAwards(squadId?: string) {
+    return this.getAwardings('', '', true, squadId);
+  }
+
+  /**
+   * get awards array with populated decorations
+   */
+  getUserAwardings(userId: string) {
+    return this.getAwardings('', userId);
+  }
 }
 

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

@@ -37,7 +37,7 @@ export class RankService {
     return this.ranks$;
   }
 
-  getRank(id: number | string): Observable<Decoration> {
+  getRank(id: number | string): Observable<Rank> {
     return this.http.get(this.config.apiRankPath + id)
                .map(res => res.json());
   }

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

@@ -19,15 +19,23 @@ export class UserService {
     this.users$ = userStore.items$;
   }
 
-  findUsers(query = '', fractionFilter?, squadFilter?, limit?, offset?, action = LOAD) {
+  findUsers(filter, limit?, offset?, action = LOAD) {
     const searchParams = new URLSearchParams();
-    searchParams.append('q', query);
-    if (fractionFilter) {
-      searchParams.append('fractFilter', fractionFilter);
+
+    searchParams.append('q', (filter && filter.query) ? filter.query : '');
+
+    if (filter && filter.fraction) {
+      searchParams.append('fractFilter', filter.fraction);
     }
-    if (squadFilter) {
-      searchParams.append('squadId', squadFilter);
+
+    if (filter && filter.squadId) {
+      searchParams.append('squadId', filter.squadId);
     }
+
+    if (filter && filter.decorationId) {
+      searchParams.append('decorationId', filter.decorationId);
+    }
+
     searchParams.append('limit', limit);
     searchParams.append('offset', offset);
     this.http.get(this.config.apiUserPath, searchParams)

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

@@ -16,4 +16,3 @@ export class ArmyService {
   }
 
 }
-

static/src/app/services/logs/campaign.service.ts

@@ -13,6 +13,11 @@ export class CampaignService {
   }
 
   getAllCampaigns() {
+    return this.http.get(this.config.apiCampaignPath)
+               .map(res => res.json());
+  }
+
+  getAllCampaignsWithWars() {
     return this.http.get(this.config.apiWarPath)
                .map(res => res.json());
   }

static/src/app/services/user-interface/snack-bar/snack-bar.service.ts

@@ -0,0 +1,37 @@
+import {Injectable} from '@angular/core';
+import {MatSnackBar, MatSnackBarRef} from '@angular/material/snack-bar';
+
+@Injectable()
+export class SnackBarService {
+  constructor(private snackbar: MatSnackBar) {
+  }
+
+  private show(message: string, action?: string, duration?: number, panelClasses?: string[]): MatSnackBarRef<any> {
+    const config = {};
+    if (duration) {
+      config['duration'] = duration;
+    }
+
+    if (action) {
+      if (panelClasses) {
+        panelClasses.push('snack-bar-button');
+      } else {
+        panelClasses = ['snack-bar-button'];
+      }
+    }
+
+    if (panelClasses) {
+      config['panelClass'] = panelClasses;
+    }
+
+    return this.snackbar.open(message, action, config);
+  }
+
+  showSuccess(message: string) {
+    return this.show(message, undefined, 2500, ['custom-snack-bar', 'label-success']);
+  }
+
+  showError(message: string, duration?: number) {
+    return this.show(message, 'OK', duration, ['custom-snack-bar', 'label-danger']);
+  }
+}

static/src/app/services/user-interface/spinner/spinner.service.ts

@@ -0,0 +1,19 @@
+import {EventEmitter, Injectable} from '@angular/core';
+
+@Injectable()
+export class SpinnerService {
+
+  public spinnerActive: EventEmitter<Boolean>;
+
+  constructor() {
+    this.spinnerActive = new EventEmitter();
+  }
+
+  activate() {
+    this.spinnerActive.emit(true)
+  }
+
+  deactivate() {
+    this.spinnerActive.emit(false)
+  }
+}