rulechain.tpl.html

<!--

    Copyright © 2016-2018 The Thingsboard Authors

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->

<md-content flex tb-expand-fullscreen
            expand-tooltip-direction="bottom" layout="column" class="tb-rulechain">
    <section class="tb-rulechain-container" flex layout="column">
        <div class="tb-rulechain-layout" flex layout="row">
            <div class="tb-rulechain-library">
                <md-expansion-panel-group ng-if="vm.ruleChainLibraryLoaded" class="tb-rulechain-library-panel-group" md-component-id="libraryPanelGroup" auto-expand="true" multiple>
                    <md-expansion-panel md-component-id="{{typeId}}" id="{{typeId}}" ng-repeat="(typeId, typeModel) in vm.ruleNodeTypesModel">
                        <md-expansion-panel-collapsed ng-mouseenter="vm.typeHeaderMouseEnter($event, typeId)"
                                                      ng-mouseleave="vm.destroyTooltips()">
                            <div class="tb-panel-title" translate>{{vm.types.ruleNodeType[typeId].name}}</div>
                            <md-expansion-panel-icon></md-expansion-panel-icon>
                        </md-expansion-panel-collapsed>
                        <md-expansion-panel-expanded>
                            <md-expansion-panel-header ng-mouseenter="vm.typeHeaderMouseEnter($event, typeId)"
                                                       ng-mouseleave="vm.destroyTooltips()"
                                                       ng-click="vm.$mdExpansionPanel(typeId).collapse()">
                                <div class="tb-panel-title" translate>{{vm.types.ruleNodeType[typeId].name}}</div>
                                <md-expansion-panel-icon></md-expansion-panel-icon>
                            </md-expansion-panel-header>
                            <md-expansion-panel-content>
                                <fc-canvas id="tb-rulechain-{{typeId}}"
                                           model="vm.ruleNodeTypesModel[typeId].model" selected-objects="vm.ruleNodeTypesModel[typeId].selectedObjects"
                                           automatic-resize="false"
                                           callbacks="vm.nodeLibCallbacks"
                                           node-width="170"
                                           node-height="50"
                                           drop-target-id="'tb-rulchain-canvas'"></fc-canvas>
                            </md-expansion-panel-content>
                        </md-expansion-panel-expanded>
                    </md-expansion-panel>
                </md-expansion-panel-group>
            </div>
            <div flex class="tb-rulechain-graph">
                <fc-canvas id="tb-rulchain-canvas"
                           ng-keydown="vm.keyDown($event)"
                           ng-keyup="vm.keyUp($event)"
                           model="vm.ruleChainModel"
                           selected-objects="vm.selectedObjects"
                           edge-style="curved"
                           node-width="170"
                           node-height="50"
                           automatic-resize="true"
                           control="vm.canvasControl"
                           callbacks="vm.editCallbacks">
                </fc-canvas>
            </div>
        </div>
        <tb-details-sidenav class="tb-rulenode-details-sidenav"
                            header-title="{{vm.editingRuleNode.name}}"
                            header-subtitle="{{'rulenode.rulenode-details' | translate}}"
                            is-read-only="false"
                            is-open="vm.isEditingRuleNode"
                            is-always-edit="true"
                            on-close-details="vm.onEditRuleNodeClosed()"
                            on-toggle-details-edit-mode="vm.onRevertRuleNodeEdit(vm.ruleNodeForm)"
                            on-apply-details="vm.saveRuleNode(vm.ruleNodeForm)"
                            the-form="vm.ruleNodeForm">
            <details-buttons tb-help="vm.helpLinkIdForRuleNodeType()" help-container-id="help-container">
                <div id="help-container"></div>
            </details-buttons>
            <form name="vm.ruleNodeForm" ng-if="vm.isEditingRuleNode">
                <tb-rule-node
                        rule-node="vm.editingRuleNode"
                        rule-chain-id="vm.ruleChain.id.id"
                        is-edit="true"
                        is-read-only="false"
                        on-delete-rule-node="vm.deleteRuleNode(event, vm.editingRuleNode)"
                        the-form="vm.ruleNodeForm">
                </tb-rule-node>
            </form>
        </tb-details-sidenav>
        <tb-details-sidenav class="tb-rulenode-link-details-sidenav"
                            header-title="{{vm.editingRuleNodeLink.label}}"
                            header-subtitle="{{'rulenode.link-details' | translate}}"
                            is-read-only="false"
                            is-open="vm.isEditingRuleNodeLink"
                            is-always-edit="true"
                            on-close-details="vm.onEditRuleNodeLinkClosed()"
                            on-toggle-details-edit-mode="vm.onRevertRuleNodeLinkEdit(vm.ruleNodeLinkForm)"
                            on-apply-details="vm.saveRuleNodeLink(vm.ruleNodeLinkForm)"
                            the-form="vm.ruleNodeLinkForm">
            <details-buttons tb-help="vm.helpLinkIdForRuleNodeLink()" help-container-id="link-help-container">
                <div id="link-help-container"></div>
            </details-buttons>
            <form name="vm.ruleNodeLinkForm" ng-if="vm.isEditingRuleNodeLink">
                <tb-rule-node-link
                        link="vm.editingRuleNodeLink"
                        labels="vm.editingRuleNodeLinkLabels"
                        is-edit="true"
                        is-read-only="false"
                        the-form="vm.ruleNodeLinkForm">
                </tb-rule-node-link>
            </form>
        </tb-details-sidenav>
    </section>
    <section layout="row" layout-wrap class="tb-footer-buttons md-fab" layout-align="start end">
        <md-button ng-disabled="$root.loading" ng-show="vm.objectsSelected()" class="tb-btn-footer md-accent md-hue-2 md-fab"
                   ng-click="vm.deleteSelected()" aria-label="{{ 'action.delete' | translate }}">
            <md-tooltip md-direction="top">
                {{ 'rulenode.delete-selected-objects' | translate }}
            </md-tooltip>
            <ng-md-icon icon="delete"></ng-md-icon>
        </md-button>
        <md-button ng-disabled="$root.loading || !vm.isDirty"
                   class="tb-btn-footer md-accent md-hue-2 md-fab"
                   aria-label="{{ 'action.apply' | translate }}"
                   ng-click="vm.saveRuleChain()">
            <md-tooltip md-direction="top">
                {{ 'action.apply-changes' | translate }}
            </md-tooltip>
            <ng-md-icon icon="done"></ng-md-icon>
        </md-button>
        <md-button ng-disabled="$root.loading || !vm.isDirty"
                   class="tb-btn-footer md-accent md-hue-2 md-fab"
                   aria-label="{{ 'action.decline-changes' | translate }}"
                   ng-click="vm.revertRuleChain()">
            <md-tooltip md-direction="top">
                {{ 'action.decline-changes' | translate }}
            </md-tooltip>
            <ng-md-icon icon="close"></ng-md-icon>
        </md-button>
    </section>
</md-content>