Enhanced Map control

This commit is contained in:
Martin Bauer
2013-09-26 21:56:32 +02:00
parent 204c8773a2
commit 11135b5592
43 changed files with 574 additions and 563 deletions

View File

@@ -135,21 +135,21 @@ $.ajaxSetup({
<section id="feature_slider" class="">
<article class="slide" id="showcasing" style="background: url('{{STATIC_URL}}/img/backgrounds/silver.jpg') repeat-x top center;">
<img class="asset left-30 sp600 t120 z1" src="{{STATIC_URL}}/img/slides/blechreiz01/gruppe.png" />
<img class="asset left-30 sp600 t120 z1" src="{{STATIC_URL}}/img/slides/gruppe.png" />
<div class="info">
<h2>Blechreiz</h2>
<h3>12 Musiker für einen guten Zweck </h3>
</div>
</article>
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/ticotico2.jpg') repeat-x top center;">
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/ticotico2.jpg') repeat-x top center;">
<div class="info">
<h2>Konzerte</h2>
<a href="features.html">Termine</a>
</div>
</article>
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/daempfer.jpg') repeat-x top center;">
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/daempfer.jpg') repeat-x top center;">
<div class="info">
<h2>Konzerte</h2>
<a href="features.html">Termine</a>
@@ -157,35 +157,35 @@ $.ajaxSetup({
</article>
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/andi.jpg') repeat-x top center;">
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/andi.jpg') repeat-x top center;">
<div class="info">
<h2>Konzerte</h2>
<a href="features.html">Termine</a>
</div>
</article>
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/andi2.jpg') repeat-x top center;">
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/andi2.jpg') repeat-x top center;">
<div class="info">
<h2>Konzerte</h2>
<a href="features.html">Termine</a>
</div>
</article>
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/applaus.jpg') repeat-x top center;">
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/applaus.jpg') repeat-x top center;">
<div class="info">
<h2>Konzerte</h2>
<a href="features.html">Termine</a>
</div>
</article>
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/eindruck.jpg') repeat-x top center;">
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/eindruck.jpg') repeat-x top center;">
<div class="info">
<h2>Konzerte</h2>
<a href="features.html">Termine</a>
</div>
</article>
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/publikum.jpg') repeat-x top center;">
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/publikum.jpg') repeat-x top center;">
<div class="info">
<h2>Konzerte</h2>
<a href="features.html">Termine</a>
@@ -193,12 +193,12 @@ $.ajaxSetup({
</article>
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/spielen2.jpg') repeat-x top center;">
<article class="slide" id="tour" style="background: url('{{STATIC_URL}}/img/slides/spielen2.jpg') repeat-x top center;">
</article>
<article class="slide" id="showcasing" style="background: url('{{STATIC_URL}}/img/backgrounds/black_red_01.jpg') repeat-x top center;">
<img class="asset left-30 sp600 t120 z1" src="{{STATIC_URL}}/img/slides/blechreiz01/tuba.png" />
<img class="asset left-30 sp600 t120 z1" src="{{STATIC_URL}}/img/slides/tuba.png" />
<div class="info">
<h2>Konzerte</h2>
<a href="features.html">Nächste Termine</a>
@@ -211,10 +211,7 @@ $.ajaxSetup({
{% block content %} {% endblock %}
<!-- footer -->
<footer id="footer">
<div class="container">

View File

@@ -0,0 +1,177 @@
{% comment %}
Displays google map with directions to next conert
Context:
Coordinates or textual adresses:
{{routeInfo.origin}}
{{routeInfo.destination}}
Event object:
{{nextConcert}}
{% endcomment %}
{% load sekizai_tags staticfiles %}
{% if hasNextConcertInfo %}
{% addtoblock "css" strip %}<link rel="stylesheet" href="{{STATIC_URL}}/css/concert_route.css" type="text/css" media="screen" />{% endaddtoblock %}
{% addtoblock "js" strip %}<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false&amp;language=de"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script type="text/javascript">
function OpenWindowControl(controlDiv, map) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.paddingTop = '6px';
// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '1px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Fenster mit Konzert Info anzeigen';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = 'Konzert Info anzeigen';
controlUI.appendChild(controlText);
google.maps.event.addDomListener(controlUI, 'click', function() {
$("#map_box").show();
});
}
function ShowTargetControl(controlDiv, map) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.paddingTop = '6px';
controlDiv.style.paddingRight = '6px';
// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '1px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Zum Zielpunkt springen';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = 'Konzertort anzeigen';
controlUI.appendChild(controlText);
var target = new google.maps.LatLng( {{routeInfo.destination}} );
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setMapTypeId( google.maps.MapTypeId.HYBRID );
map.setZoom( 19 );
map.setCenter( target );
});
}
$(document).ready(function() {
var m = $("#map")[0];
var myOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROAD,
zoomControl: false
}
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(m, myOptions);
directionsDisplay.setMap( map );
var request = {
origin: "{{routeInfo.origin}}",
destination: "{{routeInfo.destination}}",
travelMode: google.maps.DirectionsTravelMode.DRIVING
}
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var leg = response.routes[0].legs[0];
$("#route_duration").html( leg.duration.text );
$("#route_distance").html( leg.distance.text ) ;
}
});
var showInfoControlDiv = document.createElement('div');
var showInfoControl = new OpenWindowControl(showInfoControlDiv, map);
showInfoControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push( showInfoControlDiv );
var showTargetControlDiv = document.createElement('div');
var showTargetControl = new ShowTargetControl(showTargetControlDiv, map);
showTargetControlDiv.index = 2;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(showTargetControlDiv);
$("#map_box a").click( function() {
$("#map_box").hide();
});
}
);
</script>
{% endaddtoblock %}
<div id="concert_route">
<div id="map"></div>
<div id="map_box" class="row map">
<div class="container">
<div id="route_info_box" class="span5 box_wrapp">
<div class="box_cont">
<div class="head">
<h6>Fahrt zum Konzert:</h6>
</div>
Nächstes Konzert ist in {{nextConcert.location}} <br/> am {{nextConcert.date}} um {{nextConcert.time | time:"H:i" }} <br/>
{% if nextConcert.meeting_time %} Treffpunkt ist um {{ nextConcert.meeting_time | time:"H:i" }} <br/> {% endif %}
<table>
<tr> <td> Fahrzeit:</td> <td> <span id="route_duration"></span> </td> </tr>
<tr> <td> Strecke: </td> <td> <span id="route_distance"></span> </td> </tr>
</table>
<a class="btn" >Schliessen</a>
</div>
</div>
</div>
</div>
</div>
{% endif %}

