jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-05-04 01:58:57 +00:00
Code Issues Packages Projects Releases Wiki Activity
home-assistant.io/source/demo/dev-tools.html
Paulus Schoutsen 55d448fb96 Update demo
2016-07-16 02:18:12 -07:00

3 lines
19 KiB
HTML
Raw Blame History

<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><dom-module id="services-list" assetpath="../components/"><style>ul{margin:0;padding:0}li{list-style:none;line-height:2em}a{color:var(--dark-primary-color)}</style><template><ul><template is="dom-repeat" items="[[computeDomains(serviceDomains)]]" as="domain"><template is="dom-repeat" items="[[computeServices(serviceDomains, domain)]]" as="service"><li><a href="#" on-click="serviceClicked"><span>[[domain]]</span>/<span>[[service]]</span></a></li></template></template></ul></template></dom-module><script>Polymer({is:"services-list",behaviors:[window.hassBehavior],properties:{hass:{type:Object},serviceDomains:{type:Array,bindNuclear:function(e){return e.serviceGetters.entityMap}}},computeDomains:function(e){return e.valueSeq().map(function(e){return e.domain}).sort().toJS()},computeServices:function(e,r){return e.get(r).get("services").keySeq().toArray()},serviceClicked:function(e){e.preventDefault(),this.fire("service-selected",{domain:e.model.domain,service:e.model.service})}})</script><dom-module id="partial-dev-call-service" assetpath="../layouts/"><style is="custom-style" include="iron-flex iron-positioning"></style><style>.content{@apply(--paper-font-body1);margin-top:64px;padding:24px;background-color:#fff;-ms-user-select:initial;-webkit-user-select:initial;-moz-user-select:initial}.ha-form{margin-right:16px}.description{margin-top:24px;white-space:pre-wrap}.header{@apply(--paper-font-title)}</style><template><partial-base narrow="[[narrow]]" show-menu="[[showMenu]]"><span header-title="">Services</span><div class$="[[computeFormClasses(narrow)]]"><div class="flex"><p>Call a service from a component.</p><div class="ha-form"><paper-input label="Domain" autofocus="" value="{{domain}}"></paper-input><paper-input label="Service" value="{{service}}"></paper-input><paper-textarea label="Service Data (JSON, optional)" value="{{serviceData}}"></paper-textarea><paper-button on-tap="callService" raised="">Call Service</paper-button></div><div class="description">[[description]]</div></div><div><div class="header">Available services</div><services-list on-service-selected="serviceSelected" hass="[[hass]]"></services-list></div></div></partial-base></template></dom-module><script>Polymer({is:"partial-dev-call-service",properties:{hass:{type:Object},narrow:{type:Boolean,value:!1},showMenu:{type:Boolean,value:!1},domain:{type:String,value:""},service:{type:String,value:""},serviceData:{type:String,value:""},description:{type:String,computed:"computeDescription(hass, domain, service)"}},computeDescription:function(e,t,i){return e.reactor.evaluate([e.serviceGetters.entityMap,function(e){return e.has(t)&&e.get(t).get("services").has(i)?JSON.stringify(e.get(t).get("services").get(i).toJS(),null,2):"No description available"}])},serviceSelected:function(e){this.domain=e.detail.domain,this.service=e.detail.service},callService:function(){var e;try{e=this.serviceData?JSON.parse(this.serviceData):{}}catch(e){return void alert("Error parsing JSON: "+e)}this.hass.serviceActions.callService(this.domain,this.service,e)},computeFormClasses:function(e){return e?"content fit":"content fit layout horizontal"}})</script><dom-module id="events-list" assetpath="../components/"><style>ul{margin:0;padding:0}li{list-style:none;line-height:2em}a{color:var(--dark-primary-color)}</style><template><ul><template is="dom-repeat" items="[[events]]" as="event"><li><a href="#" on-click="eventSelected">{{event.event}}</a> <span>(</span><span>{{event.listenerCount}}</span><span> listeners)</span></li></template></ul></template></dom-module><script>Polymer({is:"events-list",behaviors:[window.hassBehavior],properties:{hass:{type:Object},events:{type:Array,bindNuclear:function(e){return[e.eventGetters.entityMap,function(e){return e.valueSeq().sortBy(function(e){return e.event}).toArray()}]}}},eventSelected:function(e){e.preventDefault(),this.fire("event-selected",{eventType:e.model.event.event})}})</script><dom-module id="partial-dev-fire-event" assetpath="../layouts/"><style is="custom-style" include="iron-flex iron-positioning"></style><style>.content{@apply(--paper-font-body1);margin-top:64px;padding:24px;background-color:#fff;-ms-user-select:initial;-webkit-user-select:initial;-moz-user-select:initial}.ha-form{margin-right:16px}.header{@apply(--paper-font-title)}</style><template><partial-base narrow="{{narrow}}" show-menu="[[showMenu]]"><span header-title="">Events</span><div class$="[[computeFormClasses(narrow)]]"><div class="flex"><p>Fire an event on the event bus.</p><div class="ha-form"><paper-input label="Event Type" autofocus="" required="" value="{{eventType}}"></paper-input><paper-textarea label="Event Data (JSON, optional)" value="{{eventData}}"></paper-textarea><paper-button on-tap="fireEvent" raised="">Fire Event</paper-button></div></div><div><div class="header">Available Events</div><events-list on-event-selected="eventSelected" hass="[[hass]]"></events-list></div></div></partial-base></template></dom-module><script>Polymer({is:"partial-dev-fire-event",properties:{hass:{type:Object},narrow:{type:Boolean,value:!1},showMenu:{type:Boolean,value:!1},eventType:{type:String,value:""},eventData:{type:String,value:""}},eventSelected:function(e){this.eventType=e.detail.eventType},fireEvent:function(){var e;try{e=this.eventData?JSON.parse(this.eventData):{}}catch(e){return void alert("Error parsing JSON: "+e)}this.hass.eventActions.fireEvent(this.eventType,e)},computeFormClasses:function(e){return e?"content fit":"content fit layout horizontal"}})</script><dom-module id="entity-list" assetpath="../components/"><style>ul{margin:0;padding:0}li{list-style:none;line-height:2em}a{color:var(--dark-primary-color)}</style><template><ul><template is="dom-repeat" items="[[entities]]" as="entity"><li><a href="#" on-click="entitySelected">[[entity.entityId]]</a></li></template></ul></template></dom-module><script>Polymer({is:"entity-list",behaviors:[window.hassBehavior],properties:{hass:{type:Object},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){t.preventDefault(),this.fire("entity-selected",{entityId:t.model.entity.entityId})}})</script><dom-module id="partial-dev-set-state" assetpath="../layouts/"><style is="custom-style" include="iron-flex iron-positioning"></style><style>.content{@apply(--paper-font-body1);margin-top:64px;padding:24px;background-color:#fff;-ms-user-select:initial;-webkit-user-select:initial;-moz-user-select:initial}.ha-form{margin-right:16px}.header{@apply(--paper-font-title)}</style><template><partial-base narrow="[[narrow]]" show-menu="[[showMenu]]"><span header-title="">States</span><div class$="[[computeFormClasses(narrow)]]"><div class="flex"><p>Set the representation of a device within Home Assistant.<br>This will not communicate with the actual device.</p><div class="ha-form"><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></div><div><div class="header">Current entities</div><entity-list on-entity-selected="entitySelected" hass="[[hass]]"></entity-list></div></div></partial-base></template></dom-module><script>Polymer({is:"partial-dev-set-state",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:""}},setStateData:function(t){var e=t?JSON.stringify(t,null," "):"";this.$.inputData.value=e,this.$.inputDataWrapper.update(this.$.inputData)},entitySelected:function(t){var e=this.hass.reactor.evaluate(this.hass.entityGetters.byId(t.detail.entityId));this.entityId=e.entityId,this.state=e.state,this.stateAttributes=JSON.stringify(e.attributes,null," ")},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})},computeFormClasses:function(t){return t?"content fit":"content fit layout horizontal"}})</script><dom-module id="partial-dev-template" assetpath="../layouts/"><style is="custom-style" include="iron-flex iron-positioning"></style><style>.content{@apply(--paper-font-body1);margin-top:64px;padding:16px;background-color:#fff;-ms-user-select:initial;-webkit-user-select:initial;-moz-user-select:initial}.edit-pane{margin-right:16px}.edit-pane a{color:var(--dark-primary-color)}.horizontal .edit-pane{max-width:50%}.render-pane{position:relative;max-width:50%}.render-spinner{position:absolute;top:8px;right:8px}.rendered{@apply(--paper-font-code1)
clear: both;white-space:pre-wrap}.rendered.error{color:red}</style><template><partial-base narrow="[[narrow]]" show-menu="[[showMenu]]"><span header-title="">Template Editor</span><div class$="[[computeFormClasses(narrow)]]"><div class="edit-pane"><p>Templates are rendered using the Jinja2 template engine with some Home Assistant specific extensions.</p><ul><li><a href="http://jinja.pocoo.org/docs/dev/templates/" target="_blank">Jinja2 tempate documentation</a></li><li><a href="https://home-assistant.io/topics/templating/" target="_blank">Home Assistant template extensions</a></li></ul><paper-textarea label="Template" value="{{template}}"></paper-textarea></div><div class="render-pane"><paper-spinner class="render-spinner" active="[[rendering]]"></paper-spinner><pre class$="[[computeRenderedClasses(error)]]">[[processed]]</pre></div></div></partial-base></template></dom-module><script>Polymer({is:"partial-dev-template",behaviors:[window.hassBehavior],properties:{hass:{type:Object},narrow:{type:Boolean,value:!1},showMenu:{type:Boolean,value:!1},error:{type:Boolean,value:!1},rendering:{type:Boolean,value:!1},template:{type:String,value:'{%- if is_state("device_tracker.paulus", "home") and \n is_state("device_tracker.anne_therese", "home") -%}\n\n You are both home, you silly\n\n{%- else -%}\n\n Anne Therese is at {{ states("device_tracker.anne_therese") }} and Paulus is at {{ states("device_tracker.paulus") }}\n\n{%- endif %}\n\nFor loop example:\n\n{% for state in states.sensor -%}\n {%- if loop.first %}The {% elif loop.last %} and the {% else %}, the {% endif -%}\n {{ state.name | lower }} is {{state.state}} {{- state.attributes.unit_of_measurement}}\n{%- endfor -%}.',observer:"templateChanged"},processed:{type:String,value:""}},computeFormClasses:function(e){return e?"content fit":"content fit layout horizontal"},computeRenderedClasses:function(e){return e?"error rendered":"rendered"},templateChanged:function(){this.error&&(this.error=!1),this.debounce("render-template",this.renderTemplate.bind(this),500)},renderTemplate:function(){this.rendering=!0,this.hass.templateActions.render(this.template).then(function(e){this.processed=e,this.rendering=!1}.bind(this),function(e){this.processed=e.message,this.error=!0,this.rendering=!1}.bind(this))}})</script><dom-module id="partial-dev-info" assetpath="../layouts/"><style is="custom-style" include="iron-positioning"></style><style>.content{margin-top:64px;padding:24px;background-color:#fff;-ms-user-select:initial;-webkit-user-select:initial;-moz-user-select:initial}.about{text-align:center;line-height:2em}.version{@apply(--paper-font-headline)}.develop{@apply(--paper-font-subhead)}.about a{color:var(--dark-primary-color)}.error-log-intro{margin-top:16px;border-top:1px solid var(--light-primary-color);padding-top:16px}paper-icon-button{float:right}.error-log{@apply(--paper-font-code1)
clear: both;white-space:pre-wrap}</style><template><partial-base narrow="[[narrow]]" show-menu="[[showMenu]]"><span header-title="">About</span><div class="content fit"><div class="about"><p class="version"><a href="https://home-assistant.io"><img src="/static/favicon-192x192.png" height="192"></a><br>Home Assistant<br>[[hassVersion]]</p><p class="develop"><a href="https://home-assistant.io/developers/credits/" target="_blank">Developed by a bunch of awesome people.</a></p><p>Published under the MIT license<br>Source: <a href="https://github.com/balloob/home-assistant" target="_blank">server</a> — <a href="https://github.com/balloob/home-assistant-polymer" target="_blank">frontend-ui</a> — <a href="https://github.com/balloob/home-assistant-js" target="_blank">frontend-core</a></p><p>Built using <a href="https://www.python.org">Python 3</a>, <a href="https://www.polymer-project.org" target="_blank">Polymer [[polymerVersion]]</a>, <a href="https://optimizely.github.io/nuclear-js/" target="_blank">NuclearJS [[nuclearVersion]]</a><br>Icons by <a href="https://www.google.com/design/icons/" target="_blank">Google</a> and <a href="https://MaterialDesignIcons.com" target="_blank">MaterialDesignIcons.com</a>.</p></div><p class="error-log-intro">The following errors have been logged this session:<paper-icon-button icon="mdi:refresh" on-tap="refreshErrorLog"></paper-icon-button></p><div class="error-log">[[errorLog]]</div></div></partial-base></template></dom-module><script>Polymer({is:"partial-dev-info",behaviors:[window.hassBehavior],properties:{hass:{type:Object},narrow:{type:Boolean,value:!1},showMenu:{type:Boolean,value:!1},hassVersion:{type:String,bindNuclear:function(r){return r.configGetters.serverVersion}},polymerVersion:{type:String,value:Polymer.version},nuclearVersion:{type:String,value:"1.3.0"},errorLog:{type:String,value:""}},attached:function(){this.refreshErrorLog()},refreshErrorLog:function(r){r&&r.preventDefault(),this.errorLog="Loading error log…",this.hass.errorLogActions.fetchErrorLog().then(function(r){this.errorLog=r||"No errors have been reported."}.bind(this))}})</script></div></body></html>
Reference in New Issue View Git Blame Copy Permalink