diff --git a/loader/app/targets/app.ts b/loader/app/targets/app.ts index 721f8086..d50cbee8 100644 --- a/loader/app/targets/app.ts +++ b/loader/app/targets/app.ts @@ -184,7 +184,6 @@ const loader_style = { "css/static/modal-poke.css", "css/static/modal-server.css", "css/static/modal-keyselect.css", - "css/static/modal-permissions.css", "css/static/modal-group-assignment.css", "css/static/overlay-image-preview.css", "css/static/context_menu.css", diff --git a/shared/css/generate_packed.sh b/shared/css/generate_packed.sh index db4078a0..a671de2a 100644 --- a/shared/css/generate_packed.sh +++ b/shared/css/generate_packed.sh @@ -36,7 +36,6 @@ files=( "css/static/modal-newcomer.css" "css/static/modal-invite.css" "css/static/modal-keyselect.css" - "css/static/modal-permissions.css" "css/static/modal-poke.css" "css/static/modal-query.css" "css/static/modal-server.css" diff --git a/shared/css/static/modal-permissions.scss b/shared/css/static/modal-permissions.scss deleted file mode 100644 index 7536dc5a..00000000 --- a/shared/css/static/modal-permissions.scss +++ /dev/null @@ -1,865 +0,0 @@ -@import "mixin"; -@import "properties"; - -.modal-body.modal-permission-editor { - padding: 0!important; - - display: flex!important;; - flex-direction: column!important;; - justify-content: stretch!important;; - - width: 1000000em; /* get us some width */ - min-height: 20em; /* Set it here, so we dont have a inner modal scroll */ - - @include user-select(none); - - .container { - display: flex; - flex-direction: row; - justify-content: stretch; - - padding: 0!important; - - width: 100%; - max-height: 90vh; - min-height: 20em; - height: 100000000px; /* enforce max height */ - } - - .header { - height: 4em; - background-color: var(--modal-permissions-header-background); - color: var(--modal-permissions-header-text); - - display: flex; - flex-direction: row; - justify-content: stretch; - - > .entry { - flex-grow: 1; - flex-shrink: 1; - - text-align: center; - - height: 100%; - - display: flex; - flex-direction: column; - justify-content: space-around; - } - } - - .container > .left, .container > .right { - max-height: 100%; - - display: flex; - flex-direction: column; - justify-content: stretch; - - > .header { - flex-shrink: 0; - flex-grow: 0; - } - - > .body { - flex-shrink: 1; - flex-grow: 1; - } - } - - .container >.right { - z-index: 2; /* because the left container overlaps the right container once */ - - width: 75%; - min-width: 30em; - - background-color: var(--modal-permission-right); - - /* DONE! */ - .header { - > .entry { - position: relative; - overflow: hidden; - - cursor: pointer; - padding-bottom: 2px; - - a { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - &:hover { - border: none; - border-bottom: 2px solid var(--modal-permissions-header-hover); - - padding-bottom: 0; - - &:before { - position: absolute; - content: ''; - - margin-right: -10em; - margin-left: -10em; - margin-bottom: -.2em; - bottom: 0; - - height: 100%; - width: calc(100% + 20em); - - box-shadow: inset 0px -1.2em 3em -20px var(--modal-permissions-header-hover); - } - } - - &.selected { - border: none; - border-bottom: 2px solid var(--modal-permissions-header-selected); - - padding-bottom: 0; - - &:before { - position: absolute; - content: ''; - - margin-right: -10em; - margin-left: -10em; - margin-bottom: -.2em; - bottom: 0; - - height: 100%; - width: calc(100% + 20em); - - box-shadow: inset 0px -1.2em 3em -20px var(--modal-permissions-header-selected); - } - } - } - } - - .body { - display: flex; - flex-direction: column; - justify-content: stretch; - min-height: 16em; - - > .container { /* container permission editor */ - height: 100%; - width: 100%; - - flex-grow: 1; - flex-shrink: 1; - - min-height: 10em; - min-width: 30em; - - .permission-editor { - display: flex; - flex-direction: column; - justify-content: stretch; - width: 100%; - padding: 5px; - } - } - } - } - - .container >.left { - width: 25%; - min-width: 10em; - min-height: 10em; - overflow: hidden; - - background-color: var(--modal-permission-left); - - .header { - font-weight: bold; - - > .entry { - overflow: hidden; - - a { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - } - - > * { - font-size: 1.5em; - } - } - - .body { - display: flex; - flex-direction: column; - justify-content: stretch; - min-height: 16em; - - .container { - flex-grow: 1; - flex-shrink: 1; - - min-height: 15em; - overflow-y: auto; - - flex-direction: column; - } - } - - - /* server group left list layout */ - .container-view-server-groups, .container-view-channel-groups, .container-view-channel-permissions, .container-view-client-channel-permissions, .container-view-client-channel-permissions { - height: 100%; - width: 100%; - - .list-groups, .list-channel, .list-clients { - color: var(--text); - - display: flex; - flex-direction: column; - justify-content: flex-start; - - overflow: auto; - @include chat-scrollbar-vertical(); - @include chat-scrollbar-horizontal(); - - width: 100%; - - flex-grow: 1; - flex-shrink: 1; - - .entries { - display: flex; - flex-direction: column; - justify-content: flex-start; - - height: max-content; - - min-width: 100%; - width: max-content; - - .group, .channel, .client { - padding-left: .25em; - - flex-shrink: 0; - flex-grow: 0; - - display: flex; - flex-direction: row; - justify-content: flex-start; - - cursor: pointer; - - width: 100%; - - &:hover { - background-color: var(--modal-permissions-entry-hover); - } - - &.selected { - background-color: var(--modal-permissions-entry-selected); - } - - @include transition(background-color .25s ease-in-out); - - .icon-container, .icon { - align-self: center; - margin-right: .25em; - } - } - } - } - - .container-buttons { - position: relative; - - display: flex; - flex-direction: row; - justify-content: stretch; - - flex-grow: 0; - flex-shrink: 0; - - height: 2.5em; - width: 100%; - - .button { - display: flex; - flex-direction: row; - justify-content: space-around; - - flex-grow: 1; - flex-shrink: 1; - - cursor: pointer; - - background-color: var(--modal-permissions-buttons-background); - - &:hover { - background-color: var(--modal-permissions-buttons-hover); - } - - &:disabled { - background-color: var(--modal-permissions-buttons-disabled); - } - - @include transition(background-color .25s ease-in-out); - - img { - width: 2.2em; - height: 2.2em; - - align-self: center; - } - } - } - } - - .container-view-server-groups { - position: relative; - - overflow: hidden; - - $animation_length: .3s; - .container-group-list { - flex-grow: 1; - flex-shrink: 1; - - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - - display: flex; - flex-direction: column; - justify-content: stretch; - - &.hidden { - @include transform(translateX(-100%)); - } - @include transition($animation_length ease-in-out); - } - - .container-client-list { - flex-grow: 1; - flex-shrink: 1; - - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - - display: flex; - flex-direction: column; - justify-content: stretch; - - .container-current-group { - flex-shrink: 0; - flex-grow: 0; - - display: flex; - flex-direction: row; - justify-content: stretch; - - background-color: var(--modal-permissions-current-group); - color: var(--text); - padding-left: .25em; - - - height: 1.5em; - font-size: 1.125em; - - > .icon-container { - display: flex; - flex-direction: column; - justify-content: space-around; - - height: 100%; - margin-right: .25em; - } - - .name { - flex-grow: 1; - flex-shrink: 1; - - height: 1.5em; - } - } - - &.hidden { - @include transform(translateX(100%)); - } - @include transition($animation_length ease-in-out); - } - } - - .container-view-client-permissions, .container-view-client-channel-permissions { - .client-info { - width: 100%; - padding: .25em; - } - - hr { - border: none; - border-top: 2px solid var(--modal-permissions-seperator); - } - } - - .container-view-client-channel-permissions { - display: flex; - flex-direction: column; - justify-content: stretch; - - } - } - - .container-seperator { - width: 3px; - height: unset!important; - background-color: var(--modal-permissions-container-seperator)!important; - } -} - -/* canvas permission editor */ -//TODO: Some styling needed -.container-permissions-canvas { - display: flex; - flex-direction: column; - justify-content: stretch; - width: 100%; - - .container-permissions { - padding: .5em; - overflow-x: auto; - overflow-y: hidden; - } - - .permission-explorer { - min-width: 750px; - } - - .switch { - width: 5em; - } - - .column-name { - align-self: center; - padding-left: 1em; - } - - .entry-editor-container { - @include chat-scrollbar-vertical(); - } -} - -/* html permission editor */ -.container-permissions-html { - flex-grow: 1; - flex-shrink: 1; - - display: flex; - flex-direction: column; - justify-content: stretch; - - min-height: 10em; - width: 100%; - - .container-filter, .container-footer { - flex-grow: 0; - flex-shrink: 0; - - display: flex; - flex-direction: row; - } - - .container-filter { - justify-content: stretch; - height: 3em; - - > * { - align-self: center; - } - - .button-toggle-clients { - flex-grow: 0; - flex-shrink: 0; - - width: 16em; - height: 2.5em; - - margin-right: 1em; - } - - .container-input { - flex-grow: 5; - flex-shrink: 1; - - padding-top: 0!important; - margin-bottom: 0!important; - - height: 2.5em; - - .bmd-label-floating { - top: .5em; - } - - &.is-filled, &:focus-within { - .bmd-label-floating { - top: -.4em; - } - } - } - - .container-switchs { - height: 2.5em; - - margin-left: 1em; - - position: relative; - - display: flex; - flex-direction: column; - justify-content: center; - - - flex-grow: 1; - flex-shrink: 1; - max-width: 10em; - min-width: 5em; - - color: var(--text); - - > label { - font-size: .75em; - - display: flex; - flex-direction: row; - justify-content: flex-start; - - pointer-events: all; - cursor: pointer; - - .switch { - align-self: center; - } - - a { - padding-left: .25em; - font-size: 1.1em; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - - .container-icon-select { - position: relative; - - height: 2.5em; - - border-radius: .2em; - margin-left: 1em; - - display: flex; - flex-direction: row; - justify-content: flex-end; - - cursor: pointer; - background-color: var(--modal-permissions-icon-select); - border: 1px solid var(--modal-permissions-icon-select-border); - - .icon-preview { - height: 100%; - width: 3em; - - border: none; - border-right: 1px solid var(--modal-permissions-icon-select-border); - - display: flex; - flex-direction: column; - justify-content: space-around; - - > div { - align-self: center; - } - - > img { - align-self: center; - - width: 1em; - height: 1em; - } - - @include transition(border-color $button_hover_animation_time ease-in-out); - } - - .container-dropdown { - position: relative; - cursor: pointer; - - display: flex; - flex-direction: column; - justify-content: space-around; - - height: 100%; - width: 1.5em; - - .button { - text-align: center; - - .arrow { - border-color: var(--text); - } - } - - .dropdown { - display: none; - position: absolute; - width: max-content; - - top: calc(2.5em - 2px); - - flex-direction: column; - justify-content: flex-start; - - background-color: var(--modal-permissions-icon-select); - border: 1px solid var(--modal-permissions-icon-select-border); - border-radius: .2em 0 .2em .2em; - - right: -1px; - - .entry { - padding: .5em; - - &:not(:last-of-type) { - border: none; - border-bottom: 1px solid var(--modal-permissions-icon-select-border); - } - - &:hover { - background-color: var(--modal-permissions-icon-select-hover); - } - } - } - - &:hover { - border-bottom-right-radius: 0; - .dropdown { - display: flex; - } - } - } - - &:hover { - background-color: var(--modal-permissions-icon-select-hover); - border-color: var(--modal-permissions-icon-select-hover-border); - - .icon-preview { - border-color: var(--modal-permissions-icon-select-hover-border); - } - } - - @include transition(border-color $button_hover_animation_time ease-in-out); - } - } - - .container-mode { - flex-grow: 1; - flex-shrink: 1; - min-height: 5em; - - &.container-mode-permissions { - .container-permission-list { - width: 100%; - color: var(--text); - - display: flex; - flex-direction: column; - justify-content: stretch; - - min-height: 5em; - - .entry { - width: 100%; - - flex-grow: 0; - flex-shrink: 0; - - display: flex; - flex-direction: row; - justify-content: stretch; - - height: 2em; - border: none; - border-bottom: 1px solid var(--modal-permissions-table-border); - background-color: var(--modal-permissions-table-row-odd); - - color: var(--modal-permissions-table-row-text); - - @mixin fixed-column($name, $width) { - .column-#{$name} { - display: flex; - flex-direction: row; - justify-content: stretch; - - flex-grow: 0; - flex-shrink: 0; - - width: $width; - - align-items: center; - - padding-left: 1em; - - border: none; - border-right: 1px solid var(--modal-permissions-table-border); - - overflow: hidden; - - a { - max-width: 100%; - - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - } - } - - @include fixed-column(name, 6em); - @include fixed-column(value, 6em); - @include fixed-column(skip, 5em); - @include fixed-column(negate, 5em); - @include fixed-column(granted, 6em); - - .column-name { - flex-grow: 1; - flex-shrink: 1; - - .arrow { - cursor: pointer; - border-color: var(--modal-permissions-table-entry-active-text); - } - - .group-name { - margin-left: .5em; - } - } - - .column-granted { - border-right: none; - } - - - &.active { - color: var(--modal-permissions-table-entry-active-text); - } - - &.group { - color: var(--modal-permissions-table-entry-group-text); - font-weight: bold; - } - - input { - color: var(--modal-permissions-table-input); - - outline: none; - background: transparent; - border: none; - - height: 1.5em; - width: 5em; /* the column width minus one */ - - /* fix the column padding */ - padding-left: 1em; - margin-left: -.5em; /* have a bit of space on both sides */ - - border-bottom: 2px solid transparent; - - &:focus { - border-bottom-color: var(--modal-permissions-table-input-focus); - } - @include transition(border-bottom-color $button_hover_animation_time ease-in-out); - } - } - - .body { - flex-grow: 1; - flex-shrink: 1; - - min-height: 6em; /* TODO: Width */ - - display: flex; - flex-direction: column; - justify-content: stretch; - - overflow-y: scroll; - overflow-x: auto; - - @include chat-scrollbar-vertical(); - @include chat-scrollbar-horizontal(); - - .entry { - &.even { - background-color: var(--modal-permissions-table-row-even); - } - - &:hover { - background-color: var(--modal-permissions-table-row-hover); - } - /* We cant use this effect here because the odd/even effect would be a bit crazy then */ - //@include transition(background-color $button_hover_animation_time ease-in-out); - } - } - - .header { - background-color: var(--modal-permissions-table-header); - color: var(--modal-permissions-table-header-text); - - font-weight: bold; - - .column-granted { - margin-right: .5em; /* scroll bar */ - -moz-margin-end: 12px; /* moz scroll bar */ - } - } - } - } - - &.container-mode-no-permissions { - display: flex; - flex-direction: column; - justify-content: space-around; - - text-align: center; - font-size: 2em; - - color: var(--modal-permission-left); - } - } - - .container-footer { - justify-content: flex-end; - margin-top: .5em; - } -} - -.modal-group-add { - display: flex; - flex-direction: column; - justify-content: flex-start; - - .buttons { - display: flex; - flex-direction: row; - justify-content: space-between; - - button { - min-width: 6em; - } - } -} \ No newline at end of file diff --git a/shared/js/events/ClientGlobalControlHandler.ts b/shared/js/events/ClientGlobalControlHandler.ts index 3374408f..593d0ffe 100644 --- a/shared/js/events/ClientGlobalControlHandler.ts +++ b/shared/js/events/ClientGlobalControlHandler.ts @@ -12,7 +12,7 @@ import {openBanList} from "tc-shared/ui/modal/ModalBanList"; import {formatMessage} from "tc-shared/ui/frames/chat"; import {CommandResult} from "tc-shared/connection/ServerConnectionDeclaration"; import {spawnSettingsModal} from "tc-shared/ui/modal/ModalSettings"; -import {spawnPermissionEditorModal} from "tc-shared/ui/modal/permissionv2/ModalPermissionEditor"; +import {spawnPermissionEditorModal} from "tc-shared/ui/modal/permission/ModalPermissionEditor"; /* function initialize_sounds(event_registry: Registry) { diff --git a/shared/js/main.tsx b/shared/js/main.tsx index d1252a6c..504003a9 100644 --- a/shared/js/main.tsx +++ b/shared/js/main.tsx @@ -34,7 +34,7 @@ import {spawnFileTransferModal} from "tc-shared/ui/modal/transfer/ModalFileTrans import {MenuEntryType, spawn_context_menu} from "tc-shared/ui/elements/ContextMenu"; import {copy_to_clipboard} from "tc-shared/utils/helpers"; import ContextMenuEvent = JQuery.ContextMenuEvent; -import {spawnPermissionEditorModal} from "tc-shared/ui/modal/permissionv2/ModalPermissionEditor"; +import {spawnPermissionEditorModal} from "tc-shared/ui/modal/permission/ModalPermissionEditor"; import {spawnGroupCreate} from "tc-shared/ui/modal/ModalGroups"; /* required import for init */ diff --git a/shared/js/ui/client.ts b/shared/js/ui/client.ts index 1b46112d..4f772238 100644 --- a/shared/js/ui/client.ts +++ b/shared/js/ui/client.ts @@ -27,7 +27,7 @@ import { ClientEntry as ClientEntryView } from "./tree/Client"; import * as React from "react"; import {ChannelTreeEntry, ChannelTreeEntryEvents} from "tc-shared/ui/TreeEntry"; import {spawnClientVolumeChange, spawnMusicBotVolumeChange} from "tc-shared/ui/modal/ModalChangeVolumeNew"; -import {spawnPermissionEditorModal} from "tc-shared/ui/modal/permissionv2/ModalPermissionEditor"; +import {spawnPermissionEditorModal} from "tc-shared/ui/modal/permission/ModalPermissionEditor"; export enum ClientType { CLIENT_VOICE, diff --git a/shared/js/ui/frames/MenuBar.ts b/shared/js/ui/frames/MenuBar.ts index 18e43d4b..2cb2f4a4 100644 --- a/shared/js/ui/frames/MenuBar.ts +++ b/shared/js/ui/frames/MenuBar.ts @@ -23,7 +23,7 @@ import * as loader from "tc-loader"; import {formatMessage} from "tc-shared/ui/frames/chat"; import {control_bar_instance} from "tc-shared/ui/frames/control-bar"; import {icon_cache_loader, IconManager, LocalIcon} from "tc-shared/file/Icons"; -import {spawnPermissionEditorModal} from "tc-shared/ui/modal/permissionv2/ModalPermissionEditor"; +import {spawnPermissionEditorModal} from "tc-shared/ui/modal/permission/ModalPermissionEditor"; export interface HRItem { } diff --git a/shared/js/ui/modal/permission/AbstractPermissionEditor.ts b/shared/js/ui/modal/permission/AbstractPermissionEditor.ts deleted file mode 100644 index 63101b0d..00000000 --- a/shared/js/ui/modal/permission/AbstractPermissionEditor.ts +++ /dev/null @@ -1,61 +0,0 @@ -import {GroupedPermissions, PermissionInfo, PermissionValue} from "tc-shared/permission/PermissionManager"; -import PermissionType from "tc-shared/permission/PermissionType"; - -export enum PermissionEditorMode { - VISIBLE, - NO_PERMISSION, - UNSET -} - -export abstract class AbstractPermissionEditor { - protected _permissions: GroupedPermissions[]; - protected _listener_update: () => any; - protected _listener_change: ChangeListener = () => Promise.resolve(); - protected _toggle_callback: () => string; - - icon_resolver: (id: number) => Promise; - icon_selector: (current_id: number) => Promise; - - protected constructor() {} - - abstract set_mode(mode: PermissionEditorMode); - - abstract initialize(permissions: GroupedPermissions[]); - abstract html_tag() : JQuery; - abstract set_permissions(permissions?: PermissionValue[]); - abstract set_hidden_permissions(permissions: PermissionType[]); - - set_listener(listener?: ChangeListener) { - this._listener_change = listener || (() => Promise.resolve()); - } - - set_listener_update(listener?: () => any) { this._listener_update = listener; } - trigger_update() { if(this._listener_update) this._listener_update(); } - - abstract set_toggle_button(callback: () => string, initial: string); -} - -export interface PermissionEntry { - tag: JQuery; - tag_value: JQuery; - tag_grant: JQuery; - tag_flag_negate: JQuery; - tag_flag_skip: JQuery; - - id: number; - filter: string; - is_bool: boolean; - -} - -export interface ChangedPermissionValue { - remove: boolean; /* if set remove the set permission (value or granted) */ - - granted?: number; - value?: number; - - flag_skip?: boolean; - flag_negate?: boolean; -} - -export type ChangeListener = (permission: PermissionInfo, value?: ChangedPermissionValue) => Promise; \ No newline at end of file diff --git a/shared/js/ui/modal/permission/CanvasPermissionEditor.ts b/shared/js/ui/modal/permission/CanvasPermissionEditor.ts deleted file mode 100644 index 4afced0e..00000000 --- a/shared/js/ui/modal/permission/CanvasPermissionEditor.ts +++ /dev/null @@ -1,1632 +0,0 @@ -/// /* first needs the AbstractPermissionEdit */ - -/* Canvas Permission Editor */ -import PermissionType from "tc-shared/permission/PermissionType"; -import {KeyCode} from "tc-shared/PPTListener"; -import * as contextmenu from "tc-shared/ui/elements/ContextMenu"; -import {createInfoModal} from "tc-shared/ui/elements/Modal"; -import {copy_to_clipboard} from "tc-shared/utils/helpers"; -import {AbstractPermissionEditor, PermissionEditorMode} from "tc-shared/ui/modal/permission/AbstractPermissionEditor"; -import {GroupedPermissions, PermissionInfo, PermissionValue} from "tc-shared/permission/PermissionManager"; - -namespace ui { - export namespace scheme { - export interface CheckBox { - border: string; - checkmark: string; - checkmark_font: string; - - background_checked: string; - background_checked_hovered: string; - - background: string; - background_hovered: string; - } - - export interface TextField { - color: string; - font: string; - - background: string; - background_hovered: string; - } - - export interface ColorScheme { - permission: { - background: string; - background_selected: string; - - name: string; - name_unset: string; - name_font: string; - - value: TextField; - value_b: CheckBox; - granted: TextField; - negate: CheckBox; - skip: CheckBox; - } - - group: { - name: string; - name_font: string; - } - } - } - - export enum RepaintMode { - NONE, - REPAINT, - REPAINT_OBJECT_FULL, - REPAINT_FULL - } - - export interface AxisAlignedBoundingBox { - x: number; - y: number; - - width: number; - height: number; - } - - export enum ClickEventType { - SIGNLE, - DOUBLE, - CONTEXT_MENU - } - - export interface InteractionClickEvent { - type: ClickEventType; - consumed: boolean; - offset_x: number; - offset_y: number; - } - - export interface InteractionListener { - region: AxisAlignedBoundingBox; - region_weight: number; - - /** - * @return true if a redraw is required - */ - on_mouse_enter?: () => RepaintMode; - - /** - * @return true if a redraw is required - */ - on_mouse_leave?: () => RepaintMode; - - /** - * @return true if a redraw is required - */ - on_click?: (event: InteractionClickEvent) => RepaintMode; - - mouse_cursor?: string; - - set_full_draw?: () => any; - disabled?: boolean; - } - - abstract class DrawableObject { - abstract draw(context: CanvasRenderingContext2D, full: boolean); - - private _object_full_draw = false; - private _width: number = 0; - - set_width(value: number) { - this._width = value; - } - - request_full_draw() { - this._object_full_draw = true; - } - - pop_full_draw() { - const result = this._object_full_draw; - this._object_full_draw = false; - return result; - } - - width() { - return this._width; - } - - abstract height(); - - private _transforms: DOMMatrix[] = []; - - protected push_transform(context: CanvasRenderingContext2D) { - this._transforms.push(context.getTransform()); - } - - protected pop_transform(context: CanvasRenderingContext2D) { - const transform = this._transforms.pop(); - context.setTransform( - transform.a, - transform.b, - transform.c, - transform.d, - transform.e, - transform.f - ); - } - - protected original_x(context: CanvasRenderingContext2D, x: number) { - return context.getTransform().e + x; - } - - protected original_y(context: CanvasRenderingContext2D, y: number) { - return context.getTransform().f + y; - } - - protected colors: scheme.ColorScheme = {} as any; - - set_color_scheme(scheme: scheme.ColorScheme) { - this.colors = scheme; - } - - protected manager: PermissionEditor; - - set_manager(manager: PermissionEditor) { - this.manager = manager; - } - - abstract initialize(); - - abstract finalize(); - } - - class PermissionGroup extends DrawableObject { - public static readonly HEIGHT = parseFloat(getComputedStyle(document.documentElement).fontSize) * (3 / 2); /* 24 */ - public static readonly ARROW_SIZE = 10; /* 12 */ - - group: GroupedPermissions; - _sub_elements: PermissionGroup[] = []; - _element_permissions: PermissionList; - - collapsed = false; - private _listener_colaps: InteractionListener; - - constructor(group: GroupedPermissions) { - super(); - - this.group = group; - - this._element_permissions = new PermissionList(this.group.permissions); - for (const sub of this.group.children) - this._sub_elements.push(new PermissionGroup(sub)); - } - - draw(context: CanvasRenderingContext2D, full: boolean) { - const _full = this.pop_full_draw() || full; - this.push_transform(context); - context.translate(PermissionGroup.ARROW_SIZE + 20, PermissionGroup.HEIGHT); - - let sum_height = 0; - /* let first draw the elements, because if the sum height is zero then we could hide ourselves */ - if (!this.collapsed) { /* draw the next groups */ - for (const group of this._sub_elements) { - group.draw(context, full); - - const height = group.height(); - sum_height += height; - context.translate(0, height); - } - - this._element_permissions.draw(context, full); - if (sum_height == 0) - sum_height += this._element_permissions.height(); - } else { - const process_group = (group: PermissionGroup) => { - for (const g of group._sub_elements) - process_group(g); - group._element_permissions.handle_hide(); - if (sum_height == 0 && group._element_permissions.height() > 0) { - sum_height = 1; - } - }; - process_group(this); - } - this.pop_transform(context); - - if (_full && sum_height > 0) { - const arrow_stretch = 2 / 3; - if (!full) { - context.clearRect(0, 0, this.width(), PermissionGroup.HEIGHT); - } - context.fillStyle = this.colors.group.name; - - /* arrow */ - { - const x1 = this.collapsed ? PermissionGroup.ARROW_SIZE * arrow_stretch / 2 : 0; - const y1 = (PermissionGroup.HEIGHT - PermissionGroup.ARROW_SIZE) / 2 + (this.collapsed ? 0 : PermissionGroup.ARROW_SIZE * arrow_stretch / 2); /* center arrow */ - - const x2 = this.collapsed ? x1 + PermissionGroup.ARROW_SIZE * arrow_stretch : x1 + PermissionGroup.ARROW_SIZE / 2; - const y2 = this.collapsed ? y1 + PermissionGroup.ARROW_SIZE / 2 : y1 + PermissionGroup.ARROW_SIZE * arrow_stretch; - - const x3 = this.collapsed ? x1 : x1 + PermissionGroup.ARROW_SIZE; - const y3 = this.collapsed ? y1 + PermissionGroup.ARROW_SIZE : y1; - - context.beginPath(); - context.moveTo(x1, y1); - - context.lineTo(x2, y2); - context.lineTo(x3, y3); - - context.moveTo(x2, y2); - context.lineTo(x3, y3); - context.fill(); - - this._listener_colaps.region.x = this.original_x(context, 0); - this._listener_colaps.region.y = this.original_y(context, y1); - } - /* text */ - { - context.font = this.colors.group.name_font; - context.textBaseline = "middle"; - context.textAlign = "start"; - - context.fillText(this.group.group.name, PermissionGroup.ARROW_SIZE + 5, PermissionGroup.HEIGHT / 2); - } - } - } - - set_width(value: number) { - super.set_width(value); - for (const element of this._sub_elements) - element.set_width(value - PermissionGroup.ARROW_SIZE - 20); - this._element_permissions.set_width(value - PermissionGroup.ARROW_SIZE - 20); - } - - set_color_scheme(scheme: scheme.ColorScheme) { - super.set_color_scheme(scheme); - for (const child of this._sub_elements) - child.set_color_scheme(scheme); - this._element_permissions.set_color_scheme(scheme); - } - - set_manager(manager: PermissionEditor) { - super.set_manager(manager); - for (const child of this._sub_elements) - child.set_manager(manager); - this._element_permissions.set_manager(manager); - } - - height() { - let result = 0; - - if (!this.collapsed) { - for (const element of this._sub_elements) - result += element.height(); - - result += this._element_permissions.height(); - } else { - //We've to figure out if we have permissions - const process_group = (group: PermissionGroup) => { - if (result == 0 && group._element_permissions.height() > 0) { - result = 1; - } else { - for (const g of group._sub_elements) - process_group(g); - } - }; - process_group(this); - - if (result > 0) - return PermissionGroup.HEIGHT; - - return 0; - } - if (result > 0) { - result += PermissionGroup.HEIGHT; - return result; - } else { - return 0; - } - } - - initialize() { - for (const child of this._sub_elements) - child.initialize(); - this._element_permissions.initialize(); - - - this._listener_colaps = { - region: { - x: 0, - y: 0, - height: PermissionGroup.ARROW_SIZE, - width: PermissionGroup.ARROW_SIZE - }, - region_weight: 10, - /* - on_mouse_enter: () => { - this.collapsed_hovered = true; - return RepaintMode.REPAINT_OBJECT_FULL; - }, - on_mouse_leave: () => { - this.collapsed_hovered = false; - return RepaintMode.REPAINT_OBJECT_FULL; - }, - */ - on_click: () => { - this.collapsed = !this.collapsed; - return RepaintMode.REPAINT_FULL; - }, - set_full_draw: () => this.request_full_draw(), - mouse_cursor: "pointer" - }; - - this.manager.intercept_manager().register_listener(this._listener_colaps); - } - - finalize() { - for (const child of this._sub_elements) - child.finalize(); - this._element_permissions.finalize(); - } - - collapse_group() { - for (const child of this._sub_elements) - child.collapse_group(); - - this.collapsed = true; - } - - expend_group() { - for (const child of this._sub_elements) - child.expend_group(); - - this.collapsed = false; - } - } - - class PermissionList extends DrawableObject { - permissions: PermissionEntry[] = []; - - constructor(permissions: PermissionInfo[]) { - super(); - - for (const permission of permissions) - this.permissions.push(new PermissionEntry(permission)); - } - - set_width(value: number) { - super.set_width(value); - for (const entry of this.permissions) - entry.set_width(value); - } - - - draw(context: CanvasRenderingContext2D, full: boolean) { - this.push_transform(context); - - for (const permission of this.permissions) { - permission.draw(context, full); - context.translate(0, permission.height()); - } - - this.pop_transform(context); - } - - height() { - let height = 0; - for (const permission of this.permissions) - height += permission.height(); - return height; - } - - - set_color_scheme(scheme: scheme.ColorScheme) { - super.set_color_scheme(scheme); - for (const entry of this.permissions) - entry.set_color_scheme(scheme); - } - - set_manager(manager: PermissionEditor) { - super.set_manager(manager); - - for (const entry of this.permissions) - entry.set_manager(manager); - } - - initialize() { - for (const entry of this.permissions) - entry.initialize(); - } - - finalize() { - for (const entry of this.permissions) - entry.finalize(); - } - - handle_hide() { - for (const entry of this.permissions) - entry.handle_hide(); - } - } - - class PermissionEntry extends DrawableObject { - public static readonly HEIGHT = PermissionGroup.HEIGHT; /* 24 */ - public static readonly HALF_HEIGHT = PermissionEntry.HEIGHT / 2; - public static readonly CHECKBOX_HEIGHT = PermissionEntry.HEIGHT - 2; - - public static readonly COLUMN_PADDING = 2; - public static readonly COLUMN_VALUE = 75; - public static readonly COLUMN_GRANTED = 75; - //public static readonly COLUMN_NEGATE = 25; - //public static readonly COLUMN_SKIP = 25; - public static readonly COLUMN_NEGATE = 75; - public static readonly COLUMN_SKIP = 75; - - private _permission: PermissionInfo; - - hidden: boolean; - - granted: number = 22; - value: number; - flag_skip: boolean = true; - flag_negate: boolean; - - private _prev_selected = false; - selected: boolean; - - flag_skip_hovered = false; - flag_negate_hovered = false; - flag_value_hovered = false; - flag_grant_hovered = false; - - private _listener_checkbox_skip: InteractionListener; - private _listener_checkbox_negate: InteractionListener; - private _listener_value: InteractionListener; - private _listener_grant: InteractionListener; - private _listener_general: InteractionListener; - private _icon_image: HTMLImageElement | undefined; - - on_icon_select?: (current_id: number) => Promise; - on_context_menu?: (x: number, y: number) => any; - on_grant_change?: () => any; - on_change?: () => any; - - constructor(permission: PermissionInfo) { - super(); - this._permission = permission; - } - - set_icon_id_image(image: HTMLImageElement | undefined) { - if (this._icon_image === image) - return; - this._icon_image = image; - if (image) { - image.height = 16; - image.width = 16; - } - } - - permission() { - return this._permission; - } - - draw(ctx: CanvasRenderingContext2D, full: boolean) { - if (!this.pop_full_draw() && !full) { /* Note: do not change this order! */ - /* test for update! */ - return; - } - if (this.hidden) { - this.handle_hide(); - return; - } - ctx.lineWidth = 1; - - /* debug box */ - if (false) { - ctx.fillStyle = "#FF0000"; - ctx.fillRect(0, 0, this.width(), PermissionEntry.HEIGHT); - ctx.fillStyle = "#000000"; - ctx.strokeRect(0, 0, this.width(), PermissionEntry.HEIGHT); - } - - if (!full) { - const off = this.selected || this._prev_selected ? ctx.getTransform().e : 0; - ctx.clearRect(-off, 0, this.width() + off, PermissionEntry.HEIGHT); - } - - if (this.selected) - ctx.fillStyle = this.colors.permission.background_selected; - else - ctx.fillStyle = this.colors.permission.background; - const off = this.selected ? ctx.getTransform().e : 0; - ctx.fillRect(-off, 0, this.width() + off, PermissionEntry.HEIGHT); - this._prev_selected = this.selected; - - /* permission name */ - { - ctx.fillStyle = typeof (this.value) !== "undefined" ? this.colors.permission.name : this.colors.permission.name_unset; - ctx.textBaseline = "middle"; - ctx.textAlign = "start"; - ctx.font = this.colors.permission.name_font; - - ctx.fillText(this._permission.name, 0, PermissionEntry.HALF_HEIGHT); - } - - const original_y = this.original_y(ctx, 0); - const original_x = this.original_x(ctx, 0); - const width = this.width(); - - /* draw granted */ - let w = width - PermissionEntry.COLUMN_GRANTED; - if (typeof (this.granted) === "number") { - this._listener_grant.region.x = original_x + w; - this._listener_grant.region.y = original_y; - - this._draw_number_field(ctx, this.colors.permission.granted, w, 0, PermissionEntry.COLUMN_VALUE, this.granted, this.flag_grant_hovered); - } else { - this._listener_grant.region.y = original_y; - this._listener_grant.region.x = - original_x - + width - - PermissionEntry.COLUMN_GRANTED; - } - - /* draw value and the skip stuff */ - if (typeof (this.value) === "number") { - w -= PermissionEntry.COLUMN_SKIP + PermissionEntry.COLUMN_PADDING; - { - const x = w + (PermissionEntry.COLUMN_SKIP - PermissionEntry.CHECKBOX_HEIGHT) / 2; - const y = 1; - - this._listener_checkbox_skip.region.x = original_x + x; - this._listener_checkbox_skip.region.y = original_y + y; - - this._draw_checkbox_field(ctx, this.colors.permission.skip, x, y, PermissionEntry.CHECKBOX_HEIGHT, this.flag_skip, this.flag_skip_hovered); - } - - w -= PermissionEntry.COLUMN_NEGATE + PermissionEntry.COLUMN_PADDING; - { - const x = w + (PermissionEntry.COLUMN_NEGATE - PermissionEntry.CHECKBOX_HEIGHT) / 2; - const y = 1; - - this._listener_checkbox_negate.region.x = original_x + x; - this._listener_checkbox_negate.region.y = original_y + y; - - this._draw_checkbox_field(ctx, this.colors.permission.negate, x, y, PermissionEntry.CHECKBOX_HEIGHT, this.flag_negate, this.flag_negate_hovered); - } - - w -= PermissionEntry.COLUMN_VALUE + PermissionEntry.COLUMN_PADDING; - if (this._permission.is_boolean()) { - const x = w + PermissionEntry.COLUMN_VALUE - PermissionEntry.CHECKBOX_HEIGHT; - const y = 1; - - this._listener_value.region.width = PermissionEntry.CHECKBOX_HEIGHT; - this._listener_value.region.x = original_x + x; - this._listener_value.region.y = original_y + y; - - this._draw_checkbox_field(ctx, this.colors.permission.value_b, x, y, PermissionEntry.CHECKBOX_HEIGHT, this.value > 0, this.flag_value_hovered); - } else if (this._permission.name === "i_icon_id" && this._icon_image) { - this._listener_value.region.x = original_x + w; - this._listener_value.region.y = original_y; - this._listener_value.region.width = PermissionEntry.CHECKBOX_HEIGHT; - - this._draw_icon_field(ctx, this.colors.permission.value_b, w, 0, PermissionEntry.COLUMN_VALUE, this.flag_value_hovered, this._icon_image); - } else { - this._listener_value.region.width = PermissionEntry.COLUMN_VALUE; - this._listener_value.region.x = original_x + w; - this._listener_value.region.y = original_y; - - this._draw_number_field(ctx, this.colors.permission.value, w, 0, PermissionEntry.COLUMN_VALUE, this.value, this.flag_value_hovered); - } - this._listener_value.disabled = false; - } else { - this._listener_checkbox_skip.region.y = -1e8; - this._listener_checkbox_negate.region.y = -1e8; - - this._listener_value.region.y = original_y; - this._listener_value.region.x = - original_x - + width - - PermissionEntry.COLUMN_GRANTED - - PermissionEntry.COLUMN_NEGATE - - PermissionEntry.COLUMN_VALUE - - PermissionEntry.COLUMN_PADDING * 4; - this._listener_value.disabled = true; - } - - this._listener_general.region.y = original_y; - this._listener_general.region.x = original_x; - } - - handle_hide() { - /* so the listener wound get triggered */ - this._listener_value.region.x = -1e8; - this._listener_grant.region.x = -1e8; - this._listener_checkbox_negate.region.x = -1e8; - this._listener_checkbox_skip.region.x = -1e8; - this._listener_general.region.x = -1e8; - } - - private _draw_icon_field(ctx: CanvasRenderingContext2D, scheme: scheme.CheckBox, x: number, y: number, width: number, hovered: boolean, image: HTMLImageElement) { - const line = ctx.lineWidth; - ctx.lineWidth = 2; - ctx.fillStyle = scheme.border; - ctx.strokeRect(x + 1, y + 1, PermissionEntry.HEIGHT - 2, PermissionEntry.HEIGHT - 2); - ctx.lineWidth = line; - - ctx.fillStyle = hovered ? scheme.background_hovered : scheme.background; - ctx.fillRect(x + 1, y + 1, PermissionEntry.HEIGHT - 2, PermissionEntry.HEIGHT - 2); - - const center_y = y + PermissionEntry.HEIGHT / 2; - const center_x = x + PermissionEntry.HEIGHT / 2; - ctx.drawImage(image, center_x - image.width / 2, center_y - image.height / 2); - } - - private _draw_number_field(ctx: CanvasRenderingContext2D, scheme: scheme.TextField, x: number, y: number, width: number, value: number, hovered: boolean) { - ctx.fillStyle = hovered ? scheme.background_hovered : scheme.background; - ctx.fillRect(x, y, width, PermissionEntry.HEIGHT); - - ctx.fillStyle = scheme.color; - ctx.font = scheme.font; //Math.floor(2/3 * PermissionEntry.HEIGHT) + "px Arial"; - ctx.textAlign = "start"; - ctx.fillText(value + "", x, y + PermissionEntry.HALF_HEIGHT, width); - - ctx.strokeStyle = "#6e6e6e"; - const line = ctx.lineWidth; - ctx.lineWidth = 2; - ctx.beginPath(); - ctx.moveTo(x, y + PermissionEntry.HEIGHT - 2); - ctx.lineTo(x + width, y + PermissionEntry.HEIGHT - 2); - ctx.stroke(); - ctx.lineWidth = line; - } - - private _draw_checkbox_field(ctx: CanvasRenderingContext2D, scheme: scheme.CheckBox, x: number, y: number, height: number, checked: boolean, hovered: boolean) { - ctx.fillStyle = scheme.border; - ctx.strokeRect(x, y, height, height); - - - ctx.fillStyle = checked ? - (hovered ? scheme.background_checked_hovered : scheme.background_checked) : - (hovered ? scheme.background_hovered : scheme.background); - ctx.fillRect(x + 1, y + 1, height - 2, height - 2); - - if (checked) { - ctx.textAlign = "center"; - ctx.textBaseline = "middle"; - ctx.fillStyle = scheme.checkmark; - ctx.font = scheme.checkmark_font; //Math.floor((5/4) * PermissionEntry.HEIGHT) + "px Arial"; - ctx.fillText("✓", x + height / 2, y + height / 2); - } - } - - height() { - return this.hidden ? 0 : PermissionEntry.HEIGHT; - } - - set_width(value: number) { - super.set_width(value); - this._listener_general.region.width = value; - } - - initialize() { - this._listener_checkbox_skip = { - region: { - x: -1e8, - y: -1e8, - height: PermissionEntry.CHECKBOX_HEIGHT, - width: PermissionEntry.CHECKBOX_HEIGHT - }, - region_weight: 10, - on_mouse_enter: () => { - this.flag_skip_hovered = true; - return RepaintMode.REPAINT_OBJECT_FULL; - }, - on_mouse_leave: () => { - this.flag_skip_hovered = false; - return RepaintMode.REPAINT_OBJECT_FULL; - }, - on_click: () => { - this.flag_skip = !this.flag_skip; - if (this.on_change) - this.on_change(); - return RepaintMode.REPAINT_OBJECT_FULL; - }, - set_full_draw: () => this.request_full_draw(), - mouse_cursor: "pointer" - }; - this._listener_checkbox_negate = { - region: { - x: -1e8, - y: -1e8, - height: PermissionEntry.CHECKBOX_HEIGHT, - width: PermissionEntry.CHECKBOX_HEIGHT - }, - region_weight: 10, - on_mouse_enter: () => { - this.flag_negate_hovered = true; - return RepaintMode.REPAINT_OBJECT_FULL; - }, - on_mouse_leave: () => { - this.flag_negate_hovered = false; - return RepaintMode.REPAINT_OBJECT_FULL; - }, - on_click: () => { - this.flag_negate = !this.flag_negate; - if (this.on_change) - this.on_change(); - return RepaintMode.REPAINT_OBJECT_FULL; - }, - set_full_draw: () => this.request_full_draw(), - mouse_cursor: "pointer" - }; - this._listener_value = { - region: { - x: -1e8, - y: -1e8, - height: this._permission.is_boolean() ? PermissionEntry.CHECKBOX_HEIGHT : PermissionEntry.HEIGHT, - width: this._permission.is_boolean() ? PermissionEntry.CHECKBOX_HEIGHT : PermissionEntry.COLUMN_VALUE - }, - region_weight: 10, - on_mouse_enter: () => { - this.flag_value_hovered = true; - return RepaintMode.REPAINT_OBJECT_FULL; - }, - on_mouse_leave: () => { - this.flag_value_hovered = false; - return RepaintMode.REPAINT_OBJECT_FULL; - }, - on_click: () => { - if (this._permission.is_boolean()) { - this.value = this.value > 0 ? 0 : 1; - if (this.on_change) - this.on_change(); - return RepaintMode.REPAINT_OBJECT_FULL; - } else if (this._permission.name === "i_icon_id") { - this.on_icon_select(this.value).then(value => { - this.value = value; - if (this.on_change) - this.on_change(); - }).catch(error => { - console.warn(tr("Failed to select icon: %o"), error); - }) - } else { - this._spawn_number_edit( - this._listener_value.region.x, - this._listener_value.region.y, - this._listener_value.region.width, - this._listener_value.region.height, - this.colors.permission.value, - this.value || 0, - value => { - if (typeof (value) === "number") { - this.value = value; - this.request_full_draw(); - this.manager.request_draw(false); - if (this.on_change) - this.on_change(); - } - } - ) - } - return RepaintMode.REPAINT_OBJECT_FULL; - }, - set_full_draw: () => this.request_full_draw(), - mouse_cursor: "pointer" - }; - this._listener_grant = { - region: { - x: -1e8, - y: -1e8, - height: PermissionEntry.HEIGHT, - width: PermissionEntry.COLUMN_VALUE - }, - region_weight: 10, - on_mouse_enter: () => { - this.flag_grant_hovered = true; - return RepaintMode.REPAINT_OBJECT_FULL; - }, - on_mouse_leave: () => { - this.flag_grant_hovered = false; - return RepaintMode.REPAINT_OBJECT_FULL; - }, - on_click: () => { - this._spawn_number_edit( - this._listener_grant.region.x, - this._listener_grant.region.y, - this._listener_grant.region.width, - this._listener_grant.region.height, - this.colors.permission.granted, - this.granted || 0, //TODO use max assignable value? - value => { - if (typeof (value) === "number") { - this.granted = value; - this.request_full_draw(); - this.manager.request_draw(false); - - if (this.on_grant_change) - this.on_grant_change(); - } - } - ); - return RepaintMode.REPAINT_OBJECT_FULL; - }, - set_full_draw: () => this.request_full_draw(), - mouse_cursor: "pointer" - }; - - this._listener_general = { - region: { - x: -1e8, - y: -1e8, - height: PermissionEntry.HEIGHT, - width: 0 - }, - region_weight: 0, - /* - on_mouse_enter: () => { - return RepaintMode.REPAINT_OBJECT_FULL; - }, - on_mouse_leave: () => { - return RepaintMode.REPAINT_OBJECT_FULL; - }, - */ - on_click: (event: InteractionClickEvent) => { - this.manager.set_selected_entry(this); - - if (event.type == ClickEventType.DOUBLE && typeof (this.value) === "undefined") - return this._listener_value.on_click(event); - else if (event.type == ClickEventType.CONTEXT_MENU) { - const mouse = this.manager.mouse; - if (this.on_context_menu) { - this.on_context_menu(mouse.x, mouse.y); - event.consumed = true; - } - } - return RepaintMode.NONE; - }, - set_full_draw: () => this.request_full_draw(), - }; - - this.manager.intercept_manager().register_listener(this._listener_checkbox_negate); - this.manager.intercept_manager().register_listener(this._listener_checkbox_skip); - this.manager.intercept_manager().register_listener(this._listener_value); - this.manager.intercept_manager().register_listener(this._listener_grant); - this.manager.intercept_manager().register_listener(this._listener_general); - } - - finalize() { - } - - private _spawn_number_edit(x: number, y: number, width: number, height: number, color: scheme.TextField, value: number, callback: (new_value?: number) => any) { - const element = $.spawn("div"); - element.prop("contentEditable", true); - element - .css("pointer-events", "none") - .css("background", color.background) - .css("display", "block") - .css("position", "absolute") - .css("top", y) - .css("left", x) - .css("width", width) - .css("height", height) - .css("z-index", 1e6); - element.text(value); - element.appendTo(this.manager.canvas_container); - element.focus(); - - element.on('focusout', event => { - console.log("permission changed to " + element.text()); - if (!isNaN(parseInt(element.text()))) { - callback(parseInt(element.text())); - } else { - callback(undefined); - } - element.remove(); - }); - - element.on('keypress', event => { - if (event.which == KeyCode.KEY_RETURN) - element.trigger('focusout'); - - const text = String.fromCharCode(event.which); - if (isNaN(parseInt(text)) && text != "-") - event.preventDefault(); - - if (element.text().length > 7) - event.preventDefault(); - }); - - if (window.getSelection) { - const selection = window.getSelection(); - const range = document.createRange(); - range.selectNodeContents(element[0]); - selection.removeAllRanges(); - selection.addRange(range); - } - } - - trigger_value_assign() { - this._listener_value.on_click(undefined); - } - - trigger_grant_assign() { - this._listener_grant.on_click(undefined); - } - } - - export class InteractionManager { - private _listeners: InteractionListener[] = []; - private _entered_listeners: InteractionListener[] = []; - - register_listener(listener: InteractionListener) { - this._listeners.push(listener); - } - - remove_listener(listener: InteractionListener) { - this._listeners.remove(listener); - } - - process_mouse_move(new_x: number, new_y: number): { repaint: RepaintMode, cursor: string } { - let _entered_listeners: InteractionListener[] = []; - for (const listener of this._listeners) { - const aabb = listener.region; - - if (listener.disabled) - continue; - - if (new_x < aabb.x || new_x > aabb.x + aabb.width) - continue; - - if (new_y < aabb.y || new_y > aabb.y + aabb.height) - continue; - - _entered_listeners.push(listener); - } - - let repaint: RepaintMode = RepaintMode.NONE; - _entered_listeners.sort((a, b) => (a.region_weight || 0) - (b.region_weight || 0)); - for (const listener of this._entered_listeners) { - if (listener.on_mouse_leave && _entered_listeners.indexOf(listener) == -1) { - let mode = listener.on_mouse_leave(); - if (mode == RepaintMode.REPAINT_OBJECT_FULL) { - mode = RepaintMode.REPAINT; - if (listener.set_full_draw) - listener.set_full_draw(); - } - if (mode > repaint) - repaint = mode; - } - } - for (const listener of _entered_listeners) { - if (listener.on_mouse_enter && this._entered_listeners.indexOf(listener) == -1) { - let mode = listener.on_mouse_enter(); - if (mode == RepaintMode.REPAINT_OBJECT_FULL) { - mode = RepaintMode.REPAINT; - if (listener.set_full_draw) - listener.set_full_draw(); - } - if (mode > repaint) - repaint = mode; - } - } - this._entered_listeners = _entered_listeners; - - let cursor; - for (const listener of _entered_listeners) - if (typeof (listener.mouse_cursor) === "string") { - cursor = listener.mouse_cursor; - } - return { - repaint: repaint, - cursor: cursor - }; - } - - private process_click_event(x: number, y: number, event: InteractionClickEvent): RepaintMode { - const move_result = this.process_mouse_move(x, y); - - let repaint: RepaintMode = move_result.repaint; - for (const listener of this._entered_listeners) - if (listener.on_click) { - let mode = listener.on_click(event); - if (mode == RepaintMode.REPAINT_OBJECT_FULL) { - mode = RepaintMode.REPAINT; - if (listener.set_full_draw) - listener.set_full_draw(); - } - if (mode > repaint) - repaint = mode; - } - - return repaint; - } - - process_click(x: number, y: number): RepaintMode { - const event: InteractionClickEvent = { - consumed: false, - type: ClickEventType.SIGNLE, - offset_x: x, - offset_y: y - }; - - return this.process_click_event(x, y, event); - } - - process_dblclick(x: number, y: number): RepaintMode { - const event: InteractionClickEvent = { - consumed: false, - type: ClickEventType.DOUBLE, - offset_x: x, - offset_y: y - }; - - return this.process_click_event(x, y, event); - } - - process_context_menu(js_event: MouseEvent, x: number, y: number): RepaintMode { - const event: InteractionClickEvent = { - consumed: js_event.defaultPrevented, - type: ClickEventType.CONTEXT_MENU, - offset_x: x, - offset_y: y - }; - - const result = this.process_click_event(x, y, event); - if (event.consumed) - js_event.preventDefault(); - return result; - } - } - - export class PermissionEditor { - private static readonly PERMISSION_HEIGHT = PermissionEntry.HEIGHT; - private static readonly PERMISSION_GROUP_HEIGHT = PermissionGroup.HEIGHT; - - readonly grouped_permissions: GroupedPermissions[]; - readonly canvas: HTMLCanvasElement; - readonly canvas_container: HTMLDivElement; - private _max_height: number = 0; - - private _permission_count: number = 0; - private _permission_group_count: number = 0; - private _canvas_context: CanvasRenderingContext2D; - - private _selected_entry: PermissionEntry; - - private _draw_requested: boolean = false; - private _draw_requested_full: boolean = false; - - private _elements: PermissionGroup[] = []; - private _intersect_manager: InteractionManager; - - private _permission_entry_map: { [key: number]: PermissionEntry } = {}; - - mouse: { - x: number, - y: number - } = { - x: 0, - y: 0 - }; - - constructor(permissions: GroupedPermissions[]) { - this.grouped_permissions = permissions; - - this.canvas_container = $.spawn("div") - .addClass("window-resize-listener") /* we want to handle resized */ - .css("min-width", "750px") - .css("position", "relative") - .css("user-select", "none") - [0]; - this.canvas = $.spawn("canvas")[0]; - - this.canvas_container.appendChild(this.canvas); - - this._intersect_manager = new InteractionManager(); - this.canvas_container.onmousemove = event => { - this.mouse.x = event.pageX; - this.mouse.y = event.pageY; - - const draw = this._intersect_manager.process_mouse_move(event.offsetX, event.offsetY); - this.canvas_container.style.cursor = draw.cursor || ""; - this._handle_repaint(draw.repaint); - }; - this.canvas_container.onclick = event => { - this._handle_repaint(this._intersect_manager.process_click(event.offsetX, event.offsetY)); - }; - this.canvas_container.ondblclick = event => { - this._handle_repaint(this._intersect_manager.process_dblclick(event.offsetX, event.offsetY)); - }; - this.canvas_container.oncontextmenu = (event: MouseEvent) => { - this._handle_repaint(this._intersect_manager.process_context_menu(event, event.offsetX, event.offsetY)); - }; - this.canvas_container.onresize = () => this.request_draw(true); - - - this.initialize(); - } - - private _handle_repaint(mode: RepaintMode) { - if (mode == RepaintMode.REPAINT || mode == RepaintMode.REPAINT_FULL) - this.request_draw(mode == RepaintMode.REPAINT_FULL); - } - - request_draw(full?: boolean) { - this._draw_requested_full = this._draw_requested_full || full; - if (this._draw_requested) - return; - this._draw_requested = true; - requestAnimationFrame(() => { - this.draw(this._draw_requested_full); - }); - } - - draw(full?: boolean) { - this._draw_requested = false; - this._draw_requested_full = false; - - /* clear max height */ - this.canvas_container.style.overflowY = "shown"; - this.canvas_container.style.height = undefined; - - const max_height = this._max_height; - const max_width = this.canvas_container.clientWidth; - const update_width = this.canvas.width != max_width; - const full_draw = typeof (full) !== "boolean" || full || update_width; - - if (update_width) { - this.canvas.width = max_width; - for (const element of this._elements) - element.set_width(max_width); - } - - console.log("Drawing%s on %dx%d", full_draw ? " full" : "", max_width, max_height); - if (full_draw) - this.canvas.height = max_height; - const ctx = this._canvas_context; - ctx.resetTransform(); - if (full_draw) - ctx.clearRect(0, 0, max_width, max_height); - - let sum_height = 0; - for (const element of this._elements) { - element.draw(ctx, full_draw); - const height = element.height(); - sum_height += height; - ctx.translate(0, height); - } - - this.canvas_container.style.overflowY = "hidden"; - this.canvas_container.style.height = sum_height + "px"; - } - - private initialize() { - /* setup the canvas */ - { - const apply_group = (group: GroupedPermissions) => { - for (const g of group.children || []) - apply_group(g); - this._permission_group_count++; - this._permission_count += group.permissions.length; - }; - for (const group of this.grouped_permissions) - apply_group(group); - - this._max_height = this._permission_count * PermissionEditor.PERMISSION_HEIGHT + this._permission_group_count * PermissionEditor.PERMISSION_GROUP_HEIGHT; - console.log("%d permissions and %d groups required %d height", this._permission_count, this._permission_group_count, this._max_height); - - this.canvas.style.width = "100%"; - - this.canvas.style.flexShrink = "0"; - this.canvas_container.style.flexShrink = "0"; - - this._canvas_context = this.canvas.getContext("2d"); - } - - const font = Math.floor(2 / 3 * PermissionEntry.HEIGHT) + "px Arial"; - const font_checkmark = Math.floor((5 / 4) * PermissionEntry.HEIGHT) + "px Arial"; - const checkbox = { - background: "#303036", - background_hovered: "#CCCCCC", - - background_checked: "#0000AA", - background_checked_hovered: "#0000AA77", - - border: "#000000", - checkmark: "#303036", - checkmark_font: font_checkmark - }; - const input: scheme.TextField = { - color: "#000000", - font: font, - - background_hovered: "#CCCCCCCC", - background: "#30303600" - }; - - const color_scheme: scheme.ColorScheme = { - group: { - name: "#808080", - name_font: font - }, - //#28282c - permission: { - name: "#808080", - name_unset: "#1a1a1a", - name_font: font, - - background: "#303036", - background_selected: "#00007788", - - value: input, - value_b: checkbox, - granted: input, - negate: checkbox, - skip: checkbox - } - }; - (window as any).scheme = color_scheme; - /* setup elements to draw */ - { - const process_group = (group: PermissionGroup) => { - for (const permission of group._element_permissions.permissions) - this._permission_entry_map[permission.permission().id] = permission; - for (const g of group._sub_elements) - process_group(g); - }; - - for (const group of this.grouped_permissions) { - const element = new PermissionGroup(group); - element.set_color_scheme(color_scheme); - element.set_manager(this); - process_group(element); - this._elements.push(element); - } - for (const element of this._elements) { - element.initialize(); - } - } - } - - intercept_manager() { - return this._intersect_manager; - } - - set_selected_entry(entry?: PermissionEntry) { - if (this._selected_entry === entry) - return; - - if (this._selected_entry) { - this._selected_entry.selected = false; - this._selected_entry.request_full_draw(); - } - this._selected_entry = entry; - if (this._selected_entry) { - this._selected_entry.selected = true; - this._selected_entry.request_full_draw(); - } - this.request_draw(false); - } - - permission_entries(): PermissionEntry[] { - return Object.keys(this._permission_entry_map).map(e => this._permission_entry_map[e]); - } - - collapse_all() { - for (const group of this._elements) - group.collapse_group(); - this.request_draw(true); - } - - expend_all() { - for (const group of this._elements) - group.expend_group(); - this.request_draw(true); - } - } -} - -export class CanvasPermissionEditor extends AbstractPermissionEditor { - private container: JQuery; - - private mode_container_permissions: JQuery; - private mode_container_error_permission: JQuery; - private mode_container_unset: JQuery; - - /* references within the container tag */ - private permission_value_map: {[key:number]:PermissionValue} = {}; - - private entry_editor: ui.PermissionEditor; - - icon_resolver: (id: number) => Promise; - icon_selector: (current_id: number) => Promise; - - constructor() { - super(); - } - - initialize(permissions: GroupedPermissions[]) { - this._permissions = permissions; - this.entry_editor = new ui.PermissionEditor(permissions); - this.build_tag(); - } - - html_tag() { return this.container; } - - private build_tag() { - this.container = $("#tmpl_permission_editor_canvas").renderTag(); - /* search for that as long we've not that much nodes */ - this.mode_container_permissions = this.container.find(".container-mode-permissions"); - this.mode_container_error_permission = this.container.find(".container-mode-no-permissions"); - this.mode_container_unset = this.container.find(".container-mode-unset"); - this.set_mode(PermissionEditorMode.UNSET); - - /* the filter */ - { - const tag_filter_input = this.container.find(".filter-input"); - const tag_filter_granted = this.container.find(".filter-granted"); - - tag_filter_granted.on('change', event => tag_filter_input.trigger('change')); - tag_filter_input.on('keyup change', event => { - let filter_mask = tag_filter_input.val() as string; - let req_granted = tag_filter_granted.prop("checked"); - - - for(const entry of this.entry_editor.permission_entries()) { - const permission = entry.permission(); - - let shown = filter_mask.length == 0 || permission.name.indexOf(filter_mask) != -1; - if(shown && req_granted) { - const value: PermissionValue = this.permission_value_map[permission.id]; - shown = value && (value.hasValue() || value.hasGrant()); - } - - entry.hidden = !shown; - } - this.entry_editor.request_draw(true); - }); - } - - /* update button */ - { - this.container.find(".button-update").on('click', this.trigger_update.bind(this)); - } - - /* global context menu listener */ - { - this.container.on('contextmenu', event => { - if(event.isDefaultPrevented()) return; - event.preventDefault(); - - /* TODO allow collapse and expend all */ - }); - } - - { - const tag_container = this.container.find(".entry-editor-container"); - tag_container.append(this.entry_editor.canvas_container); - - tag_container.parent().on('contextmenu', event => { - if(event.isDefaultPrevented()) return; - event.preventDefault(); - - contextmenu.spawn_context_menu(event.pageX, event.pageY, { - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Expend all"), - callback: () => this.entry_editor.expend_all() - }, { - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Collapse all"), - callback: () => this.entry_editor.collapse_all() - }); - }); - } - - /* setup the permissions */ - for(const entry of this.entry_editor.permission_entries()) { - const permission = entry.permission(); - entry.on_change = () => { - const flag_remove = typeof(entry.value) !== "number"; - this._listener_change(permission, { - remove: flag_remove, - flag_negate: entry.flag_negate, - flag_skip: entry.flag_skip, - value: flag_remove ? -2 : entry.value - }).then(() => { - if(flag_remove) { - const element = this.permission_value_map[permission.id]; - if(!element) return; /* This should never happen, if so how are we displaying this permission?! */ - - element.value = undefined; - element.flag_negate = false; - element.flag_skip = false; - } else { - const element = this.permission_value_map[permission.id] || (this.permission_value_map[permission.id] = new PermissionValue(permission)); - - element.value = entry.value; - element.flag_skip = entry.flag_skip; - element.flag_negate = entry.flag_negate; - } - - if(permission.name === "i_icon_id") { - this.icon_resolver(entry.value).then(e => { - entry.set_icon_id_image(e); - entry.request_full_draw(); - this.entry_editor.request_draw(false); - }).catch(error => { - console.warn(tr("Failed to load icon for permission editor: %o"), error); - }); - } - entry.request_full_draw(); - this.entry_editor.request_draw(false); - }).catch(() => { - const element = this.permission_value_map[permission.id]; - - entry.value = element && element.hasValue() ? element.value : undefined; - entry.flag_skip = element && element.flag_skip; - entry.flag_negate = element && element.flag_negate; - - entry.request_full_draw(); - this.entry_editor.request_draw(false); - }); - }; - - entry.on_grant_change = () => { - const flag_remove = typeof(entry.granted) !== "number"; - - this._listener_change(permission, { - remove: flag_remove, - granted: flag_remove ? -2 : entry.granted, - }).then(() => { - if(flag_remove) { - const element = this.permission_value_map[permission.id]; - if (!element) return; /* This should never happen, if so how are we displaying this permission?! */ - - element.granted_value = undefined; - } else { - const element = this.permission_value_map[permission.id] || (this.permission_value_map[permission.id] = new PermissionValue(permission)); - element.granted_value = entry.granted; - } - entry.request_full_draw(); - this.entry_editor.request_draw(false); - }).catch(() => { - const element = this.permission_value_map[permission.id]; - - entry.granted = element && element.hasGrant() ? element.granted_value : undefined; - entry.request_full_draw(); - this.entry_editor.request_draw(false); - }); - }; - - entry.on_context_menu = (x, y) => { - let entries: contextmenu.MenuEntry[] = []; - if(typeof(entry.value) === "undefined") { - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Add permission"), - callback: () => entry.trigger_value_assign() - }); - } else { - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Remove permission"), - callback: () => { - entry.value = undefined; - entry.on_change(); - } - }); - } - - if(typeof(entry.granted) === "undefined") { - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Add grant permission"), - callback: () => entry.trigger_grant_assign() - }); - } else { - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Remove grant permission"), - callback: () => { - entry.granted = undefined; - entry.on_grant_change(); - } - }); - } - entries.push(contextmenu.Entry.HR()); - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Expend all"), - callback: () => this.entry_editor.expend_all() - }); - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Collapse all"), - callback: () => this.entry_editor.collapse_all() - }); - entries.push(contextmenu.Entry.HR()); - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Show permission description"), - callback: () => { - createInfoModal( - tr("Permission description"), - tr("Permission description for permission ") + permission.name + ":
" + permission.description - ).open(); - } - }); - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Copy permission name"), - callback: () => { - copy_to_clipboard(permission.name); - } - }); - - contextmenu.spawn_context_menu(x, y, ...entries); - } - } - } - - set_permissions(permissions?: PermissionValue[]) { - permissions = permissions || []; - this.permission_value_map = {}; - - for(const permission of permissions) - this.permission_value_map[permission.type.id] = permission; - - for(const entry of this.entry_editor.permission_entries()) { - const permission = entry.permission(); - const value: PermissionValue = this.permission_value_map[permission.id]; - - if(permission.name === "i_icon_id") { - entry.set_icon_id_image(undefined); - entry.on_icon_select = this.icon_selector; - } - - if(value && value.hasValue()) { - entry.value = value.value; - entry.flag_skip = value.flag_skip; - entry.flag_negate = value.flag_negate; - if(permission.name === "i_icon_id") { - this.icon_resolver(value.value).then(e => { - entry.set_icon_id_image(e); - entry.request_full_draw(); - this.entry_editor.request_draw(false); - }).catch(error => { - console.warn(tr("Failed to load icon for permission editor: %o"), error); - }); - } - } else { - entry.value = undefined; - entry.flag_skip = false; - entry.flag_negate = false; - } - - if(value && value.hasGrant()) { - entry.granted = value.granted_value; - } else { - entry.granted = undefined; - } - } - this.entry_editor.request_draw(true); - } - - set_mode(mode: PermissionEditorMode) { - this.mode_container_permissions.css('display', mode == PermissionEditorMode.VISIBLE ? 'flex' : 'none'); - this.mode_container_error_permission.css('display', mode == PermissionEditorMode.NO_PERMISSION ? 'flex' : 'none'); - this.mode_container_unset.css('display', mode == PermissionEditorMode.UNSET ? 'block' : 'none'); - if(mode == PermissionEditorMode.VISIBLE) - this.entry_editor.draw(true); - } - - update_ui() { - this.entry_editor.draw(true); - } - - set_toggle_button(callback: () => string, initial: string) { - throw "not implemented"; - } - - set_hidden_permissions(permissions: PermissionType[]) { - //TODO: Stuff here - } -} \ No newline at end of file diff --git a/shared/js/ui/modal/permission/HTMLPermissionEditor.ts b/shared/js/ui/modal/permission/HTMLPermissionEditor.ts deleted file mode 100644 index 196d0bae..00000000 --- a/shared/js/ui/modal/permission/HTMLPermissionEditor.ts +++ /dev/null @@ -1,937 +0,0 @@ -/// /* first needs the AbstractPermissionEdit */ - -import { - GroupedPermissions, - PermissionGroup, - PermissionInfo, - PermissionValue -} from "tc-shared/permission/PermissionManager"; -import * as contextmenu from "tc-shared/ui/elements/ContextMenu"; -import {createInfoModal} from "tc-shared/ui/elements/Modal"; -import {copy_to_clipboard} from "tc-shared/utils/helpers"; -import PermissionType from "tc-shared/permission/PermissionType"; -import {LogCategory} from "tc-shared/log"; -import * as log from "tc-shared/log"; -import { - AbstractPermissionEditor, - ChangedPermissionValue, - PermissionEditorMode -} from "tc-shared/ui/modal/permission/AbstractPermissionEditor"; -import {icon_cache_loader, IconManager} from "tc-shared/file/Icons"; - -class HTMLPermission { - readonly handle: HTMLPermissionEditor; - readonly group: HTMLPermissionGroup; - readonly permission: PermissionInfo; - readonly index: number; - - tag: JQuery; - tag_name: JQuery; - tag_container_value: JQuery; - tag_container_granted: JQuery; - tag_container_skip: JQuery; - tag_container_negate: JQuery; - - hidden: boolean; - - /* the "actual" values */ - private _mask = 0; /* fourth bit: hidden by filer | third bit: value type | second bit: grant shown | first bit: value shown */ - - private _tag_value: JQuery; - private _tag_value_input: JQuery; - - private _tag_granted: JQuery; - private _tag_granted_input: JQuery; - - private _tag_skip: JQuery; - private _tag_skip_input: JQuery; - - private _tag_negate: JQuery; - private _tag_negate_input: JQuery; - - private _value: number | undefined; - private _grant: number | undefined; - private flags: number; /* 0x01 := Skip | 0x02 := Negate */ - - constructor(handle: HTMLPermissionEditor, group: HTMLPermissionGroup, permission: PermissionInfo, index: number) { - this.handle = handle; - this.permission = permission; - this.index = index; - this.group = group; - - this.build_tag(); - } - - private static build_checkbox() : {tag: JQuery, input: JQuery} { - let tag, input; - tag = $.spawn("label").addClass("switch").append([ - input = $.spawn("input").attr("type", "checkbox"), - $.spawn("span").addClass("slider").append( - $.spawn("div").addClass("dot") - ) - ]); - return {tag: tag, input: input}; - } - - private static number_filter_re = /^[-+]?([0-9]{0,9})$/; - private build_tag() { - this.tag = $.spawn("div").addClass("entry permission").css('padding-left', this.index + "em").append([ - this.tag_name = $.spawn("div").addClass("column-name").text(this.permission.name), - this.tag_container_value = $.spawn("div").addClass("column-value"), - this.tag_container_skip = $.spawn("div").addClass("column-skip"), - this.tag_container_negate = $.spawn("div").addClass("column-negate"), - this.tag_container_granted = $.spawn("div").addClass("column-granted") - ]); - - if(this.permission.is_boolean()) { - let value = HTMLPermission.build_checkbox(); - this._tag_value = value.tag; - this._tag_value_input = value.input; - - this._tag_value_input.on('change', event => { - const value = this._tag_value_input.prop('checked') ? 1 : 0; - - this.handle.trigger_change(this.permission, { - remove: false, - - value: value, - flag_skip: (this.flags & 0x01) > 0, - flag_negate: (this.flags & 0x02) > 0 - }).then(() => { - this._value = value; - }).catch(error => { - this._reset_value(); - }); - }); - - this._mask |= 0x04; - } else { - this._tag_value = $.spawn("input").addClass("number"); - this._tag_value_input = this._tag_value; - this._tag_value_input.attr("type", "number"); - this._tag_value_input.on('change blur', event => { - const str_value = this._tag_value_input.val() as string; - const value = parseInt(str_value); - if(!HTMLPermission.number_filter_re.test(str_value) || isNaN(value)) { - console.warn(tr("Failed to parse given permission value string: %s"), str_value); - this._reset_value(); - return; - } - - this.handle.trigger_change(this.permission, { - remove: false, - - value: value, - flag_skip: (this.flags & 0x01) > 0, - flag_negate: (this.flags & 0x02) > 0 - }).then(() => { - this._value = value; - this._update_active_class(); - }).catch(error => { - this._reset_value(); - }); - }); - } - - { - let skip = HTMLPermission.build_checkbox(); - this._tag_skip = skip.tag; - this._tag_skip_input = skip.input; - - this._tag_skip_input.on('change', event => { - const value = this._tag_skip_input.prop('checked'); - - this.handle.trigger_change(this.permission, { - remove: false, - - value: this._value, - flag_skip: value, - flag_negate: (this.flags & 0x02) > 0 - }).then(() => { - if(value) - this.flags |= 0x01; - else - this.flags &= ~0x1; - this._update_active_class(); - }).catch(error => { - this._reset_value(); - }); - }); - } - - { - let negate = HTMLPermission.build_checkbox(); - this._tag_negate = negate.tag; - this._tag_negate_input = negate.input; - - this._tag_negate_input.on('change blur', event => { - const value = this._tag_negate_input.prop('checked'); - - console.log("Negate value: %o", value); - this.handle.trigger_change(this.permission, { - remove: false, - - value: this._value, - flag_skip: (this.flags & 0x01) > 0, - flag_negate: value - }).then(() => { - if(value) - this.flags |= 0x02; - else - this.flags &= ~0x2; - this._update_active_class(); - }).catch(error => { - this._reset_value(); - }); - }); - } - - { - this._tag_granted = $.spawn("input").addClass("number"); - this._tag_granted_input = this._tag_granted; - - this._tag_granted_input.attr("type", "number"); - this._tag_granted_input.on('change', event => { - const str_value = this._tag_granted_input.val() as string; - const value = parseInt(str_value); - if(!HTMLPermission.number_filter_re.test(str_value) || Number.isNaN(value)) { - console.warn(tr("Failed to parse given permission granted value string: %o"), str_value); - this._reset_value(); - return; - } - - this.handle.trigger_change(this.permission, { - remove: false, - - granted: value - }).then(() => { - this._grant = value; - this._update_active_class(); - }).catch(error => { - this._reset_grant(); - }); - }); - } - - /* double click handler */ - { - this.tag.on('dblclick', event => this._trigger_value_assign()) - } - - /* context menu */ - { - this.tag.on('contextmenu', event => { - if(event.isDefaultPrevented()) - return; - event.preventDefault(); - - let entries: contextmenu.MenuEntry[] = []; - if(typeof(this._value) === "undefined") { - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Add permission"), - callback: () => this._trigger_value_assign() - }); - } else { - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Remove permission"), - callback: () => { - this.handle.trigger_change(this.permission, { - remove: true, - value: 0 - }).then(() => { - this.value(undefined); - }).catch(error => { - //We have to do nothing - }); - } - }); - } - - if(typeof(this._grant) === "undefined") { - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Add grant permission"), - callback: () => this._trigger_grant_assign() - }); - } else { - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Remove grant permission"), - callback: () => { - this.handle.trigger_change(this.permission, { - remove: true, - granted: 0 - }).then(() => { - this.granted(undefined); - }).catch(error => { - //We have to do nothing - }); - } - }); - } - entries.push(contextmenu.Entry.HR()); - if(this.group.collapsed) - entries.push({ /* This could never happen! */ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Expend group"), - callback: () => this.group.expend() - }); - else - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Collapse group"), - callback: () => this.group.collapse() - }); - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Expend all"), - callback: () => this.handle.expend_all() - }); - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Collapse all"), - callback: () => this.handle.collapse_all() - }); - entries.push(contextmenu.Entry.HR()); - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Show permission description"), - callback: () => { - createInfoModal( - tr("Permission description"), - tr("Permission description for permission ") + this.permission.name + ":
" + this.permission.description - ).open(); - } - }); - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Copy permission name"), - callback: () => { - copy_to_clipboard(this.permission.name); - } - }); - - contextmenu.spawn_context_menu(event.pageX, event.pageY, ...entries); - }); - } - } - - private _trigger_value_assign() { - if(typeof(this._value) === "undefined") - this.value(this._grant || 1, false, false); //TODO: Use max granted value? - this._tag_value_input.focus(); - if(this.permission.is_boolean()) - this._tag_value_input.trigger('change'); - } - - private _trigger_grant_assign() { - this.granted(1); //TODO: Use max granted value? - this._tag_granted_input.focus(); - } - - hide() { - this._mask &= ~0x08; - for(const element of this.tag) - (element).style.display = 'none'; - } - - show() { - this._mask |= 0x08; - for(const element of this.tag) - (element).style.display = 'flex'; - } - - is_filtered() : boolean { - return (this._mask & 0x10) > 0; - } - - set_filtered(flag: boolean) { - if(flag) - this._mask |= 0x10; - else - this._mask &= ~0x10; - } - - is_set() : boolean { - return (this._mask & 0x03) > 0; - } - - get_value() { return this._value; } - - value(value: number | undefined, skip?: boolean, negate?: boolean) { - if(typeof value === "undefined") { - this._tag_value.detach(); - this._tag_negate.detach(); - this._tag_skip.detach(); - - this._value = undefined; - this.flags = 0; - - this._update_active_class(); - this._mask &= ~0x1; - return; - } - - if((this._mask & 0x1) == 0) { - this._tag_value.appendTo(this.tag_container_value); - this._tag_negate.appendTo(this.tag_container_negate); - this._tag_skip.appendTo(this.tag_container_skip); - - this._update_active_class(); - this._mask |= 0x01; - } - - if((this._mask & 0x04) > 0) - this._tag_value_input.prop('checked', !!value); - else - this._tag_value_input.val(value); - this._tag_skip_input.prop('checked', !!skip); - this._tag_negate_input.prop('checked', !!negate); - - this._value = value; - this.flags = (!!skip ? 0x01 : 0) | (!!negate ? 0x2 : 0); - } - - granted(value: number | undefined) { - if(typeof value === "undefined") { - this._tag_granted.detach(); - - this._update_active_class(); - this._grant = undefined; - this._mask &= ~0x2; - return; - } - - if((this._mask & 0x2) == 0) { - this._mask |= 0x02; - this._tag_granted.appendTo(this.tag_container_granted); - this._update_active_class(); - } - this._tag_granted_input.val(value); - this._grant = value; - } - - reset() { - this._mask &= ~0x03; - - this._tag_value.detach(); - this._tag_negate.detach(); - this._tag_skip.detach(); - - this._tag_granted.detach(); - - this._value = undefined; - this._grant = undefined; - this.flags = 0; - - const tag = this.tag[0] as HTMLDivElement; - tag.classList.remove("active"); - } - - private _reset_value() { - if(typeof(this._value) === "undefined") { - if((this._mask & 0x1) != 0) - this.value(undefined); - } else { - this.value(this._value, (this.flags & 0x1) > 1, (this.flags & 0x2) > 1); - } - } - - private _reset_grant() { - if(typeof(this._grant) === "undefined") { - if((this._mask & 0x2) != 0) - this.granted(undefined); - } else { - this.granted(this._grant); - } - } - - private _update_active_class() { - const value = typeof(this._value) !== "undefined" || typeof(this._grant) !== "undefined"; - const tag = this.tag[0] as HTMLDivElement; - if(value) - tag.classList.add("active"); - else - tag.classList.remove("active"); - } -} - -class HTMLPermissionGroup { - readonly handle: HTMLPermissionEditor; - readonly group: PermissionGroup; - readonly index: number; - - private _tag_arrow: JQuery; - - permissions: HTMLPermission[] = []; - children: HTMLPermissionGroup[] = []; - - tag: JQuery; - visible: boolean; - - collapsed: boolean; - parent_collapsed: boolean; - - constructor(handle: HTMLPermissionEditor, group: PermissionGroup, index: number) { - this.handle = handle; - this.group = group; - this.index = index; - - this._build_tag(); - } - - private _build_tag() { - this.tag = $.spawn("div").addClass("entry group").css('padding-left', this.index + "em").append([ - $.spawn("div").addClass("column-name").append([ - this._tag_arrow = $.spawn("div").addClass("arrow down"), - $.spawn("div").addClass("group-name").text(this.group.name) - ]), - $.spawn("div").addClass("column-value"), - $.spawn("div").addClass("column-skip"), - $.spawn("div").addClass("column-negate"), - $.spawn("div").addClass("column-granted") - ]); - - this.tag.on('contextmenu', event => { - if(event.isDefaultPrevented()) - return; - event.preventDefault(); - - const entries: contextmenu.MenuEntry[] = []; - if(this.collapsed) - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Expend group"), - callback: () => this.expend(), - }); - else - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Collapse group"), - callback: () => this.collapse(), - }); - entries.push(contextmenu.Entry.HR()); - - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Expend all"), - callback: () => this.handle.expend_all() - }); - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Collapse all"), - callback: () => this.handle.collapse_all() - }); - - contextmenu.spawn_context_menu(event.pageX, event.pageY, ...entries); - }); - - this._tag_arrow.on('click', event => { - if(this.collapsed) - this.expend(); - else - this.collapse(); - }) - } - - update_visibility() { - let flag = false; - if (!flag) { - for (const group of this.children) { - if (group.visible) { - flag = true; - break; - } - } - } - - if (!flag) { - for (const permission of this.permissions) { - if (!permission.is_filtered()) { - flag = true; - break; - } - } - } - - this.visible = flag; - - flag = flag && !this.parent_collapsed; - for(const element of this.tag) - (element).style.display = flag ? 'flex' : 'none'; - - const arrow_node = this._tag_arrow[0]; - arrow_node.classList.remove(this.collapsed ? "down" : "right"); - arrow_node.classList.add(!this.collapsed ? "down" : "right"); - } - - collapse() { - this.collapsed = true; - - const children = [...this.children]; - while (true) { - const child = children.pop(); - if(!child) break; - - child.parent_collapsed = true; - children.push(...child.children); - } - - this.handle.update_view(); - } - - expend() { - this.collapsed = false; - - if(this.parent_collapsed) - return; - - const children = [...this.children]; - while (true) { - const child = children.pop(); - if(!child) break; - - child.parent_collapsed = false; - if(!child.collapsed) - children.push(...child.children); - } - - this.handle.update_view(); - } -} - -export class HTMLPermissionEditor extends AbstractPermissionEditor { - container: JQuery; - - private mode_container_permissions: JQuery; - private mode_container_error_permission: JQuery; - private mode_container_unset: JQuery; - - private icon_shown: boolean; - - private filter_input: JQuery; - private filter_grant: JQuery; - - private hidden_permissions: PermissionType[]; - - private button_toggle: JQuery; - - private even_list: ({ visible() : boolean; set_even(flag: boolean); })[]; - private permission_map: Array; - private permission_groups: HTMLPermissionGroup[]; - - constructor() { - super(); - } - - initialize(permissions: GroupedPermissions[]) { - this._permissions = permissions; - this.build_tag(); - } - - set_hidden_permissions(permissions: PermissionType[]) { - this.hidden_permissions = permissions; - this.update_filter(); - } - - private update_filter() { - const value = (this.filter_input.val() as string).toLowerCase(); - const grant = !!this.filter_grant.prop('checked'); - - const _filter = (permission: HTMLPermission) => { - if(value && permission.permission.name.indexOf(value) == -1) return false; - if(grant && !permission.is_set()) return false; - if(this.hidden_permissions && this.hidden_permissions.find(e => e && e.toLocaleLowerCase() == permission.permission.name.toLowerCase())) - return false; - - return true; - }; - - for(let id = 1; id < this.permission_map.length; id++) { - const permission = this.permission_map[id]; - let flag = _filter(permission); - permission.set_filtered(!flag); - - - flag = flag && !permission.group.collapsed && !permission.group.parent_collapsed; /* hide when parent is filtered */ - if(flag) permission.show(); - else permission.hide(); - } - - /* run in both directions, to update the parent visibility and the actiual visibility */ - for(const group of this.permission_groups) - group.update_visibility(); - for(const group of this.permission_groups.slice().reverse()) - group.update_visibility(); - - - let index = 0; - for(const entry of this.even_list) { - if(!entry.visible()) continue; - entry.set_even((index++ & 0x1) == 0); - } - } - - private update_icon() { - const permission = this.icon_shown ? this.permission_map.find(e => e && e.permission.name === "i_icon_id") : undefined; - const icon_id = permission ? permission.get_value() : 0; - - const icon_node = this.container.find(".container-icon-select .icon-preview"); - icon_node.children().remove(); - - let resolve: Promise>; - if(icon_id >= 0 && icon_id <= 1000) - resolve = Promise.resolve(IconManager.generate_tag(icon_cache_loader.load_icon(icon_id, "general"))); - else - resolve = this.icon_resolver(permission ? permission.get_value() : 0).then(e => $(e)); - - resolve.then(tag => tag.appendTo(icon_node)) - .catch(error => { - log.error(LogCategory.PERMISSIONS, tr("Failed to generate empty icon preview: %o"), error); - }); - } - - private build_tag() { - this.container = $("#tmpl_permission_editor_html").renderTag(); - this.container.find("input").on('change', event => { - $(event.target).parents(".form-group").toggleClass('is-filled', !!(event.target as HTMLInputElement).value); - }); - - /* search for that as long we've not that much nodes */ - this.mode_container_permissions = this.container.find(".container-mode-permissions"); - this.mode_container_error_permission = this.container.find(".container-mode-no-permissions"); - this.mode_container_unset = this.container.find(".container-mode-unset"); - - this.filter_input = this.container.find(".filter-input"); - this.filter_input.on('change keyup', event => this.update_filter()); - - this.filter_grant = this.container.find(".filter-granted"); - this.filter_grant.on('change', event => this.update_filter()); - - this.button_toggle = this.container.find(".button-toggle-clients"); - this.button_toggle.on('click', () => { - if(this._toggle_callback) - this.button_toggle.text(this._toggle_callback()); - }); - - this.container.find(".button-update").on('click', event => this.trigger_update()); - - /* allocate array space */ - { - let max_index = 0; - let tmp: GroupedPermissions[] = []; - while(true) { - const entry = tmp.pop(); - if(!entry) break; - for(const permission of entry.permissions) - if(permission.id > max_index) - max_index = permission.id; - tmp.push(...entry.children); - } - this.permission_map = new Array(max_index + 1); - } - this.permission_groups = []; - this.even_list = []; - - { - const container_permission = this.mode_container_permissions.find(".container-permission-list .body"); - - const build_group = (pgroup: HTMLPermissionGroup, group: GroupedPermissions, index: number) => { - const hgroup = new HTMLPermissionGroup(this, group.group, index); - hgroup.tag.appendTo(container_permission); - this.even_list.push({ - set_even(flag: boolean) { - if(flag) - hgroup.tag[0].classList.add('even'); - else - hgroup.tag[0].classList.remove('even'); - }, - - visible(): boolean { - return !hgroup.parent_collapsed && hgroup.visible; - } - }); - - if(pgroup) - pgroup.children.push(hgroup); - this.permission_groups.push(hgroup); - - index++; - for(const child of group.children) - build_group(hgroup, child, index); - - for(const permission of group.permissions) { - const perm = new HTMLPermission(this, hgroup, permission, index); - this.permission_map[perm.permission.id] = perm; - perm.tag.appendTo(container_permission); - hgroup.permissions.push(perm); - this.even_list.push({ - set_even(flag: boolean) { - if(flag) - perm.tag[0].classList.add('even'); - else - perm.tag[0].classList.remove('even'); - }, - - visible(): boolean { - return !perm.is_filtered() && !perm.group.collapsed && !perm.group.parent_collapsed; - } - }); - } - }; - - for(const group of this._permissions) - build_group(undefined, group, 0); - } - - { - const container = this.container.find(".container-icon-select"); - container.find(".button-select-icon").on('click', event => { - const permission = this.permission_map.find(e => e && e.permission.name === "i_icon_id"); - this.icon_selector(permission ? permission.get_value() : 0).then(id => { - const permission = this.permission_map.find(e => e && e.permission.name === "i_icon_id"); - if(permission) { - this.trigger_change(permission.permission, { - remove: false, - value: id, - flag_skip: false, - flag_negate: false - }, false).then(() => { - log.debug(LogCategory.PERMISSIONS, tr("Selected new icon %s"), id); - - permission.value(id, false, false); - this.update_icon(); - }).catch(error => { - log.warn(LogCategory.PERMISSIONS, tr("Failed to set icon permission within permission editor: %o"), error); - }); - } else { - log.warn(LogCategory.PERMISSIONS, tr("Failed to find icon permissions within permission editor")); - } - }).catch(error => { - log.error(LogCategory.PERMISSIONS, tr("Failed to select an icon for the icon permission: %o"), error); - }); - }); - - container.find(".button-icon-remove").on('click', event => { - const permission = this.permission_map.find(e => e && e.permission.name === "i_icon_id"); - if(permission) { - this.trigger_change(permission.permission, { - remove: true, - }, false).then(() => { - permission.value(undefined); - this.update_icon(); - }).catch(error => { - log.warn(LogCategory.PERMISSIONS, tr("Failed to remove icon permission within permission editor: %o"), error); - }); - } else { - log.warn(LogCategory.PERMISSIONS, tr("Failed to find icon permission within permission editor")); - } - }); - } - - this.mode_container_permissions.on('contextmenu', event => { - if(event.isDefaultPrevented()) - return; - event.preventDefault(); - - const entries: contextmenu.MenuEntry[] = []; - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Expend all"), - callback: () => this.expend_all() - }); - entries.push({ - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Collapse all"), - callback: () => this.collapse_all() - }); - - contextmenu.spawn_context_menu(event.pageX, event.pageY, ...entries); - }); - - this.set_mode(PermissionEditorMode.UNSET); - } - - html_tag(): JQuery { - return this.container; - } - - set_permissions(u_permissions?: PermissionValue[]) { - const permissions = new Array(this.permission_map.length); - - /* initialize update array, boundary checks are already made by js */ - for(const perm of u_permissions) - permissions[perm.type.id] = perm; - - /* there is no permission with id 0 */ - for(let id = 1; id < permissions.length; id++) { - const new_permission = permissions[id]; - const permission_handle = this.permission_map[id]; - if(!new_permission) { - permission_handle.reset(); - continue; - } - - permission_handle.value(new_permission.value, new_permission.flag_skip, new_permission.flag_negate); - permission_handle.granted(new_permission.granted_value); - } - - this.update_icon(); - this.update_filter(); - } - - set_mode(mode: PermissionEditorMode) { - this.mode_container_permissions.css('display', mode == PermissionEditorMode.VISIBLE ? 'flex' : 'none'); - this.mode_container_error_permission.css('display', mode == PermissionEditorMode.NO_PERMISSION ? 'flex' : 'none'); - this.mode_container_unset.css('display', mode == PermissionEditorMode.UNSET ? 'block' : 'none'); - if(this.icon_shown != (mode == PermissionEditorMode.VISIBLE)) { - this.icon_shown = mode == PermissionEditorMode.VISIBLE; - this.update_icon(); - } - } - - trigger_change(permission: PermissionInfo, value?: ChangedPermissionValue, update_icon?: boolean) : Promise { - if(this._listener_change) { - if((typeof(update_icon) !== "boolean" || update_icon) && permission && permission.name === "i_icon_id") - return this._listener_change(permission, value).then(e => { - setTimeout(() => this.update_icon(), 0); /* we need to fully handle the response and then only we're able to update the icon */ - return e; - }); - else - return this._listener_change(permission, value); - } - - return Promise.reject(); - } - - collapse_all() { - for(const group of this.permission_groups) { - group.collapsed = true; - for(const child of group.children) - child.parent_collapsed = true; - } - this.update_filter(); /* update display state of all entries */ - } - - expend_all() { - for(const group of this.permission_groups) { - group.collapsed = false; - group.parent_collapsed = false; - } - this.update_filter(); /* update display state of all entries */ - } - - update_view() { return this.update_filter(); } - - set_toggle_button(callback: () => string, initial: string) { - this._toggle_callback = callback; - if(this._toggle_callback) { - this.button_toggle.text(initial); - this.button_toggle.show(); - } else { - this.button_toggle.hide(); - } - } -} \ No newline at end of file diff --git a/shared/js/ui/modal/permission/ModalPermissionEdit.ts b/shared/js/ui/modal/permission/ModalPermissionEdit.ts deleted file mode 100644 index 9a3ddf28..00000000 --- a/shared/js/ui/modal/permission/ModalPermissionEdit.ts +++ /dev/null @@ -1,1464 +0,0 @@ -import { - PermissionManager, -} from "tc-shared/permission/PermissionManager"; -import {PermissionType} from "tc-shared/permission/PermissionType"; -import {ConnectionHandler} from "tc-shared/ConnectionHandler"; -import {createErrorModal, createInfoModal, createInputModal, createModal, Modal} from "tc-shared/ui/elements/Modal"; -import {HTMLPermissionEditor} from "tc-shared/ui/modal/permission/HTMLPermissionEditor"; -import {spawnIconSelect} from "tc-shared/ui/modal/ModalIconSelect"; -import {CanvasPermissionEditor} from "tc-shared/ui/modal/permission/CanvasPermissionEditor"; -import {Settings, settings} from "tc-shared/settings"; -import {ChannelEntry} from "tc-shared/ui/channel"; -import {LogCategory} from "tc-shared/log"; -import {CommandResult, ErrorID} from "tc-shared/connection/ServerConnectionDeclaration"; -import * as log from "tc-shared/log"; -import {Group, GroupManager, GroupTarget, GroupType} from "tc-shared/permission/GroupManager"; -import {spawnYesNo} from "tc-shared/ui/modal/ModalYesNo"; -import * as contextmenu from "tc-shared/ui/elements/ContextMenu"; -import {copy_to_clipboard} from "tc-shared/utils/helpers"; -import {formatMessage} from "tc-shared/ui/frames/chat"; -import { - senseless_channel_group_permissions, - senseless_channel_permissions, senseless_client_channel_permissions, - senseless_client_permissions, senseless_server_group_permissions -} from "tc-shared/ui/modal/permission/SenselessPermissions"; -import {AbstractPermissionEditor, PermissionEditorMode} from "tc-shared/ui/modal/permission/AbstractPermissionEditor"; -import {tra} from "tc-shared/i18n/localize"; - -declare global { - interface JQuery { - dropdown: any; - } -} - -export type OptionsServerGroup = {}; -export type OptionsChannelGroup = {}; -export type OptionsClientPermissions = { unique_id?: string }; -export type OptionsChannelPermissions = { channel_id?: number }; -export type OptionsClientChannelPermissions = OptionsClientPermissions & OptionsChannelPermissions; -export interface OptionMap { - "sg": OptionsServerGroup, - "cg": OptionsChannelGroup, - "clp": OptionsClientPermissions, - "chp": OptionsChannelPermissions, - "clchp": OptionsClientChannelPermissions -} - -export function _space() { - const now = Date.now(); - while(now + 100 > Date.now()); -} - -export function spawnPermissionEdit(connection: ConnectionHandler, selected_tab?: T, options?: OptionMap[T]) : Modal { - options = options || {}; - - const modal = createModal({ - header: function() { - return tr("Server Permissions"); - }, - body: function () { - let properties: any = {}; - let tag = $("#tmpl_server_permissions").renderTag(properties); - - /* build the permission editor */ - const permission_editor: AbstractPermissionEditor = (() => { - const editor = new HTMLPermissionEditor(); - editor.initialize(connection.permissions.groupedPermissions()); - editor.icon_resolver = async id => { - const icon = connection.fileManager.icons.load_icon(id); - await icon.await_loading(); - - const tag = document.createElement("img"); - await new Promise((resolve, reject) => { - tag.onerror = reject; - tag.onload = resolve; - tag.src = icon.loaded_url || "nope"; - }); - return tag; - }; - editor.icon_selector = current_icon => new Promise(resolve => { - spawnIconSelect(connection, id => resolve(new Int32Array([id])[0]), current_icon); - }); - - if(editor instanceof CanvasPermissionEditor) - setTimeout(() => editor.update_ui(), 500); - return editor; - })(); - - const container_tab_list = tag.find(".right > .header"); - { - const label_current = tag.find(".left .container-selected"); - const create_tab = (tab_entry: JQuery, container_name: string, hidden_permissions: PermissionType[]) => { - const target_container = tag.find(".body .container." + container_name); - - tab_entry.on('click', () => { - /* Using a timeout here prevents unnecessary style calculations required by other click event handlers */ - setTimeout(() => { - container_tab_list.find(".selected").removeClass("selected"); - tab_entry.addClass("selected"); - label_current.text(tab_entry.find("a").text()); - - /* dont use show() here because it causes a style recalculation */ - for(const element of tag.find(".body .container")) - (element).style.display = "none"; - - permission_editor.set_hidden_permissions(settings.static_global(Settings.KEY_PERMISSIONS_SHOW_ALL) ? undefined : hidden_permissions); - permission_editor.html_tag()[0].remove(); - target_container.find(".permission-editor").trigger('show'); - target_container.find(".permission-editor").append(permission_editor.html_tag()); - - for(const element of target_container) - (element).style.display = null; - }, 0); - }); - }; - - create_tab(container_tab_list.find(".sg"), "container-view-server-groups", senseless_server_group_permissions); - create_tab(container_tab_list.find(".cg"), "container-view-channel-groups", senseless_channel_group_permissions); - create_tab(container_tab_list.find(".chp"), "container-view-channel-permissions", senseless_channel_permissions); - create_tab(container_tab_list.find(".clp"), "container-view-client-permissions", senseless_client_permissions); - create_tab(container_tab_list.find(".clchp"), "container-view-client-channel-permissions", senseless_client_channel_permissions); - } - - apply_server_groups(connection, permission_editor, tag.find(".left .container-view-server-groups"), tag.find(".right .container-view-server-groups")); - apply_channel_groups(connection, permission_editor, tag.find(".left .container-view-channel-groups"), tag.find(".right .container-view-channel-groups")); - apply_channel_permission(connection, permission_editor, tag.find(".left .container-view-channel-permissions"), tag.find(".right .container-view-channel-permissions")); - apply_client_permission(connection, permission_editor, tag.find(".left .container-view-client-permissions"), tag.find(".right .container-view-client-permissions"), selected_tab == "clp" ? options : {}); - apply_client_channel_permission(connection, permission_editor, tag.find(".left .container-view-client-channel-permissions"), tag.find(".right .container-view-client-channel-permissions"), selected_tab == "clchp" ? options : {}); - - setTimeout(() => container_tab_list.find("." + (selected_tab || "sg")).trigger('click'), 0); - return tag.dividerfy(); - }, - footer: undefined, - - min_width: "30em", - height: "80%", - trigger_tab: false, - full_size: true - }); - - const tag = modal.htmlTag; - tag.find(".modal-body").addClass("modal-permission-editor"); - if(selected_tab) - setTimeout(() => tag.find(".tab-header .entry[x-id=" + selected_tab + "]").first().trigger("click"), 1); - tag.find(".btn_close").on('click', () => { - modal.close(); - }); - - return modal; -} - -function build_channel_tree(connection: ConnectionHandler, channel_list: JQuery, selected_channel: number, select_callback: (channel: ChannelEntry, icon_update: (id: number) => any) => any) { - const root = connection.channelTree.get_first_channel(); - if(!root) return; - - const build_channel = (channel: ChannelEntry, level: number) => { - let tag = $.spawn("div").addClass("channel").css("padding-left", "calc(0.25em + " + (level * 16) + "px)").attr("channel-id", channel.channelId); - let icon_tag = connection.fileManager.icons.generateTag(channel.properties.channel_icon_id); - icon_tag.appendTo(tag); - const _update_icon = icon_id => icon_tag.replaceWith(icon_tag = connection.fileManager.icons.generateTag(icon_id)); - - { - let name = $.spawn("a").text(channel.channelName() + " (" + channel.channelId + ")").addClass("name"); - name.appendTo(tag); - } - - tag.on('click', event => { - channel_list.find(".selected").removeClass("selected"); - tag.addClass("selected"); - select_callback(channel, _update_icon); - }); - - return tag; - }; - - const build_channels = (root: ChannelEntry, level: number) => { - build_channel(root, level).appendTo(channel_list); - const child_head = root.children(false).find(e => e.channel_previous === undefined); - if(child_head) - build_channels(child_head, level + 1); - if(root.channel_next) - build_channels(root.channel_next, level) - }; - build_channels(root, 0); - - let selected_channel_tag = channel_list.find(".channel[channel-id=" + selected_channel + "]"); - if(!selected_channel_tag || selected_channel_tag.length < 1) - selected_channel_tag = channel_list.find('.channel').first(); - setTimeout(() => selected_channel_tag.trigger('click'), 0); -} - -function apply_client_channel_permission(connection: ConnectionHandler, editor: AbstractPermissionEditor, tab_left: JQuery, tab_right: JQuery, options: OptionsClientChannelPermissions) { - let current_cldbid: number = 0; - let current_channel: ChannelEntry; - - /* the editor */ - { - const pe_client = tab_right.find(".permission-editor"); - tab_right.on('show', event => { - editor.set_toggle_button(undefined, undefined); - pe_client.append(editor.html_tag()); - if(connection.permissions.neededPermission(PermissionType.B_VIRTUALSERVER_CLIENT_PERMISSION_LIST).granted(1)) { - if(current_cldbid && current_channel) - editor.set_mode(PermissionEditorMode.VISIBLE); - else - editor.set_mode(PermissionEditorMode.UNSET); - } else { - editor.set_mode(PermissionEditorMode.NO_PERMISSION); - return; - } - - - editor.set_listener_update(() => { - if(!current_cldbid || !current_channel) return; - - connection.permissions.requestClientChannelPermissions(current_cldbid, current_channel.channelId).then(result => { - editor.set_permissions(result); - editor.set_mode(PermissionEditorMode.VISIBLE); - }).catch(error => { - console.log(error); //TODO handling? - }); - }); - - /* TODO: Error handling? */ - editor.set_listener(async (permission, value) => { - if (!current_cldbid) - throw "unset client"; - if (!current_channel) - throw "unset channel"; - - if (value.remove) { - /* remove the permission */ - if (typeof (value.value) !== "undefined") { - log.info(LogCategory.PERMISSIONS, tr("Removing client channel permission %s. permission.id: %o"), - permission.name, - permission.id, - ); - - await connection.serverConnection.send_command("channelclientdelperm", { - cldbid: current_cldbid, - cid: current_channel.channelId, - permid: permission.id, - }); - } else { - log.info(LogCategory.PERMISSIONS, tr("Removing client channel grant permission %s. permission.id: %o"), - permission.name, - permission.id_grant(), - value.granted, - ); - - await connection.serverConnection.send_command("channelclientdelperm", { - cldbid: current_cldbid, - cid: current_channel.channelId, - permid: permission.id_grant(), - }); - } - } else { - /* add the permission */ - if (typeof (value.value) !== "undefined") { - log.info(LogCategory.PERMISSIONS, tr("Adding or updating client channel permission %s. permission.{id: %o, value: %o, flag_skip: %o, flag_negate: %o}"), - permission.name, - permission.id, - value.value, - value.flag_skip, - value.flag_negate - ); - - await connection.serverConnection.send_command("channelclientaddperm", { - cldbid: current_cldbid, - cid: current_channel.channelId, - permid: permission.id, - permvalue: value.value, - permskip: value.flag_skip, - permnegated: value.flag_negate - }); - } else { - log.info(LogCategory.PERMISSIONS, tr("Adding or updating client channel grant permission %s. permission.{id: %o, value: %o}"), - permission.name, - permission.id_grant(), - value.granted, - ); - - await connection.serverConnection.send_command("channelclientaddperm", { - cldbid: current_cldbid, - cid: current_channel.channelId, - permid: permission.id_grant(), - permvalue: value.granted, - permskip: false, - permnegated: false - }); - } - } - }); - - /* FIXME: Use cached permissions */ - editor.trigger_update(); - }); - } - - build_channel_tree(connection, tab_left.find(".list-channel .entries"), options.channel_id || 0, channel => { - if(current_channel == channel) return; - - current_channel = channel; - - /* TODO: Test for visibility */ - editor.trigger_update(); - }); - - { - - const tag_select = tab_left.find(".client-select"); - const tag_select_uid = tag_select.find("input"); - const tag_select_error = tag_select.find(".invalid-feedback"); - - const tag_client_name = tab_left.find(".client-name"); - const tag_client_uid = tab_left.find(".client-uid"); - const tag_client_dbid = tab_left.find(".client-dbid"); - - - const resolve_client = () => { - let client_uid = tag_select_uid.val() as string; - connection.serverConnection.command_helper.info_from_uid(client_uid).then(result => { - if(!result || result.length == 0) return Promise.reject("invalid data"); - tag_select.removeClass('is-invalid'); - - tag_client_name.val(result[0].client_nickname ); - tag_client_uid.val(result[0].client_unique_id); - tag_client_dbid.val(result[0].client_database_id); - - current_cldbid = result[0].client_database_id; - editor.trigger_update(); - }).catch(error => { - console.log(error); - if(error instanceof CommandResult) { - if(error.id == ErrorID.EMPTY_RESULT) - error = "unknown client"; - else - error = error.extra_message || error.message; - } - - tag_client_name.val(""); - tag_client_uid.val(""); - tag_client_dbid.val(""); - - tag_select_error.text(error); - tag_select.addClass('is-invalid'); - editor.set_mode(PermissionEditorMode.UNSET); - }); - }; - - tag_select_uid.on('change', event => resolve_client()); - if(options.unique_id) { - tag_select_uid.val(options.unique_id); - setTimeout(() => resolve_client()); - } - } -} - -function apply_client_permission(connection: ConnectionHandler, editor: AbstractPermissionEditor, tab_left: JQuery, tab_right: JQuery, options: OptionsClientPermissions) { - let current_cldbid: number = 0; - - /* the editor */ - { - const pe_client = tab_right.find("permission-editor.client"); - tab_right.on('show', event => { - editor.set_toggle_button(undefined, undefined); - pe_client.append(editor.html_tag()); - if(connection.permissions.neededPermission(PermissionType.B_VIRTUALSERVER_CLIENT_PERMISSION_LIST).granted(1)) { - if(current_cldbid) - editor.set_mode(PermissionEditorMode.VISIBLE); - else - editor.set_mode(PermissionEditorMode.UNSET); - } else { - editor.set_mode(PermissionEditorMode.NO_PERMISSION); - return; - } - - editor.set_listener_update(() => { - if(!current_cldbid) return; - - connection.permissions.requestClientPermissions(current_cldbid).then(result => { - editor.set_permissions(result); - editor.set_mode(PermissionEditorMode.VISIBLE); - }).catch(error => { - console.log(error); //TODO handling? - }); - }); - - /* TODO: Error handling? */ - editor.set_listener(async (permission, value) => { - if (!current_cldbid) - throw "unset client"; - - if (value.remove) { - /* remove the permission */ - if (typeof (value.value) !== "undefined") { - log.info(LogCategory.PERMISSIONS, tr("Removing client permission %s. permission.id: %o"), - permission.name, - permission.id, - ); - - await connection.serverConnection.send_command("clientdelperm", { - cldbid: current_cldbid, - permid: permission.id, - }); - } else { - log.info(LogCategory.PERMISSIONS, tr("Removing client grant permission %s. permission.id: %o"), - permission.name, - permission.id_grant(), - value.granted, - ); - - await connection.serverConnection.send_command("clientdelperm", { - cldbid: current_cldbid, - permid: permission.id_grant(), - }); - } - } else { - /* add the permission */ - if (typeof (value.value) !== "undefined") { - log.info(LogCategory.PERMISSIONS, tr("Adding or updating client permission %s. permission.{id: %o, value: %o, flag_skip: %o, flag_negate: %o}"), - permission.name, - permission.id, - value.value, - value.flag_skip, - value.flag_negate - ); - - await connection.serverConnection.send_command("clientaddperm", { - cldbid: current_cldbid, - permid: permission.id, - permvalue: value.value, - permskip: value.flag_skip, - permnegated: value.flag_negate - }); - } else { - log.info(LogCategory.PERMISSIONS, tr("Adding or updating client grant permission %s. permission.{id: %o, value: %o}"), - permission.name, - permission.id_grant(), - value.granted, - ); - - await connection.serverConnection.send_command("clientaddperm", { - cldbid: current_cldbid, - permid: permission.id_grant(), - permvalue: value.granted, - permskip: false, - permnegated: false - }); - } - } - }); - - /* FIXME: Use cached permissions */ - editor.trigger_update(); - }); - } - - - const tag_select = tab_left.find(".client-select"); - const tag_select_uid = tag_select.find("input"); - const tag_select_error = tag_select.find(".invalid-feedback"); - - const tag_client_name = tab_left.find(".client-name"); - const tag_client_uid = tab_left.find(".client-uid"); - const tag_client_dbid = tab_left.find(".client-dbid"); - - const resolve_client = () => { - let client_uid = tag_select_uid.val() as string; - connection.serverConnection.command_helper.info_from_uid(client_uid).then(result => { - if(!result || result.length == 0) return Promise.reject("invalid data"); - tag_select.removeClass("is-invalid"); - - tag_client_name.val(result[0].client_nickname ); - tag_client_uid.val(result[0].client_unique_id); - tag_client_dbid.val(result[0].client_database_id); - - current_cldbid = result[0].client_database_id; - editor.trigger_update(); - }).catch(error => { - console.log(error); - if(error instanceof CommandResult) { - if(error.id == ErrorID.EMPTY_RESULT) - error = "unknown client"; - else - error = error.extra_message || error.message; - } - - tag_client_name.val(""); - tag_client_uid.val(""); - tag_client_dbid.val(""); - - tag_select_error.text(error); - tag_select.addClass("is-invalid"); - editor.set_mode(PermissionEditorMode.UNSET); - }); - }; - - tag_select_uid.on('change', event => resolve_client()); - if(options.unique_id) { - tag_select_uid.val(options.unique_id); - setTimeout(() => resolve_client()); - } -} - -function apply_channel_permission(connection: ConnectionHandler, editor: AbstractPermissionEditor, tab_left: JQuery, tab_right: JQuery) { - let current_channel: ChannelEntry | undefined; - let update_channel_icon: (id: number) => any; - - /* the editor */ - { - const pe_channel = tab_right.find(".permission-editor"); - tab_right.on('show', event => { - editor.set_toggle_button(undefined, undefined); - pe_channel.append(editor.html_tag()); - if(connection.permissions.neededPermission(PermissionType.B_VIRTUALSERVER_CHANNEL_PERMISSION_LIST).granted(1)) - editor.set_mode(PermissionEditorMode.VISIBLE); - else { - editor.set_mode(PermissionEditorMode.NO_PERMISSION); - return; - } - - editor.set_listener_update(() => { - if(!current_channel) return; - - connection.permissions.requestChannelPermissions(current_channel.channelId).then(result => editor.set_permissions(result)).catch(error => { - editor.set_permissions([]); - console.log(error); //TODO handling? - }); - }); - - editor.set_listener(async (permission, value) => { - if (!current_channel) - throw "unset channel"; - - if (value.remove) { - /* remove the permission */ - if (typeof (value.value) !== "undefined") { - log.info(LogCategory.PERMISSIONS, tr("Removing channel permission %s. permission.id: %o"), - permission.name, - permission.id, - ); - - await connection.serverConnection.send_command("channeldelperm", { - cid: current_channel.channelId, - permid: permission.id, - }).then(e => { - if(permission.name === "i_icon_id" && update_channel_icon) - update_channel_icon(undefined); - return e; - }); - } else { - /* TODO Remove this because its totally useless. Remove this from the UI as well */ - log.info(LogCategory.PERMISSIONS, tr("Removing channel grant permission %s. permission.id: %o"), - permission.name, - permission.id_grant(), - value.granted, - ); - - await connection.serverConnection.send_command("channeldelperm", { - cid: current_channel.channelId, - permid: permission.id_grant(), - }); - } - } else { - /* add the permission */ - if (typeof (value.value) !== "undefined") { - log.info(LogCategory.PERMISSIONS, tr("Adding or updating channel permission %s. permission.{id: %o, value: %o, flag_skip: %o, flag_negate: %o}"), - permission.name, - permission.id, - value.value, - value.flag_skip, - value.flag_negate - ); - - await connection.serverConnection.send_command("channeladdperm", { - cid: current_channel.channelId, - permid: permission.id, - permvalue: value.value, - permskip: value.flag_skip, - permnegated: value.flag_negate - }).then(e => { - if(permission.name === "i_icon_id" && update_channel_icon) - update_channel_icon(value.value); - return e; - }); - } else { - /* TODO Remove this because its totally useless. Remove this from the UI as well */ - log.info(LogCategory.PERMISSIONS, tr("Adding or updating channel grant permission %s. permission.{id: %o, value: %o}"), - permission.name, - permission.id_grant(), - value.granted, - ); - - await connection.serverConnection.send_command("channeladdperm", { - cid: current_channel.channelId, - permid: permission.id_grant(), - permvalue: value.granted, - permskip: false, - permnegated: false - }); - } - } - }); - - /* FIXME: Use cached permissions */ - editor.trigger_update(); - }); - } - - let channel_list = tab_left.find(".list-channel .entries"); - build_channel_tree(connection, channel_list, 0, (channel, update) => { - current_channel = channel; - update_channel_icon = update; - editor.trigger_update(); - }); -} - -function apply_channel_groups(connection: ConnectionHandler, editor: AbstractPermissionEditor, tab_left: JQuery, tab_right: JQuery) { - let current_group; - let update_group_icon: (id: number) => any; - let update_groups: (selected_group: number) => any; - let update_buttons: () => any; - - /* the editor */ - { - const pe_server = tab_right.find(".permission-editor"); - tab_right.on('show', event => { - editor.set_toggle_button(undefined, undefined); - pe_server.append(editor.html_tag()); - if(connection.permissions.neededPermission(PermissionType.B_VIRTUALSERVER_CHANNELGROUP_PERMISSION_LIST).granted(1)) - editor.set_mode(PermissionEditorMode.VISIBLE); - else { - editor.set_mode(PermissionEditorMode.NO_PERMISSION); - return; - } - - editor.set_listener_update(() => { - if(!current_group) return; - - connection.groups.request_permissions(current_group).then(result => editor.set_permissions(result)).catch(error => { - console.log(error); //TODO handling? - }); - }); - - editor.set_listener(async (permission, value) => { - if (!current_group) - throw "unset channel group"; - - if (value.remove) { - /* remove the permission */ - if (typeof (value.value) !== "undefined") { - log.info(LogCategory.PERMISSIONS, tr("Removing channel group permission %s. permission.id: %o"), - permission.name, - permission.id, - ); - - await connection.serverConnection.send_command("channelgroupdelperm", { - cgid: current_group.id, - permid: permission.id, - }).then(e => { - if(permission.name === "i_icon_id" && update_group_icon) - update_group_icon(undefined); - return e; - }); - } else { - log.info(LogCategory.PERMISSIONS, tr("Removing channel group grant permission %s. permission.id: %o"), - permission.name, - permission.id_grant(), - value.granted, - ); - - await connection.serverConnection.send_command("channelgroupdelperm", { - cgid: current_group.id, - permid: permission.id_grant(), - }); - } - } else { - /* add the permission */ - if (typeof (value.value) !== "undefined") { - log.info(LogCategory.PERMISSIONS, tr("Adding or updating channel group permission %s. permission.{id: %o, value: %o, flag_skip: %o, flag_negate: %o}"), - permission.name, - permission.id, - value.value, - value.flag_skip, - value.flag_negate - ); - - await connection.serverConnection.send_command("channelgroupaddperm", { - cgid: current_group.id, - permid: permission.id, - permvalue: value.value, - permskip: value.flag_skip, - permnegated: value.flag_negate - }).then(e => { - if(permission.name === "i_icon_id" && update_group_icon) - update_group_icon(value.value); - return e; - }); - } else { - log.info(LogCategory.PERMISSIONS, tr("Adding or updating channel group grant permission %s. permission.{id: %o, value: %o}"), - permission.name, - permission.id_grant(), - value.granted, - ); - - await connection.serverConnection.send_command("channelgroupaddperm", { - cgid: current_group.id, - permid: permission.id_grant(), - permvalue: value.granted, - permskip: false, - permnegated: false - }); - } - } - }); - - /* FIXME: Use cached permissions */ - editor.trigger_update(); - }); - } - - /* list all channel groups */ - { - let group_list = tab_left.find(".list-groups .entries"); - - update_groups = (selected_group: number) => { - group_list.children().remove(); - - const allow_query_groups = connection.permissions.neededPermission(PermissionType.B_SERVERINSTANCE_MODIFY_QUERYGROUP).granted(1); - const allow_template_groups = connection.permissions.neededPermission(PermissionType.B_SERVERINSTANCE_MODIFY_TEMPLATES).granted(1); - for (let group of connection.groups.channelGroups.sort(GroupManager.sorter())) { - if (group.type == GroupType.QUERY) { - if (!allow_query_groups) - continue; - } else if (group.type == GroupType.TEMPLATE) { - if (!allow_template_groups) - continue; - } - - let tag = $.spawn("div").addClass("group").attr("group-id", group.id); - let icon_tag = connection.fileManager.icons.generateTag(group.properties.iconid); - icon_tag.appendTo(tag); - const _update_icon = icon_id => icon_tag.replaceWith(icon_tag = connection.fileManager.icons.generateTag(icon_id)); - - { - let name = $.spawn("a").text(group.name + " (" + group.id + ")").addClass("name"); - if (group.properties.savedb) - name.addClass("savedb"); - if (connection.channelTree.server.properties.virtualserver_default_channel_group == group.id) - name.addClass("default"); - name.appendTo(tag); - } - tag.appendTo(group_list); - - tag.on('click', event => { - current_group = group; - update_group_icon = _update_icon; - group_list.find(".selected").removeClass("selected"); - tag.addClass("selected"); - - update_buttons(); - //TODO trigger only if the editor is in channel group mode! - editor.trigger_update(); - }); - tag.on('contextmenu', event => { - if(event.isDefaultPrevented()) - return; - - contextmenu.spawn_context_menu(event.pageX, event.pageY, { - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Create a channel group"), - icon_class: 'client-add', - invalidPermission: !connection.permissions.neededPermission(PermissionType.B_VIRTUALSERVER_CHANNELGROUP_CREATE).granted(1), - callback: () => tab_left.find(".button-add").trigger('click') - }, { - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Rename channel group"), - icon_class: 'client-edit', - invalidPermission: !connection.permissions.neededPermission(PermissionType.I_CHANNEL_GROUP_MODIFY_POWER).granted(current_group.requiredModifyPower), - callback: () => tab_left.find(".button-rename").trigger('click') - }, { - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Duplicate channel group"), - icon_class: 'client-copy', - callback: () => tab_left.find(".button-duplicate").trigger('click') - }, { - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Delete channel group"), - icon_class: 'client-delete', - invalidPermission: !connection.permissions.neededPermission(PermissionType.B_VIRTUALSERVER_CHANNELGROUP_DELETE).granted(1), - callback: () => tab_left.find(".button-delete").trigger('click') - }); - event.preventDefault(); - }); - if(group.id === selected_group) { - setTimeout(() => tag.trigger('click'), 0); - selected_group = undefined; - } - } - - /* because the server menu is the first which will be shown */ - if(typeof(selected_group) !== "undefined") { - setTimeout(() => group_list.find('.group').first().trigger('click'), 0); - } - }; - - tab_left.find(".list-groups").on('contextmenu', event => { - if(event.isDefaultPrevented()) - return; - - contextmenu.spawn_context_menu(event.pageX, event.pageY, { - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Create a channel group"), - icon_class: 'client-add', - callback: () => tab_left.find(".button-add").trigger('click') - }); - event.preventDefault(); - }); - } - - { - const container_buttons = tab_left.find(".container-buttons"); - - const button_add = container_buttons.find(".button-add"); - const button_rename = container_buttons.find(".button-rename"); - const button_duplicate = container_buttons.find(".button-duplicate"); - const button_delete = container_buttons.find(".button-delete"); - - button_add.prop("disabled", !connection.permissions.neededPermission(PermissionType.B_VIRTUALSERVER_CHANNELGROUP_CREATE).granted(1)); - button_delete.prop("disabled", !connection.permissions.neededPermission(PermissionType.B_VIRTUALSERVER_CHANNELGROUP_CREATE).granted(1)); - update_buttons = () => { - const permission_modify = current_group && connection.permissions.neededPermission(PermissionType.I_CHANNEL_GROUP_MODIFY_POWER).granted(current_group.requiredModifyPower); - button_rename.prop("disabled", !permission_modify); - button_duplicate.prop("disabled", !connection.permissions.neededPermission(PermissionType.B_VIRTUALSERVER_CHANNELGROUP_CREATE).granted(1)); - }; - - button_add.on('click', () => { - spawnGroupAdd(false, connection.permissions, (name, type) => name.length > 0 && !connection.groups.channelGroups.find(e => e.target == GroupTarget.CHANNEL && e.name.toLowerCase() === name.toLowerCase() && e.type == type) , (name, type) => { - console.log("Creating channel group: %o, %o", name, type); - connection.serverConnection.send_command('channelgroupadd', { - name: name, - type: type - }).then(() => { - createInfoModal(tr("Group created"), tr("The channel group has been created.")).open(); - update_groups(0); //TODO: May get the created group? - }).catch(error => { - console.warn(tr("Failed to create channel group: %o"), error); - if(error instanceof CommandResult) { - error = error.extra_message || error.message; - } - createErrorModal(tr("Failed to create group"), formatMessage(tr("Failed to create group:{:br:}"), error)).open(); - }); - }); - }); - - button_rename.on('click', () => { - if(!current_group) - return; - - createInputModal(tr("Rename group"), tr("Enter the new group name"), name => name.length > 0 && !connection.groups.channelGroups.find(e => e.target == GroupTarget.CHANNEL && e.name.toLowerCase() === name.toLowerCase() && e.type == current_group.type), result => { - if(typeof(result) !== "string" || !result) - return; - connection.serverConnection.send_command('channelgrouprename', { - cgid: current_group.id, - name: result - }).then(() => { - createInfoModal(tr("Group renamed"), tr("The channel group has been renamed.")).open(); - update_groups(current_group.id); - }).catch(error => { - console.warn(tr("Failed to rename channel group: %o"), error); - if(error instanceof CommandResult) { - error = error.extra_message || error.message; - } - createErrorModal(tr("Failed to rename group"), formatMessage(tr("Failed to rename group:{:br:}"), error)).open(); - }); - }).open(); - }); - - button_duplicate.on('click', () => { - createErrorModal(tr("Not implemented yet"), tr("This function hasn't been implemented yet!")).open(); - }); - - button_delete.on('click', () => { - if(!current_group) - return; - - spawnYesNo(tr("Are you sure?"), formatMessage(tr("Do you really want to delete the group {}?"), current_group.name), result => { - if(result !== true) - return; - - connection.serverConnection.send_command("channelgroupdel", { - cgid: current_group.id, - force: true - }).then(() => { - createInfoModal(tr("Group deleted"), tr("The channel group has been deleted.")).open(); - update_groups(0); - }).catch(error => { - console.warn(tr("Failed to delete channel group: %o"), error); - if(error instanceof CommandResult) { - error = error.extra_message || error.message; - } - createErrorModal(tr("Failed to delete group"), formatMessage(tr("Failed to delete group:{:br:}"), error)).open(); - }); - }); - }); - } - update_groups(0); -} - -function apply_server_groups(connection: ConnectionHandler, editor: AbstractPermissionEditor, tab_left: JQuery, tab_right: JQuery) { - let current_group: Group; - let current_group_changed: (() => any)[] = []; - - let update_buttons: () => any; - /* list all groups */ - - let update_icon: ((icon_id: number) => any)[] = []; - - let update_groups: (selected_group: number) => any; - { - let group_list = tab_left.find(".container-group-list .list-groups .entries"); - let group_list_update_icon: (i: number) => any; - update_icon.push(i => group_list_update_icon(i)); - - update_groups = (selected_group: number) => { - group_list.children().remove(); - - const allow_query_groups = connection.permissions.neededPermission(PermissionType.B_SERVERINSTANCE_MODIFY_QUERYGROUP).granted(1); - const allow_template_groups = connection.permissions.neededPermission(PermissionType.B_SERVERINSTANCE_MODIFY_TEMPLATES).granted(1); - for(const group of connection.groups.serverGroups.sort(GroupManager.sorter())) { - if(group.type == GroupType.QUERY) { - if(!allow_query_groups) - continue; - } else if(group.type == GroupType.TEMPLATE) { - if(!allow_template_groups) - continue; - } - let tag = $.spawn("div").addClass("group").attr("group-id", group.id); - let icon_tag = connection.fileManager.icons.generateTag(group.properties.iconid); - icon_tag.appendTo(tag); - const _update_icon = icon_id => icon_tag.replaceWith(icon_tag = connection.fileManager.icons.generateTag(icon_id)); - - { - let name = $.spawn("div").text(group.name + " (" + group.id + ")").addClass("name"); - if(group.properties.savedb) - name.addClass("savedb"); - if(connection.channelTree.server.properties.virtualserver_default_server_group == group.id) - name.addClass("default"); - name.appendTo(tag); - } - tag.appendTo(group_list); - - tag.on('click', event => { - if(current_group === group) - return; - - current_group = group; - group_list_update_icon = _update_icon; - if(update_buttons) - update_buttons(); - for(const entry of current_group_changed) - entry(); - - group_list.find(".selected").removeClass("selected"); - tag.addClass("selected"); - editor.trigger_update(); - }); - tag.on('contextmenu', event => { - if(event.isDefaultPrevented()) - return; - - contextmenu.spawn_context_menu(event.pageX, event.pageY, { - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Create a server group"), - icon_class: 'client-add', - invalidPermission: !connection.permissions.neededPermission(PermissionType.B_VIRTUALSERVER_SERVERGROUP_CREATE).granted(1), - callback: () => tab_left.find(".button-add").trigger('click') - }, { - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Rename server group"), - icon_class: 'client-edit', - invalidPermission: !connection.permissions.neededPermission(PermissionType.I_SERVER_GROUP_MODIFY_POWER).granted(current_group.requiredModifyPower), - callback: () => tab_left.find(".button-rename").trigger('click') - }, { - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Duplicate server group"), - icon_class: 'client-copy', - callback: () => tab_left.find(".button-duplicate").trigger('click') - }, { - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Delete server group"), - icon_class: 'client-delete', - invalidPermission: !connection.permissions.neededPermission(PermissionType.B_VIRTUALSERVER_SERVERGROUP_DELETE).granted(1), - callback: () => tab_left.find(".button-delete").trigger('click') - }); - event.preventDefault(); - }); - - if(group.id === selected_group) { - setTimeout(() => tag.trigger('click'), 0); - selected_group = undefined; - } - } - - /* because the server menu is the first which will be shown */ - if(typeof(selected_group) !== "undefined") { - setTimeout(() => group_list.find('.group').first().trigger('click'), 0); - } - }; - - - tab_left.find(".list-groups").on('contextmenu', event => { - if(event.isDefaultPrevented()) - return; - - contextmenu.spawn_context_menu(event.pageX, event.pageY, { - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Create a server group"), - icon_class: 'client-add', - callback: () => tab_left.find(".button-add").trigger('click') - }); - event.preventDefault(); - }); - } - { - const container_buttons = tab_left.find(".container-group-list .container-buttons"); - - const button_add = container_buttons.find(".button-add"); - const button_rename = container_buttons.find(".button-rename"); - const button_duplicate = container_buttons.find(".button-duplicate"); - const button_delete = container_buttons.find(".button-delete"); - - button_add.prop("disabled", !connection.permissions.neededPermission(PermissionType.B_VIRTUALSERVER_SERVERGROUP_CREATE).granted(1)); - button_delete.prop("disabled", !connection.permissions.neededPermission(PermissionType.B_VIRTUALSERVER_SERVERGROUP_DELETE).granted(1)); - update_buttons = () => { - const permission_modify = current_group && connection.permissions.neededPermission(PermissionType.I_SERVER_GROUP_MODIFY_POWER).granted(current_group.requiredModifyPower); - button_rename.prop("disabled", !permission_modify); - button_duplicate.prop("disabled", !connection.permissions.neededPermission(PermissionType.B_VIRTUALSERVER_SERVERGROUP_CREATE).granted(1)); - }; - - button_add.on('click', () => { - spawnGroupAdd(true, connection.permissions, (name, type) => name.length > 0 && !connection.groups.serverGroups.find(e => e.target == GroupTarget.SERVER && e.name.toLowerCase() === name.toLowerCase() && e.type == type) , (name, type) => { - console.log("Creating group: %o, %o", name, type); - connection.serverConnection.send_command('servergroupadd', { - name: name, - type: type - }).then(() => { - createInfoModal(tr("Group created"), tr("The server group has been created.")).open(); - update_groups(0); //TODO: May get the created group? - }).catch(error => { - console.warn(tr("Failed to create server group: %o"), error); - if(error instanceof CommandResult) { - error = error.extra_message || error.message; - } - createErrorModal(tr("Failed to create group"), formatMessage(tr("Failed to create group:{:br:}"), error)).open(); - }); - }); - }); - - button_rename.on('click', () => { - if(!current_group) - return; - - createInputModal(tr("Rename group"), tr("Enter the new group name"), name => name.length > 0 && !connection.groups.serverGroups.find(e => e.target == GroupTarget.SERVER && e.name.toLowerCase() === name.toLowerCase() && e.type == current_group.type), result => { - if(typeof(result) !== "string" || !result) - return; - connection.serverConnection.send_command('servergrouprename', { - sgid: current_group.id, - name: result - }).then(() => { - createInfoModal(tr("Group renamed"), tr("The server group has been renamed.")).open(); - update_groups(current_group.id); - }).catch(error => { - console.warn(tr("Failed to rename server group: %o"), error); - if(error instanceof CommandResult) { - error = error.extra_message || error.message; - } - createErrorModal(tr("Failed to rename group"), formatMessage(tr("Failed to rename group:{:br:}"), error)).open(); - }); - }).open(); - }); - - button_duplicate.on('click', () => { - createErrorModal(tr("Not implemented yet"), tr("This function hasn't been implemented yet!")).open(); - }); - - button_delete.on('click', () => { - if(!current_group) - return; - - spawnYesNo(tr("Are you sure?"), formatMessage(tr("Do you really want to delete the group {}?"), current_group.name), result => { - if(result !== true) - return; - - connection.serverConnection.send_command("servergroupdel", { - sgid: current_group.id, - force: true - }).then(() => { - createInfoModal(tr("Group deleted"), tr("The server group has been deleted.")).open(); - update_groups(0); - }).catch(error => { - console.warn(tr("Failed to delete server group: %o"), error); - if(error instanceof CommandResult) { - error = error.extra_message || error.message; - } - createErrorModal(tr("Failed to delete group"), formatMessage(tr("Failed to delete group:{:br:}"), error)).open(); - }); - }); - }); - } - update_groups(0); - - /* the editor */ - { - const pe_server = tab_right.find(".permission-editor"); - tab_right.on('show', event => { - pe_server.append(editor.html_tag()); - if(connection.permissions.neededPermission(PermissionType.B_VIRTUALSERVER_SERVERGROUP_PERMISSION_LIST).granted(1)) - editor.set_mode(PermissionEditorMode.VISIBLE); - else { - editor.set_mode(PermissionEditorMode.NO_PERMISSION); - return; - } - editor.set_listener_update(() => { - console.log("Updating permissions"); - connection.groups.request_permissions(current_group).then(result => editor.set_permissions(result)).catch(error => { - console.log(error); //TODO handling? - }); - }); - - editor.set_listener(async (permission, value) => { - if (!current_group) - throw "unset server group"; - - if (value.remove) { - /* remove the permission */ - if (typeof (value.value) !== "undefined") { - log.info(LogCategory.PERMISSIONS, tr("Removing server group permission %s. permission.id: %o"), - permission.name, - permission.id, - ); - - await connection.serverConnection.send_command("servergroupdelperm", { - sgid: current_group.id, - permid: permission.id, - }).then(e => { - if(permission.name === "i_icon_id") - for(const c of update_icon) - c(0); - return e; - }); - } else { - log.info(LogCategory.PERMISSIONS, tr("Removing server group grant permission %s. permission.id: %o"), - permission.name, - permission.id_grant(), - value.granted, - ); - - await connection.serverConnection.send_command("servergroupdelperm", { - sgid: current_group.id, - permid: permission.id_grant(), - }); - } - } else { - /* add the permission */ - if (typeof (value.value) !== "undefined") { - log.info(LogCategory.PERMISSIONS, tr("Adding or updating server group permission %s. permission.{id: %o, value: %o, flag_skip: %o, flag_negate: %o}"), - permission.name, - permission.id, - value.value, - value.flag_skip, - value.flag_negate - ); - - await connection.serverConnection.send_command("servergroupaddperm", { - sgid: current_group.id, - permid: permission.id, - permvalue: value.value, - permskip: value.flag_skip, - permnegated: value.flag_negate - }).then(e => { - if(permission.name === "i_icon_id") - for(const c of update_icon) - c(value.value); - return e; - }); - } else { - log.info(LogCategory.PERMISSIONS, tr("Adding or updating server group grant permission %s. permission.{id: %o, value: %o}"), - permission.name, - permission.id_grant(), - value.granted, - ); - - await connection.serverConnection.send_command("servergroupaddperm", { - sgid: current_group.id, - permid: permission.id_grant(), - permvalue: value.granted, - permskip: false, - permnegated: false - }); - } - } - }); - - editor.trigger_update(); - }); - } - - /* client list */ - { - //container-client-list container-group-list - let clients_visible = false; - let selected_client: { - tag: JQuery, - dbid: number - }; - - const container_client_list = tab_left.find(".container-client-list").addClass("hidden"); - const container_group_list = tab_left.find(".container-group-list"); - - const container_selected_group = container_client_list.find(".container-current-group"); - const container_clients = container_client_list.find(".list-clients .entries"); - - const input_filter = container_client_list.find(".filter-client-list"); - - const button_add = container_client_list.find(".button-add"); - const button_delete = container_client_list.find(".button-delete"); - - const update_filter = () => { - const filter_text = (input_filter.val() || "").toString().toLowerCase(); - if(!filter_text) { - container_clients.find(".entry").css('display', 'block'); - } else { - const entries = container_clients.find(".entry"); - for(const _entry of entries) { - const entry = $(_entry); - if(entry.attr("search-string").toLowerCase().indexOf(filter_text) !== -1) - entry.css('display', 'block'); - else - entry.css('display', 'none'); - } - } - }; - - const update_client_list = () => { - container_clients.empty(); - button_delete.prop('disabled', true); - - connection.serverConnection.command_helper.request_clients_by_server_group(current_group.id).then(clients => { - for(const client of clients) { - const tag = $.spawn("div").addClass("client").text(client.client_nickname); - tag.attr("search-string", client.client_nickname + "-" + client.client_unique_identifier + "-" + client.client_database_id); - container_clients.append(tag); - - tag.on('click contextmenu', event => { - container_clients.find(".selected").removeClass("selected"); - tag.addClass("selected"); - - selected_client = { - tag: tag, - dbid: client.client_database_id - }; - button_delete.prop('disabled', false); - }); - - tag.on('contextmenu', event => { - if(event.isDefaultPrevented()) - return; - - event.preventDefault(); - contextmenu.spawn_context_menu(event.pageX, event.pageY, { - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Add client"), - icon_class: 'client-add', - callback: () => button_add.trigger('click') - }, { - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Remove client"), - icon_class: 'client-delete', - callback: () => button_delete.trigger('click') - }, { - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Copy unique id"), - icon_class: 'client-copy', - callback: () => copy_to_clipboard(client.client_unique_identifier) - }) - }); - } - update_filter(); - }).catch(error => { - if(error instanceof CommandResult && error.id === ErrorID.PERMISSION_ERROR) - return; - console.warn(tr("Failed to receive server group clients for group %d: %o"), current_group.id, error); - }); - }; - current_group_changed.push(update_client_list); - - button_delete.on('click', event => { - const client = selected_client; - if(!client) return; - - connection.serverConnection.send_command("servergroupdelclient", { - sgid: current_group.id, - cldbid: client.dbid - }).then(() => { - selected_client.tag.detach(); - button_delete.prop('disabled', true); /* nothing is selected */ - }).catch(error => { - console.log(tr("Failed to delete client %o from server group %o: %o"), client.dbid, current_group.id, error); - if(error instanceof CommandResult) - error = error.extra_message || error.message; - createErrorModal(tr("Failed to remove client"), tr("Failed to remove client from server group")).open(); - }); - }); - - button_add.on('click', event => { - createInputModal(tr("Add client to server group"), tr("Enter the client unique id or database id"), text => { - if(!text) return false; - if(!!text.match(/^[0-9]+$/)) - return true; - try { - return atob(text).length == 20; - } catch(error) { - return false; - } - }, async text => { - if(typeof(text) !== "string") - return; - - let dbid; - if(!!text.match(/^[0-9]+$/)) { - dbid = parseInt(text); - debugger; - } else { - try { - const data = await connection.serverConnection.command_helper.info_from_uid(text.trim()); - dbid = data[0].client_database_id; - } catch(error) { - console.log(tr("Failed to resolve client database id from unique id (%s): %o"), text, error); - if(error instanceof CommandResult) - error = error.extra_message || error.message; - createErrorModal(tr("Failed to add client"), formatMessage(tr("Failed to add client to server group\nFailed to resolve database id: {}."), error)).open(); - return; - } - } - if(!dbid) { - console.log(tr("Failed to resolve client database id from unique id (%s): Client not found")); - createErrorModal(tr("Failed to add client"), tr("Failed to add client to server group\nClient database id not found")).open(); - return; - } - - connection.serverConnection.send_command("servergroupaddclient", { - sgid: current_group.id, - cldbid: dbid - }).then(() => { - update_client_list(); - }).catch(error => { - console.log(tr("Failed to add client %o to server group %o: %o"), dbid, current_group.id, error); - if(error instanceof CommandResult) - error = error.extra_message || error.message; - createErrorModal(tr("Failed to add client"), tra("Failed to add client to server group{:br:}", error)).open(); - }); - }).open(); - }); - - container_client_list.on('contextmenu', event => { - if(event.isDefaultPrevented()) - return; - - event.preventDefault(); - contextmenu.spawn_context_menu(event.pageX, event.pageY, { - type: contextmenu.MenuEntryType.ENTRY, - name: tr("Add client"), - icon_class: 'client-add', - callback: () => button_add.trigger('click') - }) - }); - - /* icon handler and current group display */ - { - let update_icon_callback: (i: number) => any; - update_icon.push(i => update_icon_callback(i)); - - input_filter.on('change keyup', event => update_filter()); - current_group_changed.push(() => { - container_selected_group.empty(); - if(!current_group) return; - - let icon_container = $.spawn("div").addClass("icon-container").appendTo(container_selected_group); - - connection.fileManager.icons.generateTag(current_group.properties.iconid).appendTo(icon_container); - update_icon_callback = icon => { - icon_container.empty(); - connection.fileManager.icons.generateTag(icon).appendTo(icon_container); - }; - $.spawn("div").addClass("name").text(current_group.name + " (" + current_group.id + ")").appendTo(container_selected_group); - }); - } - - tab_right.on('show', event => { - editor.set_toggle_button(() => { - clients_visible = !clients_visible; - - container_client_list.toggleClass("hidden", !clients_visible); - container_group_list.toggleClass("hidden", clients_visible); - - return clients_visible ? tr("Hide clients in group") : tr("Show clients in group"); - }, clients_visible ? tr("Hide clients in group") : tr("Show clients in group")); - }); - } -} - -/* Attention: This is used by the new permission editor! */ -export function spawnGroupAdd(server_group: boolean, permissions: PermissionManager, valid_name: (name: string, group_type: number) => boolean, callback: (group_name: string, group_type: number) => any) { - let modal: Modal; - modal = createModal({ - header: tr("Create a new group"), - body: () => { - let tag = $("#tmpl_group_add").renderTag({ - server_group: server_group - }); - - tag.find(".group-type-template").prop("disabled", !permissions.neededPermission(PermissionType.B_SERVERINSTANCE_MODIFY_TEMPLATES).granted(1)); - tag.find(".group-type-query").prop("disabled", !permissions.neededPermission(PermissionType.B_SERVERINSTANCE_MODIFY_QUERYGROUP).granted(1)); - - const container_name = tag.find(".group-name"); - const button_create = tag.find(".button-create"); - - const group_type = () => (tag.find(".group-type")[0] as HTMLSelectElement).selectedIndex; - container_name.on('keyup change', (event: Event) => { - if(event.type === 'keyup') { - const kevent = event as KeyboardEvent; - if(!kevent.shiftKey && kevent.key == 'Enter') { - button_create.trigger('click'); - return; - } - } - const valid = valid_name(container_name.val() as string, group_type()); - button_create.prop("disabled", !valid); - container_name.parent().toggleClass("is-invalid", !valid); - }).trigger('change'); - tag.find(".group-type").on('change', () => container_name.trigger('change')); - - button_create.on('click', event => { - if(button_create.prop("disabled")) - return; - button_create.prop("disabled", true); /* disable double clicking */ - - modal.close(); - callback(container_name.val() as string, group_type()); - }); - return tag; - }, - footer: null, - - width: 600 - }); - modal.htmlTag.find(".modal-body").addClass("modal-group-add"); - modal.open_listener.push(() => { - modal.htmlTag.find(".group-name").focus(); - }); - - modal.open(); -} \ No newline at end of file diff --git a/shared/js/ui/modal/permissionv2/ModalPermissionEditor.scss b/shared/js/ui/modal/permission/ModalPermissionEditor.scss similarity index 100% rename from shared/js/ui/modal/permissionv2/ModalPermissionEditor.scss rename to shared/js/ui/modal/permission/ModalPermissionEditor.scss diff --git a/shared/js/ui/modal/permissionv2/ModalPermissionEditor.tsx b/shared/js/ui/modal/permission/ModalPermissionEditor.tsx similarity index 99% rename from shared/js/ui/modal/permissionv2/ModalPermissionEditor.tsx rename to shared/js/ui/modal/permission/ModalPermissionEditor.tsx index 6b68d564..0574a61d 100644 --- a/shared/js/ui/modal/permissionv2/ModalPermissionEditor.tsx +++ b/shared/js/ui/modal/permission/ModalPermissionEditor.tsx @@ -10,8 +10,8 @@ import { EditorGroupedPermissions, PermissionEditor, PermissionEditorEvents -} from "tc-shared/ui/modal/permissionv2/PermissionEditor"; -import {SideBar} from "tc-shared/ui/modal/permissionv2/TabHandler"; +} from "tc-shared/ui/modal/permission/PermissionEditor"; +import {SideBar} from "tc-shared/ui/modal/permission/TabHandler"; import {Group, GroupTarget, GroupType} from "tc-shared/permission/GroupManager"; import {createErrorModal, createInfoModal} from "tc-shared/ui/elements/Modal"; import {ClientNameInfo, CommandResult, ErrorID} from "tc-shared/connection/ServerConnectionDeclaration"; diff --git a/shared/js/ui/modal/permissionv2/PermissionEditor.scss b/shared/js/ui/modal/permission/PermissionEditor.scss similarity index 100% rename from shared/js/ui/modal/permissionv2/PermissionEditor.scss rename to shared/js/ui/modal/permission/PermissionEditor.scss diff --git a/shared/js/ui/modal/permissionv2/PermissionEditor.tsx b/shared/js/ui/modal/permission/PermissionEditor.tsx similarity index 100% rename from shared/js/ui/modal/permissionv2/PermissionEditor.tsx rename to shared/js/ui/modal/permission/PermissionEditor.tsx diff --git a/shared/js/ui/modal/permission/SenselessPermissions.ts b/shared/js/ui/modal/permission/SenselessPermissions.ts index d0dde38b..248521af 100644 --- a/shared/js/ui/modal/permission/SenselessPermissions.ts +++ b/shared/js/ui/modal/permission/SenselessPermissions.ts @@ -4,8 +4,6 @@ export const senseless_server_group_permissions: PermissionType[] = [ PermissionType.B_CHANNEL_GROUP_INHERITANCE_END ]; -/* TODO: All the needed permissions! */ - const filter = (text, ignore_type) => Object.keys(PermissionType) .filter(e => e.toLowerCase().substr(ignore_type ? 1 : 0).startsWith(text)).map(e => PermissionType[e]); diff --git a/shared/js/ui/modal/permissionv2/TabHandler.scss b/shared/js/ui/modal/permission/TabHandler.scss similarity index 100% rename from shared/js/ui/modal/permissionv2/TabHandler.scss rename to shared/js/ui/modal/permission/TabHandler.scss diff --git a/shared/js/ui/modal/permissionv2/TabHandler.tsx b/shared/js/ui/modal/permission/TabHandler.tsx similarity index 99% rename from shared/js/ui/modal/permissionv2/TabHandler.tsx rename to shared/js/ui/modal/permission/TabHandler.tsx index 577e29cb..1a66b08e 100644 --- a/shared/js/ui/modal/permissionv2/TabHandler.tsx +++ b/shared/js/ui/modal/permission/TabHandler.tsx @@ -5,8 +5,8 @@ import { ChannelInfo, GroupProperties, PermissionModalEvents -} from "tc-shared/ui/modal/permissionv2/ModalPermissionEditor"; -import {PermissionEditorEvents} from "tc-shared/ui/modal/permissionv2/PermissionEditor"; +} from "tc-shared/ui/modal/permission/ModalPermissionEditor"; +import {PermissionEditorEvents} from "tc-shared/ui/modal/permission/PermissionEditor"; import {ConnectionHandler} from "tc-shared/ConnectionHandler"; import {LocalIconRenderer} from "tc-shared/ui/react-elements/Icon"; import {createInputModal} from "tc-shared/ui/elements/Modal";