View File

@@ -0,0 +1,77 @@
{% load sekizai_tags staticfiles %}
{% addtoblock "css" strip %}<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}/css/lib/animate.css" media="screen, projection">{% endaddtoblock %}
{% addtoblock "css" strip %}<link rel="stylesheet" href="{{STATIC_URL}}/css/coming-soon.css" type="text/css" media="screen" />{% endaddtoblock %}
{% if countdown %}
{% addtoblock "js" %}
<script type="text/javascript">
$(function () {
function callback(event) {
$this = $(this);
$this.find('span#'+event.type).html(event.value);
switch(event.type) {
case "seconds":
case "minutes":
case "hours":
case "days":
case "weeks":
case "daysLeft":
case "finished":
}
}
$('div#clock').countdown(new Date().valueOf() + {{ countdown.epoch }} , callback);
});
</script>
{% endaddtoblock %}
<div id="coming_soon">
<div class="head">
<div class="container">
<div class="span6 text">
<h4>Der nächste Termin:</h4>
<p>
{{countdown.event.title}} ist am {{countdown.event.date}}
um {{countdown.event.displaytime | time:"H:i" }}
in {{countdown.event.location}}
<br/>
{% if countdown.participation == "?" %}
Du hast dich noch nicht für diesen Termin eingetragen!
{% elif countdown.participation == "Yes" %}
Du hast für diesen Termin zugesagt.
{% elif countdown.participation == "No" %}
Du hast für diesen Termin abgesagt.
{%endif %}
</p>
</div>
<div class="span6 count" id="clock">
<div class="box last">
<div class="circle"> <span id="seconds"></span> </div>
<p>Sekunden</p>
</div>
<div class="box">
<div class="circle"> <span id="minutes"></span> </div>
<p>Minuten</p>
</div>
<div class="box">
<div class="circle"> <span id="hours"></span> </div>
<p>Stunden</p>
</div>
<div class="box">
<div class="circle"> <span id="days"></span> </div>
<p>Tage</p>
</div>
</div>
</div>
</div>
</div>
{% endif %}

View File

