Added level icons

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

View File

@ -2,6 +2,10 @@ from datetime import datetime
from typing import Optional
from cpl_core.database import TableABC
from cpl_core.dependency_injection import ServiceProviderABC
from cpl_discord.service import DiscordBotServiceABC
from cpl_query.extension import List
from discord import Role
from bot_data.model.server import Server
@ -33,6 +37,13 @@ class Level(TableABC):
def id(self) -> int:
return self._id
@property
@ServiceProviderABC.inject
def icon_url(self, bot: DiscordBotServiceABC) -> str:
guild = bot.get_guild(self.server.discord_id)
role = List(Role, guild.roles).where(lambda x: x.name == self._name).first_or_default()
return None if role is None else role.icon
@property
def name(self) -> str:
return self._name

View File

@ -1,5 +1,6 @@
type Level implements TableWithHistoryQuery {
id: ID
iconURL: String
name: String
color: String
minXp: Int

View File

@ -1,6 +1,5 @@
from cpl_core.database.context import DatabaseContextABC
from bot_data.model.level import Level
from bot_data.model.level_history import LevelHistory
from bot_graphql.abc.data_query_with_history_abc import DataQueryWithHistoryABC
@ -9,33 +8,13 @@ class LevelQuery(DataQueryWithHistoryABC):
def __init__(self, db: DatabaseContextABC):
DataQueryWithHistoryABC.__init__(self, "Level", "LevelsHistory", LevelHistory, db)
self.set_field("id", self.resolve_id)
self.set_field("name", self.resolve_name)
self.set_field("color", self.resolve_color)
self.set_field("minXp", self.resolve_min_xp)
self.set_field("permissions", self.resolve_permissions)
self.set_field("server", self.resolve_server)
@staticmethod
def resolve_id(level: Level, *_):
return level.id
@staticmethod
def resolve_name(level: Level, *_):
return level.name
@staticmethod
def resolve_color(level: Level, *_):
return level.color
@staticmethod
def resolve_min_xp(level: Level, *_):
return level.min_xp
@staticmethod
def resolve_permissions(level: Level, *_):
return level.permissions
@staticmethod
def resolve_server(level: Level, *_):
return level.server
self.set_field("id", lambda x, *_: x.id)
self.set_field(
"iconURL",
lambda x, *_: "https://cdn.discordapp.com/emojis/1170348708894875659.webp?size=32&quality=lossless",
)
self.set_field("name", lambda x, *_: x.name)
self.set_field("color", lambda x, *_: x.color)
self.set_field("minXp", lambda x, *_: x.min_xp)
self.set_field("permissions", lambda x, *_: x.permissions)
self.set_field("server", lambda x, *_: x.server)

View File

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

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>

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;
});
}

View File

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

View File

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