home-assistant.io/source/demo/panels/ha-panel-dev-state.html
Paulus Schoutsen 51c61e33b4 update demo
2016-08-02 23:16:50 -07:00

1 line
7.7 KiB
HTML

<html><head><meta charset="UTF-8"></head><body><div hidden="" by-vulcanize=""><dom-module id="iron-autogrow-textarea" assetpath="../../bower_components/iron-autogrow-textarea/"><style>:host{display:inline-block;position:relative;width:400px;border:1px solid;padding:2px;-moz-appearance:textarea;-webkit-appearance:textarea;overflow:hidden}.mirror-text{visibility:hidden;word-wrap:break-word}.fit{@apply(--layout-fit)}textarea{position:relative;outline:0;border:none;resize:none;background:inherit;color:inherit;width:100%;height:100%;font-size:inherit;font-family:inherit;line-height:inherit;text-align:inherit;@apply(--iron-autogrow-textarea)}::content textarea:invalid{box-shadow:none}textarea::-webkit-input-placeholder{@apply(--iron-autogrow-textarea-placeholder)}textarea:-moz-placeholder{@apply(--iron-autogrow-textarea-placeholder)}textarea::-moz-placeholder{@apply(--iron-autogrow-textarea-placeholder)}textarea:-ms-input-placeholder{@apply(--iron-autogrow-textarea-placeholder)}</style><template><div id="mirror" class="mirror-text" aria-hidden="true">&nbsp;</div><div class="textarea-container fit"><textarea id="textarea" name$="[[name]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" required$="[[required]]" disabled$="[[disabled]]" rows$="[[rows]]" maxlength$="[[maxlength]]"></textarea></div></template></dom-module><script>Polymer({is:"iron-autogrow-textarea",behaviors:[Polymer.IronFormElementBehavior,Polymer.IronValidatableBehavior,Polymer.IronControlState],properties:{bindValue:{observer:"_bindValueChanged",type:String},rows:{type:Number,value:1,observer:"_updateCached"},maxRows:{type:Number,value:0,observer:"_updateCached"},autocomplete:{type:String,value:"off"},autofocus:{type:Boolean,value:!1},inputmode:{type:String},placeholder:{type:String},readonly:{type:String},required:{type:Boolean},maxlength:{type:Number}},listeners:{input:"_onInput"},observers:["_onValueChanged(value)"],get textarea(){return this.$.textarea},get selectionStart(){return this.$.textarea.selectionStart},get selectionEnd(){return this.$.textarea.selectionEnd},set selectionStart(e){this.$.textarea.selectionStart=e},set selectionEnd(e){this.$.textarea.selectionEnd=e},validate:function(){if(!this.required&&""==this.value)return this.invalid=!1,!0;var e;return this.hasValidator()?e=Polymer.IronValidatableBehavior.validate.call(this,this.value):(e=this.$.textarea.validity.valid,this.invalid=!e),this.fire("iron-input-validate"),e},_bindValueChanged:function(){var e=this.textarea;e&&(e.value!==this.bindValue&&(e.value=this.bindValue||0===this.bindValue?this.bindValue:""),this.value=this.bindValue,this.$.mirror.innerHTML=this._valueForMirror(),this.fire("bind-value-changed",{value:this.bindValue}))},_onInput:function(e){this.bindValue=e.path?e.path[0].value:e.target.value},_constrain:function(e){var t;for(e=e||[""],t=this.maxRows>0&&e.length>this.maxRows?e.slice(0,this.maxRows):e.slice(0);this.rows>0&&t.length<this.rows;)t.push("");return t.join("<br/>")+"&#160;"},_valueForMirror:function(){var e=this.textarea;if(e)return this.tokens=e&&e.value?e.value.replace(/&/gm,"&amp;").replace(/"/gm,"&quot;").replace(/'/gm,"&#39;").replace(/</gm,"&lt;").replace(/>/gm,"&gt;").split("\n"):[""],this._constrain(this.tokens)},_updateCached:function(){this.$.mirror.innerHTML=this._constrain(this.tokens)},_onValueChanged:function(){this.bindValue=this.value}})</script><dom-module id="paper-textarea" assetpath="../../bower_components/paper-input/"><template><style>:host{display:block}:host([hidden]){display:none!important}</style><paper-input-container no-label-float$="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]"><label hidden$="[[!label]]" aria-hidden="true">[[label]]</label><iron-autogrow-textarea id="input" class="paper-input-input" bind-value="{{value}}" disabled$="[[disabled]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" required$="[[required]]" maxlength$="[[maxlength]]" autocapitalize$="[[autocapitalize]]" rows$="[[rows]]" max-rows$="[[maxRows]]" on-change="_onChange"></iron-autogrow-textarea><template is="dom-if" if="[[errorMessage]]"><paper-input-error>[[errorMessage]]</paper-input-error></template><template is="dom-if" if="[[charCounter]]"><paper-input-char-counter></paper-input-char-counter></template></paper-input-container></template></dom-module><script>Polymer({is:"paper-textarea",behaviors:[Polymer.PaperInputBehavior,Polymer.IronFormElementBehavior],properties:{_ariaLabelledBy:{observer:"_ariaLabelledByChanged",type:String},_ariaDescribedBy:{observer:"_ariaDescribedByChanged",type:String},rows:{type:Number,value:1},maxRows:{type:Number,value:0}},_ariaLabelledByChanged:function(e){this.$.input.textarea.setAttribute("aria-labelledby",e)},_ariaDescribedByChanged:function(e){this.$.input.textarea.setAttribute("aria-describedby",e)},get _focusableElement(){return this.$.input.textarea}})</script></div><dom-module id="ha-panel-dev-state"><template><style include="ha-style">:host{background-color:#fff;-ms-user-select:initial;-webkit-user-select:initial;-moz-user-select:initial}.content{padding:24px}.entities th{text-align:left}.entities td:nth-child(3){white-space:pre-wrap;word-break:break-word}.entities a{color:var(--primary-color)}</style><app-header-layout has-scrolling-region=""><app-header fixed=""><app-toolbar><ha-menu-button narrow="[[narrow]]" show-menu="[[showMenu]]"></ha-menu-button><div main-title="">States</div></app-toolbar></app-header><div class="content"><div>Set the representation of a device within Home Assistant.<br>This will not communicate with the actual device.<paper-input label="Entity ID" autofocus="" required="" value="{{_entityId}}"></paper-input><paper-input label="State" required="" value="{{_state}}"></paper-input><paper-textarea label="State attributes (JSON, optional)" value="{{_stateAttributes}}"></paper-textarea><paper-button on-tap="handleSetState" raised="">Set State</paper-button></div><h1>Current entities</h1><table class="entities"><tbody><tr><th>Entity</th><th>State</th><th hidden$="[[narrow]]">Attributes<paper-checkbox checked="{{_showAttributes}}"></paper-checkbox></th></tr><template is="dom-repeat" items="[[_entities]]" as="entity"><tr><td><a href="#" on-tap="entitySelected">[[entity.entityId]]</a></td><td>[[entity.state]]</td><template is="dom-if" if="[[computeShowAttributes(narrow, _showAttributes)]]"><td>[[attributeString(entity)]]</td></template></tr></template></tbody></table></div></app-header-layout></template></dom-module><script>Polymer({is:"ha-panel-dev-state",behaviors:[window.hassBehavior],properties:{hass:{type:Object},narrow:{type:Boolean,value:!1},showMenu:{type:Boolean,value:!1},_entityId:{type:String,value:""},_state:{type:String,value:""},_stateAttributes:{type:String,value:""},_showAttributes:{type:Boolean,value:!0},_entities:{type:Array,bindNuclear:function(t){return[t.entityGetters.entityMap,function(t){return t.valueSeq().sortBy(function(t){return t.entityId}).toArray()}]}}},entitySelected:function(t){var e=t.model.entity;this._entityId=e.entityId,this._state=e.state,this._stateAttributes=JSON.stringify(e.attributes,null," "),t.preventDefault()},handleSetState:function(){var t;try{t=this.stateAttributes?JSON.parse(this._stateAttributes):{}}catch(t){return void alert("Error parsing JSON: "+t)}this.hass.entityActions.save({entityId:this._entityId,state:this._state,attributes:t})},computeShowAttributes:function(t,e){return!t&&e},attributeString:function(t){var e,i,r,n="";for(e=0,i=Object.keys(t.attributes);e<i.length;e++)r=i[e],n+=r+": "+t.attributes[r]+"\n";return n}})</script></body></html>