prisme-flow/nodes/bridge/foursquare/foursquare.html

prisme platform flow engine

<!--
 Created by prisme.io on 09/06/2017.

 @author <a href="mailto:hello@prisme.io">savane vamara</a> (prisme.io)

-->

<script type="text/x-red" data-template-name="foursquare-credentials">
    <div id="node-config-foursquare-app-keys">
        <div class="form-row">
            <p style="margin-top: 10px;"><b>1.</b> Create your own app at
            <a href="https://foursquare.com/developers/apps" target="_blank" style="text-decoration:underline;">foursquare.com</a></p>
        </div>
        <div class="form-tips" id="node-config-foursquare-tooltip">
        </div>
        <div class="form-row">
            <p style="margin-top: 10px;"><b>2.</b> Copy the app details here:</p>
        </div>
        <div class="form-row">
            <label style="margin-left: 10px; margin-right: -10px;" for="node-config-input-client_id"><i class="fa fa-user"></i>
             Client Id</label>
            <input type="password" id="node-config-input-client_id">
        </div>
        <div class="form-row">
            <label style="margin-left: 10px; margin-right: -10px;" for="node-config-input-client_secret"><i class="fa fa-key"></i>
            Client Secret</label>
            <input type="password" id="node-config-input-client_secret">
        </div>
        <div class="form-row">
            <label>&nbsp;</label>
            <a class="btn" id="node-config-start-auth" href="#" target="_blank">
            Authenticate with Foursquare</a>
        </div>
    </div>
    <div id="node-config-foursquare-user">
        <div class="form-row">
            <label><i class="fa fa-user"></i>Foursquare User</label>
            <span id="node-config-foursquare-displayname" class="input-xlarge uneditable-input"></span>
        </div>
        <input type="hidden" id="node-config-input-displayname">
    </div>
</script>

<script type="text/javascript">
(function() {
    RED.nodes.registerType('foursquare-credentials',{
        category: 'config',
        defaults: {
            displayname: {value:""}
        },
        credentials: {
            displayname: {type:"text", required: true},
            clientid: {type:"password",required:true},
            clientsecret: {type: "password",required:true},
            accesstoken: {type: "password", required:true}
        },
        label: function() {
            return this.displayname;
        },
        exportable: false,
        oneditprepare: function() {
            var id = this.id;

            var pathname = document.location.pathname;
            if (pathname.slice(-1) != "/") {
                pathname += "/";
            }
            var callback = location.protocol + "//" +
                                  location.hostname +
                                  (location.port?":"+location.port:"")+
                                  pathname + "foursquare-credentials";
            var redirect = this._("Please configure the authorized Redirect URIs of your app to include the following url:", {callback:callback});
            $("#node-config-foursquare-tooltip").html(redirect);

            function updateFoursquareAuthButton() {
                var v1 = $("#node-config-input-client_id").val();
                var v2 = $("#node-config-input-client_secret").val();
                $("#node-config-start-auth").toggleClass("disabled",(v1.length === 0 || v2.length === 0));
            }
            $("#node-config-input-client_id").on('change keydown paste input',updateFoursquareAuthButton);
            $("#node-config-input-client_secret").on('change keydown paste input',updateFoursquareAuthButton);

            function updateFoursquareScreenName(sn) {
                $("#node-config-foursquare-app-keys").hide();
                $("#node-config-foursquare-user").show();
                $("#node-config-input-displayname").val(sn);
                $("#node-config-foursquare-displayname").html(sn);
            }

            function pollFoursquareCredentials(e) {
                $.getJSON('credentials/foursquare-credentials/'+id,function(data) {
                    if (data.displayname) {
                        $("#node-config-dialog-ok").button("enable");
                        updateFoursquareScreenName(data.displayname);
                        delete window.foursquareConfigNodeIntervalId;
                    } else {
                        window.foursquareConfigNodeIntervalId = window.setTimeout(pollFoursquareCredentials,2000);
                    }
                });
            }

            updateFoursquareAuthButton();

            if (this.displayname) {
                updateFoursquareScreenName(this.displayname);
            } else {
                $("#node-config-foursquare-app-keys").show();
                $("#node-config-foursquare-user").hide();
                $("#node-config-dialog-ok").button("disable");
            }

            $("#node-config-start-auth").mousedown(function(e) {
                var client_id = $("#node-config-input-client_id").val();
                var client_secret = $("#node-config-input-client_secret").val();
                var pathname = document.location.pathname;
                if (pathname.slice(-1) != "/") {
                    pathname += "/";
                }
                var callback = encodeURIComponent(location.protocol+"//"+location.hostname+
                    (location.port?":"+location.port:"")+
                    pathname+"foursquare-credentials/auth/callback");
                var url = 'foursquare-credentials/auth?id='+id+'&callback='+callback+'&clientid='+client_id+"&clientsecret="+client_secret;
                $(this).attr("href",url);
                window.foursquareConfigNodeIntervalId = window.setTimeout(pollFoursquareCredentials,2000);
            });
            $("#node-config-start-auth").click(function(e) {
                var key = $("#node-config-input-client_id").val();
                var secret = $("#node-config-input-client_secret").val();
                if (key === "" || secret === "") {
                    e.preventDefault();
                }
            });

        },

        oneditsave: function() {
            if (window.foursquareConfigNodeIntervalId) {
                window.clearTimeout(window.foursquareConfigNodeIntervalId);
                delete window.foursquareConfigNodeIntervalId;
            }
        },
        oneditcancel: function(adding) {
            if (window.foursquareConfigNodeIntervalId) {
                window.clearTimeout(window.foursquareConfigNodeIntervalId);
                delete window.foursquareConfigNodeIntervalId;
            }
        }

    });
})();
</script>

<!-- foursquare query node -->
<script type="text/x-red" data-template-name="foursquare">
    <div class="form-row">
        <label for="node-input-foursquare"><i class="fa fa-user"></i>Log in as</label>
        <input type="text" id="node-input-foursquare">
    </div>
    <div class="form-row">
        <label for="node-input-section">&nbsp;<i class="fa fa-filter"></i>Explore </label>
        <span>recommended</span> <select id="node-input-section" style="width:30% !important">
             <option value="empty"></option>
             <option value="food">food venues</option>
             <option value="drinks">drink venues</option>
             <option value="coffee">coffee shops</option>
             <option value="shops">shops</option>
             <option value="arts">cultural venues</option>
             <option value="outdoors">outdoor venues</option>
             <option value="sights">sights</option>
             <option value="all">venues</option>
        </select><span>nearby</span>
     </div>
    <div class="form-row">
        <label>&nbsp;</label><span>which are open</span>
        <select id="node-input-openday" style='width:50% !important'>
          <option value="today"">today</option>
          <option value="any">on any day of the week</option></select>
    </div>
    <div class="form-row">
        <label>&nbsp;</label><span>at</span>
          <select id="node-input-opentime" style='width:50% !important'>
          <option value="currenttime">the current time of day</option>
          <option value="any">any time of day</option>
        </select>
    </div>

    <div class="form-row">
        <label for="node-input-outputnumber"><i class="fa fa-sign-out"></i> <span>Output</span></label>
        <select id="node-input-outputnumber" style="width:15% !important">
             <option value="1">1</option>
             <option value="10">10</option>
             <option value="20">20</option>
             <option value="30">30</option>
             <option value="40">40</option>
             <option value="50">50</option>
        </select>
        <span>result(s) as</span>
        <select id="node-input-outputas" style='width:40% !important'>
          <option value="multiple">multiple messages</option>
          <option value="single">a single message</option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span>Name</span></label>
        <input type="text" id="node-input-name">
    </div>
</script>

<script type="text/x-red" data-help-name="foursquare">
    <p>Foursquare query node.</p>
    <p>Can be used to
    <ul>
        <li>explore recommended venues of a particular type near a given latitude and longitude </li>
    </ul></p>
    <p>The type of venue to explore can be passed in as settings on the node or as the
    <b>msg.payload.section</b> of the message input. Valid entries are:
    <ul>
       <li>food</li>
       <li>drinks</li>
       <li>coffee</li>
       <li>shops</li>
       <li>arts</li>
       <li>outdoors</li>
       <li>sights</li>
       <li>all</li>
    </ul>
    The value set on the node will take precedence over the contents of <b>msg.payload.section</b>.
    </p>
    <p>The number of results to return from the query and how to return them (either as a single message
    or as multiple messages) are settings on the node.</p>
   <p>The node sets the following properties
     <ul>
       <li><b>payload</b> - the JSON of the recommended venue</li>
       <li><b>title</b> - the name of the recommended venue</li>
       <li><b>location.lat</b> - the latitude of the recommended venue</li>
       <li><b>location.lon</b> - the longitude of the recommended venue</li>
       <li><b>location.city</b> - the city where the recommended venue is</li>
       <li><b>location.country</b> - the country where the recommended venue is</li>
       <li><b>location.name</b> - the name of the recommended venue</li>
    </ul>
    The exact location of these properties depends on the number of results chosen to be returned along
    with how to return them:
    <ul>
    <li>If the node output value is set to one then for both returning as a single message and as multiple
    messages, the node returns a msg for the first in an ordered list of recommended venues near the provided
    latitude and longitude. The returned msg has the payload, location and name properties.
    </li>
    <li>If the node output value is set to more than one to be returned as a single message
    the node sets <b>msg.payload</b>
    to be an array of <b>msg</b>'s, each one corresponding to a recommended venue and ordered according to the
    <a href="https://foursquare.com/">Foursquare</a> venues explore API.  The first element in the array is
    the most highly recommended venue and the length of the array is the output value set on the node or the
    number of venues found, whichever is smaller. Each element in this array has the payload,
   title, location and name properties.
    </li>
    <li>If the node output value is set to more than one but to be returned as a multiple then the node sends
    multiple msgs, each one representing a recommended venue.
    </ul>
    For further information about the Foursquare API see
    <a href="https://developer.foursquare.com/docs/venues/explore">Explore Recommended and Popular Venues</a>.</p>
    <p>Data provided by <a href="https://foursquare.com/">Foursquare</a>.</p>
</script>

<script type="text/javascript">
(function() {
    RED.nodes.registerType('foursquare',{
        category: 'social',
        color:"#C0DEED",
        defaults: {
            foursquare: {type:"foursquare-credentials",required:true},
            section: {value:""},
            outputnumber:{value:"1"},
            outputas:{value:"single"},
            openday:{value:"today"},
            opentime:{value:"currenttime"},
            name: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "foursquare.png",
        label: function() {
            return this.name || 'foursquare';
        }
    });
})();
</script>