The idea is to integrate a dynamic layout which builds upon reading the JSON. Right now I already have the Websocket up & running, figured out how to call HA to give a list of all my services and use these credentials to control my Spotify (mainly as a test for the websocket connection).
Here’s my issue. To control Spotify I have a simple <button>
which calls a function playButtonSpotify. This function contains:
function playButtonSpotify() {
ws.send(JSON.stringify({
"id": incrementedCallId(),
"type": "call_service",
"domain": "media_player",
"service": "media_play_pause",
"service_data": {
"entity_id": "media_player.spotify_my_username"
}
}));
}
This works…
But I’m lazy and don’t want to recreate this piece of code for every media player and I also want to be able to use one Vue component for every media player.
Does anybody know if it’s possible to create a button in a Vue app which calls the HA services list (already figured this out) (1) saves this list in a JSON file (2) loops over this list to (3) dynamically create my layout?
I know this is a big question, and I’m not necessarily asking to help me out with writing all of this. I would be very happy with somebody pointing me towards the right tutorials, plugins or parts of Vue.
Thanks in advance!