sh-edraft.de/sh_discord_bot
5
1
Fork 1
Code Issues 26 Pull Requests Actions Packages Projects 3 Releases 27 Wiki Activity

Added level icons

Browse Source
This commit is contained in:
Sven Heidemann
2024-01-25 17:11:48 +01:00
parent a917803eff
commit f209e45905
8 changed files with 252 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/app/models/graphql/queries.model.ts
View File

@@ -155,6 +155,7 @@ export class Queries {
levelCount
levels(filter: $filter, page: $page, sort: $sort) {
id
iconURL
name
color
minXp

437
web/src/app/modules/view/server/levels/components/levels/levels.component.html
View File

@@ -1,238 +1,251 @@
<h1>
{{'view.server.levels.header' | translate}}
{{'view.server.levels.header' | translate}}
</h1>
<div class="content-wrapper">
<div class="content">
<p-table #dt [value]="levels" [responsive]="true" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id"
editMode="row" [rowHover]="true" [rows]="10"
[rowsPerPageOptions]="[10,25,50]" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords"
[lazy]="true" (onLazyLoad)="nextPage($event)">
<div class="content">
<p-table #dt [value]="levels" [responsive]="true" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id"
editMode="row" [rowHover]="true" [rows]="10"
[rowsPerPageOptions]="[10,25,50]" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords"
[lazy]="true" (onLazyLoad)="nextPage($event)">
<ng-template pTemplate="caption">
<div class="table-caption">
<div class="table-caption-table-info">
<div class="table-caption-text">
<ng-container *ngIf="!loading">{{levels.length}} {{'common.of' | translate}}
{{dt.totalRecords}}
</ng-container>
{{'view.server.levels.levels' | translate}}
</div>
<ng-template pTemplate="caption">
<div class="table-caption">
<div class="table-caption-table-info">
<div class="table-caption-text">
<ng-container *ngIf="!loading">{{levels.length}} {{'common.of' | translate}}
{{dt.totalRecords}}
</ng-container>
{{'view.server.levels.levels' | translate}}
</div>
<app-multi-select-columns [table]="name" [columns]="columns"
[(hiddenColumns)]="hiddenColumns"></app-multi-select-columns>
</div>
<app-multi-select-columns [table]="name" [columns]="columns"
[(hiddenColumns)]="hiddenColumns"></app-multi-select-columns>
</div>
<div class="table-caption-btn-wrapper btn-wrapper">
<button pButton label="{{'common.add' | translate}}" class="icon-btn btn"
icon="pi pi-plus" (click)="addLevel(dt)"
[disabled]="isEditingNew || user?.isModerator && !user?.isAdmin">
</button>
<button pButton label="{{'common.reset_filters' | translate}}" icon="pi pi-undo"
class="icon-btn btn" (click)="resetFilters()">
</button>
<app-data-import-and-export name="levels" [(data)]="levels"
[callback]="callback" [validator]="validator"></app-data-import-and-export>
</div>
</div>
</ng-template>
<div class="table-caption-btn-wrapper btn-wrapper">
<button pButton label="{{'common.add' | translate}}" class="icon-btn btn"
icon="pi pi-plus" (click)="addLevel(dt)"
[disabled]="isEditingNew || user?.isModerator && !user?.isAdmin">
</button>
<button pButton label="{{'common.reset_filters' | translate}}" icon="pi pi-undo"
class="icon-btn btn" (click)="resetFilters()">
</button>
<app-data-import-and-export name="levels" [(data)]="levels"
[callback]="callback" [validator]="validator"></app-data-import-and-export>
</div>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th hideable-th="id" [parent]="this" [sortable]="true">
<div class="table-header-label">
<div class="table-header-text">{{'common.id' | translate}}</div>
<p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
</div>
</th>
<ng-template pTemplate="header">
<tr>
<th hideable-th="id" [parent]="this" [sortable]="true">
<div class="table-header-label">
<div class="table-header-text">{{'common.id' | translate}}</div>
<p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th hideable-th="name" [parent]="this" [sortable]="true">
<div class="table-header-label">
<div class="table-header-text">{{'common.name' | translate}}</div>
<p-sortIcon field="name" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th hideable-th="icon" [parent]="this" [sortable]="true">
<div class="table-header-label">
<div class="table-header-text">{{'common.icon' | translate}}</div>
<p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th hideable-th="color" [parent]="this" [sortable]="true">
<div class="table-header-label">
<div class="table-header-text">{{'common.color' | translate}}</div>
<p-sortIcon field="color" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th hideable-th="name" [parent]="this" [sortable]="true">
<div class="table-header-label">
<div class="table-header-text">{{'common.name' | translate}}</div>
<p-sortIcon field="name" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th hideable-th="min_xp" [parent]="this" [sortable]="true">
<div class="table-header-label">
<div class="table-header-text">{{'common.min_xp' | translate}}</div>
<p-sortIcon field="minXp" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th hideable-th="color" [parent]="this" [sortable]="true">
<div class="table-header-label">
<div class="table-header-text">{{'common.color' | translate}}</div>
<p-sortIcon field="color" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th hideable-th="permissions" [parent]="this" [sortable]="true">
<div class="table-header-label">
<div class="table-header-text">{{'common.permissions' | translate}}</div>
<p-sortIcon field="permissions" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th hideable-th="min_xp" [parent]="this" [sortable]="true">
<div class="table-header-label">
<div class="table-header-text">{{'common.min_xp' | translate}}</div>
<p-sortIcon field="minXp" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th>
<div class="table-header-label">
<div class="table-header-text">{{'common.created_at' | translate}}</div>
</div>
</th>
<th hideable-th="permissions" [parent]="this" [sortable]="true">
<div class="table-header-label">
<div class="table-header-text">{{'common.permissions' | translate}}</div>
<p-sortIcon field="permissions" class="table-header-icon"></p-sortIcon>
</div>
</th>
<th>
<div class="table-header-label">
<div class="table-header-text">{{'common.modified_at' | translate}}</div>
</div>
</th>
<th>
<div class="table-header-label">
<div class="table-header-text">{{'common.created_at' | translate}}</div>
</div>
</th>
<th>
<div class="table-header-label">
<div class="table-header-text">{{'common.actions' | translate}}</div>
</div>
</th>
</tr>
<th>
<div class="table-header-label">
<div class="table-header-text">{{'common.modified_at' | translate}}</div>
</div>
</th>
<tr>
<th hideable-th="id" [parent]="this" class="table-header-small">
<form [formGroup]="filterForm">
<input type="text" pInputText formControlName="id"
placeholder="{{'common.id' | translate}}">
</form>
</th>
<th hideable-th="name" [parent]="this">
<form [formGroup]="filterForm">
<input type="text" pInputText formControlName="name"
placeholder="{{'common.name' | translate}}">
</form>
</th>
<th hideable-th="color" [parent]="this"></th>
<th hideable-th="min_xp" [parent]="this"></th>
<th hideable-th="permissions" [parent]="this"></th>
<th class="table-header-small-dropdown"></th>
<th class="table-header-small-dropdown"></th>
<th class="table-header-actions"></th>
</tr>
</ng-template>
<th>
<div class="table-header-label">
<div class="table-header-text">{{'common.actions' | translate}}</div>
</div>
</th>
</tr>
<ng-template pTemplate="body" let-level let-editing="editing" let-ri="rowIndex">
<tr [pEditableRow]="level">
<td hideable-th="id" [parent]="this">
<span class="p-column-title">{{'common.id' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
{{level.id}}
</ng-template>
<ng-template pTemplate="output">
{{level.id}}
</ng-template>
</p-cellEditor>
</td>
<tr>
<th hideable-th="id" [parent]="this" class="table-header-small">
<form [formGroup]="filterForm">
<input type="text" pInputText formControlName="id"
placeholder="{{'common.id' | translate}}">
</form>
</th>
<th hideable-th="icon" [parent]="this" class="table-header-small">
</th>
<th hideable-th="name" [parent]="this">
<form [formGroup]="filterForm">
<input type="text" pInputText formControlName="name"
placeholder="{{'common.name' | translate}}">
</form>
</th>
<th hideable-th="color" [parent]="this"></th>
<th hideable-th="min_xp" [parent]="this"></th>
<th hideable-th="permissions" [parent]="this"></th>
<th class="table-header-small-dropdown"></th>
<th class="table-header-small-dropdown"></th>
<th class="table-header-actions"></th>
</tr>
</ng-template>
<td hideable-th="name" [parent]="this">
<span class="p-column-title">{{'common.name' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
<input class="table-edit-input" pInputText type="text" [(ngModel)]="level.name">
</ng-template>
<ng-template pTemplate="output">
{{level.name}}
</ng-template>
</p-cellEditor>
</td>
<ng-template pTemplate="body" let-level let-editing="editing" let-ri="rowIndex">
<tr [pEditableRow]="level">
<td hideable-th="id" [parent]="this">
<span class="p-column-title">{{'common.id' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
{{level.id}}
</ng-template>
<ng-template pTemplate="output">
{{level.id}}
</ng-template>
</p-cellEditor>
</td>
<td hideable-th="color" [parent]="this">
<span class="p-column-title">{{'common.color' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
<input class="table-edit-input" pInputText type="text" [(ngModel)]="level.color">
</ng-template>
<ng-template pTemplate="output">
{{level.color}}
</ng-template>
</p-cellEditor>
</td>
<td hideable-th="icon" [parent]="this">
<img width="32px" height="32px" *ngIf="level ? level.iconURL : ''" [src]="level ? level.iconURL : ''">
</td>
<td hideable-th="min_xp" [parent]="this">
<span class="p-column-title">{{'common.min_xp' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
<input class="table-edit-input" pInputText min="0" type="number"
[(ngModel)]="level.minXp">
</ng-template>
<ng-template pTemplate="output">
{{level.minXp}}
</ng-template>
</p-cellEditor>
</td>
<td hideable-th="name" [parent]="this">
<span class="p-column-title">{{'common.name' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
<input class="table-edit-input" pInputText type="text" [(ngModel)]="level.name">
</ng-template>
<ng-template pTemplate="output">
{{level.name}}
</ng-template>
</p-cellEditor>
</td>
<td hideable-th="permissions" [parent]="this">
<span class="p-column-title">{{'common.permissions' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
<input class="table-edit-input" pInputText min="0" type="text"
[(ngModel)]="level.permissions">
</ng-template>
<ng-template pTemplate="output">
{{level.permissions}}
</ng-template>
</p-cellEditor>
</td>
<td hideable-th="color" [parent]="this">
<span class="p-column-title">{{'common.color' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
<input class="table-edit-input" pInputText type="text" [(ngModel)]="level.color">
</ng-template>
<ng-template pTemplate="output">
{{level.color}}
</ng-template>
</p-cellEditor>
</td>
<td>
<span class="p-column-title">{{'common.created_at' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
{{level.createdAt | date:'dd.MM.yy HH:mm'}}
</ng-template>
<ng-template pTemplate="output">
{{level.createdAt | date:'dd.MM.yy HH:mm'}}
</ng-template>
</p-cellEditor>
</td>
<td>
<span class="p-column-title">{{'common.modified_at' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
{{level.modifiedAt | date:'dd.MM.yy HH:mm'}}
</ng-template>
<ng-template pTemplate="output">
{{level.modifiedAt | date:'dd.MM.yy HH:mm'}}
</ng-template>
</p-cellEditor>
</td>
<td>
<div class="btn-wrapper">
<app-history-btn *ngIf="!isEditingNew" [id]="level.id" [query]="query"
translationKey="view.server.levels.header"></app-history-btn>
<button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil"
(click)="onRowEditInit(dt, level, ri)"
[disabled]="!user || user.isModerator && !user.isAdmin"></button>
<button *ngIf="!editing" pButton class="btn icon-btn danger-icon-btn" icon="pi pi-trash"
(click)="deleteLevel(level)"
[disabled]="!user || user.isModerator && !user.isAdmin"></button>
<td hideable-th="min_xp" [parent]="this">
<span class="p-column-title">{{'common.min_xp' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
<input class="table-edit-input" pInputText min="0" type="number"
[(ngModel)]="level.minXp">
</ng-template>
<ng-template pTemplate="output">
{{level.minXp}}
</ng-template>
</p-cellEditor>
</td>
<button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
icon="pi pi-check-circle" (click)="onRowEditSave(level, ri)"
[disabled]="!user || user.isModerator && !user.isAdmin"></button>
<button *ngIf="editing" pButton pCancelEditableRow class="btn icon-btn danger-icon-btn"
icon="pi pi-times-circle" (click)="onRowEditCancel(ri)"
[disabled]="!user || user.isModerator && !user.isAdmin"></button>
</div>
</td>
</tr>
</ng-template>
<td hideable-th="permissions" [parent]="this">
<span class="p-column-title">{{'common.permissions' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
<input class="table-edit-input" pInputText min="0" type="text"
[(ngModel)]="level.permissions">
</ng-template>
<ng-template pTemplate="output">
{{level.permissions}}
</ng-template>
</p-cellEditor>
</td>
<ng-template pTemplate="emptymessage">
<tr></tr>
<tr>
<td colspan="10">{{'common.no_entries_found' | translate}}</td>
</tr>
<tr></tr>
</ng-template>
<td>
<span class="p-column-title">{{'common.created_at' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
{{level.createdAt | date:'dd.MM.yy HH:mm'}}
</ng-template>
<ng-template pTemplate="output">
{{level.createdAt | date:'dd.MM.yy HH:mm'}}
</ng-template>
</p-cellEditor>
</td>
<td>
<span class="p-column-title">{{'common.modified_at' | translate}}:</span>
<p-cellEditor>
<ng-template pTemplate="input">
{{level.modifiedAt | date:'dd.MM.yy HH:mm'}}
</ng-template>
<ng-template pTemplate="output">
{{level.modifiedAt | date:'dd.MM.yy HH:mm'}}
</ng-template>
</p-cellEditor>
</td>
<td>
<div class="btn-wrapper">
<app-history-btn *ngIf="!isEditingNew" [id]="level.id" [query]="query"
translationKey="view.server.levels.header"></app-history-btn>
<button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil"
(click)="onRowEditInit(dt, level, ri)"
[disabled]="!user || user.isModerator && !user.isAdmin"></button>
<button *ngIf="!editing" pButton class="btn icon-btn danger-icon-btn" icon="pi pi-trash"
(click)="deleteLevel(level)"
[disabled]="!user || user.isModerator && !user.isAdmin"></button>
<ng-template pTemplate="paginatorleft">
</ng-template>
</p-table>
</div>
<button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
icon="pi pi-check-circle" (click)="onRowEditSave(level, ri)"
[disabled]="!user || user.isModerator && !user.isAdmin"></button>
<button *ngIf="editing" pButton pCancelEditableRow class="btn icon-btn danger-icon-btn"
icon="pi pi-times-circle" (click)="onRowEditCancel(ri)"
[disabled]="!user || user.isModerator && !user.isAdmin"></button>
</div>
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr></tr>
<tr>
<td colspan="10">{{'common.no_entries_found' | translate}}</td>
</tr>
<tr></tr>
</ng-template>
<ng-template pTemplate="paginatorleft">
</ng-template>
</p-table>
</div>
</div>

4
web/src/app/modules/view/server/levels/components/levels/levels.component.ts
View File

@@ -19,7 +19,7 @@ import { Table } from "primeng/table";
import { User } from "../../../../../../models/data/user.model";
import { LevelMutationResult, UpdateUserMutationResult } from "../../../../../../models/graphql/result.model";
import { Mutations } from "../../../../../../models/graphql/mutations.model";
import { forkJoin, Subject, throwError } from "rxjs";
import { Subject, throwError } from "rxjs";
import { Server } from "../../../../../../models/data/server.model";
import { UserDTO } from "../../../../../../models/auth/auth-user.dto";
import { ComponentWithTable } from "../../../../../../base/component-with-table";
@@ -72,7 +72,7 @@ export class LevelsComponent extends ComponentWithTable implements OnInit, OnDes
private sidebar: SidebarService,
private route: ActivatedRoute
) {
super("level", ["id", "name", "color", "min_xp", "permissions"], (oldElement: Level, newElement: Level) => {
super("level", ["id", "icon", "name", "color", "min_xp", "permissions"], (oldElement: Level, newElement: Level) => {
return oldElement.name === newElement.name;
});
}

1
web/src/assets/i18n/de.json
View File

@@ -180,6 +180,7 @@
"value": "Wert",
"xp": "XP"
},
"icon": "Icon",
"id": "Id",
"import": "Importieren",
"interval": "Interval",

1
web/src/assets/i18n/en.json
View File

@@ -180,6 +180,7 @@
"value": "Value",
"xp": "XP"
},
"icon": "Icon",
"id": "Id",
"import": "Import",
"interval": "interval",