mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
G Johansson
GitHub
parent
6754b8893b
commit
3f0f3affb6
@ -532,15 +532,6 @@ export default {
|
||||
last_changed: "2018-07-19T10:44:46.200946+00:00",
|
||||
last_updated: "2018-07-19T10:44:46.200946+00:00",
|
||||
},
|
||||
"mailbox.demomailbox": {
|
||||
entity_id: "mailbox.demomailbox",
|
||||
state: "10",
|
||||
attributes: {
|
||||
friendly_name: "DemoMailbox",
|
||||
},
|
||||
last_changed: "2018-07-19T10:45:16.555210+00:00",
|
||||
last_updated: "2018-07-19T10:45:16.555210+00:00",
|
||||
},
|
||||
"input_select.living_room_preset": {
|
||||
entity_id: "input_select.living_room_preset",
|
||||
state: "Visitors",
|
||||
|
||||
@ -40,7 +40,6 @@ import {
|
||||
mdiImageFilterFrames,
|
||||
mdiLightbulb,
|
||||
mdiLightningBolt,
|
||||
mdiMailbox,
|
||||
mdiMapMarkerRadius,
|
||||
mdiMeterGas,
|
||||
mdiMicrophoneMessage,
|
||||
@ -119,7 +118,6 @@ export const FIXED_DOMAIN_ICONS = {
|
||||
input_text: mdiFormTextbox,
|
||||
lawn_mower: mdiRobotMower,
|
||||
light: mdiLightbulb,
|
||||
mailbox: mdiMailbox,
|
||||
notify: mdiCommentAlert,
|
||||
number: mdiRayVertex,
|
||||
persistent_notification: mdiBell,
|
||||
|
||||
@ -29,7 +29,6 @@ const COMPONENTS = {
|
||||
history: () => import("../panels/history/ha-panel-history"),
|
||||
iframe: () => import("../panels/iframe/ha-panel-iframe"),
|
||||
logbook: () => import("../panels/logbook/ha-panel-logbook"),
|
||||
mailbox: () => import("../panels/mailbox/ha-panel-mailbox"),
|
||||
map: () => import("../panels/map/ha-panel-map"),
|
||||
my: () => import("../panels/my/ha-panel-my"),
|
||||
profile: () => import("../panels/profile/ha-panel-profile"),
|
||||
|
||||
@ -1,153 +0,0 @@
|
||||
import "@material/mwc-button";
|
||||
import "../../components/ha-dialog";
|
||||
import "../../components/ha-circular-progress";
|
||||
import "../../components/ha-icon";
|
||||
import "../../components/ha-icon-button";
|
||||
import {
|
||||
CSSResultGroup,
|
||||
LitElement,
|
||||
TemplateResult,
|
||||
css,
|
||||
html,
|
||||
nothing,
|
||||
} from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import { haStyleDialog } from "../../resources/styles";
|
||||
|
||||
@customElement("ha-dialog-show-audio-message")
|
||||
class HaDialogShowAudioMessage extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@state() private _currentMessage?: any;
|
||||
|
||||
@state() private _errorMsg?: string;
|
||||
|
||||
@state() private _loading: boolean = false;
|
||||
|
||||
@state() private _opened: boolean = false;
|
||||
|
||||
@state() private _blobUrl?: string;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<ha-dialog
|
||||
.open=${this._opened}
|
||||
@closed=${this._closeDialog}
|
||||
heading=${this.hass.localize("ui.panel.mailbox.playback_title")}
|
||||
>
|
||||
${this._loading
|
||||
? html`<ha-circular-progress indeterminate></ha-circular-progress>`
|
||||
: html`<div class="icon">
|
||||
<ha-icon-button id="delicon" @click=${this._openDeleteDialog}>
|
||||
<ha-icon icon="hass:delete"></ha-icon>
|
||||
</ha-icon-button>
|
||||
</div>
|
||||
${
|
||||
this._currentMessage
|
||||
? html`<div id="transcribe">
|
||||
${this._currentMessage?.message}
|
||||
</div>`
|
||||
: nothing
|
||||
}
|
||||
${
|
||||
this._errorMsg
|
||||
? html`<div class="error">${this._errorMsg}</div>`
|
||||
: nothing
|
||||
}
|
||||
${
|
||||
this._blobUrl
|
||||
? html` <audio id="mp3" preload="none" controls autoplay>
|
||||
<source
|
||||
id="mp3src"
|
||||
src=${this._blobUrl}
|
||||
type="audio/mpeg"
|
||||
/>
|
||||
</audio>`
|
||||
: nothing
|
||||
}
|
||||
</div>`}
|
||||
</ha-dialog>
|
||||
`;
|
||||
}
|
||||
|
||||
showDialog({ hass, message }) {
|
||||
this.hass = hass;
|
||||
this._errorMsg = undefined;
|
||||
this._currentMessage = message;
|
||||
this._opened = true;
|
||||
const platform = message.platform;
|
||||
if (platform.has_media) {
|
||||
this._loading = true;
|
||||
const url = `/api/mailbox/media/${platform.name}/${message.sha}`;
|
||||
this.hass
|
||||
.fetchWithAuth(url)
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
return response.blob();
|
||||
}
|
||||
return Promise.reject({
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
});
|
||||
})
|
||||
.then((blob) => {
|
||||
this._loading = false;
|
||||
this._blobUrl = window.URL.createObjectURL(blob);
|
||||
})
|
||||
.catch((err) => {
|
||||
this._loading = false;
|
||||
this._errorMsg = `Error loading audio: ${err.statusText}`;
|
||||
});
|
||||
} else {
|
||||
this._loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
private _openDeleteDialog() {
|
||||
if (confirm(this.hass.localize("ui.panel.mailbox.delete_prompt"))) {
|
||||
this._deleteSelected();
|
||||
}
|
||||
}
|
||||
|
||||
private _deleteSelected() {
|
||||
const msg = this._currentMessage;
|
||||
this.hass.callApi(
|
||||
"DELETE",
|
||||
`mailbox/delete/${msg.platform.name}/${msg.sha}`
|
||||
);
|
||||
this._closeDialog();
|
||||
}
|
||||
|
||||
private _closeDialog() {
|
||||
const mp3 = this.shadowRoot!.querySelector("#mp3")! as any;
|
||||
mp3.pause();
|
||||
this._currentMessage = undefined;
|
||||
this._errorMsg = undefined;
|
||||
this._loading = false;
|
||||
this._opened = false;
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
haStyleDialog,
|
||||
css`
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
p {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
.icon {
|
||||
text-align: var(--float-end);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-dialog-show-audio-message": HaDialogShowAudioMessage;
|
||||
}
|
||||
}
|
||||
@ -1,275 +0,0 @@
|
||||
import {
|
||||
CSSResultGroup,
|
||||
LitElement,
|
||||
TemplateResult,
|
||||
css,
|
||||
html,
|
||||
nothing,
|
||||
} from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import "@material/mwc-button";
|
||||
import { formatDateTime } from "../../common/datetime/format_date_time";
|
||||
import "../../components/ha-card";
|
||||
import "../../components/ha-menu-button";
|
||||
import "../../components/ha-tabs";
|
||||
import "@polymer/paper-tabs/paper-tab";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import { haStyle } from "../../resources/styles";
|
||||
import "../../components/ha-top-app-bar-fixed";
|
||||
import { formatDuration } from "../../common/datetime/format_duration";
|
||||
|
||||
let registeredDialog = false;
|
||||
|
||||
interface MailboxMessage {
|
||||
info: {
|
||||
origtime: number;
|
||||
callerid: string;
|
||||
duration: string;
|
||||
};
|
||||
text: string;
|
||||
sha: string;
|
||||
}
|
||||
|
||||
@customElement("ha-panel-mailbox")
|
||||
class HaPanelMailbox extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public narrow!: boolean;
|
||||
|
||||
@property({ attribute: false }) public platforms?: any[];
|
||||
|
||||
@state() private _messages?: any[];
|
||||
|
||||
@state() private _currentPlatform: number = 0;
|
||||
|
||||
private _unsubEvents?;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<ha-top-app-bar-fixed>
|
||||
<ha-menu-button
|
||||
slot="navigationIcon"
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
<div slot="title">${this.hass.localize("panel.mailbox")}</div>
|
||||
${!this._areTabsHidden(this.platforms)
|
||||
? html`<div sticky>
|
||||
<ha-tabs
|
||||
scrollable
|
||||
.selected=${this._currentPlatform}
|
||||
@iron-activate=${this._handlePlatformSelected}
|
||||
>
|
||||
${this.platforms?.map(
|
||||
(platform) =>
|
||||
html` <paper-tab data-entity=${platform}>
|
||||
${this._getPlatformName(platform)}
|
||||
</paper-tab>`
|
||||
)}
|
||||
</ha-tabs>
|
||||
</div>`
|
||||
: ""}
|
||||
</ha-top-app-bar-fixed>
|
||||
<div class="content">
|
||||
<ha-card>
|
||||
${!this._messages?.length
|
||||
? html`<div class="card-content empty">
|
||||
${this.hass.localize("ui.panel.mailbox.empty")}
|
||||
</div>`
|
||||
: nothing}
|
||||
${this._messages?.map(
|
||||
(message) =>
|
||||
html` <ha-list-item
|
||||
.message=${message}
|
||||
@click=${this._openMP3Dialog}
|
||||
twoline
|
||||
>
|
||||
<span>
|
||||
<span>${message.caller}</span>
|
||||
<span class="tip">
|
||||
${formatDuration(this.hass.locale, {
|
||||
seconds: message.duration,
|
||||
})}
|
||||
</span>
|
||||
</span>
|
||||
<span slot="secondary">
|
||||
<span class="date">${message.timestamp}</span> -
|
||||
${message.message}
|
||||
</span>
|
||||
</ha-list-item>`
|
||||
)}
|
||||
</ha-card>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
if (!registeredDialog) {
|
||||
registeredDialog = true;
|
||||
fireEvent(this, "register-dialog", {
|
||||
dialogShowEvent: "show-audio-message-dialog",
|
||||
dialogTag: "ha-dialog-show-audio-message",
|
||||
dialogImport: () => import("./ha-dialog-show-audio-message"),
|
||||
});
|
||||
}
|
||||
this.hassChanged = this.hassChanged.bind(this);
|
||||
this.hass.connection
|
||||
.subscribeEvents(this.hassChanged, "mailbox_updated")
|
||||
.then((unsub) => {
|
||||
this._unsubEvents = unsub;
|
||||
});
|
||||
this._computePlatforms().then((platforms) => {
|
||||
this.platforms = platforms;
|
||||
this.hassChanged();
|
||||
});
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
if (this._unsubEvents) this._unsubEvents();
|
||||
}
|
||||
|
||||
hassChanged() {
|
||||
if (!this._messages) {
|
||||
this._messages = [];
|
||||
}
|
||||
this._getMessages().then((items) => {
|
||||
this._messages = items;
|
||||
});
|
||||
}
|
||||
|
||||
private _openMP3Dialog(ev) {
|
||||
const message: any = (ev.currentTarget! as any).message;
|
||||
fireEvent(this, "show-audio-message-dialog", {
|
||||
hass: this.hass,
|
||||
message: message,
|
||||
});
|
||||
}
|
||||
|
||||
private _getMessages() {
|
||||
const platform = this.platforms![this._currentPlatform];
|
||||
return this.hass
|
||||
.callApi<MailboxMessage[]>("GET", `mailbox/messages/${platform.name}`)
|
||||
.then((values) => {
|
||||
const platformItems: any[] = [];
|
||||
const arrayLength = values.length;
|
||||
for (let i = 0; i < arrayLength; i++) {
|
||||
const datetime = formatDateTime(
|
||||
new Date(values[i].info.origtime * 1000),
|
||||
this.hass.locale,
|
||||
this.hass.config
|
||||
);
|
||||
platformItems.push({
|
||||
timestamp: datetime,
|
||||
caller: values[i].info.callerid,
|
||||
message: values[i].text,
|
||||
sha: values[i].sha,
|
||||
duration: values[i].info.duration,
|
||||
platform: platform,
|
||||
});
|
||||
}
|
||||
return platformItems.sort((a, b) => b.timestamp - a.timestamp);
|
||||
});
|
||||
}
|
||||
|
||||
private _computePlatforms(): Promise<any[]> {
|
||||
return this.hass.callApi<any[]>("GET", "mailbox/platforms");
|
||||
}
|
||||
|
||||
private _handlePlatformSelected(ev) {
|
||||
const newPlatform = ev.detail.selected;
|
||||
if (newPlatform !== this._currentPlatform) {
|
||||
this._currentPlatform = newPlatform;
|
||||
this.hassChanged();
|
||||
}
|
||||
}
|
||||
|
||||
private _areTabsHidden(platforms) {
|
||||
return !platforms || platforms.length < 2;
|
||||
}
|
||||
|
||||
private _getPlatformName(item) {
|
||||
const entity = `mailbox.${item.name}`;
|
||||
const stateObj = this.hass.states[entity.toLowerCase()];
|
||||
return stateObj.attributes.friendly_name;
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
haStyle,
|
||||
css`
|
||||
:host {
|
||||
-ms-user-select: initial;
|
||||
-webkit-user-select: initial;
|
||||
-moz-user-select: initial;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 16px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
ha-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ha-tabs {
|
||||
margin-left: max(env(safe-area-inset-left), 24px);
|
||||
margin-right: max(env(safe-area-inset-right), 24px);
|
||||
margin-inline-start: max(env(safe-area-inset-left), 24px);
|
||||
margin-inline-end: max(env(safe-area-inset-right), 24px);
|
||||
--paper-tabs-selection-bar-color: #fff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
.header {
|
||||
@apply --paper-font-title;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media all and (max-width: 450px) {
|
||||
.content {
|
||||
width: auto;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
color: var(--secondary-text-color);
|
||||
font-size: 14px;
|
||||
}
|
||||
.date {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-panel-mailbox": HaPanelMailbox;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
// for fire event
|
||||
interface HASSDomEvents {
|
||||
"show-audio-message-dialog": {
|
||||
hass: HomeAssistant;
|
||||
message: string;
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -7,7 +7,6 @@
|
||||
"map": "Map",
|
||||
"logbook": "Logbook",
|
||||
"history": "History",
|
||||
"mailbox": "Mailbox",
|
||||
"todo": "To-do lists",
|
||||
"developer_tools": "Developer tools",
|
||||
"media_browser": "Media",
|
||||
@ -6355,12 +6354,6 @@
|
||||
},
|
||||
"reload_lovelace": "Reload UI"
|
||||
},
|
||||
"mailbox": {
|
||||
"empty": "You do not have any messages",
|
||||
"playback_title": "Message playback",
|
||||
"delete_prompt": "Delete this message?",
|
||||
"delete_button": "Delete"
|
||||
},
|
||||
"media-browser": {
|
||||
"error": {
|
||||
"player_not_exist": "Media player {name} does not exist"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user