package.json

@@ -6,9 +6,9 @@
   "scripts": {
     "start": "npm run deploy-static-prod && npm start --prefix ./api",
     "dev": "npm run deploy-static && npm run dev --prefix ./api",
-    "pre-deploy-clean": "rm -f ./public/resource",
+    "pre-deploy-clean": "unlink ./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:prod": "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/src/app/ranks/rank-list/rank-list.component.ts

@@ -8,7 +8,6 @@ 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',
@@ -62,7 +61,7 @@ export class RankListComponent implements OnInit {
     this.router.navigate([{outlets: {'right': ['edit', rankId]}}], {relativeTo: this.route});
   }
 
-  filterRanks(group: MatButtonToggleGroup) {
+  filterRanks(group) {
     this.radioModel = UIHelpers.toggleReleaseButton(this.radioModel, group);
     this.ranks$ = this.rankService.findRanks(this.searchTerm.value, this.radioModel);
   }
@@ -82,4 +81,5 @@ export class RankListComponent implements OnInit {
 
     this.location.replaceState(absoluteUrl, queryPart);
   }
+
 }

static/src/app/squads/squad-list/squad-list.component.html

@@ -1,13 +1,9 @@
 <div class="select-list">
-  <div class="list-header">
-    <mat-button-toggle-group #group="matButtonToggleGroup">
-      <mat-button-toggle value="BLUFOR" (change)="filterSquads(group)">
-        {{fraction.BLUFOR}}
-      </mat-button-toggle>
-      <mat-button-toggle value="OPFOR" (change)="filterSquads(group)">
-        {{fraction.OPFOR}}
-      </mat-button-toggle>
-    </mat-button-toggle-group>
+  <div class="input-group list-header pull-left">
+    <div class="btn-group" (click)="filterSquads()">
+      <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)="openNewSquadForm()">+</a>
   </div>
 

static/src/app/squads/squad-list/squad-list.component.ts

@@ -7,8 +7,6 @@ import {Observable} from 'rxjs/Observable';
 import {Squad} from '../../models/model-interfaces';
 import {SquadService} from '../../services/army-management/squad.service';
 import {Fraction} from '../../utils/fraction.enum';
-import {UIHelpers} from "../../utils/global.helpers";
-import {MatButtonToggleGroup} from "@angular/material";
 
 @Component({
   selector: 'squad-list',
@@ -71,8 +69,7 @@ export class SquadListComponent implements OnInit {
     }
   }
 
-  filterSquads(group: MatButtonToggleGroup) {
-    this.radioModel = UIHelpers.toggleReleaseButton(this.radioModel, group);
+  filterSquads() {
     this.squads$ = this.squadService.findSquads(this.searchTerm.value, this.radioModel);
   }
 
@@ -82,4 +79,5 @@ export class SquadListComponent implements OnInit {
 
     this.location.replaceState(absoluteUrl, queryPart);
   }
+
 }

static/src/app/squads/squads.module.ts

@@ -4,11 +4,11 @@ import {SharedModule} from '../shared.module';
 import {squadRouterModule, squadsRoutingComponents} from './squads.routing';
 import {SquadStore} from '../services/stores/squad.store';
 import {SquadService} from '../services/army-management/squad.service';
-import {MatButtonToggleModule} from "@angular/material";
+import {ButtonsModule} from 'ngx-bootstrap';
 
 @NgModule({
   declarations: squadsRoutingComponents,
-  imports: [CommonModule, SharedModule, MatButtonToggleModule, squadRouterModule],
+  imports: [CommonModule, SharedModule, ButtonsModule.forRoot(), squadRouterModule],
   providers: [SquadStore, SquadService]
 })
 export class SquadsModule {

static/src/app/utils/global.helpers.ts

@@ -1,5 +1,3 @@
-import {MatButtonToggleGroup} from "@angular/material";
-
 export const CSSHelpers = {
   getBackgroundCSS: (imageUrl) => {
     return 'background-image: url(' + imageUrl + ');' +
@@ -11,11 +9,12 @@ export const CSSHelpers = {
 };
 
 export const UIHelpers = {
-  toggleReleaseButton: (currentVal, group: MatButtonToggleGroup) => {
+  toggleReleaseButton: (currentVal, group) => {
     if (currentVal === group.value) {
       group.value = '';
       return '';
+    } else {
+      return group.value;
     }
-    return group.value;
   }
 };