Added minimal functionality for Robot teaching
- Added minimal HMI - Added possibility to open and close all chamber doors
This commit is contained in:
@@ -0,0 +1,118 @@
|
||||
{
|
||||
"$schema": "../../TcHmiFramework/Schema/ControlDescription.Schema.json",
|
||||
"apiVersion": 1,
|
||||
"name": "TcHmiPermissionManagement",
|
||||
"namespace": "TcHmi.Controls.Beckhoff",
|
||||
"displayName": "Permission Management",
|
||||
"version": {
|
||||
"full": "14.4.1.0",
|
||||
"major": 14,
|
||||
"minor": 4,
|
||||
"build": 1,
|
||||
"revision": 0
|
||||
},
|
||||
"visible": false,
|
||||
"themeable": "Standard",
|
||||
"base": "TcHmi.Controls.System.TcHmiControl",
|
||||
"description": "A control to change permission of symbols",
|
||||
"defaultDesignerEvent": "",
|
||||
"properties": {
|
||||
"containerControl": false,
|
||||
"geometry": {
|
||||
"width": 500,
|
||||
"height": 400
|
||||
}
|
||||
},
|
||||
"icons": [
|
||||
{
|
||||
"name": "Icons/16x16.png",
|
||||
"width": 16,
|
||||
"height": 16
|
||||
}
|
||||
],
|
||||
"template": "Template.html",
|
||||
"dependencyFiles": [
|
||||
{
|
||||
"name": "Style.css",
|
||||
"type": "Stylesheet",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"name": "../dist/TcHmiPermissionManagement/TcHmiPermissionManagement.esm.js",
|
||||
"type": "EsModule",
|
||||
"description": ""
|
||||
}
|
||||
],
|
||||
"themes": {
|
||||
"Base": {
|
||||
"resources": [
|
||||
{
|
||||
"name": "Themes/Base/Style.css",
|
||||
"type": "Stylesheet",
|
||||
"description": ""
|
||||
}
|
||||
]
|
||||
},
|
||||
"Base-Dark": {
|
||||
"resources": [
|
||||
{
|
||||
"name": "Themes/Base-Dark/Style.css",
|
||||
"type": "Stylesheet",
|
||||
"description": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"attributes": [
|
||||
{
|
||||
"name": "data-tchmi-filter",
|
||||
"propertyName": "Filter",
|
||||
"propertySetterName": "setFilter",
|
||||
"propertyGetterName": "getFilter",
|
||||
"displayName": "Filter",
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"displayPriority": 10,
|
||||
"type": "tchmi:general#/definitions/String",
|
||||
"category": "Common",
|
||||
"description": "Set to filter the symbols that are shown.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": "",
|
||||
"defaultValueInternal": null
|
||||
},
|
||||
{
|
||||
"name": "data-tchmi-reg-ex-for-filter",
|
||||
"propertyName": "RegExForFilter",
|
||||
"propertySetterName": "setRegExForFilter",
|
||||
"propertyGetterName": "getRegExForFilter",
|
||||
"displayName": "Reg Ex for Filter",
|
||||
"visible": true,
|
||||
"themeable": "Standard",
|
||||
"displayPriority": 10,
|
||||
"type": "tchmi:general#/definitions/Boolean",
|
||||
"category": "Common",
|
||||
"description": "Allows regular expression in filter attribute.",
|
||||
"readOnly": false,
|
||||
"bindable": true,
|
||||
"defaultBindingMode": "OneWay",
|
||||
"heritable": true,
|
||||
"defaultValue": null,
|
||||
"defaultValueInternal": false
|
||||
}
|
||||
],
|
||||
"attributeCategories": [],
|
||||
"functions": [],
|
||||
"events": [],
|
||||
"dataTypes": [
|
||||
{
|
||||
"schema": "Schema/Types.Schema.json"
|
||||
}
|
||||
],
|
||||
"languages": {
|
||||
"en": "Lang/Language.en.json",
|
||||
"de": "Lang/Language.de.json"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 150 B |
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../../../TwinCAT-HMI-Common/JsonSchemas/Language.Schema.json",
|
||||
"locale": "de",
|
||||
"localizedText": {}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../../../TwinCAT-HMI-Common/JsonSchemas/Language.Schema.json",
|
||||
"locale": "en",
|
||||
"localizedText": {}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"$schema": "http://json-schema.org/draft-04/schema",
|
||||
"definitions": {
|
||||
"TcHmi.Controls.Beckhoff.TcHmiPermissionManagement": {
|
||||
"$schema": "http://json-schema.org/draft-04/schema",
|
||||
"type": "object",
|
||||
"frameworkInstanceOf": "TcHmi.Controls.System.TcHmiControl",
|
||||
"frameworkControlType": "TcHmiPermissionManagement",
|
||||
"frameworkControlNamespace": "TcHmi.Controls.Beckhoff"
|
||||
},
|
||||
"TcHmiPermissionManagement": {
|
||||
"$ref": "tchmi:framework#/definitions/TcHmi.Controls.Beckhoff.TcHmiPermissionManagement"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,293 @@
|
||||
/** Styles for all themes */
|
||||
|
||||
/* Style for the main element */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement {
|
||||
overflow: auto;
|
||||
color: black;
|
||||
}
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .table-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement table {
|
||||
border: none;
|
||||
border-spacing: 0;
|
||||
white-space: nowrap;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .first-header th,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .second-header td {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement tr > th {
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement thead tr > th:first-child {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement th,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td {
|
||||
height: 30px;
|
||||
border: 1px solid;
|
||||
border-width: 0 0 1px 1px;
|
||||
text-align: center;
|
||||
font-family: sans-serif;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement th:first-child {
|
||||
border-right-width: 1px;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement th + td,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement th:first-child + th {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement tbody tr:last-child > * {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .hide {
|
||||
display: none !important;
|
||||
}
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement tr > *:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement th.xy-header {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement [text-search='true'] .highlight {
|
||||
padding: 5px 0;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .symbol-search {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
background: none;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .all-symbols {
|
||||
border-top: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement input[type='checkbox'] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement th:first-child,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td:first-child {
|
||||
border-right: 3px solid !important;
|
||||
text-align: left;
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement th {
|
||||
max-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement thead tr:first-child {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement th:nth-child(2),
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td:nth-child(3) {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement th:nth-child(3),
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td:nth-child(4) {
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement th:nth-child(n + 3),
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td:nth-child(3n + 4) {
|
||||
border-left: 2px solid !important;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td:nth-child(3),
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td:nth-child(3n + 5),
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td:nth-child(3n + 6) {
|
||||
border-left: 1px solid;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement tr:hover,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement tr:hover td:first-child {
|
||||
transition: background 0.4s ease;
|
||||
}
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .message-no-symbols-found {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .arrow {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
transition: transform 0.2s ease-in;
|
||||
margin-right: 10px;
|
||||
margin-left: -18px;
|
||||
border-right: solid 1px;
|
||||
border-bottom: solid 1px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .arrow-left {
|
||||
transform: rotate(-225deg);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .arrow-right {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .arrow-down {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
tchmi-permission-checkbox {
|
||||
display: block;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
/* Style for container */
|
||||
tchmi-permission-checkbox .checkbox-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Create a custom checkbox */
|
||||
tchmi-permission-checkbox .checkbox-container .checkmark {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Hide the default checkbox */
|
||||
tchmi-permission-checkbox .checkbox-container input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
tchmi-permission-checkbox .checkbox-container .checkmark,
|
||||
tchmi-permission-checkbox .checkbox-container .checkmark:before,
|
||||
tchmi-permission-checkbox .checkbox-container .checkmark:after {
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* show tick when checked */
|
||||
tchmi-permission-checkbox .checkbox-container:not([readonly]):not([empty]) input:checked ~ .checkmark:after {
|
||||
content: '';
|
||||
width: 5px;
|
||||
height: 13px;
|
||||
border-width: 0 2px 2px 0;
|
||||
border-style: solid;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-60%, -60%) rotate(45deg);
|
||||
}
|
||||
|
||||
/* show cross when not checked */
|
||||
tchmi-permission-checkbox .checkbox-container:not([readonly]):not([empty]) input:not(:checked) ~ .checkmark:before,
|
||||
tchmi-permission-checkbox .checkbox-container:not([readonly]):not([empty]) input:not(:checked) ~ .checkmark:after {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
height: 2px;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
tchmi-permission-checkbox .checkbox-container:not([readonly]):not([empty]) input:not(:checked) ~ .checkmark:after {
|
||||
transform: translate(-50%, 0) rotate(45deg);
|
||||
}
|
||||
|
||||
tchmi-permission-checkbox .checkbox-container:not([readonly]):not([empty]) input:not(:checked) ~ .checkmark:before {
|
||||
transform: translate(-50%, 0) rotate(-45deg);
|
||||
}
|
||||
|
||||
/* indicator R for read only */
|
||||
tchmi-permission-checkbox .checkbox-container[readonly]:not([empty]) .checkmark:after {
|
||||
content: 'R';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
tchmi-permission-checkbox .loading {
|
||||
border: 3px solid;
|
||||
border-radius: 50%; /* Circle shape */
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
animation: spin 1s linear infinite; /* Animation */
|
||||
}
|
||||
|
||||
@keyframes fillAndSlideOut {
|
||||
0% {
|
||||
left: -50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: -50%;
|
||||
}
|
||||
}
|
||||
|
||||
tchmi-permission-checkbox .spinner {
|
||||
border: 5px solid;
|
||||
border-radius: 50%; /* Circle shape */
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
animation: spin 1s linear infinite; /* Animation */
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
// Compatibility file for non-module typescript compiles without adjustments.
|
||||
// Use the following line for modern code (needs adjustments to tsconfig.json#configOptions/paths)
|
||||
// import { TcHmiControl } from "Beckhoff.TwinCAT.HMI.Framework/index.esm.js";
|
||||
// ***************************************************************************
|
||||
|
||||
|
||||
export declare enum Resource {
|
||||
SYMBOL = 0,
|
||||
FILE = 1
|
||||
}
|
||||
declare class TcHmiPermissionManagement extends TcHmi.Controls.System.TcHmiControl {
|
||||
#private;
|
||||
constructor(element: JQuery, pcElement: JQuery, attrs: TcHmi.Controls.ControlAttributeList);
|
||||
/** Reference to the root dom element of the current control template as jquery object. */
|
||||
protected __elementTemplateRoot: HTMLElement;
|
||||
private __table;
|
||||
private __tableHead;
|
||||
private __tableBody;
|
||||
private __filter;
|
||||
private __regExForFilter;
|
||||
private __resourceSearch;
|
||||
private __resourceCount;
|
||||
private __shownResourceList;
|
||||
private __messageNoResourcesFound;
|
||||
private __checkboxElements;
|
||||
private __resource;
|
||||
private __externalResource;
|
||||
private __groupAsMuchAsPossible;
|
||||
protected __subscriptionsToUnsubscribeOnDetach: (number | null)[];
|
||||
setResources(resourceList: SymbolList | null): void;
|
||||
/**
|
||||
* If raised, the control object exists in control cache and constructor of each inheritation level was called.
|
||||
* This function is only to be used by the System. Other function calls are not intended.
|
||||
*/
|
||||
__previnit(): void;
|
||||
protected __elemScrollHandling(): void;
|
||||
private __initialized;
|
||||
protected __updateSymbolSearch(): void;
|
||||
/**
|
||||
* If raised, all attributes have been set to it's default or dom values.
|
||||
* This function is only to be used by the System. Other function calls are not intended.
|
||||
*/
|
||||
__init(): void;
|
||||
protected __fetchRecursiveFiles(path: string, storage: Map<string, any>, finalCallback: () => void, // Step 2: Add a Final Callback
|
||||
pendingOperations?: {
|
||||
count: number;
|
||||
}): void;
|
||||
protected __recordToMap<K extends string | number, V>(record: Record<K, V>): Map<K, V>;
|
||||
private __cached_results;
|
||||
protected __subscriptionCallback(data: TcHmi.Server.IResultObject): void;
|
||||
private __removePreviousGenericElements;
|
||||
private __createGroupHeader;
|
||||
private __createGroupDefaultAccessElements;
|
||||
protected __allSymbolsChangeCallback(groupName: string, checkboxRead: PermissionCheckbox, checkboxWrite: PermissionCheckbox, targetCheckbox: PermissionCheckbox): void;
|
||||
protected __createGroupAllResourcesElements(groupName: string, groupElements: any, rowGroupAllSymbols: HTMLTableRowElement): void;
|
||||
protected __onInheritCheckboxChange(groupName: string, resourceList: string[], notCheckedFn: (...args: any[]) => any, inheritCheckbox: PermissionCheckbox): void;
|
||||
protected __removeAccessFromResources(groupName: string, resourceList: string[]): void;
|
||||
private __createResourceRows;
|
||||
__updateTableFiles(files: any, userGroups: any): void;
|
||||
__updateTableSymbols(symbolList: SymbolList, userGroups: Record<string, any>): void;
|
||||
static getAccessValue(read_access: boolean, write_access: boolean): import("Beckhoff.TwinCAT.HMI.Framework/dist/API/Server.js").ACCESS;
|
||||
static hasReadAccess(accessValue: TcHmi.Server.ACCESS): boolean;
|
||||
static hasWriteAccess(accessValue: TcHmi.Server.ACCESS): boolean;
|
||||
/**
|
||||
* Is called by the system after the control instance gets part of the current DOM.
|
||||
* This function is only to be used by the System. Other function calls are not intended.
|
||||
*/
|
||||
__attach(): void;
|
||||
/**
|
||||
* Is called by the system after the control instance is no longer part of the current DOM.
|
||||
* This function is only to be used by the System. Other function calls are not intended.
|
||||
*/
|
||||
__detach(): void;
|
||||
/**
|
||||
* Destroy the current control instance.
|
||||
* Will be called automatically if system destroys control!
|
||||
*/
|
||||
destroy(): void;
|
||||
/**
|
||||
* Sets the value of the member variable "device" if the new value is not equal to the current value
|
||||
* @param valueNew The new value for device.
|
||||
*/
|
||||
setFilter(valueNew: string | null): void;
|
||||
getFilter(): string;
|
||||
/**
|
||||
* Sets the value of the member variable "device" if the new value is not equal to the current value
|
||||
* @param valueNew The new value for device.
|
||||
*/
|
||||
setRegExForFilter(valueNew: boolean | null): void;
|
||||
getRegExForFilter(): boolean | undefined;
|
||||
static Resource: typeof Resource;
|
||||
}
|
||||
export type GroupName = string;
|
||||
export type SymbolName = string;
|
||||
export type ResourceList = SymbolList;
|
||||
export type ResourceListEntry<T = ResourceList> = {
|
||||
ACCESS: number | undefined;
|
||||
SCHEMA?: {
|
||||
readOnly?: boolean;
|
||||
};
|
||||
CONTENT?: T;
|
||||
};
|
||||
export type SymbolList = Map<string, SymbolListEntry>;
|
||||
export type SymbolListEntry = TcHmi.Symbol.IListSymbols & {
|
||||
CONTENT?: SymbolList;
|
||||
};
|
||||
export interface ServerFile {
|
||||
fileFlags: ('Directory' | 'ReadOnly' | 'UserAccessReadOnly' | 'VirtualDirectory')[];
|
||||
fileSize?: number;
|
||||
link?: string;
|
||||
access?: TcHmi.Server.ACCESS;
|
||||
/** The md5 hash of the file */
|
||||
hash?: string;
|
||||
modificationTime?: string;
|
||||
}
|
||||
export { TcHmiPermissionManagement as Control };
|
||||
declare const _TcHmiPermissionManagement: typeof TcHmiPermissionManagement;
|
||||
type tTcHmiPermissionManagement = TcHmiPermissionManagement;
|
||||
type tResource = Resource;
|
||||
type tSymbolName = SymbolName;
|
||||
type tGroupName = GroupName;
|
||||
type tResourceList = ResourceList;
|
||||
type tResourceListEntry = ResourceListEntry;
|
||||
type tSymbolList = SymbolList;
|
||||
type tSymbolListEntry = SymbolListEntry;
|
||||
type tServerFile = ServerFile;
|
||||
declare global {
|
||||
namespace TcHmi.Controls.Beckhoff {
|
||||
const TcHmiPermissionManagement: typeof _TcHmiPermissionManagement;
|
||||
type TcHmiPermissionManagement = tTcHmiPermissionManagement;
|
||||
namespace TcHmiPermissionManagement {
|
||||
type Resource = tResource;
|
||||
type GroupName = tGroupName;
|
||||
type SymbolName = tSymbolName;
|
||||
type ResourceList = tResourceList;
|
||||
type ResourceListEntry = tResourceListEntry;
|
||||
type SymbolList = tSymbolList;
|
||||
type SymbolListEntry = tSymbolListEntry;
|
||||
type ServerFile = tServerFile;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export declare class PermissionCheckbox extends HTMLElement {
|
||||
constructor(para: {
|
||||
initValue?: boolean;
|
||||
changeCallback?: (...args: any[]) => void;
|
||||
unset?: boolean;
|
||||
colorCoded?: boolean;
|
||||
disabled?: boolean;
|
||||
readOnly?: boolean;
|
||||
});
|
||||
private __loading;
|
||||
private __checkboxContainer;
|
||||
private __checkbox;
|
||||
private __checkmark;
|
||||
connectedCallback(): void;
|
||||
disconnectedCallback(): void;
|
||||
private __changeCallback;
|
||||
set changeCallback(fn: ((...args: any[]) => void) | undefined);
|
||||
get checked(): boolean;
|
||||
set checked(value: boolean);
|
||||
loading(): void;
|
||||
private __readOnly;
|
||||
get readOnly(): boolean;
|
||||
set readOnly(value: boolean);
|
||||
private __colorCoded;
|
||||
get colorCoded(): boolean;
|
||||
set colorCoded(value: boolean);
|
||||
private __unset;
|
||||
set unset(value: boolean);
|
||||
private __disabled;
|
||||
get disabled(): boolean;
|
||||
set disabled(value: boolean);
|
||||
get enabled(): boolean;
|
||||
set enabled(value: boolean);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
<div class="TcHmi_Controls_Beckhoff_TcHmiPermissionManagement-template tchmi-box">
|
||||
<table>
|
||||
<thead>
|
||||
<tr class="first-header no-hover">
|
||||
<th class="header symbol-name xy-header">Symbol</th>
|
||||
<th class="header symbol-access" colspan="2">Access</th>
|
||||
</tr>
|
||||
<tr class="second-header no-hover">
|
||||
<td class="header xy-header">
|
||||
<input class="symbol-search" type="text" placeholder="Search for a name" />
|
||||
</td>
|
||||
<td class="sub-header symbol-access-read">Read</td>
|
||||
<td class="sub-header symbol-access-write">Write</td>
|
||||
</tr>
|
||||
<tr class="group-default-access">
|
||||
<td class="cell symbol-name">Group default access</td>
|
||||
<td class="cell"></td>
|
||||
<td class="cell"></td>
|
||||
</tr>
|
||||
<tr class="all-symbols">
|
||||
<td class="cell symbol-name">All <span class="symbol-count"></span> symbol(s)</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
<div class="message-no-symbols-found">No symbols match your search.</div>
|
||||
</div>
|
||||
@@ -0,0 +1,163 @@
|
||||
/** Styles for the theme: Base-Dark */
|
||||
|
||||
/* Style for the main element */
|
||||
.TcHmi_Controls_Beckhoff_PermissionManagement {
|
||||
--tchmi-background: #2a3845;
|
||||
--tchmi-color: #ffffff;
|
||||
background-color: var(--tchmi-background);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement table {
|
||||
color: white;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement thead td:first-child,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement thead {
|
||||
background: #555; /* Darker shade for thead */
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement.scroll-vertical thead {
|
||||
box-shadow: 1px 1px 10px 1px #333; /* Darker shadow */
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .first-header,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .second-header,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .first-header th:first-child,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .second-header td:first-child {
|
||||
background: #306080; /* Adjusted darker blue */
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement th,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td {
|
||||
border-color: #666; /* Darker border */
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement [text-search='true'] .highlight {
|
||||
background: #b9a07a; /* Darker highlight color */
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .symbol-search {
|
||||
border-color: rgba(255, 255, 255, 0.7);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .symbol-search::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .all-symbols {
|
||||
border-top-color: #888;
|
||||
border-bottom-color: #888;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement th:first-child,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td:first-child {
|
||||
border-right-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement th:nth-child(n + 3),
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td:nth-child(3n + 4) {
|
||||
border-left-color: #888 !important;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td:nth-child(3),
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td:nth-child(3n + 5),
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td:nth-child(3n + 6) {
|
||||
border-left-color: #666;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement tbody tr:not(.hide):nth-child(2n + 2),
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement tbody tr:not(.hide):nth-child(2n + 2) td:first-child {
|
||||
background: #444; /* Darker stripe */
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement tbody tr:nth-child(2n + 1) td:first-child {
|
||||
background: #333; /* Darker background */
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement tr:not(.no-hover):hover,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement tr:not(.no-hover):hover td:first-child {
|
||||
background: #555 !important; /* Darker hover */
|
||||
}
|
||||
|
||||
/* Style for the main element */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement {
|
||||
--tchmi-background: #2e2e2e; /* Dark background */
|
||||
--tchmi-color: #acb2b8; /* Lighter text color */
|
||||
background-color: var(--tchmi-background);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .message-no-symbols-found {
|
||||
background: #444; /* Darker message background */
|
||||
border-color: #666; /* Darker border color */
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .arrow {
|
||||
border-right-color: #888; /* Lighter for visibility against dark backgrounds */
|
||||
border-bottom-color: #888; /* Same as above */
|
||||
}
|
||||
|
||||
tchmi-permission-checkbox
|
||||
.checkbox-container:not([color-coded]):not([disabled]):not([empty])
|
||||
input:checked
|
||||
~ .checkmark {
|
||||
background: #00aeef !important; /* Keep distinct color for checked state */
|
||||
}
|
||||
|
||||
tchmi-permission-checkbox
|
||||
.checkbox-container:not([color-coded]):not([disabled]):not([empty])
|
||||
input:not(:checked)
|
||||
~ .checkmark {
|
||||
background: #555 !important; /* Darker unchecked state */
|
||||
}
|
||||
|
||||
/* Color coded: When the checkbox is checked, add a green background */
|
||||
tchmi-permission-checkbox .checkbox-container[color-coded]:not([disabled]):not([empty]) input:checked ~ .checkmark {
|
||||
background: #74d59f !important; /* Keep for positive indication */
|
||||
}
|
||||
|
||||
/* Color coded: When the checkbox is unchecked, use a dark red background for contrast */
|
||||
tchmi-permission-checkbox
|
||||
.checkbox-container[color-coded]:not([disabled]):not([empty])
|
||||
input:not(:checked)
|
||||
~ .checkmark {
|
||||
background: #d17373 !important; /* Darker shade for negative indication */
|
||||
}
|
||||
|
||||
/* Show tick when checked */
|
||||
tchmi-permission-checkbox .checkbox-container:not([readonly]):not([empty]) input:checked ~ .checkmark:after {
|
||||
border-color: white; /* Visible against dark backgrounds */
|
||||
}
|
||||
|
||||
/* Show cross when not checked */
|
||||
tchmi-permission-checkbox .checkbox-container:not([readonly]):not([empty]) input:not(:checked) ~ .checkmark:before,
|
||||
tchmi-permission-checkbox .checkbox-container:not([readonly]):not([empty]) input:not(:checked) ~ .checkmark:after {
|
||||
background: white; /* Contrast against darker backgrounds */
|
||||
}
|
||||
|
||||
/* Indicator R for read-only */
|
||||
tchmi-permission-checkbox .checkbox-container[readonly]:not([empty]) .checkmark:after {
|
||||
color: white; /* Visibility against dark backgrounds */
|
||||
}
|
||||
|
||||
tchmi-permission-checkbox .checkbox-container[disabled] .checkmark,
|
||||
tchmi-permission-checkbox .checkbox-container[empty] .checkmark {
|
||||
background: #444; /* Darker for disabled state */
|
||||
}
|
||||
|
||||
tchmi-permission-checkbox .loading {
|
||||
border-color: transparent;
|
||||
border-radius: 50%; /* Circle shape */
|
||||
border-top-color: white; /* Visible against dark backgrounds */
|
||||
}
|
||||
|
||||
tchmi-permission-checkbox .spinner {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
border-top-color: #fff; /* Ensure spinner is visible in dark theme */
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
/** Styles for the theme: Base */
|
||||
|
||||
/* Style for the main element */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement {
|
||||
--tchmi-background: #ffffff;
|
||||
--tchmi-color: #4c6374;
|
||||
background-color: var(--tchmi-background);
|
||||
}
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement thead td:first-child {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement thead {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement.scroll-vertical thead {
|
||||
box-shadow: 1px 1px 10px 1px #aaa;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .first-header,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .second-header,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .first-header th:first-child,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .second-header td:first-child {
|
||||
background: #4787cf;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement th,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td {
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement [text-search='true'] .highlight {
|
||||
background: #fff296;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .symbol-search {
|
||||
border-color: rgba(255, 255, 255, 0.7);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .symbol-search::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .all-symbols {
|
||||
border-top-color: black;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement th:first-child,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td:first-child {
|
||||
border-right-color: rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement th:nth-child(n + 3),
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td:nth-child(3n + 4) {
|
||||
border-left-color: #555 !important;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td:nth-child(3),
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td:nth-child(3n + 5),
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement td:nth-child(3n + 6) {
|
||||
border-left-color: #bbb;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement tbody tr:not(.hide):nth-child(2n + 2),
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement tbody tr:not(.hide):nth-child(2n + 2) td:first-child {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement tbody tr:nth-child(2n + 1) td:first-child {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement tr:not(.no-hover):hover,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement tr:not(.no-hover):hover td:first-child {
|
||||
background: #ccc !important;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .message-no-symbols-found {
|
||||
background: #eee;
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiPermissionManagement .arrow {
|
||||
border-right-color: black;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
|
||||
tchmi-permission-checkbox
|
||||
.checkbox-container:not([color-coded]):not([disabled]):not([empty])
|
||||
input:checked
|
||||
~ .checkmark {
|
||||
background: #00aeef !important;
|
||||
}
|
||||
|
||||
tchmi-permission-checkbox
|
||||
.checkbox-container:not([color-coded]):not([disabled]):not([empty])
|
||||
input:not(:checked)
|
||||
~ .checkmark {
|
||||
background: #aaa !important;
|
||||
}
|
||||
|
||||
/* Color coded: When the checkbox is checked, add a green background */
|
||||
tchmi-permission-checkbox .checkbox-container[color-coded]:not([disabled]):not([empty]) input:checked ~ .checkmark {
|
||||
background: #74d59f !important;
|
||||
}
|
||||
/* Color coded: When the checkbox is checked, add a red background */
|
||||
tchmi-permission-checkbox
|
||||
.checkbox-container[color-coded]:not([disabled]):not([empty])
|
||||
input:not(:checked)
|
||||
~ .checkmark {
|
||||
background: #d17373 !important;
|
||||
}
|
||||
|
||||
/* show tick when checked */
|
||||
tchmi-permission-checkbox .checkbox-container:not([readonly]):not([empty]) input:checked ~ .checkmark:after {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
/* show cross when not checked */
|
||||
tchmi-permission-checkbox .checkbox-container:not([readonly]):not([empty]) input:not(:checked) ~ .checkmark:before,
|
||||
tchmi-permission-checkbox .checkbox-container:not([readonly]):not([empty]) input:not(:checked) ~ .checkmark:after {
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* indicator R for read only */
|
||||
tchmi-permission-checkbox .checkbox-container[readonly]:not([empty]) .checkmark:after {
|
||||
color: white;
|
||||
}
|
||||
|
||||
tchmi-permission-checkbox .checkbox-container[disabled] .checkmark,
|
||||
tchmi-permission-checkbox .checkbox-container[empty] .checkmark {
|
||||
background: #aaa;
|
||||
}
|
||||
|
||||
tchmi-permission-checkbox .loading {
|
||||
border-color: transparent;
|
||||
border-radius: 50%; /* Circle shape */
|
||||
border-top-color: white;
|
||||
}
|
||||
|
||||
tchmi-permission-checkbox .spinner {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
border-top-color: #000;
|
||||
}
|
||||
Reference in New Issue
Block a user