Skip to content

Commit

Permalink
Merge pull request #54 from cgiesche/streamdeck-homeassistant-52
Browse files Browse the repository at this point in the history 
Re-integrated config page into streamdeck gui.
  • Loading branch information
@cgiesche
cgiesche committed Sep 2, 2021
2 parents 5f8cd1c + 64926c8 commit eac8214
Show file tree
Hide file tree
Showing 4 changed files with 181 additions and 167 deletions.
2 changes: 1 addition & 1 deletion public/pi.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<meta content=black name=apple-mobile-web-app-status-bar-style>
<title>HomeAssistant Plugin PI</title>
</head>
<body>
<body style="background-color: #2D2D2D">
<div id="pi"></div>
</body>
</html>
340 changes: 177 additions & 163 deletions src/Pi.vue
View file
Original file line number Diff line number Diff line change
@@ -1,182 +1,192 @@
<template>
<div class="container">
<p>Settings should open in a separate window!</p>

<window-portal ref="portal" open>
<div class="container mt-3">

<b-form>
<h2>Home Assistant Settings</h2>

<div>
<b-form-group
label="Home Assistant Server URL"
description="example: ws://localhost:8123/api/websocket"
label-for="serverUrl"
:state="serverUrlState">
<b-form-input id="serverUrl" v-model="serverUrl" :state="serverUrlState" trim required></b-form-input>
</b-form-group>
</div>

<div>
<b-form-group
label="Access-Token"
description="To find out how to obtain a Token, please visit https://developers.home-assistant.io/docs/auth_api/#long-lived-access-token"
label-for="accessToken"
:state="accessTokenState">
<b-form-input type="password" id="accessToken" v-model="accessToken" :state="accessTokenState" trim
required></b-form-input>
</b-form-group>
</div>

<p class="text-danger" v-if="haError">{{ haError }}</p>

<div>
<b-button id="btnSave" v-on:click="saveGlobalSettings" v-bind:disabled="isHaSettingsComplete">Save
</b-button>
</div>
</b-form>

<hr>

<b-form v-if="haConnected">
<h2>Entity Settings</h2>

<b-form-group
label="Domain"
label-for="domain"
description="The domain of the entity you want to configure">
<b-form-select id="domain" v-on:change="service = null; entity = null" v-model="domain"
:options="availableDomains"></b-form-select>
</b-form-group>

<b-form-group
label="Entity"
label-for="entity"
description="The id of the entity you want to configure">
<b-form-select id="entity" v-on:change="service = null" v-model="entity" :options="domainEntities"
value-field="value.entityId"
text-field="value.name"></b-form-select>
</b-form-group>

<b-form-group
label="Service"
label-for="service"
description="(Optional) Service that should be called when the stream deck button is pushed."
v-if="domainServices.length > 0">
<b-input-group>
<b-form-select id="service" v-model="service" :options="domainServices" value-field="serviceId"
text-field="serviceId"></b-form-select>
<b-input-group-append>
<b-button v-on:click="service = null">Clear</b-button>
</b-input-group-append>
</b-input-group>
</b-form-group>

<b-form-group
label="Service Data JSON"
label-for="serviceData"
description="(Optional) Service data that will be sent with the service call. If not specified in the JSON-Object, the attribute 'entity_id' will be added automatically."
:invalid-feedback="serviceDataFeedback"
:state="!serviceDataFeedback"
v-if="service">
<b-form-textarea
id="serviceData"
v-model="serviceData"
rows="3"
:state="!serviceDataFeedback"
></b-form-textarea>
</b-form-group>

<b-form-group
label="Service (long press)"
label-for="serviceLongPress"
description="(Optional) Service that should be called when the stream deck button is pushed for longer than 300ms."
v-if="domainServices.length > 0">
<b-input-group>
<b-form-select id="serviceLongPress" v-model="serviceLongPress" :options="domainServices"
value-field="serviceId"
text-field="serviceId"></b-form-select>
<b-input-group-append>
<b-button v-on:click="serviceLongPress = null">Clear</b-button>
</b-input-group-append>
</b-input-group>
</b-form-group>

<b-form-group
label="Service (long press) Data JSON"
label-for="serviceDataLongPress"
description="(Optional) Service data that will be sent with the service call. If not specified in the JSON-Object, the attribute 'entity_id' will be added automatically."
:invalid-feedback="serviceDataLongPressFeedback"
:state="!serviceDataLongPressFeedback"
v-if="serviceLongPress">
<b-form-textarea
id="serviceDataLongPress"
v-model="serviceDataLongPress"
rows="3"
:state="!serviceDataLongPressFeedback"
></b-form-textarea>
</b-form-group>