@@ -3,261 +3,14 @@
{% load sekizai_tags staticfiles %}
{% block feature_slider %}
{% addtoblock "css" %}
<style>
#eventManagement.slide .info {
position: absolute;
top: 260px;
left: 8%;
width: 24%;
display: none;
z-index: 10;
}
#eventManagement.slide .info a {
text-transform: uppercase;
color: rgb(255, 255, 255);
background: none repeat scroll 0% 0% rgb(166, 3, 3);
font-size: 25px;
font-weight: bolder;
padding: 15px 24px;
border: 0px none;
border-radius: 6px 6px 6px 6px;
transition: background 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
#eventManagement.slide .info .subtitle {
margin: 25px;
font-size: 20px;
font-style: italic;
}
#eventManagement.slide .info .subtitlebg
{
background: none repeat scroll 0% 0% rgb(243, 243, 243);
padding: 15px 24px;
border-radius: 6px 6px 6px 6px;
}
</style>
{% endaddtoblock %}
<section id="feature_slider" class="">
<article class="slide" id="eventManagement" style="background: url('{{STATIC_URL}}/img/slides/blechreiz01/andi2.jpg') repeat-x top center;">
<div class="info">
<a href="/events">Einsatzplanung</a>
<div class="subtitle subtitlebg">
{% if hasParticipationSetForAllEvents %}
Sehr gut - du hast dich für alles eingetragen
{% else %}
Du hast dich noch nicht für alle Termine eingetragen!!
{% endif %}
</div>
</div>
</article>
<article class="slide" id="eventManagement" style="background: url('{{STATIC_URL}}/img/backgrounds/silver.jpg') repeat-x top center;">
<img class="asset left-30 sp600 t120 z1" src="{{STATIC_URL}}/img/slides/blechreiz01/gruppe.png" />
<div class="info">
<a href="/messages">Forum</a>
<div class="subtitle"> Nachricht an alle schreiben... </div>
</div>
</article>
</section>
{% include "website/slider_intern_area.html" %}
{% endblock %}
{% block content %}
{% addtoblock "css" strip %}<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}/css/lib/animate.css" media="screen, projection">{% endaddtoblock %}
{% addtoblock "css" strip %}<link rel="stylesheet" href="{{STATIC_URL}}/css/coming-soon.css" type="text/css" media="screen" />{% endaddtoblock %}
{% addtoblock "css" strip %}<link rel="stylesheet" href="{{STATIC_URL}}/css/contact.css" type="text/css" media="screen" />{% endaddtoblock %}
{% if event %}
{% addtoblock "js" %}
<script type="text/javascript">
$(function () {
function callback(event) {
$this = $(this);
$this.find('span#'+event.type).html(event.value);
switch(event.type) {
case "seconds":
case "minutes":
case "hours":
case "days":
case "weeks":
case "daysLeft":
case "finished":
}
}
$('div#clock').countdown(new Date().valueOf() + {{epoch}} , callback);
});
</script>
{% endaddtoblock %}
<div id="coming_soon">
<div class="head">
<div class="container">
<div class="span6 text">
<h4>Der nächste Termin:</h4>
<p>
{{event.title}} ist am {{event.date}} um {{event.displaytime | time:"H:i" }} in {{event.location}}
<br/>
{% if participation == "?" %}
Du hast dich noch nicht für diesen Termin eingetragen!
{% elif participation == "Yes" %}
Du hast für diesen Termin zugesagt.
{% elif participation == "No" %}
Du hast für diesen Termin abgesagt.
{%endif %}
</p>
</div>
<div class="span6 count" id="clock">
<div class="box last">
<div class="circle">
<span id="seconds"></span>
</div>
<p>Sekunden</p>
</div>
<div class="box">
<div class="circle">
<span id="minutes"></span>
</div>
<p>Minuten</p>
</div>
<div class="box">
<div class="circle">
<span id="hours"></span>
</div>
<p>Stunden</p>
</div>
<div class="box">
<div class="circle">
<span id="days"></span>
</div>
<p>Tage</p>
</div>
<!-- <div class="box">
<div class="circle">
<span id="weeks"></span>
</div>
<p>Weeks</p>
</div> -->
</div>
</div>
</div>
</div>
{% endif %}
{% addtoblock "js" %}
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false&amp;language=de"></script>
<script type="text/javascript" src="{{STATIC_URL}}/js/jquery-ui-1.10.0.custom.min.js" ></script>
{% if hasNextConcertInfo %}
<script type="text/javascript">
// Kartenparameter beim Laden der Seite festlegen
$(document).ready(function() {
// Das Element für die Anzeige suchen
var m = $("#map")[0];
// Mittelpunkt der Karte
var myLatlng = new google.maps.LatLng(49.340174,10.890595);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROAD,
}
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(m, myOptions);
directionsDisplay.setMap( map );
var request = {
origin: "{{routeInfo.origin}}",
destination: "{{routeInfo.destination}}",
travelMode: google.maps.DirectionsTravelMode.DRIVING
}
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var leg = response.routes[0].legs[0];
$("#route_duration").html( leg.duration.text );
$("#route_distance").html( leg.distance.text ) ;
}
});
$("#map_box a").click( function() {
$("#map_box").hide();
});
}
);
</script>
{% endif %}
{% endaddtoblock %}
{% addtoblock "css" %}
<style>
#map {
width: 100%;
height: 480px;
}
#map_box a {
margin-top: 30px;
}
</style>
{% endaddtoblock %}
{% if hasNextConcertInfo %}
<div id="contact">
<div id="map"></div>
<div id="map_box" class="row map">
<div class="container">
<div id="route_info_box" class="span5 box_wrapp">
<div class="box_cont">
<div class="head">
<h6>Fahrt zum nächsten Konzert:</h6>
</div>
Nächstes Konzert ist in {{nextConcert.location}} am {{nextConcert.date}} um {{nextConcert.time | time:"H:i" }} <br/>
{% if nextConcert.meeting_time %} Treffpunkt ist um {{ nextConcert.meeting_time | time:"H:i" }} <br/> {% endif %}
<table>
<tr> <td> Fahrzeit:</td> <td> <span id="route_duration"></span> </td> </tr>
<tr> <td> Strecke: </td> <td> <span id="route_distance"></span> </td> </tr>
</table>
<a class="btn" >Schliessen</a>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% include "website/event_countdown.html" %}
{% include "website/concert_route.html" %}
{% endblock %}

