From 44dea44cd5de5a812c4361fdb9d15da80a4d06ba Mon Sep 17 00:00:00 2001 From: vesem Date: Sun, 1 Aug 2021 08:19:49 -0400 Subject: [PATCH 1/3] Started mobile web interface --- Vagrantfile | 13 +++++++ src/main/resources/config/application-dev.yml | 4 +- src/main/webapp/app/home/home.component.html | 2 +- src/main/webapp/app/home/home.component.ts | 12 ++++++ src/main/webapp/app/responsive.service.ts | 37 +++++++++++++++++++ 5 files changed, 65 insertions(+), 3 deletions(-) create mode 100644 Vagrantfile create mode 100644 src/main/webapp/app/responsive.service.ts diff --git a/Vagrantfile b/Vagrantfile new file mode 100644 index 00000000..ebab25a4 --- /dev/null +++ b/Vagrantfile @@ -0,0 +1,13 @@ +Vagrant.configure("2") do |config| + config.vm.provider "docker" do |d| + d.image = "mysql:8.0.20" + config.vm.synced_folder "~/mysql", "/var/lib/mysql", docker_consistancy: "delegated" + d.privileged = "true" + d.ports = ["3306:3306"] + d.env = { + "MYSQL_USER":"root", + "MYSQL_ALLOW_EMPTY_PASSWORD":"yes", + "MYSQL_DATABASE":"crusadetracker" + } + end +end diff --git a/src/main/resources/config/application-dev.yml b/src/main/resources/config/application-dev.yml index 02b43900..a92fe409 100644 --- a/src/main/resources/config/application-dev.yml +++ b/src/main/resources/config/application-dev.yml @@ -38,8 +38,8 @@ spring: datasource: type: com.zaxxer.hikari.HikariDataSource url: jdbc:mysql://localhost:3306/crusadetracker?useUnicode=true&characterEncoding=utf8&useSSL=false&allowPublicKeyRetrieval=true&useLegacyDatetimeCode=false&serverTimezone=UTC&createDatabaseIfNotExist=true - username: crusadetracker - password: crusadetracker + username: root + password: hikari: poolName: Hikari auto-commit: false diff --git a/src/main/webapp/app/home/home.component.html b/src/main/webapp/app/home/home.component.html index 2c63084e..6b86d296 100644 --- a/src/main/webapp/app/home/home.component.html +++ b/src/main/webapp/app/home/home.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/main/webapp/app/home/home.component.ts b/src/main/webapp/app/home/home.component.ts index e3716342..16f736d0 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 ) {} @@ -35,10 +39,18 @@ export class HomeComponent implements OnInit, OnDestroy { this.eventSubscriber = this.eventManager.subscribe('armyListModification', () => this.loadAll()); } + onResize(): void { + this.responsiveService.getMobileStatus().subscribe(isMobile => { + this.isMobile = isMobile; + }) + // this.responsiveService.checkWidth(); + } + ngOnInit(): void { this.loadAll(); this.registerChangeInArmies(); this.authSubscription = this.accountService.getAuthenticationState().subscribe(account => (this.account = account)); + this.onResize(); } isAuthenticated(): boolean { diff --git a/src/main/webapp/app/responsive.service.ts b/src/main/webapp/app/responsive.service.ts new file mode 100644 index 00000000..91e77b29 --- /dev/null +++ b/src/main/webapp/app/responsive.service.ts @@ -0,0 +1,37 @@ +import {Injectable} from "@angular/core"; +import {Observable, Subject} from "rxjs"; + +@Injectable() +export class ResponsiveService { + private isMobile = new Subject(); + public screenWidth: string; + + constructor() { + // to remove ts-lint error + this.screenWidth = 'sm'; + this.checkWidth(); + } + + // tslint:disable-next-line:typedef + onMobileChange(status: boolean) { + this.isMobile.next(status); + } + + // tslint:disable-next-line:typedef + getMobileStatus(): Observable { + console.log(this.isMobile) + return this.isMobile.asObservable(); + } + + // tslint:disable-next-line:typedef + public checkWidth() { + // tslint:disable-next-line:prefer-const + if (window.innerWidth <= 768) { + this.screenWidth = 'sm'; + this.onMobileChange(true); + } else { + this.screenWidth = 'lg'; + this.onMobileChange(false); + } + } +} From 6e9877629093b320223c947eb1ad8af0cb43162d Mon Sep 17 00:00:00 2001 From: vesem Date: Wed, 4 Aug 2021 07:03:25 -0400 Subject: [PATCH 2/3] Started mobile web interface --- src/main/webapp/app/home/home.component.ts | 1 + src/main/webapp/app/responsive.service.ts | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/main/webapp/app/home/home.component.ts b/src/main/webapp/app/home/home.component.ts index 16f736d0..d4844530 100644 --- a/src/main/webapp/app/home/home.component.ts +++ b/src/main/webapp/app/home/home.component.ts @@ -43,6 +43,7 @@ export class HomeComponent implements OnInit, OnDestroy { this.responsiveService.getMobileStatus().subscribe(isMobile => { this.isMobile = isMobile; }) + console.log(this.isMobile) // this.responsiveService.checkWidth(); } diff --git a/src/main/webapp/app/responsive.service.ts b/src/main/webapp/app/responsive.service.ts index 91e77b29..e08147cb 100644 --- a/src/main/webapp/app/responsive.service.ts +++ b/src/main/webapp/app/responsive.service.ts @@ -19,12 +19,13 @@ export class ResponsiveService { // tslint:disable-next-line:typedef getMobileStatus(): Observable { - console.log(this.isMobile) + // console.log(this.isMobile) return this.isMobile.asObservable(); } // tslint:disable-next-line:typedef public checkWidth() { + console.log(window.innerWidth) // tslint:disable-next-line:prefer-const if (window.innerWidth <= 768) { this.screenWidth = 'sm'; From 8dce7055fffc55fecc35cd79a2c3274f42b630bd Mon Sep 17 00:00:00 2001 From: vesem Date: Thu, 5 Aug 2021 22:35:56 -0400 Subject: [PATCH 3/3] Added army-detail mobile version! --- src/main/webapp/app/app.module.ts | 1 + .../army/army-detail-desktop.component.html | 114 +++++++++++++++++ .../army/army-detail-desktop.component.ts | 16 +++ .../army/army-detail-mobile.component.ts | 16 +++ .../app/entities/army/army-detail-mobile.html | 74 +++++++++++ .../entities/army/army-detail.component.html | 118 +----------------- .../entities/army/army-detail.component.ts | 25 +++- .../webapp/app/entities/army/army.module.ts | 20 ++- .../webapp/app/entities/army/army.route.ts | 3 +- src/main/webapp/app/home/home.component.html | 44 ++++--- src/main/webapp/app/home/home.component.ts | 9 -- src/main/webapp/app/responsive.service.ts | 21 +--- src/main/webapp/content/scss/global.scss | 17 +++ 13 files changed, 310 insertions(+), 168 deletions(-) create mode 100644 src/main/webapp/app/entities/army/army-detail-desktop.component.html create mode 100644 src/main/webapp/app/entities/army/army-detail-desktop.component.ts create mode 100644 src/main/webapp/app/entities/army/army-detail-mobile.component.ts create mode 100644 src/main/webapp/app/entities/army/army-detail-mobile.html 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 6b86d296..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 d4844530..e3ce10f8 100644 --- a/src/main/webapp/app/home/home.component.ts +++ b/src/main/webapp/app/home/home.component.ts @@ -39,19 +39,10 @@ export class HomeComponent implements OnInit, OnDestroy { this.eventSubscriber = this.eventManager.subscribe('armyListModification', () => this.loadAll()); } - onResize(): void { - this.responsiveService.getMobileStatus().subscribe(isMobile => { - this.isMobile = isMobile; - }) - console.log(this.isMobile) - // this.responsiveService.checkWidth(); - } - ngOnInit(): void { this.loadAll(); this.registerChangeInArmies(); this.authSubscription = this.accountService.getAuthenticationState().subscribe(account => (this.account = account)); - this.onResize(); } isAuthenticated(): boolean { diff --git a/src/main/webapp/app/responsive.service.ts b/src/main/webapp/app/responsive.service.ts index e08147cb..23b4447d 100644 --- a/src/main/webapp/app/responsive.service.ts +++ b/src/main/webapp/app/responsive.service.ts @@ -3,24 +3,17 @@ import {Observable, Subject} from "rxjs"; @Injectable() export class ResponsiveService { - private isMobile = new Subject(); - public screenWidth: string; + // @ts-ignore + private isMobile: boolean; constructor() { - // to remove ts-lint error - this.screenWidth = 'sm'; this.checkWidth(); } // tslint:disable-next-line:typedef - onMobileChange(status: boolean) { - this.isMobile.next(status); - } - - // tslint:disable-next-line:typedef - getMobileStatus(): Observable { + getMobileStatus(): boolean { // console.log(this.isMobile) - return this.isMobile.asObservable(); + return this.isMobile; } // tslint:disable-next-line:typedef @@ -28,11 +21,9 @@ export class ResponsiveService { console.log(window.innerWidth) // tslint:disable-next-line:prefer-const if (window.innerWidth <= 768) { - this.screenWidth = 'sm'; - this.onMobileChange(true); + this.isMobile = true; } else { - this.screenWidth = 'lg'; - this.onMobileChange(false); + 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;