Parameterized Rule Custom Tile PoC

multiRule.html

<!-- 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>