<style include="device-emulator-shared-styles iron-flex iron-flex-alignment | |
iron-positioning md-select"> | |
cr-input { | |
--cr-input-error-display: none; | |
margin-bottom: var(--cr-form-field-bottom-spacing); | |
} | |
</style> | |
<div class="layout vertical"> | |
<div class="element-label"> | |
<cr-icon-button iron-icon="device-emulator:battery-charging-full"> | |
</cr-icon-button> | |
Power | |
</div> | |
<label> | |
<span class="form-label">Battery state</span> | |
<cr-radio-group selected="{{batteryState}}"> | |
<template is="dom-repeat" items="[[batteryStateOptions]]"> | |
<cr-radio-button name="[[item]]">[[item]]</cr-radio-button> | |
</template> | |
</cr-radio-group> | |
</label> | |
<iron-collapse opened="[[isBatteryPresent(batteryState)]]"> | |
<div class="layout vertical"> | |
<cr-input label="Battery percentage" value="[[batteryPercent]]" | |
on-change="onBatteryPercentChange" type="number"> | |
</cr-input> | |
<cr-input label="Seconds until empty" value="[[timeUntilEmpty]]" | |
on-change="onTimeUntilEmptyChange" type="number"> | |
</cr-input> | |
<cr-input label="Seconds until full" value="[[timeUntilFull]]" | |
on-change="onTimeUntilFullChange" type="number"> | |
</cr-input> | |
</div> | |
</iron-collapse> | |
<table class="devices-table"> | |
<tbody> | |
<tr class="table-section-header"> | |
<td>Power sources</td> | |
<td class="centered-cell-label">Connected</td> | |
<td class="centered-cell-label">Role</td> | |
<td class="centered-cell-label">Amps</td> | |
</tr> | |
<template is="dom-repeat" items="{{powerSourceOptions}}"> | |
<tr> | |
<td class="alias-cell">[[item.name]]</td> | |
<td class="control-cell"> | |
<cr-checkbox checked="{{item.connected}}"></cr-checkbox> | |
</td> | |
<td class="control-cell"> | |
<cr-button on-click="onSetAsSourceClick" | |
class$="[[cssClassForSetAsSource_(item, | |
selectedPowerSourceId)]]" | |
hidden$="[[!isDualRole(item)]]" | |
disabled="[[!canBecomeSource( | |
item, selectedPowerSourceId, powerSourceOptions.*)]]"> | |
Set as source | |
</cr-button> | |
<div hidden$="[[isDualRole(item)]]">Source</div> | |
</td> | |
<td class="control-cell"> | |
<select class="md-select" disabled$="[[!item.variablePower]]" | |
on-change="onPowerChanged" value="[[item.power]]"> | |
<option value="high">High</option> | |
<option value="low">Low</option> | |
</select> | |
</td> | |
</template> | |
</tbody> | |
</table> | |
</div> |