templates/main/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Rate My Parking{% endblock %}
  5. {% block body %}
  7. <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWaJ2b1TAr9bscOiUQABTV3aqudLPlG9Q&callback=initMap&v=weekly" defer></script>
  9. <script type="text/javascript">
  10.     var postFilter = "new";
  12.     var initialBounds = null;
  13.     var map = null;
  14.     // Post Markers
  15.     var markerPosts = [];
  17.     jQuery.loadScript = function (url, callback) {
  18.         jQuery.ajax({
  19.             url: url,
  20.             dataType: 'script',
  21.             success: callback,
  22.             async: true
  23.         });
  24.     }
  25.     
  26.     function btnFilter(btn) {
  27.         switch (btn) {
  28.             case 1:
  29.                 postFilter = "new";
  30.                 $('#btnNewFilter').removeClass("btn-secondary");
  31.                 $('#btnNewFilter').addClass("btn-primary");
  32.                 $('#btnAllFilter').removeClass("btn-primary");
  33.                 $('#btnAllFilter').addClass("btn-secondary");
  34.                 break;
  35.             case 2:
  36.                 postFilter = "all";
  37.                 $('#btnNewFilter').removeClass("btn-primary");
  38.                 $('#btnNewFilter').addClass("btn-secondary");
  39.                 $('#btnAllFilter').removeClass("btn-secondary");
  40.                 $('#btnAllFilter').addClass("btn-primary");
  41.                 break;
  42.             default:
  43.                 postFilter = "new";
  44.                 $('#btnNewFilter').removeClass("btn-secondary");
  45.                 $('#btnNewFilter').addClass("btn-primary");
  46.                 $('#btnAllFilter').removeClass("btn-primary");
  47.                 $('#btnAllFilter').addClass("btn-secondary");
  48.                 break;
  49.         }
  50.         updateMapPosts();
  51.     }
  52.     
  53.     function updateMapPosts() {
  54.         initialBounds = map.getBounds();
  55.         
  56.         latlo = initialBounds.getSouthWest(0).lat(0);
  57.         lathi = initialBounds.getNorthEast(0).lat(0);
  58.         lonlo = initialBounds.getSouthWest(0).lng(0);
  59.         lonhi = initialBounds.getNorthEast(0).lng(0);
  60.         
  61.         //alert(latlo + " " + lathi + " " + lonlo + " " + lonhi);
  62.         
  63.         $.ajax({
  64.             type: 'POST',
  65.             url: '/data/getposts',
  66.             crossDomain: true,
  67.             dataType: "json",
  68.             data: { latlo: latlo, lathi: lathi, lonlo: lonlo, lonhi: lonhi, filter: postFilter },
  69.             success: function(responseData, textStatus, jqXHR) {
  70.                 markerPosts.forEach(function(marker) {
  71.                     marker.setMap(null);
  72.                 });
  73.                 markerPosts = [];
  74.                 if (responseData != null) {
  75.                     for (let i = 0; i < responseData.length; i++) {
  76.                         var image = responseData[i].Image;
  77.                     
  78.                         markerPosts[i] = new HTMLMapMarker({
  79.                             latlng: new google.maps.LatLng(parseFloat(responseData[i].Latitude), parseFloat(responseData[i].Longitude)),
  80.                             map: map,
  81.                             html: '<div class="asset-map-image-marker"><div class="image" style="background-image: url(' + image + ')"></div></div>',
  82.                         });
  83.                         
  84.                         markerPosts[i].addListener("click", () => {
  85.                             var url = '/data/getpost/' + responseData[i].Id;
  86.                             
  87.                             $.ajax({
  88.                                 type: 'POST',
  89.                                 url: url,
  90.                                 crossDomain: true,
  91.                                 dataType: "json",
  92.                                 success: function(imageData, imageStatus, imageXHR) {                        
  93.                                     var htmlBtn = "";
  94.                                     var htmlDiv = "";
  95.                                     for (let j = 0; j < imageData.images.length; j++) {
  96.                                         // Fill Btn Indicators Carousel HTML content
  97.                                         htmlBtn += '<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="'+j+'" ';
  98.                                         if (j == 0) htmlBtn += 'class="active" aria-current="true" ';
  99.                                         htmlBtn += 'aria-label="Slide '+j+'"></button>';
  100.                                         
  101.                                         // Fill div Inner Carousel HTML content
  102.                                         htmlDiv += '<div class="carousel-item';
  103.                                         if (j == 0) htmlDiv += ' active';
  104.                                         htmlDiv += '">';
  105.                                         htmlDiv += '<img src="'+imageData.images[j].url+'" alt="Slide '+j+'">';
  106.                                         htmlDiv += '</div>';
  107.                                     }
  108.                                     
  109.                                     if (imageData.rated == 1) {
  110.                                         $('#divRate').addClass("invisible");
  111.                                     } else {
  112.                                         $('#divRate').removeClass("invisible");
  113.                                     }
  114.                                     $('#postModalLabel').html(imageData.infraction + " - Rating: " + imageData.rating);
  115.                                     $('#btn-Carousel-Indicators').html(htmlBtn);
  116.                                     $('#div-Carousel-Inner').html(htmlDiv);
  117.                                     
  118.                                     for (let k = 1; k <= 10; k++) {
  119.                                         $("#btnRate" + k).attr("onclick", "submitRating(" + imageData.id + ", " + k + ");");
  120.                                     }
  121.                                     
  122.                                     $('#postModal').modal('show');
  123.                                 },
  124.                                 error: function(imageData, imageStatus, imageThrown) {
  125.                                     alert("alert1: " +imageThrown);
  126.                                 }
  127.                             });
  128.                         });
  129.                     }
  130.                 }
  131.             },
  132.             error: function(responseData, textStatus, errorThrown) {
  133.             }
  134.         });
  135.     }
  136.     
  137.     // Initialize and add the map
  138.     function initMap() {
  139.         // The location of Uluru
  140.         const uluru = { lat: {{ records.latitude }}, lng: {{ records.longitude }} };
  141.         
  142.         // The map, centered at Uluru
  143.         map = new google.maps.Map(document.getElementById("map"), {
  144.             zoom: 15,
  145.             center: uluru,
  146.             mapTypeId: 'satellite',
  147.             mapTypeControl: false,
  148.             rotateControl: false,
  149.             fullscreenControl: false,
  150.         });
  151.                 
  152.         $.loadScript('/js/htmlmapmarker.js', function(){
  153.             // Event Map Bounds Changed
  154.             google.maps.event.addListener(map, 'bounds_changed', function() {
  155.                 try {
  156.                     updateMapPosts();
  157.                 } catch( err ) {
  158.                     alert( "alert2: "+err );
  159.                 }
  160.             });
  161.         });
  162.     }
  163.         
  164.     function submitRating(post, rate) {
  165.         $.ajax({
  166.             type: 'POST',
  167.             url: "/data/setrate/" + post,
  168.             crossDomain: true,
  169.             dataType: "json",
  170.             data: "rate=" + rate,
  171.             success: function(imageData, imageStatus, imageXHR) {            
  172.                 var modalTitle = $('#postModalLabel').html();
  173.                 modalTitle = modalTitle.split(':')[0]
  174.                 
  175.                 $('#postModalLabel').html(modalTitle + ": " + imageData.avgrating);
  176.                 $('#divRate').addClass("invisible");
  177.             },
  178.             error: function(imageData, imageStatus, imageThrown) {
  179.                 alert("alert3: "+imageThrown);
  180.             }
  181.         });
  182.     }
  183.     
  184.     window.initMap = initMap;
  185.  </script>
  186. <div class="container-fluid h-100 position-relative">
  187.     <div class="h-100" id="map"></div>
  188.     <button id="btnNewFilter" type="button" class="btn btn-primary position-absolute" style="top: 10px; left: 25px;" onclick="btnFilter(1);">New Posts</button>
  189.     <button id="btnAllFilter" type="button" class="btn btn-secondary position-absolute" style="top: 10px; left: 135px;" onclick="btnFilter(2);">All Posts</button>
  190. </div>
  192. <!-- Modal -->
  193. <style>
  194. .modal-dialog {
  195.     height: 95% !important;
  196. }
  197. .modal-content {
  198.     height: 95%;
  199.     background-color: #495057;
  200. }
  201. .modal-body {
  202.     height: calc(95% - 120px);
  203. }
  204. .carousel, slide {
  205.     height: 100%;
  206. }
  207. .carousel-inner {
  208.     height: 100%;
  209. }
  210. .carousel-item {
  211.     height: 100%;
  212. }
  213. .carousel-item img {
  214.     height: 100%;
  215.     justify-content: center;
  216.     display: flex;
  217.     margin-right: auto;
  218.     margin-left: auto;
  219.     object-fit: contain;
  220. }
  222. </style>
  224. <div class="modal fade" id="postModal" tabindex="-1" aria-labelledby="postModalLabel" aria-hidden="true">
  225.     <div class="modal-dialog modal-xl">
  226.         <div class="modal-content">
  227.             <div class="modal-header">
  228.                 <h1 class="modal-title fs-5" id="postModalLabel">Post</h1>
  229.                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  230.             </div>
  231.             <div class="modal-body">
  232.                 <div id="carouselIndicators" class="carousel slide" data-bs-ride="true">
  233.                     <div id="btn-Carousel-Indicators" class="carousel-indicators">
  234.                         <!-- Fill by JS modal action -->
  235.                     </div>
  236.                     <div id="div-Carousel-Inner" class="carousel-inner">
  237.                         <!-- Fill by JS modal action -->
  238.                     </div>
  239.                     <button class="carousel-control-prev" type="button" data-bs-target="#carouselIndicators" data-bs-slide="prev">
  240.                         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  241.                         <span class="visually-hidden">Previous</span>
  242.                     </button>
  243.                     <button class="carousel-control-next" type="button" data-bs-target="#carouselIndicators" data-bs-slide="next">
  244.                         <span class="carousel-control-next-icon" aria-hidden="true"></span>
  245.                         <span class="visually-hidden">Next</span>
  246.                     </button>
  247.                 </div>
  248.             </div>
  249.             <div class="modal-footer">
  250.                 <div id="divRate" class="me-auto">
  251.                     <h1 class="fs-5 d-inline">Rate:</h5>
  252.                     {% for i in 1..10 %}
  253.                         <button id="btnRate{{ i }}" type="button" class="btn btn-primary d-inline" onclick="submitRating(1, {{ i }});">{{ i }}</button>
  254.                     {% endfor %}
  255.                 </div>
  256.                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  257.             </div>
  258.         </div>
  259.     </div>
  260. </div>
  261. {% endblock %}