<b-form-checkbox
id="chkButtonTitle"
v-model="useCustomTitle">Enable custom button title
</b-form-checkbox>

<div v-if="useCustomTitle">
<p class="text-danger">You have to clear the main title in the main stream deck window to make this title
template work.</p>
<b-form-group
label-for="buttonTitle"
:description="'Available variables: ' + entityAttributes">
<b-form-input
id="textarea"
v-model="buttonTitle"
></b-form-input>
</b-form-group>
</div>

<b-form-checkbox
id="chkUsebuttonTitle"
v-if="!useStateImagesForOnOffStates"
v-model="useCustomButtonLabels">Enable custom labels
</b-form-checkbox>

<div v-if="useCustomButtonLabels">
<b-form-group
label-for="buttonLabels"
:description="'Available variables: ' + entityAttributes">
<b-form-textarea
id="buttonLabels"
v-model="buttonLabels"
rows="4" max-rows="4"
<div class="container p-1">

<b-form>
<h5>Server Settings</h5>

<div>
<b-form-group
label="Home Assistant Server URL"
description="example: ws://localhost:8123/api/websocket"
label-for="serverUrl"
:state="serverUrlState">
<b-form-input size="sm" id="serverUrl" v-model="serverUrl" :state="serverUrlState" trim
required></b-form-input>
</b-form-group>
</div>

<div>
<b-form-group
label="Access-Token"
label-for="accessToken"
:state="accessTokenState">
<b-form-input size="sm" type="password" id="accessToken" v-model="accessToken" :state="accessTokenState" trim
required></b-form-input>
<b-form-text>Long-lived access tokens can be created using the "Long-Lived Access Tokens" section at the
bottom of a user's Home Assistant profile page. Source: <a
href='https://developers.home-assistant.io/docs/auth_api/#long-lived-access-token'>Home Assistant
documentation</a>.
</b-form-text>
</b-form-group>
</div>

<p class="text-danger" v-if="haError">{{ haError }}</p>

<div>
<b-button size="sm" id="btnSave" v-on:click="saveGlobalSettings" v-bind:disabled="isHaSettingsComplete">Save and
(re)connect
</b-button>
</div>
</b-form>

<hr>

<b-form v-if="haConnected">
<h5>Entity Settings</h5>

<b-form-group
label="Domain"
label-for="domain"
description="The domain of the entity you want to configure">
<b-form-select size="sm" id="domain" v-on:change="service = null; entity = null" v-model="domain"
:options="availableDomains"></b-form-select>
</b-form-group>

<b-form-group
label="Entity"
label-for="entity"
description="The id of the entity you want to configure">
<b-form-select size="sm" id="entity" v-on:change="service = null" v-model="entity" :options="domainEntities"
value-field="value.entityId"
text-field="value.name"></b-form-select>
</b-form-group>

<b-form-group
label="Service"
label-for="service"
description="(Optional) Service that should be called when the stream deck button is pressed."
v-if="domainServices.length > 0">
<b-input-group>
<b-form-select size="sm" id="service" v-model="service" :options="domainServices" value-field="serviceId"
text-field="serviceId"></b-form-select>
<b-input-group-append>
<b-button size="sm" v-on:click="service = null">Clear</b-button>
</b-input-group-append>
</b-input-group>
</b-form-group>

<b-form-group
label="Service Data JSON"
label-for="serviceData"
description="(Optional) Service data that will be sent with the service call. If not specified in the JSON-Object, the attribute 'entity_id' will be added automatically."
:invalid-feedback="serviceDataFeedback"
:state="!serviceDataFeedback"
v-if="service">
<b-form-textarea
size="sm"
id="serviceData"
v-model="serviceData"
rows="3"
:state="!serviceDataFeedback"
></b-form-textarea>
</b-form-group>

<b-form-group
label="Service (long press)"
label-for="serviceLongPress"
description="(Optional) Service that will be called when the stream deck button is pressed and held for longer than 300ms."
v-if="domainServices.length > 0">
<b-input-group>
<b-form-select size="sm" id="serviceLongPress" v-model="serviceLongPress" :options="domainServices"
value-field="serviceId"
text-field="serviceId"></b-form-select>
<b-input-group-append>
<b-button size="sm" v-on:click="serviceLongPress = null">Clear</b-button>
</b-input-group-append>
</b-input-group>
</b-form-group>

<b-form-group
label="Service (long press) Data JSON"
label-for="serviceDataLongPress"
description="(Optional) Service data that will be sent with the service call. If not specified in the JSON-Object, the attribute 'entity_id' will be added automatically."
:invalid-feedback="serviceDataLongPressFeedback"
:state="!serviceDataLongPressFeedback"
v-if="serviceLongPress">
<b-form-textarea
size="sm"
id="serviceDataLongPress"
v-model="serviceDataLongPress"
rows="3"
:state="!serviceDataLongPressFeedback"
></b-form-textarea>
</b-form-group>

<b-form-checkbox
size="sm"
id="chkButtonTitle"
v-model="useCustomTitle">Enable custom button title
</b-form-checkbox>

<div v-if="useCustomTitle">
<p class="text-danger">You have to clear the main title in the main stream deck window to make this title
template work.</p>
<b-form-group
label-for="buttonTitle"
:description="'Available variables: ' + entityAttributes">
<b-form-input
size="sm"
id="textarea"
v-model="buttonTitle"
></b-form-input>
</b-form-group>
</div>

<b-form-checkbox
size="sm"
id="chkUsebuttonTitle"
v-if="!useStateImagesForOnOffStates"
v-model="useCustomButtonLabels">Enable custom labels
</b-form-checkbox>

<div v-if="useCustomButtonLabels">
<b-form-group
label-for="buttonLabels"
:description="'Available variables: ' + entityAttributes">
<b-form-textarea
size="sm"
id="buttonLabels"
v-model="buttonLabels"
rows="4" max-rows="4"
placeholder="Line 1 (may overlap with icon)
Line 2 (may overlap with icon)
Line 3
Line 4 (may overlap with title)">
</b-form-textarea>
</b-form-group>
</div>
</b-form-textarea>
</b-form-group>
</div>

<div>
<b-button id="btnActionSave" v-on:click="saveSettings" v-bind:disabled="!domain">Save</b-button>
</div>
<b-form-checkbox
size="sm"
id="chkEnableServiceIndicator"
v-model="enableServiceIndicator">Show visual service indicator
</b-form-checkbox>

</b-form>
</div>
</window-portal>
<b-button size="sm" id="btnActionSave" v-on:click="saveSettings" v-bind:disabled="!domain">Save entity config
</b-button>

</b-form>
</div>
</template>

<script>
import StreamDeck from "@/modules/common/streamdeck";
import {ObjectUtils} from "@/modules/common/utils";
import {Entity, Homeassistant} from "@/modules/common/homeassistant";
import WindowPortal from "@/components/WindowPortal";
export default {
name: 'Pi',
components: {WindowPortal},
components: {},
props: {},
data: () => {
return {
Expand All @@ -198,6 +208,7 @@ export default {
useStateImagesForOnOffStates: false, // determined by action ID (manifest)
useCustomButtonLabels: false,
buttonLabels: "",
enableServiceIndicator: true,
availableDomains: [],
availableEntities: [],
Expand All @@ -209,7 +220,7 @@ export default {
haError: ""
}
},
created() {
created: function () {
window.connectElgatoStreamDeckSocket = (inPort, inPropertyInspectorUUID, inRegisterEvent, inInfo, inActionInfo) => {
this.$SD = new StreamDeck(inPort, inPropertyInspectorUUID, inRegisterEvent, inInfo, inActionInfo);
Expand Down Expand Up @@ -245,6 +256,8 @@ export default {
this.serviceDataLongPress = actionSettings["serviceLongPress"].data
}
this.enableServiceIndicator = actionSettings["enableServiceIndicator"] || actionSettings["enableServiceIndicator"] === undefined;
this.useCustomTitle = actionSettings["useCustomTitle"]
this.buttonTitle = actionSettings["buttonTitle"] || "{{friendly_name}}"
Expand Down Expand Up @@ -399,6 +412,7 @@ export default {
buttonTitle: this.buttonTitle,
useStateImagesForOnOffStates: this.useStateImagesForOnOffStates, // determined by action ID (manifest)
enableServiceIndicator: this.enableServiceIndicator,
useCustomButtonLabels: this.useCustomButtonLabels,
buttonLabels: this.buttonLabels
}
Expand Down
Loading

0 comments on commit eac8214

Please sign in to comment.