pretty up

This commit is contained in:
peter
2020-02-07 17:30:55 +01:00
parent 59990af4d2
commit e3eb1f123c
29 changed files with 376 additions and 90 deletions
@@ -73,8 +73,12 @@ export class HeaderComponent implements OnInit, OnDestroy {
this.api.connectShoutbox((msg) => {
this.chatlog.push(msg)
if(msg.message != this.lastmessage)
msg['reply']=false
if(msg.message != this.lastmessage){
this.newmessage = true
msg['reply']=true
}
if(this.chatwindow) this.chatwindow.messages.push(msg)
}).then(sendMsg => {
this.sendMessage = (msg) => {
@@ -15,7 +15,9 @@ status="control">
</nb-card-header>
<nb-card-body>
<img style="width:20px; height:20px" [src]="'../../../../assets/images/'+char.race.toLowerCase()+'_xs.gif'" />
{{char.race}}<br />
<img style="width:20px; height:20px" [src]="'../../../../assets/images/'+char.class.toLowerCase()+'.png'" />
{{char.specname}} {{char.class}}<br />
<span *ngIf="link === 'owner'">
Owned by <a [routerLink]="'/frontcraft/user/'+char.username"> {{char.username}} ({{char.rank}})</a>
@@ -13,7 +13,10 @@ export class FrontcraftCharacterComponent implements OnInit{
@Input() name?: string
@Input() link?: "owner" | "character" = 'owner'
char : (Character & User & Spec) = {} as any
char : (Character & User & Spec) = {
race: 'Human',
class: 'Warrior'
} as any
color : string
tokens
@@ -17,12 +17,14 @@
</a>
</td>
<td>
<img style="width:20px; height:20px" [src]="'../../../../assets/images/'+character.race.toLowerCase()+'_xs.gif'" />
{{character.race}}
</td>
<td>
{{character.specname}}
</td>
<td>
<img style="width:20px; height:20px" [src]="'../../../../assets/images/'+character.class.toLowerCase()+'.png'" />
{{character.class}}
</td>
</tr>
@@ -22,10 +22,6 @@ export class PagesLayoutComponent implements AfterContentInit{
icon: 'people',
title: 'Characters',
link: '/frontcraft/characters',
},{
icon: 'shopping-cart',
title: 'Token Shop',
link: '/frontcraft/shop',
},{
icon: 'book-open-outline',
title: 'Loot Rules',
@@ -39,10 +39,6 @@ export const routes: Routes = [
path: 'characters',
component: FrontcraftCharactersComponent,
},
{
path: 'shop',
component: FrontcraftShopComponent
},
{
path: 'rules',
component: FrontcraftRulesComponent
@@ -27,8 +27,13 @@ export class FrontcraftArchiveComponent implements OnInit{
Warlock: [],
Warrior: [],
},
tokens:{}
tokens:{},
tanks:[],
healers: []
}
tokens = {}
displayedtokens = {}
search = ""
constructor(
private api: ApiService,
@@ -46,19 +51,21 @@ export class FrontcraftArchiveComponent implements OnInit{
const raidManager = this.api.get('RaidManager')
const raiddata = await raidManager.getArchiveRaid(parseInt(param))
this.raid = raiddata
this.tokens = raiddata.tokens;
Object.values(raiddata.participants).flat().forEach(p => {
[
...raiddata.tanks,
...raiddata.healers,
...Object.values(raiddata.participants).flat()
].forEach(p => {
p['color'] = getClassColor(p.class)
})
const matchingSignup = Object.values(raiddata.participants).flat().find(char => char.userid === this.api.getCurrentUser()!.id!)
if(matchingSignup){
this.isSignedup = true
this.mySignup = matchingSignup
this.mySignup.status = matchingSignup['benched']?'Bench':matchingSignup['late']?'Late':'Attending'
}else{
this.isSignedup = false
this.mySignup = null
}
}
this.changeSearch()
}
changeSearch = () => {
this.tokens = this.raid.tokens;
this.displayedtokens = this.raid.tokens;
}
}
@@ -17,14 +17,32 @@
Status: {{mySignup.status}}
</p>
<button
(click)="setLate(true)"
*ngIf="mySignup.status !== 'Late'"
nbButton
outline
status="warning"
size="medium">
<nb-icon icon="clock-outline"></nb-icon> Late
</button>
<button
(click)="setLate(false)"
*ngIf="mySignup.status === 'Late'"
nbButton
outline
status="success"
size="medium">
<nb-icon icon="checkmark-outline"></nb-icon> On Time
</button>
<button
(click)="unsign()"
nbButton
outline
status="danger"
size="medium">
unsign
</button>
<nb-icon icon="close"></nb-icon>unsign
</button>
</div>
<div *ngIf="!isSignedup">
<button
@@ -33,7 +51,7 @@
outline
status="success"
size="medium">
signup
<nb-icon icon="person-done-outline"></nb-icon> sign up
</button>
</div>
</div>
@@ -44,6 +62,74 @@
badgePosition="top right"
[badgeStatus]="raid.signupcount<40?'warning':'success'">
<div class="row">
<nb-card
class="col-12 col-md-6"
*ngIf="raid.tanks.length > 0">
<nb-card-header>Tanks ({{raid.tanks.length}})</nb-card-header>
<nb-card-body>
<div *ngFor="let participant of raid.tanks">
<button
(click)="setBench(participant)"
*ngIf="manageRaid"
nbButton
outline
status="warning"
size="tiny">
B
</button>
<button
(click)="adminUnsign(participant)"
*ngIf="manageRaid"
nbButton
outline
status="danger"
size="tiny">
X
</button>
<a [ngStyle]="{'color': participant.color}" style="text-transform: capitalize;"
[routerLink]="'/frontcraft/character/'+participant.charactername">
<img style="width:20px; height:20px" [src]="'../../../../assets/images/'+participant.race.toLowerCase()+'_xs.gif'" />
<img style="width:20px; height:20px" [src]="'../../../../assets/images/'+participant.class.toLowerCase()+'.png'" />
{{ participant.charactername }}
</a>
</div>
</nb-card-body>
</nb-card>
<nb-card
class="col-12 col-md-6"
*ngIf="raid.tanks.length > 0">
<nb-card-header>Healers ({{raid.healers.length}})</nb-card-header>
<nb-card-body>
<div *ngFor="let participant of raid.healers">
<button
(click)="setBench(participant)"
*ngIf="manageRaid"
nbButton
outline
status="warning"
size="tiny">
B
</button>
<button
(click)="adminUnsign(participant)"
*ngIf="manageRaid"
nbButton
outline
status="danger"
size="tiny">
X
</button>
<a [ngStyle]="{'color': participant.color}" style="text-transform: capitalize;"
[routerLink]="'/frontcraft/character/'+participant.charactername">
<img style="width:20px; height:20px" [src]="'../../../../assets/images/'+participant.race.toLowerCase()+'_xs.gif'" />
<img style="width:20px; height:20px" [src]="'../../../../assets/images/'+participant.class.toLowerCase()+'.png'" />
{{ participant.charactername }}
</a>
</div>
</nb-card-body>
</nb-card>
<ng-container *ngFor="let group of raid.participants | keyvalue">
<nb-card
class="col-12 col-md-6 col-xl-4"
@@ -60,8 +146,19 @@
size="tiny">
B
</button>
<button
(click)="adminUnsign(participant)"
*ngIf="manageRaid"
nbButton
outline
status="danger"
size="tiny">
X
</button>
<a [ngStyle]="{'color': participant.color}" style="text-transform: capitalize;"
[routerLink]="'/frontcraft/character/'+participant.charactername">
<img style="width:20px; height:20px" [src]="'../../../../assets/images/'+participant.race.toLowerCase()+'_xs.gif'" />
<img style="width:20px; height:20px" [src]="'../../../../assets/images/'+participant.class.toLowerCase()+'.png'" />
{{ participant.charactername }}
</a>
</div>
@@ -70,12 +167,14 @@
</ng-container>
</div>
</nb-tab>
<nb-tab tabTitle="Shop">
<nb-tab tabTitle="Shop" *ngIf="isSignedup">
<shop (onSelect)="itemSelect($event)"></shop>
</nb-tab>
<nb-tab tabTitle="Reserves">
<input type="text" nbInput [(ngModel)]="search" (change)="changeSearch()" placeholder="Search" fullWidth="true">
<nb-list>
<nb-list-item *ngFor="let item of raid.tokens | keyvalue">
<nb-list-item *ngFor="let item of displayedtokens | keyvalue">
<a [ngStyle]="{'color':item.value[0].quality=='Epic'?'#a335ee':'#ff8000'}"
target="_blank"
[href]="item.value[0].url">
@@ -104,15 +203,6 @@
size="medium">
start
</button>
<button
(click)="archiveRaid(raid)"
nbButton
outline
status="danger"
size="medium">
archive
</button>
</nb-tab>
</nb-tabset>
</nb-card-body>
@@ -1,10 +1,10 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ApiService as ApiService } from '../../services/login-api';
import { RaidData, Raid, Signup } from '../../../../../../backend/Types/Types';
import { RaidData, Raid, Signup, Character, Spec, Item, SRToken } from '../../../../../../backend/Types/Types';
import { NbWindowService, NbToastrService, NbDialogService } from '@nebular/theme';
import { FrontcraftCharacerpickerComponent } from './characterpicker.component';
import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
import { getClassColor, SpecT } from '../../../../../../backend/Types/PlayerSpecs';
import { FrontcraftBuyTokenComponent } from '../shop/buytoken.component';
@Component({
@@ -15,8 +15,9 @@ export class FrontcraftRaidComponent implements OnInit{
canSignup = false
isSignedup = false
islate = false
manageRaid
mySignup
mySignup: (Signup & Character & Spec)
raid: RaidData = <any>{
participants:{
@@ -30,9 +31,14 @@ export class FrontcraftRaidComponent implements OnInit{
Warlock: [],
Warrior: [],
},
tanks: [],
healers: [],
tokens:{}
}
tokens = {}
displayedtokens = {}
search = ""
constructor(
private api: ApiService,
private route: ActivatedRoute,
@@ -93,11 +99,40 @@ export class FrontcraftRaidComponent implements OnInit{
const signupFeature = this.api.get('signup')
if(!signupFeature) return
await signupFeature.unsign(this.api.getAuth().token.value, <any>{id: this.mySignup.characterid, userid: this.mySignup.userid}, this.raid)
await signupFeature.unsign(this.api.getAuth().token.value, {
...this.mySignup,
id: this.mySignup.characterid,
}, this.raid)
this.toast.show('Success', 'Unsigned', { status: 'success' })
this.refresh()
}
setLate = async (value:boolean) => {
const auth = this.api.getAuth()
const signup = this.api.get('signup')
if(!signup) return
console.log("setlate");
await signup.sign(auth.token.value, {
...this.mySignup,
id: this.mySignup.characterid,
}, this.raid, value)
this.toast.show('Signup', 'Success', { status: 'success' })
this.refresh()
}
adminUnsign = async() => {
const manage = this.api.get('manageRaid')
if(!manage) return
await manage.adminUnsign({
...this.mySignup,
id: this.mySignup.characterid,
}, this.raid)
this.refresh()
}
refresh = async () => {
const param = this.route.snapshot.paramMap.get('id');
@@ -105,22 +140,40 @@ export class FrontcraftRaidComponent implements OnInit{
const raiddata = await raidManager.getRaidData(<any>{
id: param
})
this.raid = raiddata
this.tokens = raiddata.tokens;
Object.values(raiddata.participants).flat().forEach(p => {
[...raiddata.tanks, ...raiddata.healers, ...Object.values(raiddata.participants).flat()].forEach(p => {
p['color'] = getClassColor(p.class)
})
const user = this.api.getCurrentUser()
const matchingSignup = Object.values(raiddata.participants).flat().find(char => user && char.userid === user.id!)
if(matchingSignup){
this.isSignedup = true
this.mySignup = matchingSignup
this.mySignup.status = matchingSignup['benched']?'Bench':matchingSignup['late']?'Late':'Attending'
this.mySignup['status'] = matchingSignup['benched']?'Bench':matchingSignup['late']?'Late':'Attending'
}else{
this.isSignedup = false
this.mySignup = null
}
this.changeSearch()
}
changeSearch(){
if(!this.search || this.search == ""){
this.displayedtokens = this.tokens
}else{
this.displayedtokens = {}
Object.entries(this.tokens).forEach((e: [string, (Character & SRToken & Item)[]]) => {
const filteredTokens = e[1].filter(item => {
return item.itemname.toLocaleLowerCase().includes(this.search.toLocaleLowerCase())
})
if(filteredTokens.length > 0)
this.displayedtokens[e[0]] = filteredTokens
})
}
}
setBench(signup:Signup){
@@ -20,7 +20,7 @@
<ng-template #templateRef>
<span style="color:white">{{rule.description}}</span>
</ng-template>
+{{rule.modifier}} {{rule.race}} <span [ngStyle]="{'color':rule.color}">{{rule.specname}} {{rule.class}}</span> <br />
<span *ngIf="rule.modifier>0">+</span>{{rule.modifier}} {{rule.race}} <span [ngStyle]="{'color':rule.color}">{{rule.specname}} {{rule.class}}</span> <br />
</span>
</nb-list-item>
</nb-list>
@@ -72,13 +72,18 @@ import { _Tiers, allItems, Tiers } from '../../../../../../backend/Types/Items';
.then(chars => {
chars.forEach(char => {
char['color'] = getClassColor(char.class)
this.api.get('ItemManager').getToken(char, this.item).then(token => {
if(token) this.ownedtokens.push(token)
else{
this.api.get('ItemManager').calculatePriorities(this.item.itemname, char).then(modifier => {
this.modifier[char.charactername] = modifier
})
}
this.api.get('ItemManager').getToken(char, this.item, false).then(token => {
if(token) this.ownedtokens.push(token)
else{
this.api.get('ItemManager').getToken(char, this.item, true).then(tokken => {
if(tokken) this.ownedtokens.push(tokken)
else{
this.api.get('ItemManager').calculatePriorities(this.item.itemname, char).then(modifier => {
this.modifier[char.charactername] = modifier
})
}
})
}
})
})
this.characters = chars
@@ -90,15 +95,14 @@ import { _Tiers, allItems, Tiers } from '../../../../../../backend/Types/Items';
}
buyToken = async (charactername:string) => {
const src = this.api.get('ItemManager')
const token = await src.buyToken(this.api.getAuth().token.value, charactername, this.item.itemname, this.signup)
if(token){
this.toastr.show(token.characterid+' now has a token for '+token.itemname+' of level '+token.level, 'Yay', {status: 'success'})
}else{
this.toastr.show('Error (something went wrong)', 'Oh no', {status: 'danger'})
}
this.dialogRef.close()
const src = this.api.get('ItemManager')
const token = await src.buyToken(this.api.getAuth().token.value, charactername, this.item.itemname, this.signup)
if(token){
this.toastr.show(token.characterid+' now has a token for '+token.itemname+' of level '+token.level, 'Yay', {status: 'success'})
}else{
this.toastr.show('Error (something went wrong)', 'Oh no', {status: 'danger'})
}
this.dialogRef.close()
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 350 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 373 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 350 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 371 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 610 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB