Skip to content

Instantly share code, notes, and snippets.

@joshualyon
Last active May 6, 2022
Embed
What would you like to do?
Parameterized Rule Custom Tile PoC
<!-- Do not edit below -->
<script type="application/json" id="tile-settings">
{
"schema": "0.1.0",
"settings": [
{"name": "url", "label": "URL", "type": "STRING"},
{"name": "remote", "label": "Remote", "type": "STRING", "default": "default"}
],
"name": "Multi Rule "
}
</script>
<!-- Do not edit above -->
<div id="app">
<div class="button-holder">
<a class="button" v-for="button in buttons" v-on:click="sendCommand(button)" v-on:long-press.native="longPress(button, $event)">
<i :class="`fa-2x fa-fw fas fa-${button.icon}`"></i>
</a>
</div>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/long-press-event"></script>
<script src="https://unpkg.com/@fortawesome/fontawesome-free@6.1.1/js/fontawesome.min.js"></script>
<script src="https://unpkg.com/@fortawesome/fontawesome-free@6.1.1/js/solid.min.js"></script>
<script src="https://cdn.sharptools.io/js/custom-tiles.js"></script>
<script>
const { createApp } = Vue
//helper method to check if a value is null or empty
let isNullOrEmpty = (value) => { return value == null || value === ""};
createApp({
data() { return {
url: "",
remote: "default", //initialized in mounted() from tile settings
buttons: [
{
label: "User",
command: "user",
longPressCommand: "userLong",
icon: "user"
},
{
label: "Space!",
command: "space",
longPressCommand: "spaceLong",
icon: "user-astronaut"
},
{
label: "Mmmm. Bacon.",
command: "bacon",
longPressCommand: "baconLong",
icon: "bacon"
},
{
label: "Not Again.",
command: "biohazard",
longPressCommand: "bioLong",
icon: "biohazard"
}
]
}},
methods: {
longPress(config, e){
e.preventDefault();
// stio.showToast(`Long Pressed ${JSON.stringify(config)}`);
this.sendCommand(config, {type: 'long-press'});
},
sendCommand(config, {type="click"}={}){
//safety check that the URL is set
if(isNullOrEmpty(this.url)){
stio.showToast("URL is not set.", "red");
return;
}
//safety check that we got a valid config object (button)
if(config == null){
stio.showToast("config is not set.", "red")
}
//show a toast with the label
stio.showToast(`${type} ${config.label}`);
//allow long-press commands
let command = config.command;
if(type === "long-press"){
if(isNullOrEmpty(config.longPressCommand)){
stio.showToast(`Long Press command not set for '${config.label}'`, "red");
return;
}
//if the longPressCommand is set, let's use it
command = config.longPressCommand;
}
//structure the command
let url = this.url + `?command=${command}&remote=${this.remote}`
//and send it
// TODO: Disable CORS since Rule Trigger doesn't support it and we don't need the content of the result
fetch(url, {mode: 'no-cors'}).then(()=>{
stio.showToast("Success!", "green");
}).catch(error=>{
stio.showToast(`Error sending ${config.label}`, "red");
})
},
},
mounted(){
console.log("mounted")
//when the stio library is ready, get the settings
stio.ready((data)=>{
console.log(data)
if(!isNullOrEmpty(data.settings.remote))
this.remote = data.settings.remote;
if(!isNullOrEmpty(data.settings.url))
this.url = data.settings.url;
});
}
}).mount('#app')
</script>
<style>
html, body { margin: 0; height: 100vh;}
#app { height: 100%; }
.button-holder {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: center;
width: 100%;
height: 100%;
}
.button {
cursor: pointer;
border: 1px solid;
padding: 2em;
margin: 0.5em;
}
a.button:hover {
background: rgba(255,255,255,0.2)
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment