move assets to resource; Add ngx-bootstrap

package.json

@@ -15,11 +15,11 @@
     "start-e2e": "npm run deploy-static && npm run e2e --prefix ./api",
     "test-e2e": "npm run e2e --prefix ./static"
   },
+  "dependencies": {
+    "uglify-js": "^3.0.26"
+  },
   "devDependencies": {
     "concurrently": "^3.4.0",
     "wait-on": "^2.0.2"
-  },
-  "dependencies": {
-    "uglify-js": "^3.0.26"
   }
 }

static/package-lock.json

@@ -523,12 +523,6 @@
       "integrity": "sha1-dMt3+2BS7a/yqJhN2v2I1BnyXKw=",
       "dev": true
     },
-    "@types/socket.io-client": {
-      "version": "1.4.29",
-      "resolved": "https://registry.npmjs.org/@types/socket.io-client/-/socket.io-client-1.4.29.tgz",
-      "integrity": "sha1-+HQwcM7pMXXjbgtqd6ivc+WMyzI=",
-      "dev": true
-    },
     "abbrev": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz",
@@ -4865,6 +4859,11 @@
         "minimist": "0.0.8"
       }
     },
+    "moment": {
+      "version": "2.18.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.18.1.tgz",
+      "integrity": "sha1-w2GT3Tzhwu7SrbfIAtu8d6gbHA8="
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -4894,6 +4893,14 @@
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
       "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
     },
+    "ngx-bootstrap": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-1.8.1.tgz",
+      "integrity": "sha512-f6l1HmyQPY72bvprKd0yt1WkrEFzynbps8+OvEp4KE0beg/UYPoBXAmPyv7sOtn7grOTBUJJcMO147LEqKjW0Q==",
+      "requires": {
+        "moment": "2.18.1"
+      }
+    },
     "ngx-clipboard": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/ngx-clipboard/-/ngx-clipboard-8.0.2.tgz",

static/package.json

@@ -30,6 +30,7 @@
     "jquery": "^3.1.0",
     "jquery-ui": "^1.12.0",
     "jquery-ui-bundle": "^1.11.4",
+    "ngx-bootstrap": "^1.8.1",
     "ngx-clipboard": "^8.0.2",
     "rxjs": "^5.2.0",
     "ts-helpers": "^1.1.1",

static/src/app/app.module.ts

@@ -35,10 +35,11 @@ import {WarService} from "./services/war-service/war.service";
 import {DataTableModule} from "angular2-datatable";
 import {NgxChartsModule} from "@swimlane/ngx-charts";
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import {AccordionModule} from "ngx-bootstrap";
 
 @NgModule({
   imports: [BrowserModule, FormsModule, ReactiveFormsModule, appRouting, HttpModule, ClipboardModule, DataTableModule,
-    BrowserAnimationsModule, NgxChartsModule],
+    BrowserAnimationsModule, NgxChartsModule, AccordionModule.forRoot()],
   providers: [
     HttpClient,
     LoginService,

static/src/app/statistic/war-list/war-list.component.html

@@ -5,7 +5,8 @@
     </a>
   </div>
 
-  <div class="fade-in list-entry" style="margin-top: 30px; margin-bottom: 30px;" [ngClass]="{selected : selectedWarId == '0'}" (click)="selectOverview()">
+  <div class="fade-in list-entry" style="margin-top: 30px; margin-bottom: 30px;"
+       [ngClass]="{selected : selectedWarId == '0'}" (click)="selectOverview()">
     <div class="row">
       <div class="col-xs-9">
       <span style="margin:auto">
@@ -15,10 +16,20 @@
     </div>
   </div>
 
-  <pjm-war-item *ngFor="let war of wars"
+  <accordion [closeOthers]="oneAtATime">
-                [war]="war"
+    <accordion-group #group>
-                (warDelete)="deleteWar(war)"
+      <div accordion-heading>
-                (warSelected)="selectWar($event)"
+        Return to Hell in a Bowl
-                [selected]="war._id == selectedWarId">
+      </div>
-  </pjm-war-item>
+      <div *ngFor="let war of wars">
+        <pjm-war-item
+          [war]="war"
+          (warDelete)="deleteWar(war)"
+          (warSelected)="selectWar($event)"
+          [selected]="war._id == selectedWarId">
+        </pjm-war-item>
+      </div>
+    </accordion-group>
+  </accordion>
+
 </div>

static/src/app/statistic/war-list/war-list.component.ts

@@ -15,6 +15,8 @@ export class WarListComponent implements OnInit {
 
   wars: War[] = [];
 
+  public oneAtATime: boolean = true;
+
   constructor(private warService: WarService,
               private loginService: LoginService,
               private router: Router,
@@ -54,4 +56,8 @@ export class WarListComponent implements OnInit {
         })
     }
   }
+
+  open(event) {
+    console.log(event);
+  }
 }

static/src/app/style/list-entry.css

@@ -1,7 +1,6 @@
 div.list-entry, a.list-entry,
 div.user-list-entry, a.user-list-entry {
   padding: 8px;
-  width: 475px;
   border-radius: 2px;
   border: lightgrey solid 1px;
   cursor: cell;

static/src/styles.css

@@ -40,7 +40,9 @@ form {
 }
 
 #left {
-  width:480px;
+  width: 20%;
+  min-width: 280px;
+  max-width: 450px;
   float: left;
   padding-right: 10px;
 }