Source

hokiefinder / resources / templates / index.html

Full commit
{% extends "base.html" %}

{% block title %}Hokie Finder{% endblock %}

{% block scripts %}
  <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>  
  <script type="text/javascript">
    function initialize() {
        var latlng = new google.maps.LatLng(37.229573, -80.413939);
        var myOptions = {
            zoom: 13,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.SATELLITE
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

        {% if results %}
            var contentString, infowindow, marker, latlng;
            var markers = [];
            infowindow = new google.maps.InfoWindow();
            {% for result in results %}
                latlng = new google.maps.LatLng({{ result.latitude }}, {{ result.longitude }});
                contentString = '<div id="info">'+
                    '<h1 id="firstHeading" class="firstHeading">{{ result.display_name }}</h1>'+
                    '<div id="infoBody">'+
                    '<p>{{ result.address }}</p>'+
                    {% if result.phone_number %}
                    '<p>Phone: {{ result.display_number }}</p>'+
                    {% endif %}
                    '<p>Email: {{ result.pid }}@vt.edu</p>'+
                    '<p>Major: {% if result.major %}{{ result.major }}{% else %}Not Listed{% endif %}</p>'+
                    '</div>'+
                    '</div>';
                marker = new google.maps.Marker({
                    position: latlng,
                    title: "{{ result.display_name }}"
                });
                createMarkerEvent(marker, map, contentString, infowindow);
                marker.setMap(map);
                markers.push(marker);
            {% endfor %}
        {% endif %}
    }
    function createMarkerEvent(marker, map, content, infowindow) {
        google.maps.event.addListener(marker, 'click', function(event) {
            infowindow.setContent(content)
            infowindow.open(map,marker);
        });
    }
  </script>
{% endblock %}

{% block auth_status %}
      <div id="auth_status">
        {% if user.is_authenticated %}<span id="username">{{ user.username }}</span> | <a href="/friends/">Friends</a> | <a href="/accounts/logout/">Log out</a>
        {% else %}
          <a href="/accounts/login/">Log in</a> | <a href="/accounts/add/">Register</a>
        {% endif %}
    </div>
{% endblock %}

{% block content %}
    {% if form.errors %}
        <p style="color: red;">
            Please correct the error{{ form.errors|pluralize }} below.
        </p>
    {% endif %}
    <form id="query_form" action="" method="post"> <!-- The Query Form -->
        {{ form.non_field_errors }}
        <ul>
            <li id="header">Hokie Finder</li>
            <li>{{ form.term.errors }}</li>
            <li>{{ form.term }}</li>
            <li>{{ form.filter_type.errors }}</li>
            <li>{{ form.filter_type }}</li>
            <li><input type="submit" value="Search"></li>
        </ul>
    </form>
    {% if results %}
        <div id="results">
            Found {{count}} Hokie{{results|pluralize}}
            {% if count >= 10 %}
            <button>Show 10 more</button>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}

{% block map %}
<div id="map_canvas" style="width:100%; height:100%"></div>
{% endblock %}