src/angular/pages/p3xr-settings.html

<p3xr-accordion p3xr-title="$root.p3xr.strings.label.connections" p3xr-accordion-key="settings">
    <p3xr-accordion-actions ng-if="!$root.p3xr.state.cfg.readonlyConnections" >

<p3xr-button  ng-click="$ctrl.connectionForm({ type: 'new', $event: $event})"
                     p3xr-label="$root.p3xr.strings.intention.connectionAdd" p3xr-md-icon="add_box"></p3xr-button>
    </p3xr-accordion-actions>
    <p3xr-accordion-content>
        <div ng-if="$root.p3xr.state.connections.list.length == 0" layout-padding>
            {{ $root.p3xr.strings.intention.noConnectionsInSettings }}
        </div>

<md-list ng-if="$root.p3xr.state.connections.list.length > 0">
            <md-list-item class="md-2-line" ng-repeat="connection in $root.p3xr.state.connections.list">
                <div class="md-list-item-text">
                    <h3>{{connection.name}}</h3>
                    
                    <p>{{connection.host}}:{{connection.port}}</p>
                    <p>
                        <span ng-repeat="(connectionKey, connectionValue) in $root.p3xr.state.redisConnections" ng-if="connectionValue.connection.name === connection.name">
                            {{ $root.p3xr.strings.page.overview.connectedCount({ length: connectionValue.clients.length }) }}
                        </span>                    &nbsp;
                    </p>
                </div>

<md-button class="md-accent md-raised"  ng-if="$root.p3xr.state.connection.id !== connection.id" 
                           ng-click="$ctrl.connect({ connection })"
                           >
                    <md-icon>power</md-icon>
                    <span hide-xs>{{ $root.p3xr.strings.intention.connect }}</span>
                    <md-tooltip ng-if="$root.$mdMedia('xs')">{{ $root.p3xr.strings.intention.connect }}</md-tooltip>
                </md-button>

<md-button ng-if="$root.p3xr.state.connection.id === connection.id" class="md-accent md-raised" ng-click="$ctrl.disconnect()">
                    <i class="fa fa-power-off"></i>
                    <span hide-xs>{{ $root.p3xr.strings.intention.disconnect }}</span>
                    <md-tooltip ng-if="$root.$mdMedia('xs')" md-direction="top">{{
                        $root.p3xr.strings.intention.disconnect }}
                    </md-tooltip>
                </md-button>

<md-button class="md-warn md-raised" ng-click="$ctrl.deleteConnection({ model: connection, ev: $event})"
                           ng-if="!$root.p3xr.state.cfg.readonlyConnections">
                    <md-icon>delete_forever</md-icon>
                    <span hide-xs>{{ $root.p3xr.strings.intention.delete }}</span>
                    <md-tooltip ng-if="$root.$mdMedia('xs')">{{ $root.p3xr.strings.intention.delete }}</md-tooltip>
                </md-button>

<md-button class="md-primary md-raised"
                           ng-click="$ctrl.connectionForm({ type: 'edit', model: connection, $event: $event})"
                           ng-if="!$root.p3xr.state.cfg.readonlyConnections">
                    <md-icon>edit</md-icon>
                    <span hide-xs>{{ $root.p3xr.strings.intention.edit }}</span>
                    <md-tooltip ng-if="$root.$mdMedia('xs')">{{ $root.p3xr.strings.intention.edit }}</md-tooltip>
                </md-button>

<md-button class="md-primary md-raised"
                           ng-click="$ctrl.connectionForm({ type: 'edit', model: connection})"
                           ng-if="$root.p3xr.state.cfg.readonlyConnections">
                    <md-icon>mode_comment</md-icon>
                    <span hide-xs>{{ $root.p3xr.strings.intention.view }}</span>
                    <md-tooltip ng-if="$root.$mdMedia('xs')">{{ $root.p3xr.strings.intention.view }}</md-tooltip>
                </md-button>

<md-divider ng-if="!$last"></md-divider>
            </md-list-item>
        </md-list>

</p3xr-accordion-content>
</p3xr-accordion>

<br/>

<p3xr-accordion p3xr-title="$root.p3xr.strings.form.treeSettings.label.formName" p3xr-accordion-key="tree-settings">
    <p3xr-accordion-actions>
        <p3xr-button ng-click="$ctrl.openTreeSettingDialog({ $event: $event})"
                     p3xr-label="$root.p3xr.strings.intention.edit" p3xr-md-icon="edit"></p3xr-button>
    </p3xr-accordion-actions>
    <p3xr-accordion-content>

<md-list>
            <md-list-item ng-click="$ctrl.openTreeSettingDialog({ $event: $event})">
                <div layout="row" flex>
                    <div flex>
                        {{ $root.p3xr.strings.form.treeSettings.field.treeSeparator}}
                    </div>
                    <div>
                        <span ng-if="$root.p3xr.settings.redisTreeDivider.length > 0">
                        {{ $root.p3xr.settings.redisTreeDivider}}
                        </span>
                        <span
                            ng-if="$root.p3xr.settings.redisTreeDivider.length < 1 || $root.p3xr.settings.redisTreeDivider === undefined || $root.p3xr.settings.redisTreeDivider === ''">
                            {{ $root.p3xr.strings.label.treeSeparatorEmptyNote}}
                        </span>
                    </div>
                </div>
            </md-list-item>

