mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-13 20:36:35 +00:00
Add hassbian panel (#201)
* Add hassbian panel * Lint * Make config more generic
This commit is contained in:
Paulus Schoutsen
GitHub
parent
518d0b38da
commit
cce4c853c9
175
panels/config/ha-config-section-hassbian.html
Normal file
175
panels/config/ha-config-section-hassbian.html
Normal file
@ -0,0 +1,175 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
<link rel='import' href='../../bower_components/iron-media-query/iron-media-query.html'>
|
||||
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
|
||||
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
|
||||
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
|
||||
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
|
||||
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
|
||||
|
||||
<link rel="import" href="../../src/components/ha-menu-button.html">
|
||||
<link rel="import" href="../../src/resources/ha-style.html">
|
||||
|
||||
<link rel="import" href="./ha-config-section.html">
|
||||
|
||||
<dom-module id="ha-config-section-hassbian">
|
||||
<template>
|
||||
<style include="iron-flex ha-style">
|
||||
.header {
|
||||
font-size: 16px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.header .status {
|
||||
font-size: 14px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.card-actions paper-button {
|
||||
color: var(--default-primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
<ha-config-section
|
||||
narrow='[[narrow]]'
|
||||
show-menu='[[showMenu]]'
|
||||
>
|
||||
<span slot='header'>Bring Hassbian to the next level</span>
|
||||
<span slot='introduction'>
|
||||
Discover exciting add-ons to enhance your Home Assistant installation. Add an MQTT server or control a connected TV via HDMI-CEC.
|
||||
</span>
|
||||
|
||||
<template is='dom-if' if='[[suiteStatus]]'>
|
||||
<template is='dom-repeat' items='[[computeSuiteKeys(suiteStatus)]]' as='suiteKey'>
|
||||
<paper-card>
|
||||
<div class='card-content'>
|
||||
<div class='header'>
|
||||
[[computeTitle(suiteKey)]]
|
||||
<span class='status'>
|
||||
[[computeSuiteStatus(suiteStatus, suiteKey)]]
|
||||
</span>
|
||||
</div>
|
||||
[[computeSuiteDescription(suiteStatus, suiteKey)]]
|
||||
</div>
|
||||
<div class='card-actions'>
|
||||
<paper-button on-tap='suiteMoreInfoTapped'>LEARN MORE</paper-button>
|
||||
|
||||
<template is='dom-if' if='[[computeShowInstall(suiteStatus, suiteKey)]]'>
|
||||
<paper-button on-tap='suiteActionTapped'>INSTALL</paper-button>
|
||||
</template>
|
||||
</div>
|
||||
</paper-card>
|
||||
</template>
|
||||
</template>
|
||||
</ha-config-section>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'ha-config-section-hassbian',
|
||||
|
||||
properties: {
|
||||
hass: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
narrow: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
showMenu: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
suiteStatus: {
|
||||
type: Object,
|
||||
value: null,
|
||||
},
|
||||
},
|
||||
|
||||
updateStatus: function () {
|
||||
// TODO tapping install while something is installing triggers a second
|
||||
// update loop to start.
|
||||
this.hass.callApi('GET', 'hassbian/suites').then(function (suites) {
|
||||
this.suiteStatus = suites;
|
||||
|
||||
var isInstalling = false;
|
||||
var keys = Object.keys(suites);
|
||||
for (var i = 0; i < keys.length; i++) {
|
||||
if (suites[keys[i]].state === 'installing') {
|
||||
isInstalling = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (isInstalling) {
|
||||
this.async(this.updateStatus, 5000);
|
||||
}
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
attached: function () {
|
||||
this.updateStatus = this.updateStatus.bind(this);
|
||||
this.updateStatus();
|
||||
},
|
||||
|
||||
computeSuiteKeys: function (suiteStatus) {
|
||||
// Prioritize installing packages
|
||||
return Object.keys(suiteStatus).sort(function (keyA, keyB) {
|
||||
var installingA = suiteStatus[keyA].state === 'installing';
|
||||
var installingB = suiteStatus[keyB].state === 'installing';
|
||||
|
||||
if (installingA && installingB) {
|
||||
// do nothing
|
||||
} else if (installingA) {
|
||||
return -1;
|
||||
} else if (installingB) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (keyA < keyB) {
|
||||
return -1;
|
||||
}
|
||||
if (keyA > keyB) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
},
|
||||
|
||||
computeSuiteDescription: function (suiteStatus, suiteKey) {
|
||||
return suiteStatus[suiteKey].description;
|
||||
},
|
||||
|
||||
computeTitle: function (suiteKey) {
|
||||
return suiteKey.substr(0, 1).toUpperCase() + suiteKey.substr(1);
|
||||
},
|
||||
|
||||
computeSuiteStatus: function (suiteStatus, suiteKey) {
|
||||
const state = suiteStatus[suiteKey].state.replace(/_/, ' ');
|
||||
return state.substr(0, 1).toUpperCase() + state.substr(1);
|
||||
},
|
||||
|
||||
computeShowStatus: function (suiteStatus, suiteKey) {
|
||||
var state = suiteStatus[suiteKey].state;
|
||||
return state !== 'installing' && state !== 'not_installed';
|
||||
},
|
||||
|
||||
computeShowInstall: function (suiteStatus, suiteKey) {
|
||||
return suiteStatus[suiteKey].state === 'not_installed';
|
||||
},
|
||||
|
||||
suiteMoreInfoTapped: function (ev) {
|
||||
console.log('learn more', ev.model.item);
|
||||
},
|
||||
|
||||
suiteActionTapped: function () {
|
||||
// TODO install tapped suite
|
||||
this.hass.callApi('POST', 'hassbian/suites/openzwave/install').then(this.updateStatus);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
123
panels/config/ha-config-section.html
Normal file
123
panels/config/ha-config-section.html
Normal file
@ -0,0 +1,123 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
<link rel='import' href='../../bower_components/iron-media-query/iron-media-query.html'>
|
||||
<link rel="import" href="../../src/resources/ha-style.html">
|
||||
|
||||
<dom-module id="ha-config-section">
|
||||
<template>
|
||||
<style include="iron-flex ha-style">
|
||||
.content {
|
||||
padding: 28px 20px 0;
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
@apply(--paper-font-display1);
|
||||
opacity: var(--dark-primary-opacity);
|
||||
}
|
||||
|
||||
.together {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.intro {
|
||||
@apply(--paper-font-subhead);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-right: 40px;
|
||||
opacity: var(--dark-primary-opacity);
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-top: -24px;
|
||||
}
|
||||
|
||||
.panel ::slotted(paper-card) {
|
||||
margin-top: 24px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.narrow.content {
|
||||
max-width: 640px;
|
||||
}
|
||||
.narrow .together {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.narrow .header {
|
||||
@apply(--paper-font-headline);
|
||||
}
|
||||
.narrow .intro {
|
||||
font-size: 14px;
|
||||
padding-bottom: 20px;
|
||||
margin-right: 0;
|
||||
max-width: 500px;
|
||||
}
|
||||
</style>
|
||||
<iron-media-query query="(min-width: 1040px)" query-matches="{{wide}}">
|
||||
</iron-media-query>
|
||||
<iron-media-query query="(min-width: 1296px)" query-matches="{{wideSidebar}}">
|
||||
</iron-media-query>
|
||||
|
||||
<div class$='[[computeContentClasses(isWide)]]'>
|
||||
<div class='header'><slot name="header"></slot></div>
|
||||
<div class$='[[computeClasses(isWide)]]'>
|
||||
<div class='intro'>
|
||||
<slot name="introduction"></slot>
|
||||
</div>
|
||||
<div class='flex panel'>
|
||||
<slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'ha-config-section',
|
||||
|
||||
properties: {
|
||||
hass: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
narrow: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
showMenu: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
wide: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
wideSidebar: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
isWide: {
|
||||
type: Boolean,
|
||||
computed: 'computeIsWide(showMenu, wideSidebar, wide)'
|
||||
}
|
||||
},
|
||||
|
||||
computeIsWide: function (showMenu, wideSidebar, wide) {
|
||||
return showMenu ? wideSidebar : wide;
|
||||
},
|
||||
|
||||
computeContentClasses: function (isWide) {
|
||||
var classes = 'content ';
|
||||
|
||||
return isWide ? classes : classes + 'narrow';
|
||||
},
|
||||
|
||||
computeClasses: function (isWide) {
|
||||
var classes = 'together layout ';
|
||||
|
||||
return classes + (isWide ? 'horizontal' : 'vertical narrow');
|
||||
},
|
||||
});
|
||||
</script>
|
||||
52
panels/config/ha-panel-config.html
Normal file
52
panels/config/ha-panel-config.html
Normal file
@ -0,0 +1,52 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
|
||||
<link rel="import" href="../../src/components/ha-menu-button.html">
|
||||
|
||||
<link rel="import" href="./ha-config-section-hassbian.html">
|
||||
|
||||
<dom-module id="ha-panel-config">
|
||||
<template>
|
||||
<style include="iron-flex ha-style">
|
||||
app-header-layout {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
</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>Configuration</div>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<ha-config-section-hassbian
|
||||
narrow='[[narrow]]'
|
||||
show-menu='[[showMenu]]'
|
||||
hass='[[hass]]'
|
||||
></ha-config-section-hassbian>
|
||||
</app-header-layout>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'ha-panel-config',
|
||||
|
||||
properties: {
|
||||
hass: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
narrow: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
showMenu: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user