diff --git a/src/main/webapp/app/app.module.ts b/src/main/webapp/app/app.module.ts index 5123161d..591f04ab 100644 --- a/src/main/webapp/app/app.module.ts +++ b/src/main/webapp/app/app.module.ts @@ -13,6 +13,7 @@ import { NavbarComponent } from './layouts/navbar/navbar.component'; import { FooterComponent } from './layouts/footer/footer.component'; import { PageRibbonComponent } from './layouts/profiles/page-ribbon.component'; import { ErrorComponent } from './layouts/error/error.component'; +import {ArmyDetailMobileComponent} from "app/entities/army/army-detail-mobile.component"; @NgModule({ imports: [ diff --git a/src/main/webapp/app/entities/army/army-detail-desktop.component.html b/src/main/webapp/app/entities/army/army-detail-desktop.component.html new file mode 100644 index 00000000..a0239731 --- /dev/null +++ b/src/main/webapp/app/entities/army/army-detail-desktop.component.html @@ -0,0 +1,114 @@ +
+
+
+
+

{{ army.armyName }}

+
+
+
+ +
+
+
+ CRUSADE FORCE NAME: +
+
+ {{ army.armyName }} +
+
+
+
+ CRUSADE FACTION: +
+
+ {{ army.armyFaction }} +
+
+
+
+ PLAYER: +
+
+ {{ army.ownerLogin }} +
+
+
+ +
+
BATTLE TALLY
+
BATTLES WON
+
REQUISITION POINTS
+
SUPPLY USED
+
SUPPLY LIMIT
+
FORCE POINTS
+
+
+
{{ army.battleTally }}
+
{{ army.battlesWon }}
+
+ {{ army.requisition }} +
+
+ {{calculatePoints(army)}} +
+
+ {{ army.armyPowerLevel }} +
+
+ {{ getForcePoints() }} +
+
+ +
+
+
CRUSADE CARDS
+
POWER RATING
+
CRUSADE POINTS
+
ADD TO FORCE
+
+
+
+
Unit {{rowIndex + 1}}:
+
+ {{ unit.unitName }} +
+
+ {{ unit.unitPowerLevel }} +
+
{{unit.crusadePointsUnit}}
+ + +
+
+
+
+
CRUSADE GOALS, INFORMATION AND NOTABLE VICTORIES
+
+
+
{{army.armyDescription}}
+
+
+
+ + + + +
+
+
diff --git a/src/main/webapp/app/entities/army/army-detail-desktop.component.ts b/src/main/webapp/app/entities/army/army-detail-desktop.component.ts new file mode 100644 index 00000000..a8a8c418 --- /dev/null +++ b/src/main/webapp/app/entities/army/army-detail-desktop.component.ts @@ -0,0 +1,16 @@ +import {Component} from "@angular/core"; +import {ArmyDetailComponent} from "./army-detail.component"; +import {ActivatedRoute} from "@angular/router"; +import {JhiDataUtils} from "ng-jhipster"; + +@Component({ + selector: 'jhi-army-detail-desktop', + templateUrl: './army-detail-desktop.component.html' +}) +// @ts-ignore +export class ArmyDetailDesktopComponent extends ArmyDetailComponent { + constructor(protected dataUtils: JhiDataUtils, + protected activatedRoute: ActivatedRoute) { + super(dataUtils, activatedRoute); + } +} diff --git a/src/main/webapp/app/entities/army/army-detail-mobile.component.ts b/src/main/webapp/app/entities/army/army-detail-mobile.component.ts new file mode 100644 index 00000000..aac6a861 --- /dev/null +++ b/src/main/webapp/app/entities/army/army-detail-mobile.component.ts @@ -0,0 +1,16 @@ +import {Component} from "@angular/core"; +import {ArmyDetailComponent} from "./army-detail.component"; +import {ActivatedRoute} from "@angular/router"; +import {JhiDataUtils} from "ng-jhipster"; + +@Component({ + selector: 'jhi-army-detail-mobile', + templateUrl: './army-detail-mobile.html' +}) +// @ts-ignore +export class ArmyDetailMobileComponent extends ArmyDetailComponent { + constructor(protected dataUtils: JhiDataUtils, + protected activatedRoute: ActivatedRoute) { + super(dataUtils, activatedRoute); + } +} diff --git a/src/main/webapp/app/entities/army/army-detail-mobile.html b/src/main/webapp/app/entities/army/army-detail-mobile.html new file mode 100644 index 00000000..1607a9f3 --- /dev/null +++ b/src/main/webapp/app/entities/army/army-detail-mobile.html @@ -0,0 +1,74 @@ +
+
+
+
+ +

{{ army.armyName}}

+
+
+
Force:
+
{{ getForcePoints() }}
+
+
+
+ +
+
+
Battles
+
{{army.battleTally}}
+
+
+
Victory
+
{{army.battlesWon}}
+
+
+
RP:
+
{{army.requisition}}
+
+
+
Supply:
+
{{ calculatePoints(army) }}
+
+
+
Limit:
+
{{army.armyPowerLevel}}
+
+
+ +
+
+
Name
+
PL
+
CP
+
+
+
+
+
+
+ {{unit.unitName}}
+
{{unit.unitPowerLevel}}
+
{{unit.crusadePointsUnit}}
+
+ +
+
+
+
+ + + +
+
diff --git a/src/main/webapp/app/entities/army/army-detail.component.html b/src/main/webapp/app/entities/army/army-detail.component.html index f18d8f06..ec884307 100644 --- a/src/main/webapp/app/entities/army/army-detail.component.html +++ b/src/main/webapp/app/entities/army/army-detail.component.html @@ -1,113 +1,7 @@ -
-
-
-
-

{{ army.armyName }}

-
-
-
- -
-
-
- CRUSADE FORCE NAME: -
-
- {{ army.armyName }} -
-
-
-
- CRUSADE FACTION: -
-
- {{ army.armyFaction }} -
-
-
-
- PLAYER: -
-
- {{ army.ownerLogin }} -
-
-
- -
-
BATTLE TALLY
-
BATTLES WON
-
REQUISITION POINTS
-
SUPPLY USED
-
SUPPLY LIMIT
-
FORCE POINTS
-
-
-
{{ army.battleTally }}
-
{{ army.battlesWon }}
-
- {{ army.requisition }} -
-
- {{calculatePoints(army)}} -
-
- {{ army.armyPowerLevel }} -
-
- {{ getForcePoints() }} -
-
- -
-
-
CRUSADE CARDS
-
POWER RATING
-
CRUSADE POINTS
-
ADD TO FORCE
-
-
-
-
Unit {{rowIndex + 1}}:
-
- {{ unit.unitName }} -
-
- {{ unit.unitPowerLevel }} -
-
{{unit.crusadePointsUnit}}
- - -
-
-
-
-
CRUSADE GOALS, INFORMATION AND NOTABLE VICTORIES
-
-
-
{{army.armyDescription}}
-
-
-
- - - - -
+
+
+ + + + diff --git a/src/main/webapp/app/entities/army/army-detail.component.ts b/src/main/webapp/app/entities/army/army-detail.component.ts index 8392e681..11acd2d2 100644 --- a/src/main/webapp/app/entities/army/army-detail.component.ts +++ b/src/main/webapp/app/entities/army/army-detail.component.ts @@ -5,10 +5,12 @@ import { LocalStorage } from 'ngx-webstorage'; import { IArmy } from 'app/shared/model/army.model'; import { UnitArmy } from '../../shared/model/unit-army.model'; +import {DomSanitizer} from "@angular/platform-browser"; +import {ResponsiveService} from "../../responsive.service"; @Component({ selector: 'jhi-army-detail', - templateUrl: './army-detail.component.html', + templateUrl: './army-detail.component.html' }) export class ArmyDetailComponent implements OnInit { army: IArmy | null = null; @@ -16,11 +18,16 @@ export class ArmyDetailComponent implements OnInit { private forcePoints: number; @LocalStorage('forceAddedListStored') public forceAddedList: number[]; + private responsiveService: ResponsiveService = new ResponsiveService(); + public isMobileResolution: boolean; - constructor(protected dataUtils: JhiDataUtils, protected activatedRoute: ActivatedRoute) { + constructor(protected dataUtils: JhiDataUtils, + protected activatedRoute: ActivatedRoute) { this.forcePoints = 0; const localStorageList = localStorage.getItem('forceAddedListStored'); this.forceAddedList = localStorageList ? JSON.parse(localStorageList) : []; + // this.isMobileResolution = ResponsiveService.getMobileStatus(); + this.isMobileResolution = this.responsiveService.getMobileStatus(); } ngOnInit(): void { @@ -51,6 +58,14 @@ export class ArmyDetailComponent implements OnInit { return total; } + toggleForceUnit(unit: UnitArmy): number { + if ( unit?.id && unit?.unitPowerLevel && this.forceAddedList.includes(unit.id)) { + return this.removeForceUnit(unit); + } else { + return this.addForceUnit(unit) + } + } + addForceUnit(unit: UnitArmy): number { if (unit && unit.id && unit.unitPowerLevel && !this.forceAddedList.includes(unit.id)) { this.forcePoints = this.forcePoints + unit.unitPowerLevel; @@ -84,4 +99,10 @@ export class ArmyDetailComponent implements OnInit { } return false; } + + clearForce(): void { + localStorage.clear(); + this.forceAddedList = []; + this.forcePoints = 0; + } } diff --git a/src/main/webapp/app/entities/army/army.module.ts b/src/main/webapp/app/entities/army/army.module.ts index 2a48c0d6..3ba7529d 100644 --- a/src/main/webapp/app/entities/army/army.module.ts +++ b/src/main/webapp/app/entities/army/army.module.ts @@ -1,17 +1,25 @@ -import { NgModule } from '@angular/core'; +import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core'; import { RouterModule } from '@angular/router'; import { CrusadetrackerSharedModule } from 'app/shared/shared.module'; import { ArmyComponent } from './army.component'; -import { ArmyDetailComponent } from './army-detail.component'; import { ArmyUpdateComponent } from './army-update.component'; import { ArmyDeleteDialogComponent } from './army-delete-dialog.component'; -import { armyRoute } from './army.route'; +import { armyRoutes } from './army.route'; import { forceRoute } from '../force/force.route'; +import {ArmyDetailDesktopComponent} from "./army-detail-desktop.component"; +import {ArmyDetailMobileComponent} from "./army-detail-mobile.component"; +import {ArmyDetailComponent} from "./army-detail.component"; @NgModule({ - imports: [CrusadetrackerSharedModule, RouterModule.forChild(armyRoute), RouterModule.forChild(forceRoute)], - declarations: [ArmyComponent, ArmyDetailComponent, ArmyUpdateComponent, ArmyDeleteDialogComponent], - entryComponents: [ArmyDeleteDialogComponent], + imports: [CrusadetrackerSharedModule, RouterModule.forChild(armyRoutes), RouterModule.forChild(forceRoute)], + // @ts-ignore + declarations: [ArmyComponent, + ArmyDetailMobileComponent, + ArmyDetailComponent, + ArmyDetailDesktopComponent, + ArmyUpdateComponent, + ArmyDeleteDialogComponent], + entryComponents: [ArmyDeleteDialogComponent] }) export class CrusadetrackerArmyModule {} diff --git a/src/main/webapp/app/entities/army/army.route.ts b/src/main/webapp/app/entities/army/army.route.ts index 8c25374b..7c239f84 100644 --- a/src/main/webapp/app/entities/army/army.route.ts +++ b/src/main/webapp/app/entities/army/army.route.ts @@ -12,6 +12,7 @@ import { ArmyComponent } from './army.component'; import { ArmyDetailComponent } from './army-detail.component'; import { ArmyUpdateComponent } from './army-update.component'; import { IUnitArmy } from '../../shared/model/unit-army.model'; +import {ArmyDetailDesktopComponent} from "./army-detail-desktop.component"; @Injectable({ providedIn: 'root' }) export class ArmyResolve implements Resolve { @@ -35,7 +36,7 @@ export class ArmyResolve implements Resolve { } } -export const armyRoute: Routes = [ +export const armyRoutes: Routes = [ { path: '', component: ArmyComponent, diff --git a/src/main/webapp/app/home/home.component.html b/src/main/webapp/app/home/home.component.html index 2c63084e..3f1003ab 100644 --- a/src/main/webapp/app/home/home.component.html +++ b/src/main/webapp/app/home/home.component.html @@ -1,30 +1,28 @@ -
-
- -
+
+ +
-
-

Warhammer Crusade!

+
+

Warhammer Crusade!

-

This is your homepage

+

This is your homepage

-
-
- You are logged in as user "{{ account.login }}". -
- -
- You don't have an account yet?  - Register a new account -
+
+
+ You are logged in as user "{{ account.login }}".
- - {{ army.armyName }} - - -

- This is to track progress on a Warhammer 40k Narrative Campaign. -

+
+ You don't have an account yet?  + Register a new account +
+ + + {{ army.armyName }} + + +

+ This is to track progress on a Warhammer 40k Narrative Campaign. +

diff --git a/src/main/webapp/app/home/home.component.ts b/src/main/webapp/app/home/home.component.ts index e3716342..e3ce10f8 100644 --- a/src/main/webapp/app/home/home.component.ts +++ b/src/main/webapp/app/home/home.component.ts @@ -8,21 +8,25 @@ import { IArmy } from '../shared/model/army.model'; import { HttpResponse } from '@angular/common/http'; import { ArmyService } from '../entities/army/army.service'; import { JhiEventManager } from 'ng-jhipster'; +import { ResponsiveService } from "app/responsive.service"; @Component({ selector: 'jhi-home', templateUrl: './home.component.html', styleUrls: ['home.scss'], + providers: [ResponsiveService] }) export class HomeComponent implements OnInit, OnDestroy { account: Account | null = null; authSubscription?: Subscription; armies?: IArmy[]; eventSubscriber?: Subscription; + private isMobile: Boolean = false; constructor( private accountService: AccountService, private loginModalService: LoginModalService, + private responsiveService: ResponsiveService, protected armyService: ArmyService, protected eventManager: JhiEventManager ) {} diff --git a/src/main/webapp/app/responsive.service.ts b/src/main/webapp/app/responsive.service.ts new file mode 100644 index 00000000..23b4447d --- /dev/null +++ b/src/main/webapp/app/responsive.service.ts @@ -0,0 +1,29 @@ +import {Injectable} from "@angular/core"; +import {Observable, Subject} from "rxjs"; + +@Injectable() +export class ResponsiveService { + // @ts-ignore + private isMobile: boolean; + + constructor() { + this.checkWidth(); + } + + // tslint:disable-next-line:typedef + getMobileStatus(): boolean { + // console.log(this.isMobile) + return this.isMobile; + } + + // tslint:disable-next-line:typedef + public checkWidth() { + console.log(window.innerWidth) + // tslint:disable-next-line:prefer-const + if (window.innerWidth <= 768) { + this.isMobile = true; + } else { + this.isMobile = false; + } + } +} diff --git a/src/main/webapp/content/scss/global.scss b/src/main/webapp/content/scss/global.scss index 8cae68b3..5f060599 100644 --- a/src/main/webapp/content/scss/global.scss +++ b/src/main/webapp/content/scss/global.scss @@ -192,6 +192,23 @@ entity detail page css border: 1px solid black; } +.col-md-3-mobile { + padding: 2px; + margin-left: 15px; + width: 60px; + background-color: #2d2d2d; + color: whitesmoke; + border: 1px solid black; +} + +.col-md-6-mobile { + padding: 2px; + width: 60px; + background-color: whitesmoke; + color: black; + border: 1px solid black; +} + .unit { padding: 8px; border-bottom: 1px solid #dddddd;