<md-divider></md-divider>

<md-list-item class="md-2-line" ng-click="$ctrl.openTreeSettingDialog({ $event: $event})">
                <div class="md-list-item-text">
                    <h3>
                        <div layout="row" flex>
                            <div flex>
                                {{ $root.p3xr.strings.form.treeSettings.field.page}}
                            </div>
                            <div>
                                {{ $root.p3xr.settings.pageCount}}
                            </div>
                        </div>
                    </h3>
                    <p>
                        {{ $root.p3xr.strings.form.treeSettings.error.page }}
                    </p>
                </div>
            </md-list-item>

<md-divider></md-divider>

<md-list-item class="md-2-line" ng-click="$ctrl.openTreeSettingDialog({ $event: $event})">
                <div class="md-list-item-text">
                    <h3>
                        <div layout="row" flex>
                            <div flex>
                                {{ $root.p3xr.strings.form.treeSettings.field.keyPageCount}}
                            </div>
                            <div>
                                {{ $root.p3xr.settings.keyPageCount}}
                            </div>
                        </div>
                    </h3>
                    <p>
                        {{ $root.p3xr.strings.form.treeSettings.error.keyPageCount }}
                    </p>
                </div>
            </md-list-item>

<md-divider></md-divider>

<md-list-item class="md-2-line" ng-click="$ctrl.openTreeSettingDialog({ $event: $event})">
                <div class="md-list-item-text">
                    <h3>
                        <div layout="row" flex>
                            <div flex>
                                {{ $root.p3xr.strings.form.treeSettings.maxValueDisplay}}
                            </div>
                            <div>
                                {{ $root.p3xr.settings.maxValueDisplay}}
                            </div>
                        </div>
                    </h3>
                    <p>
                        {{ $root.p3xr.strings.form.treeSettings.maxValueDisplayInfo }}
                    </p>
                </div>
            </md-list-item>

<md-divider></md-divider>

<md-list-item class="md-2-line" ng-click="$ctrl.openTreeSettingDialog({ $event: $event})">
                <div class="md-list-item-text">
                    <h3>
                        <div layout="row" flex>
                            <div flex>
                                {{ $root.p3xr.strings.form.treeSettings.maxKeys}}
                            </div>
                            <div>
                                {{ $root.p3xr.settings.maxKeys}}
                            </div>
                        </div>
                    </h3>
                    <p>
                        {{ $root.p3xr.strings.form.treeSettings.maxKeysInfo }}
                    </p>
                </div>
            </md-list-item>

<md-divider></md-divider>

<md-list-item ng-click="$ctrl.openTreeSettingDialog({ $event: $event})">
                <div layout="row" flex>
                    <div flex>
                        {{ $root.p3xr.strings.form.treeSettings.field.keysSort}}
                    </div>
                    <div>
                        {{ $root.p3xr.settings.keysSort ? $root.p3xr.strings.label.keysSort.on :
                        $root.p3xr.strings.label.keysSort.off }}
                    </div>
                </div>
            </md-list-item>

<md-divider></md-divider>

<md-list-item ng-click="$ctrl.openTreeSettingDialog({ $event: $event})">
                <div layout="row" flex>
                    <div flex>
                        {{ $root.p3xr.strings.form.treeSettings.field.searchMode}}
                    </div>
                    <div>
                        {{ $root.p3xr.settings.searchClientSide ?
                        $root.p3xr.strings.form.treeSettings.label.searchModeClient :
                        $root.p3xr.strings.form.treeSettings.label.searchModeServer }}
                    </div>
                </div>
            </md-list-item>
            <md-divider></md-divider>

<md-list-item ng-click="$ctrl.openTreeSettingDialog({ $event: $event})">
                <div layout="row" flex>
                    <div flex>
                        {{ $root.p3xr.strings.form.treeSettings.field.searchModeStartsWith}}
                    </div>
                    <div>
                        {{ $root.p3xr.settings.searchStartsWith ?
                        $root.p3xr.strings.form.treeSettings.label.searchModeStartsWith :
                        $root.p3xr.strings.form.treeSettings.label.searchModeIncludes }}
                    </div>
                </div>
            </md-list-item>

<md-divider></md-divider>

<md-list-item ng-click="$ctrl.openTreeSettingDialog({ $event: $event})">
                <div layout="row" flex>
                    <div flex>
                        {{ $root.p3xr.settings.jsonFormat == 2 ? $root.p3xr.strings.form.treeSettings.label.jsonFormatTwoSpace : $root.p3xr.strings.form.treeSettings.label.jsonFormatFourSpace }}
                    </div>
                </div>
            </md-list-item>
            <md-divider></md-divider>

<md-list-item ng-click="$ctrl.openTreeSettingDialog({ $event: $event})">
                <div layout="row" flex>
                    <div flex>
                        {{ $root.p3xr.settings.animation ? $root.p3xr.strings.form.treeSettings.label.animation : $root.p3xr.strings.form.treeSettings.label.noAnimation }}
                    </div>
                </div>
            </md-list-item>
        </md-list>

</p3xr-accordion-content>
</p3xr-accordion>
<div class="p3xr-settings-bottom"></div>

`/`	Focus search
`?`	Show this help
`Esc`	Unfocus input