
{% load splunkmvc %}

<!DOCTYPE html>
<html>
    <head>
        <title>Splunk Application Framework Quick Start</title>
        <!-- Bootstrap -->
        <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}splunkjs/css/bootstrap.css"/>
        <link href="{{STATIC_URL}}quickstartfx/css/style.css" rel="stylesheet" type="text/css" media="screen">
        <link href="{{STATIC_URL}}quickstartfx/css/prettify.css" rel="stylesheet" type="text/css" media="screen">
        <script type="text/javascript" src="{{STATIC_URL}}quickstartfx/js/prettify.js"></script>
        <script type="text/javascript" src="{{STATIC_URL}}quickstartfx/js/jquery-1.8.2.min.js"></script>

        <style type="text/css">
            #example-map {
                height: 400px;
                width: 600px;
                margin-top: 40px;
                margin-bottom: 10px; 
            }
        </style>
    </head>
    <body onload="prettyPrint();">
        <div id="splunk-bar"></div>
        <div id="container">
            <div class="progress-buttons">
                <a href="{% url 'quickstartfx:steps' id='addMap' %}" class="btn">Back</a>
                <a href="{% url 'quickstartfx:steps' id='nextSteps' %}" class="btn btn-next btn-success">Next</a>
            </div>
            <h1>Splunk Application Framework Quick Start</h1>
            <div class="row" id="content-container">
                <div class="span23" id="main">
                        <h2>Add interactivity</h2>
                        <p>The Splunk Application Framework makes it easy to add interactivity to an app using JavaScript. Web developers who are familiar with JavaScript programming will feel right at home.</p>
                        <!-- <ul class="nav nav-tabs" id="main-tabs">
                            <li class="active">
                                <a href="#">Regular</a>
                            </li>
                            <li>
                                <a href="#">splunkjs.Async</a>
                            </li>
                        </ul> -->
                        <div class="well well-white" id="well-main">
                            
                            <h3>Make an interactive map and table</h3>
                            <p>The following example creates a <b>GoogleMap</b> and a <b>Table</b> view, binds them to the same search manager, and uses JavaScript to listen to click events on the table. When a map marker is clicked, the table is updated to show data about the corresponding event.</p>

                            {% googlemap id="example-map" managerid="mapsearch" %}

                            <h4>Event data:</h4>
                            {% table id="example-table" managerid="tablesearch" count="1" %}

                            {% searchmanager id="tablesearch" search="| inputlookup earthquakes.csv | rename Lat as lat Lon as lng | fields lat lng Magnitude | head 1" preview=True cache=True %}

                            {% searchmanager id="mapsearch" search="| inputlookup earthquakes.csv | rename Lat as lat Lon as lng | fields lat lng Magnitude | head 1" preview=True cache=True %}
                            </br>
                            </br>
                            <p>This map, table, and search are declared with template tags:</p>

<pre class="prettyprint linenums">
&#123;% googlemap id="example-map" managerid="geosearch" %&#125;

&#123;% table id="example-table" managerid="geosearch" count="5" %&#125;

&#123;% searchmanager id="geosearch" search="| inputlookup earthquakes.csv | rename Lat as lat Lon as lng | stats count by lat, lng" preview=True cache=True autostart=True %&#125; 
</pre>
                        <p>With JavaScript, the map and table are selected through the <b>splunkjs.mvc</b> object and a click handler is attached to the table. When a row in the table is clicked, the previous selection is cleared and a new marker is added to the map.</p>
<pre class="prettyprint linenums">
var table= splunkjs.mvc.Components.getInstance("example-table");
var exampleMap= splunkjs.mvc.Components.getInstance("example-map");

var marker = null;
table.on("click:row", function(e){
    e.preventDefault();

    var lng = parseFloat(e.model.get("lng"));
    var lat = parseFloat(e.model.get("lat"));
    var latlng = new google.maps.LatLng(lat, lng);
    if(marker) marker.setMap(null);
    marker = new google.maps.Marker({
        position: latlng,
        map: exampleMap.map
    }); 
});
</pre>
                        </div>           
                </div>
                <div class="span9 offset1" id="sidebar">
                    <div class="well well-white">
                        <ul class="nav nav-list ">
                            <li class="nav-header">Quick Start</li>
                            <li><a href="{% url 'quickstartfx:steps' id='createApp' %}">Create an app</a></li>
                            <li><a href="{% url 'quickstartfx:steps' id='addSearch' %}">Add a search</a></li>
                            <li><a href="{% url 'quickstartfx:steps' id='addResultTable' %}">Add search results to table</a></li>
                            <li><a href="{% url 'quickstartfx:steps' id='addMap' %}">Map your results</a></li>
                            <li class="active"><a href="{% url 'quickstartfx:steps' id='addInteractivity' %}">Add interactivity</a></li>
                            <li><a href="{% url 'quickstartfx:steps' id='nextSteps' %}">Next steps</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="progress-buttons">
                <a href="{% url 'quickstartfx:steps' id='addMap' %}" class="btn">Back</a>
                <a href="{% url 'quickstartfx:steps' id='nextSteps' %}" class="btn btn-next btn-success">Next</a>
            </div>
            <div style="clear: both;"></div>
        </div>

        {% component_loader %}

        <script type="text/javascript">
            require(["splunkjs/ready!"], function(mvc) {
            var table= splunkjs.mvc.Components.getInstance("example-table");
            var exampleMap= splunkjs.mvc.Components.getInstance("example-map");

            var marker = null;
            table.on("click:row", function(e) {
                e.preventDefault();
                
                var lng = parseFloat(e.model.get("lng"));
                var lat = parseFloat(e.model.get("lat"));
                var latlng = new google.maps.LatLng(lat, lng);
                if(marker) marker.setMap(null);
                marker = new google.maps.Marker({
                    position: latlng,
                    map: exampleMap.map
                }); 
            });
            });
        </script>     
    </body>
</html>
