gmaps key, small fixes

rizk/egypt/views.py

@@ -5,6 +5,7 @@ from django.shortcuts import get_object_or_404
 from oxdjango.shortcuts import render_to_json_response
 from django.core.mail import send_mail
 from models import *
+from settings import GOOGLE_MAPS_API_KEY as gkey
 
 QUESTIONS = {
   '1problems': 'What problems do flyover and skywalk projects create?',
@@ -24,7 +25,7 @@ def geojson(request):
     
 def index(request):
   events = Event.objects.all().order_by('start_time')
-  return render_to_response('rizk.html', {'events': events})
+  return render_to_response('rizk.html', { 'events': events, 'google_key': gkey })
 
 def flyover(request):
   i = request.GET['id']

rizk/static/css/rizk.css

@@ -77,6 +77,14 @@ a img {
   color: red;
 }
 
+.event {
+  cursor: pointer;
+}
+
+.eventSelected {
+  color: blue;
+}
+
 .videoCategory {
   background: #ff6066;
 }

rizk/static/js/rizk.js

@@ -90,7 +90,14 @@ $(function() {
 
   $('.event').click(function(e) {
 //    e.stopPropagation();
+    if ($(this).hasClass('eventSelected')) {
+      return false;
+    } else {
+      $('.eventSelected').removeClass('eventSelected');
+      $(this).addClass('eventSelected');
+    }
     var eventId = $(this).data('id');
+    $('#media').html("Loading...");
     $.getJSON("eventMedia", {'id': eventId}, function(data) {
 //      console.log(data);
       displayMedia(data);
@@ -109,7 +116,13 @@ function displayMedia(data) {
 }
 
 function onFeatureSelect(f) {
+  if (currentlySelectedFeature == f) {
+    return false;
+  } else {
+    currentlySelectedFeature = f;
+  }
   var id = f.feature.attributes.id;
+  $('#media').html("Loading...");
   $.getJSON("locationMedia", {'id': f.feature.attributes.id }, function(data) {
     displayMedia(data);
   });

rizk/templates/rizk.html

@@ -11,7 +11,7 @@
   <script type="text/javascript" src="/static/js/jquery.js"></script>
   <script type="text/javascript" src="/static/js/jquery.colorbox-min.js"></script>
   <script type="text/javascript" src="/static/js/openlayers/OpenLayers.js"></script>
-  <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAsn1j-ZGGtRgZ9aMJPCZbRxTEwe8r4EmncxniwLCEI2F-aeUoNRTBAUi3uvVAsZpLkcO78Ryd18Hfaw'></script>
+  <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key={{ google_key }}'></script>
 
   <script type="text/javascript" src="/static/js/rizk.js"></script>
 
@@ -77,8 +77,8 @@
     <div id="timeline">
       {% for e in events %}
         <div class="event" data-id="{{ e.id }}" id="event_{{ e.id }}">
-          {{ e.name }} <br />
-          {{ e.start_time }} - {{ e.end_time }}
+          <div class="eventName">{{ e.name }}</div> <br />
+          <div class="eventDate">{{ e.start_time }} - {{ e.end_time }}</div>
           <div class="eventDescription">
             {{ e.description }}
           </div>