jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-19 07:16:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Hassio: show hardware (#997)

Browse Source 
* Hassio: list hardware

* Hassio: show hardware

* Remove debug

* Travis

* Concept

* Lint

* Raised button

* Lint
This commit is contained in:
c727 2018-03-21 20:26:46 +01:00 committed by Paulus Schoutsen
parent 421b9abc7d
commit 6bdf1c8b80
7 changed files with 186 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
hassio/addon-view/hassio-addon-info.html
View File

@ -11,8 +11,6 @@
<link rel='import' href='../../src/components/hassio-card-content.html'>
<link rel='import' href='../../src/util/hass-mixins.html'>
<link rel='import' href='./hassio-addon-more-info.html'>
<dom-module id="hassio-addon-info">
<template>
<style include='ha-style'>
@ -83,10 +81,6 @@
</template>
</div>
</paper-card>
<hassio-addon-more-info
title='Changelog'
content='[[changelog]]'
></hassio-addon-more-info>
</template>
<paper-card>
@ -208,7 +202,6 @@ class HassioAddonInfo extends window.hassMixins.EventsMixin(Polymer.Element) {
hass: Object,
addon: Object,
addonSlug: String,
changelog: String,
isRunning: {
type: Boolean,
computed: 'computeIsRunning(addon)',
@ -248,12 +241,15 @@ class HassioAddonInfo extends window.hassMixins.EventsMixin(Polymer.Element) {
openChangelog() {
this.hass.callApi('get', `hassio/addons/${this.addonSlug}/changelog`)
.then((data) => {
this.changelog = data;
}, () => {
this.changelog = 'Error getting changelog';
.then(
resp => resp
, () => 'Error getting changelog'
).then((content) => {
this.fire('hassio-markdown-dialog', {
title: 'Changelog',
content: content,
});
});
this.shadowRoot.querySelector('hassio-addon-more-info').openDialog();
}
_unistallClicked() {

90
hassio/addon-view/hassio-addon-more-info.html
View File

@ -1,90 +0,0 @@
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../bower_components/paper-dialog/paper-dialog.html'>
<link rel='import' href='../../bower_components/app-layout/app-toolbar/app-toolbar.html'>
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
<link rel='import' href='../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html'>
<link rel='import' href='../../src/components/ha-markdown.html'>
<link rel='import' href='../../src/resources/ha-style.html'>
<dom-module id='hassio-addon-more-info'>
<template>
<style include='ha-style-dialog'>
paper-dialog {
font-size: 14px;
border-radius: 2px;
--paper-dialog-scrollable: {
-webkit-overflow-scrolling: auto;
}
--more-info-header-background: var(--secondary-background-color);
--more-info-header-color: var(--primary-text-color);
}
/* overrule the ha-style-dialog max-height on small screens */
@media all and (max-width: 450px), all and (max-height: 500px) {
paper-dialog {
max-height: 100%;
height: 100%;
--more-info-header-background: var(--primary-color);
--more-info-header-color: var(--text-primary-color);
}
}
app-toolbar {
margin-top: 0;
color: var(--more-info-header-color);
background-color: var(--more-info-header-background);
}
app-toolbar [main-title] {
/* Design guideline states 24px, changed to 16 to align with state info */
margin-left: 16px;
}
paper-dialog-scrollable {
margin-bottom: 16px;
}
</style>
<paper-dialog
id='dialog'
with-backdrop
>
<app-toolbar>
<paper-icon-button
icon='mdi:close'
dialog-dismiss
></paper-icon-button>
<div main-title>[[title]]</div>
</app-toolbar>
<paper-dialog-scrollable>
<ha-markdown content='[[content]]'></ha-markdown>
</paper-dialog-scrollable>
</paper-dialog>
</template>
</dom-module>
<script>
class HassioAddonMoreInfo extends Polymer.Element {
static get is() { return 'hassio-addon-more-info'; }
static get properties() {
return {
title: String,
content: {
type: String,
value: '',
},
};
}
ready() {
super.ready();
this.$.dialog.addEventListener('iron-overlay-opened', (ev) => {
if (ev.target.withBackdrop) {
ev.target.parentNode.insertBefore(ev.target.backdropElement, ev.target);
}
});
}
openDialog() {
this.$.dialog.open();
}
}
customElements.define(HassioAddonMoreInfo.is, HassioAddonMoreInfo);
</script>

21
hassio/addon-view/hassio-addon-view.html
View File

@ -12,6 +12,7 @@
<link rel="import" href="./hassio-addon-config.html">
<link rel="import" href="./hassio-addon-network.html">
<link rel="import" href="./hassio-addon-logs.html">
<link rel='import' href='../hassio-markdown-dialog.html'>
<dom-module id="hassio-addon-view">
<template>
@ -77,6 +78,11 @@
</template>
</div>
</app-header-layout>
<hassio-markdown-dialog
title='[[markdownTitle]]'
content='[[markdownContent]]'
></hassio-markdown-dialog>
</template>
</dom-module>
@ -96,12 +102,19 @@ class HassioAddonView extends Polymer.Element {
},
routeMatches: Boolean,
addon: Object,
markdownTitle: String,
markdownContent: {
type: String,
value: '',
},
};
}
ready() {
super.ready();
this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
this.addEventListener('hassio-markdown-dialog', ev => this.openMarkdown(ev));
}
apiCalled(ev) {
@ -129,6 +142,14 @@ class HassioAddonView extends Polymer.Element {
backTapped() {
history.back();
}
openMarkdown(ev) {
this.setProperties({
markdownTitle: ev.detail.title,
markdownContent: ev.detail.content,
});
this.shadowRoot.querySelector('hassio-markdown-dialog').openDialog();
}
}
customElements.define(HassioAddonView.is, HassioAddonView);

76
hassio/hassio-markdown-dialog.html Normal file
View File

@ -0,0 +1,76 @@
<link rel='import' href='../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../bower_components/paper-dialog/paper-dialog.html'>
<link rel='import' href='../bower_components/app-layout/app-toolbar/app-toolbar.html'>
<link rel='import' href='../bower_components/paper-icon-button/paper-icon-button.html'>
<link rel='import' href='../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html'>
<link rel='import' href='../src/components/ha-markdown.html'>
<link rel='import' href='../src/resources/ha-style.html'>
<dom-module id='hassio-markdown-dialog'>
<template>
<style include='ha-style-dialog'>
paper-dialog {
min-width: 350px;
font-size: 14px;
border-radius: 2px;
}
app-toolbar {
margin: 0;
padding: 0 16px;
color: var(--primary-text-color);
background-color: var(--secondary-background-color);
}
app-toolbar [main-title] {
margin-left: 16px;
}
paper-checkbox {
display: block;
margin: 4px;
}
@media all and (max-width: 450px), all and (max-height: 500px) {
paper-dialog {
max-height: 100%;
height: 100%;
}
app-toolbar {
color: var(--text-primary-color);
background-color: var(--primary-color);
}
}
</style>
<paper-dialog
id='dialog'
with-backdrop
>
<app-toolbar>
<paper-icon-button
icon='mdi:close'
dialog-dismiss
></paper-icon-button>
<div main-title>[[title]]</div>
</app-toolbar>
<paper-dialog-scrollable>
<ha-markdown content='[[content]]'></ha-markdown>
</paper-dialog-scrollable>
</paper-dialog>
</template>
</dom-module>
<script>
class HassioMarkdownDialog extends Polymer.Element {
static get is() { return 'hassio-markdown-dialog'; }
static get properties() {
return {
title: String,
content: String,
};
}
openDialog() {
this.$.dialog.open();
}
}
customElements.define(HassioMarkdownDialog.is, HassioMarkdownDialog);
</script>

26
hassio/hassio-pages-with-tabs.html
View File

@ -15,6 +15,7 @@
<link rel='import' href='./snapshots/hassio-snapshot.html'>
<link rel='import' href='./addon-store/hassio-addon-store.html'>
<link rel='import' href='./system/hassio-system.html'>
<link rel='import' href='./hassio-markdown-dialog.html'>
<dom-module id='hassio-pages-with-tabs'>
<template>
@ -81,6 +82,12 @@
></hassio-system>
</template>
</app-header-layout>
<hassio-markdown-dialog
title='[[markdownTitle]]'
content='[[markdownContent]]'
></hassio-markdown-dialog>
<template is='dom-if' if='[[equals(page, "snapshots")]]'>
<hassio-snapshot
hass='[[hass]]'
@ -106,9 +113,20 @@ class HassioPagesWithTabs extends window.hassMixins.NavigateMixin(Polymer.Elemen
hassInfo: Object,
snapshotSlug: String,
snapshotDeleted: Boolean,
markdownTitle: String,
markdownContent: {
type: String,
value: '',
},
};
}
ready() {
super.ready();
this.addEventListener('hassio-markdown-dialog', ev => this.openMarkdown(ev));
}
handlePageSelected(ev) {
const newPage = ev.detail.item.getAttribute('page-name');
if (newPage !== this.page) {
@ -131,6 +149,14 @@ class HassioPagesWithTabs extends window.hassMixins.NavigateMixin(Polymer.Elemen
this.shadowRoot.querySelector('hassio-addon-store').refreshData();
}
}
openMarkdown(ev) {
this.setProperties({
markdownTitle: ev.detail.title,
markdownContent: ev.detail.content,
});
this.shadowRoot.querySelector('hassio-markdown-dialog').openDialog();
}
}
customElements.define(HassioPagesWithTabs.is, HassioPagesWithTabs);

61
hassio/system/hassio-host-info.html
View File

@ -1,6 +1,8 @@
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel='import' href='../../src/util/hass-mixins.html'>
<link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
<dom-module id="hassio-host-info">
@ -12,7 +14,7 @@
margin-left: 8px;
}
.card-content {
height: 110px;
height: 200px;
}
@media screen and (max-width: 830px) {
paper-card {
@ -34,9 +36,13 @@
color: var(--google-red-500);
margin-top: 16px;
}
paper-button.info {
max-width: 50%;
}
</style>
<paper-card heading="Host system">
<paper-card>
<div class="card-content">
<h2>Host system</h2>
<table class='info'>
<tr>
<td>Version</td>
@ -51,17 +57,16 @@
<td>[[data.type]] ([[data.os]])</td>
</tr>
</table>
<paper-button
raised
on-click='_showHardware'
class='info'
>Show hardware</paper-button>
<template is='dom-if' if='[[errors]]'>
<div class='errors'>Error: [[errors]]</div>
</template>
</div>
<div class="card-actions">
<template is='dom-if' if='[[computeUpdateAvailable(data)]]'>
<ha-call-api-button
hass='[[hass]]'
path="hassio/host/update"
>Update</ha-call-api-button>
</template>
<template is='dom-if' if='[[computeRebootAvailable(data)]]'>
<ha-call-api-button
class='warning'
@ -76,13 +81,19 @@
path="hassio/host/shutdown"
>Shutdown</ha-call-api-button>
</template>
<template is='dom-if' if='[[computeUpdateAvailable(data)]]'>
<ha-call-api-button
hass='[[hass]]'
path="hassio/host/update"
>Update</ha-call-api-button>
</template>
</div>
</paper-card>
</template>
</dom-module>
<script>
class HassioHostInfo extends Polymer.Element {
class HassioHostInfo extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'hassio-host-info'; }
static get properties() {
@ -124,6 +135,38 @@ class HassioHostInfo extends Polymer.Element {
computeShutdownAvailable(data) {
return data.features && data.features.includes('shutdown');
}
_showHardware() {
this.hass.callApi('get', 'hassio/host/hardware')
.then(
resp => this._objectToMarkdown(resp.data)
, () => 'Error getting hardware info'
).then((content) => {
this.fire('hassio-markdown-dialog', {
title: 'Hardware',
content: content,
});
});
}
_objectToMarkdown(obj, indent = '') {
let data = '';
Object.keys(obj).forEach((key) => {
if (typeof obj[key] !== 'object') {
data += `${indent}- ${key}: ${obj[key]}\n`;
} else {
data += `${indent}- ${key}:\n`;
if (Array.isArray(obj[key])) {
if (obj[key].length) {
data += `${indent} - ` + obj[key].join(`\n${indent} - `) + '\n';
}
} else {
data += this._objectToMarkdown(obj[key], ` ${indent}`);
}
}
});
return data;
}
}
customElements.define(HassioHostInfo.is, HassioHostInfo);

5
hassio/system/hassio-supervisor-info.html
View File

@ -13,7 +13,7 @@
width: 400px;
}
.card-content {
height: 110px;
height: 200px;
}
@media screen and (max-width: 830px) {
paper-card {
@ -34,8 +34,9 @@
margin-top: 16px;
}
</style>
<paper-card heading="Hass.io supervisor">
<paper-card>
<div class="card-content">
<h2>Hass.io supervisor</h2>
<table class='info'>
<tr>
<td>Version</td>