Frontend: extract voice command status component

This commit is contained in:
Paulus Schoutsen 2015-06-28 20:10:35 -07:00
parent d719a09a58
commit 7a7ede22ea
2 changed files with 63 additions and 19 deletions

View File

@ -0,0 +1,61 @@
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">
<dom-module id="ha-voice-command-progress">
<style>
:host {
display: block;
}
iron-icon {
margin-right: 8px;
}
.interimTranscript {
color: darkgrey;
}
.listening paper-spinner {
float: right;
}
</style>
<template>
<iron-icon icon="av:hearing"></iron-icon>
<span>{{finalTranscript}}</span>
<span class='interimTranscript'>[[interimTranscript]]</span>
<paper-spinner active$="[[isTransmitting]]" alt="Sending voice command to Home Assistant"></paper-spinner>
</template>
</dom-module>
<script>
(function(){
var voiceGetters = window.hass.voiceGetters;
Polymer({
is: 'ha-voice-command-progress',
behaviors: [nuclearObserver],
properties: {
isTransmitting: {
type: Boolean,
bindNuclear: voiceGetters.isTransmitting,
},
interimTranscript: {
type: String,
bindNuclear: voiceGetters.extraInterimTranscript,
},
finalTranscript: {
type: String,
bindNuclear: voiceGetters.finalTranscript,
},
},
});
})();
</script>

View File

@ -1,11 +1,11 @@
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="./partial-base.html">
<link rel="import" href="../components/state-cards.html">
<link rel="import" href="../components/ha-voice-command-progress.html">
<dom-module id="partial-states">
<style>
@ -58,9 +58,7 @@
<div class='content-wrapper'>
<div class='listening' hidden$="[[!showListenInterface]]"
on-click="handleListenClick">
<iron-icon icon="av:hearing"></iron-icon> <span>{{finalTranscript}}</span>
<span class='interimTranscript'>[[interimTranscript]]</span>
<paper-spinner active$="[[isTransmitting]]" alt="Sending voice command to Home Assistant"></paper-spinner>
<ha-voice-command-progress></ha-voice-command-progress>
</div>
<state-cards states="[[states]]">
@ -134,21 +132,6 @@
bindNuclear: voiceGetters.isListening,
},
isTransmitting: {
type: Boolean,
bindNuclear: voiceGetters.isTransmitting,
},
interimTranscript: {
type: String,
bindNuclear: voiceGetters.extraInterimTranscript,
},
finalTranscript: {
type: String,
bindNuclear: voiceGetters.finalTranscript,
},
showListenInterface: {
type: Boolean,
bindNuclear: [