Extend the location detail page with the new informations.

src/Hackspace/Bundle/CalciferBundle/Resources/assets/css/events.scss

@@ -42,11 +42,22 @@ form .ui.form {
   }
 }
 
-#map {
+#view-map, #map {
   height: 20rem;
+}
 
 .location-edit {
   text-decoration: none;
 }
 
+#location-description {
+  p {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .ui.section.divider {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
 }

src/Hackspace/Bundle/CalciferBundle/Resources/assets/js/events.js

@@ -46,18 +46,30 @@ jQuery(document).ready(function () {
             closable: false,
             onApprove: function () {
                 var coords = marker.getLatLng();
+                if (!(jQuery('input[name=location_lat]').val() == undefined)) {
                     jQuery('input[name=location_lat]').val(coords.lat);
                     jQuery('input[name=location_lon]').val(coords.lng);
                     jQuery('input[name=location]').css('margin-bottom', '3.2rem');
                     jQuery('span.coords').text('Folgende Koordinaten sind angegeben: lat:' + coords.lat + ', lon:' + coords.lng);
+                } else {
+                    jQuery('input[name=geocords]').val(coords.lat + ',' + coords.lng);
+                }
             },
             onDeny: function () {
 
             },
             onVisible: function () {
                 map.invalidateSize(true);
-                var lat = parseFloat(jQuery('input[name=location_lat]').val());
+                var lat = 0;
-                var lon = parseFloat(jQuery('input[name=location_lon]').val());
+                var lon = 0;
+                if (!(jQuery('input[name=location_lat]').val() == undefined)) {
+                    lat = parseFloat(jQuery('input[name=location_lat]').val());
+                    lon = parseFloat(jQuery('input[name=location_lon]').val());
+                } else {
+                    var latlon = jQuery('input[name=geocords]').val();
+                    lat = latlon.split(',')[0];
+                    lon = latlon.split(',')[1];
+                }
                 if ((lat > 0) && (lon > 0)) {
                     map.setView([lat, lon], 16);
                     var latlng = new L.LatLng(lat, lon);
@@ -70,3 +82,43 @@ jQuery(document).ready(function () {
         }).modal('attach events', '.add_geo', 'show');
     }
 });
+
+$(document).ready(function() {
+
+    if (jQuery('#view-map').length == 1) {
+        jQuery('.show_map').click(addGeoCoordinates);
+        map = L.map('view-map');
+
+        // add an OpenStreetMap tile layer
+        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(map);
+
+        map.setView([51.505, -0.09], 0);
+
+        L.Icon.Default.imagePath = '/css/images';
+        var popup = L.popup();
+
+        var marker = L.marker();
+
+        jQuery('.geo.viewer').modal('setting', {
+            closable: true,
+            onDeny: function () {
+
+            },
+            onVisible: function () {
+                map.invalidateSize(true);
+                var lat = $('#view-map').data('lat');
+                var lon = $('#view-map').data('lon');
+                if ((lat > 0) && (lon > 0)) {
+                    map.setView([lat, lon], 16);
+                    var latlng = new L.LatLng(lat, lon);
+                    marker.setLatLng(latlng);
+                    marker.addTo(map);
+                } else {
+                    map.locate({setView: true});
+                }
+            }
+        }).modal('attach events', '.show_map', 'show');
+    }
+});

src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/index.html.twig

@@ -3,6 +3,7 @@
 {% block css %}
     {% stylesheets filter="compass"
         "@CalciferBundle/Resources/assets/css/events.scss"
+    "@CalciferBundle/Resources/assets/css/leaflet.scss"
     %}
         <link rel="stylesheet" href="{{ asset_url }}" />
     {% endstylesheets %}
@@ -11,6 +12,7 @@
 {% block javascripts %}
     {% javascripts
     "@CalciferBundle/Resources/assets/js/events.js"
+    "@CalciferBundle/Resources/assets/js/leaflet.js"
     %}
     <script src="{{ asset_url }}"></script>
     {% endjavascripts %}
@@ -22,8 +24,44 @@
             <h1>
                 Termine
                 {% if tag|default(false) %} für Tag „{{ tag.name }}“{% endif %}
-                {% if location|default(false) %} für Ort „{{ location.name }}“{% endif %}
+                {% if location|default(false) %} für Ort „{{ location.name }}“ <a class="location-edit" href="{{ path("location_edit",{slug:location.slug}) }}"><i class="ui icon edit inverted green circular link"></i> </a> {% endif %}
             </h1>
+            {% if location|default(false) %}
+                {% if (location.description|length > 0) or location.hasAddress() %}
+                    <div id="location-description" class="ui message green">
+                        {% if (location.description|length > 0) %}
+                            <p>{{ location.description|markdown }}</p>
+                        {% endif %}
+                        {% if (location.hasAddress()) %}
+                            <div class="ui section divider"></div>
+                            <p>
+                                Anschrift:<br/>
+                                {{ location.streetaddress }}{% if(location.streetnumber|length > 0) %} {{ location.streetnumber }}{% endif %}<br/>
+                                {% if(location.zipcode|length > 0) %}{{ location.zipcode }} {% endif %}{{ location.city }}
+                            </p>
+                        {% endif %}
+                        {% if ((location.lon > 0) and (location.lat > 0)) %}
+                            <p><a href="" class="show_map">Auf einer OpenStreetMap-Karte anzeigen</a></p>
+                            <div class="ui modal geo viewer">
+                                <i class="close icon"></i>
+                                <div class="header">
+                                    {{ location.name }}<br/>
+                                    {{ location.streetaddress }}{% if(location.streetnumber|length > 0) %} {{ location.streetnumber }}{% endif %}<br/>
+                                    {% if(location.zipcode|length > 0) %}{{ location.zipcode }} {% endif %}{{ location.city }}
+                                </div>
+                                <div class="content">
+                                    <div id="view-map" data-lat="{{ location.lat }}" data-lon="{{ location.lon }}"></div>
+                                </div>
+                                <div class="actions">
+                                    <div class="ui button ok">
+                                        Schließen
+                                    </div>
+                                </div>
+                            </div>
+                        {% endif %}
+                    </div>
+                {% endif %}
+            {% endif %}
         </div>
     </div>