blob: 2564a630d49412ba11427bbafa3659a15949f61c [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
<link rel="import" href="icons.html">
<link rel="import" href="shared_styles.html">
<dom-module id="bluetooth-settings">
<template>
<!-- TODO(michaelpg): Wrap the line below to fit within the 80-char limit.
See https://github.com/Polymer/polymer/pull/3668. -->
<style include="device-emulator-shared-styles cr-shared-style iron-flex iron-flex-alignment iron-positioning">
</style>
<cr-dialog id="editDialog">
<div slot="title">[[currentEditableObject.alias]]</div>
<div slot="body">
<form>
<div class="form-field-section">
<cr-input value="{{currentEditableObject.alias}}"
label="Alias"></cr-input>
<cr-input on-input="validatePath"
id="devicePathInput"
value="{{currentEditableObject.path}}"
label="Path"></cr-input>
<cr-input value="{{currentEditableObject.name}}"
label="Name"></cr-input>
<cr-input id="deviceAddressInput" on-input="handleAddressInput"
value="{{currentEditableObject.address}}"
label="Address (xx:xx:xx:xx:xx:xx)"
maxlength="17"></cr-input>
</div>
<div class="form-field-section">
<span class="toggle-button-label">Trusted</span>
<cr-checkbox
checked="{{currentEditableObject.isTrusted}}"></cr-checkbox>
</div>
<div class="form-field-section">
<span class="toggle-button-label">Incoming Connnection</span>
<cr-checkbox
checked="{{currentEditableObject.incoming}}"></cr-checkbox>
</div>
<div class="form-field-section">
<div class="form-label">Class</div>
<cr-radio-group class="device-class-group"
selected="{{currentEditableObject.class}}">
<template is="dom-repeat"
items="[[deviceClassOptions]]" as="option">
<cr-radio-button name="[[option.text]]"
>[[option.text]]</cr-radio-button>
</template>
</cr-radio-group>
</div>
<div class="form-field-section">
<label>
<span class="form-label">Pair Authentication</span>
<cr-radio-group
selected="{{currentEditableObject.pairingMethod}}">
<template is="dom-repeat"
items="[[deviceAuthenticationMethods]]" as="method">
<cr-radio-button name="[[method]]"
>[[method]]</cr-radio-button>
</template>
</cr-radio-group>
</label>
</div>
<div>
<div class="form-field-section"
hidden$=
"[[!showAuthToken(currentEditableObject.pairingMethod)]]"
>
<cr-input value="{{currentEditableObject.pairingAuthToken}}"
label="Code"></cr-input>
</div>
<div class="form-field-section">
<label>
<span class="form-label">Pairing Action</span>
<cr-radio-group
selected="{{currentEditableObject.pairingAction}}">
<template is="dom-repeat"
items="[[deviceAuthenticationActions]]">
<cr-radio-button name="[[item]]"
>[[item]]</cr-radio-button>
</template>
</cr-radio-group>
</label>
</div>
</div>
</form>
</div>
<div slot="button-container">
<paper-button class="action-button" on-tap="onCloseTap_">
Close
</paper-button>
</div>
</cr-dialog>
<div class="layout vertical">
<div class="element-label">
<paper-icon-button icon="device-emulator:bluetooth"></paper-icon-button>
Bluetooth
</div>
<table class="devices-table">
<tbody>
<tr class="table-section-header">
<td colspan="2">Presets</td>
<td class="centered-cell-label">Discoverable</td>
<td class="centered-cell-label">Paired</td>
</tr>
<template is="dom-repeat" items="[[predefinedDevices]]">
<tr>
<td class="alias-cell">[[item.alias]]</td>
<td class="icon-cell">
<paper-icon-button icon="device-emulator:content-copy"
on-click="copyDevice" data-predefined="true">
</paper-icon-button>
<paper-icon-button disabled icon="device-emulator:settings">
</paper-icon-button>
<paper-icon-button disabled icon="device-emulator:delete">
</paper-icon-button>
</td>
<td class="control-cell">
<cr-checkbox checked="{{item.discoverable}}"
data-predefined="true"
on-change="discoverDevice"></cr-checkbox>
</td>
<td class="control-cell">
<cr-checkbox on-change="pairDevice" data-predefined="true"
checked="{{item.paired}}"></cr-checkbox>
</td>
</tr>
</template>
</tbody>
<tbody>
<tr class="table-section-header">
<td colspan="4">Custom</td>
</tr>
<template is="dom-repeat" items="[[devices]]">
<tr>
<td class="alias-cell">[[item.alias]]</td>
<td class="icon-cell">
<paper-icon-button icon="device-emulator:content-copy"
data-predefined="false" on-click="copyDevice">
</paper-icon-button>
<paper-icon-button icon="device-emulator:settings"
on-click="showEditDialog">
</paper-icon-button>
<paper-icon-button icon="device-emulator:delete"
on-click="deleteDevice">
</paper-icon-button>
</td>
<td class="control-cell">
<cr-checkbox checked="{{item.discoverable}}"
data-predefined="false"
on-change="discoverDevice"></cr-checkbox>
</td>
<td class="control-cell">
<cr-checkbox checked="{{item.paired}}"
data-predefined="false"
on-change="pairDevice"></cr-checkbox>
</td>
</tr>
</template>
</tbody>
</table>
<div class="add-device-container">
<paper-button on-click="appendNewDevice">
Add Device
</paper-button>
</div>
</div>
</template>
<script src="bluetooth_settings.js"></script>
</dom-module>