- Testing to see how to set entity variables on KRL click events - App can be run on different pages at different times and the click count will be saved

kynetx-set-entity-var-on-click.krl.js

ruleset a60x275 {
  meta {
    name "Set entity var on click event"
    description <<
      - Testing to see how to set entity variables on KRL click events
      - App can be run on different pages at different times and the click count will be saved
    >>
    author "Mike Grace"
    logging on
  }

  dispatch {
    // not needed for bookmarklets
  }

  global {
    css <<
      #kynetx-app {
        width: 500px;
        margin: 0 auto;
      }
      #header {
        font-weight: bold;
      }
    >>;
  }

  /////////////////////////////////////
  // Setup app HTML. Structured to
  // allow for easy output of what the
  // app is doing and the status of 
  // server entity variable value
  /////////////////////////////////////
  rule setup_controls is active {
    select when pageview ".*"
    pre {
      count = ent:clicks;
      appSetup = <<
        <div id="kynetx-app">
          <div id="buttons">
            <img id="increment" src="https://mikegrace.s3.amazonaws.com/github/entity-on-click/increment.png"/>
            <img id="clear" src="https://mikegrace.s3.amazonaws.com/github/entity-on-click/clear.png" />
          </div>
          <div id="status">
            <p id="header">App activity will be output below</p>
            <p class="activity">Kynetx app initiated</p>
            <p class="activity">Click "+" to increment and broom icon to reset click count</p>
            <p class="activity">Click count is at #{count}</p>
          </div>
          <br class="clear" />
        </div>
      >>;
    }
    {
      prepend("body",appSetup);
    }
  }
  
  
  /////////////////////////////////////
  // Watch for button clicks to call 
  // action to increment or clear 
  // persistant variable saved on 
  // Kynetx server
  /////////////////////////////////////
  rule setup_event_watchers is active {
    select when pageview ".*"
    pre {
      watching = <<
        <p class="activity">Now watching for click events on #increment and #clear image elements</p>
      >>;
    }
    {
      watch("#increment", "click");
      watch("#clear", "click");
      append("#status", watching);
    }
  }
  
  /////////////////////////////////////
  // When the click event is publish 
  // for a web click on #increment,
  // increment server entity variable 
  // and output actions
  /////////////////////////////////////
  rule increment_on_click_event is active {
    select when web click "#increment"
    pre {
      count = ent:clicks;
      newCount = count + 1;
      activity = <<
        <p class="activity">You clicked increment!</p>
        <p class="activity">Click count is now at "#{newCount}"</p>
      >>;
    }
    {
      append("#status", activity);
    }
    fired {
      ent:clicks += 1 from 1;
    }
  }
  
  /////////////////////////////////////
  // When the click event is publish 
  // for a web click on #clear,
  // clear server entity variable 
  // and output actions
  /////////////////////////////////////
  rule clear_count_on_click_event is active {
    select when web click "#clear"
    pre {
      activity = <<
        <p class="activity">You clicked clear!</p>
        <p class="activity">Click count is now at "0"</p>
      >>;
    }
    {
      append("#status", activity);
    }
    fired {
      clear ent:clicks;
    }
  }
  
}