lookyloo/website/web/templates/scrape.html

{% extends "main.html" %}
{% block title %}Scrape{% endblock %}

{% block content %}
<div class="container">
  <h1>Scrape a page</h1>

    <form class="form-inline" role="form" action="scrape" method=post>
        <div class="form-group">
            <label for="url">URL to scrape:</label>
            <input type="text" class="form-control" name="url" id=url placeholder="URL to scrape">
            <label for="depth">Depth:</label>
            <select class="form-control" name="depth" id=depth>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
            </select>
            <label for="listing">Public</label>
            <input type="checkbox" name="listing" checked="true"></input>
        </div>
        <label for="os">Choose an operating system</label>
        <select class="form-control" name="os" id="os">
            {% for os in user_agents.keys() %}
                <option value="{{ os }}">{{ os }}</option>
            {% endfor%}
        </select>
        {% for os, browsers in user_agents.items() %}
        <div id="{{os.replace(' ', '_')}}" class="style-sub-1" {% if loop.index0 != 0 %}style="display: none;"{%endif%}>
            <select class="form-control" name="browser">
                {% for browser in browsers.keys()%}
                <option value="{{ browser }}">{{ browser }}</option>
                {% endfor%}
            </select>
        </div>
            {% set outer_loop = loop %}
            {% for browser, user_agents in browsers.items()%}
            <div id="{{os.replace(' ', '_')}}_{{browser.replace(' ', '_')}}" class="style-sub-2" {% if not loop.first or not outer_loop.first %} style="display: none;"{%endif%}>
                <select class="form-control" name="user_agent">
                    {% for user_agent in user_agents %}
                    <option value="{{ user_agent }}" >{{ user_agent }}</option>
                    {% endfor%}
                </select>
            </div>
            {% endfor%}
        {% endfor%}
        <button type="submit" class="btn btn-default">Scrape</button>
    </form>
</div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script>
        $("#os").change(function(){
           var os_name = $(this).find(":selected").val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_");
           var first_browser_name = $("[id='" + os_name + "']").find('select option:first-child').val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_");
           // Hide and disable everything
           $(".style-sub-1").hide();
           $(".style-sub-1 > select").attr('disabled', true);
           $(".style-sub-2").hide();
           $(".style-sub-2 > select").attr('disabled', true);

           $("[id='" + os_name + "']").show();
           $("[id='" + os_name + "'] > select").removeAttr('disabled');
           $("[id='" + os_name + '_' + first_browser_name + "']").show();
           $("[id='" + os_name + '_' + first_browser_name + "'] > select").removeAttr('disabled');
        });
        $('select[name="browser"]').change(function(){
           var browser_name = $(this).find(":selected").val().replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_");
           var os_name = $(this).parent().attr("id").replace(/(:|\.|\[|\]|,|=)/g, "\\$1").replace(/ /g,"_");

           // Hide what makes sense
           $(".style-sub-2").hide();
           $(".style-sub-2 > select").attr('disabled', true);

           $("[id='" + os_name + '_' + browser_name + "']").show();
           $("[id='" + os_name + '_' + browser_name + "'] > select").removeAttr('disabled');
        });
    </script>
{% endblock %}