View File

@@ -0,0 +1,99 @@
{% load sekizai_tags staticfiles %}
{% comment %}
Displays a slider linking to
/events
/messages
/addressbook
Requires context "hasParticipationSetForAllEvents"
to diplay if a user has finished the event planning
{% endcomment %}
{% addtoblock "css" %}
<style>
.slide .info {
position: absolute;
top: 260px;
left: 8%;
width: 24%;
display: none;
z-index: 10;
}
.slide .info a {
text-transform: uppercase;
color: rgb(255, 255, 255);
background: none repeat scroll 0% 0% rgb(166, 3, 3);
font-size: 25px;
font-weight: bolder;
padding: 15px 24px;
border: 0px none;
border-radius: 6px 6px 6px 6px;
transition: background 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
.slide .info .subtitle {
margin: 25px;
font-size: 20px;
font-style: italic;
}
.slide .info .subtitlebg
{
background: none repeat scroll 0% 0% rgb(243, 243, 243);
padding: 10px;
padding-top: 20px;
padding-bottom: 20px;
border-radius: 8px;
}
</style>
{% endaddtoblock %}
<section id="feature_slider" class="">
<article class="slide" id="slide_eventManagement"
style="background: url('{{STATIC_URL}}/img/slides/andi2.jpg') repeat-x top center;">
<div class="info">
<a href="/events">Einsatzplanung</a>
<div class="subtitle subtitlebg">
{% if hasParticipationSetForAllEvents %}
Sehr gut - du hast dich für alles eingetragen
{% else %}
Du hast dich noch nicht für alle Termine eingetragen!!
{% endif %}
</div>
</div>
</article>
<article class="slide" id="slide_messages" style="background: url('{{STATIC_URL}}/img/backgrounds/silver.jpg') repeat-x top center;">
<img class="asset left-30 sp600 t120 z1" src="{{STATIC_URL}}/img/slides/gruppe.png" />
<div class="info">
<a href="/messages">Forum</a>
<div class="subtitle">Nachricht an alle schreiben...</div>
</div>
</article>
<article class="slide" id="adressbook"
style="background: url('{{STATIC_URL}}/img/slides/spielen2.jpg') repeat-x top center;">
<div class="info">
<a href="/addressbook">Adressbuch</a>
<div class="subtitle subtitlebg">Geburtstage, Telefonnummern, ...</div>
</div>
</article>
</section>