API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 27th, 2018
67
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Python 15.43 KB | None | 0 0
raw download clone embed print report
  1.  
  2. {% extends 'base_logged.html' %}
  3.  
  4. {% block content %}
  5.  
  6.  <!-- The Modal -->
  7.  <div class="modal" id="myModal" style="border: none;" >
  8.     <div class="modal-dialog">
  9.       <div class="modal-content"  style="background-color: #F7D388;">
  10.      
  11.         <!-- Modal Header -->
  12.         <div class="modal-header" style="border: none; background-color: #FAC555; padding-top: 0; padding-left: 2vw;">
  13.           <h3 style ="text-shadow: 0.2vw 0.3vh #F7D388;">Rate your ride!</h3>
  14.           <button type="button" class="close" data-dismiss="modal">&times;</button>
  15.         </div>
  16.        
  17.         <!-- Modal body -->
  18.         <div class="modal-body" >
  19.           <center>
  20.               <br>
  21.                 <div class="star-rating">
  22.                         <span class="fa fa-star-o" data-rating="1"></span>
  23.                         <span class="fa fa-star-o" data-rating="2"></span>
  24.                         <span class="fa fa-star-o" data-rating="3"></span>
  25.                         <span class="fa fa-star-o" data-rating="4"></span>
  26.                         <span class="fa fa-star-o" data-rating="5"></span>
  27.                         <input type="hidden" name="whatever1" class="rating-value" value="2.56">
  28.                 </div>
  29.           </center>
  30.         </div>
  31.        
  32.         <!-- Modal footer -->
  33.         <div class="modal-footer" style="border: none;">
  34.           <form method="GET" class="grade-form">
  35.           <input id="grade" name="grade" type="hidden" value="2">
  36.             {% csrf_token %}
  37.             <center>
  38.                  <button type = "submit" value="grade" name="finish" class="btn">CONTINUE</button>
  39.             </center>  
  40.  
  41.             </form>
  42.         </div>
  43.        
  44.       </div>
  45.     </div>
  46.   </div>
  47.  
  48. <div class="history">
  49.  
  50. <div class="container" style = "padding-left: 0; margin-left: 0;">
  51.     <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="0" style="width: 70vw;">
  52.         <div class="carousel-inner" >
  53.             <!--new carousel page-->
  54.             {% if recent_ride_status == 'SET_BY_PASSENGER' or recent_ride_status == 'ACCEPTED' %}
  55.             <div class="carousel-item active" >
  56.                     <div class="title">
  57.                             Current ride:
  58.                     </div>
  59.  
  60.                     {% for ride in rides_history %}
  61.                     {% if ride.status == 'SET_BY_PASSENGER' or ride.status == 'ACCEPTED' %}
  62.                    
  63.                     <div class="container" style = "background-color: rgba(112, 128, 144, 0.164); font-size: 3vh; width: 55vw; text-align: center;">
  64.                    
  65.                     <div class="row" style="width: 55vw; border-bottom: 1px solid rgba(53, 61, 68, 0.322);">
  66.                         <div class="col" style = "font-size: 2vh;">
  67.                             STATUS:
  68.                         </div>
  69.                     </div>
  70.                     <div class="row" style="width: 55vw; height: 7vh;">
  71.                         <div class="col">
  72.                             {{ ride.status }}
  73.                         </div>
  74.                     </div>
  75.  
  76.                     <div class="row" style="width: 55vw; border-bottom: 1px solid rgba(53, 61, 68, 0.322);">
  77.                         <div class="col" style = "font-size: 2vh;">
  78.                             START:
  79.                         </div>
  80.                     </div>
  81.                     <div class="row" style="width: 55vw; height: 7vh;">
  82.                         <div class="col">
  83.                             <p id = "pickup"></p>
  84.  
  85.                             <script type="text/javascript">
  86.                                 var geocoder = new google.maps.Geocoder();                          
  87.                                 var latLng = new google.maps.LatLng(parseFloat("{{ ride.pickup_latitude }}"), parseFloat("{{ ride.pickup_longitude }}"));
  88.                                 geocoder.geocode({latLng: latLng}, function(responses) {
  89.                                         if (responses && responses.length > 0) {
  90.                                             document.getElementById("pickup").innerHTML = responses[0].formatted_address; }
  91.                                         else {      
  92.                                             alert('Cannot determine address at this location.');}});
  93.                             </script>
  94.                         </div>
  95.                     </div>
  96.  
  97.                     <div class="row" style="width: 55vw; border-bottom: 1px solid rgba(53, 61, 68, 0.322);">
  98.                         <div class="col" style = "font-size: 2vh;">
  99.                             DESTINATION:
  100.                         </div>
  101.                     </div>
  102.                     <div class="row" style="width: 55vw; height: 7vh;">
  103.                         <div class="col">
  104.                             <p id = "dropoff"></p>
  105.                             <script type="text/javascript">
  106.                                 var geocoder = new google.maps.Geocoder();    
  107.                                 var latLng = new google.maps.LatLng(parseFloat("{{ ride.dropoff_latitude }}"), parseFloat("{{ ride.dropoff_longitude }}"));
  108.                                 geocoder.geocode({latLng: latLng}, function(responses) {
  109.                                         if (responses && responses.length > 0) {
  110.                                             document.getElementById("dropoff").innerHTML = responses[0].formatted_address; }
  111.                                         else {      
  112.                                             alert('Cannot determine address at this location.');}});
  113.                             </script>
  114.                         </div>
  115.                     </div>
  116.  
  117.                     <div class="row" style="width: 55vw; border-bottom: 1px solid rgba(53, 61, 68, 0.322);">
  118.                         <div class="col" style = "font-size: 2vh;">
  119.                             ESTIMATED TIME:
  120.                         </div>
  121.                     </div>
  122.                     <div class="row" style="width: 55vw; height: 7vh;">
  123.                         <div class="col">
  124.                             <!--HERE GOES OUT ML-->
  125.                         </div>
  126.                     </div>
  127.  
  128.                     </div>  
  129.                     <br>  
  130.  
  131.                     {% endif %}
  132.                     {% endfor %}
  133.                    
  134.                     <form method="GET" class="ride-form">
  135.                             {% csrf_token %}
  136.                             <center>    
  137.                                 <!-- Button to Canclel Ride -->
  138.                                 {% if recent_ride_status == 'SET_BY_PASSENGER' %}
  139.                                     <button type = "submit" value="cancel" name="cancel" class="btn">CANCEL RIDE</button>
  140.                                 {% endif %}
  141.                                    
  142.                                 <!-- Button to Open the Modal -->
  143.                                 {% if recent_ride_status == 'ACCEPTED' %}
  144.                                     <button type="button" class="btn" data-toggle="modal" data-target="#myModal">
  145.                                         FINISH
  146.                                     </button>
  147.                                 {% endif %}                    
  148.                             </center>
  149.                     </form>
  150.             </div>
  151.             {% endif %}
  152.  
  153.             <!--new carousel page-->            
  154.             {% if recent_ride_status == 'SET_BY_PASSENGER' or recent_ride_status == 'ACCEPTED' %}
  155.                 <div class="carousel-item" style = "margin: auto; ">
  156.             {% else %}
  157.                 <div class="carousel-item active" style = "margin: auto;">
  158.             {% endif %}
  159.  
  160.                 <div class="title">
  161.                     Your past orders:
  162.                 </div>  
  163.                
  164.                 {% if rides_history or rides_history%}
  165.  
  166.                 <div class="container" style = "overflow-x: auto; height: 50vh; background-color: rgba(112, 128, 144, 0.164); width: 55vw; text-align: center;">
  167.  
  168.                 <div class="row" style="width: 100%; ">
  169.                         <div class="col">
  170.                             START:
  171.                         </div>
  172.                         <div class="col">
  173.                             DESTINATION:
  174.                         </div>
  175.                         <div class="col-2">
  176.                             DATE:
  177.                         </div>
  178.                         <div class="col-3">
  179.                             STATUS:
  180.                         </div>
  181.                 </div>
  182.  
  183.                     <div class = "list">
  184.                     {% for ride in rides_history %}
  185.                          <div class="row"  style="width: 54vw; border-radius: 0; border-bottom: 1px solid rgba(53, 61, 68, 0.322);">
  186.                             <div class="col">
  187.                             <p id = "{{ ride.pickup_datetime }}"></p>
  188.  
  189.                             <script type="text/javascript">
  190.                                 var geocoder = new google.maps.Geocoder();                          
  191.                                 var latLng = new google.maps.LatLng(parseFloat("{{ ride.pickup_latitude }}"), parseFloat("{{ ride.pickup_longitude }}"));
  192.                                 geocoder.geocode({latLng: latLng}, function(responses) {
  193.                                         if (responses && responses.length > 0) {
  194.                                             document.getElementById( "{{ ride.pickup_datetime }}").innerHTML = responses[0].formatted_address; }
  195.                                         else {      
  196.                                             alert('Cannot determine address at this location.');}});
  197.                             </script>
  198.                             </div>
  199.                             <div class="col">
  200.                                 <p id = "{{ forloop.counter }}"></p>
  201.  
  202.                                 <script type="text/javascript">
  203.                                     var geocoder = new google.maps.Geocoder();                          
  204.                                     var latLng = new google.maps.LatLng(parseFloat("{{ ride.dropoff_latitude }}"), parseFloat("{{ ride.dropoff_longitude }}"));
  205.                                     geocoder.geocode({latLng: latLng}, function(responses) {
  206.                                             if (responses && responses.length > 0) {
  207.                                                 document.getElementById( "{{ forloop.counter }}").innerHTML = responses[0].formatted_address; }
  208.                                             else {      
  209.                                                 alert('Cannot determine address at this location.');}});
  210.                                 </script>
  211.                             </div>
  212.                             <div class="col-2">
  213.                                 {{ride.pickup_datetime}}
  214.                             </div>
  215.                             <div class="col-3">
  216.                                 {{ride.get_status_display}}
  217.                             </div>            
  218.                           </div>
  219.                     {% endfor %}
  220.                     </div>  
  221.                     {% else %}
  222.                         <h4 style="padding-left: 0">You don't have any rides yet.</h4>
  223.                        <h2 style="text-align: left;">Plan yor first ride <a href="{% url 'home' %}">here</a>.</h2>
  224.                    {% endif %}                                                                                  
  225.                </div>
  226.                </div>
  227.  
  228.                {% if rides_history or rides_history_as_driver%}
  229.  
  230.                <div class="carousel-item" style = "margin: auto; ">
  231.                    <div class="title">
  232.                        Your grade: {{grade_score}} | Your past rides:
  233.                    </div>  
  234.  
  235.                    <div class="container" style = "overflow-x: auto; height: 50vh; background-color: rgba(112, 128, 144, 0.164); width: 55vw; text-align: center;">
  236.  
  237.                        <div class="row" style="width: 54vw; padding-left: 0.5vw;">
  238.                                <div class="col">
  239.                                    START:
  240.                                </div>
  241.                                <div class="col">
  242.                                    DESTINATION:
  243.                                </div>
  244.                                <div class="col-2">
  245.                                    DATE:
  246.                                </div>
  247.                                <div class="col-3">
  248.                                    STATUS:
  249.                                </div>
  250.                        </div>
  251.  
  252.                        <div class = "list">
  253.                            {% for ride in rides_history_as_driver %}
  254.                                 <div class="row"  style="width: 54vw; padding-left: 0.5vw; border-radius: 0; border-bottom: 1px solid rgba(53, 61, 68, 0.322);">
  255.                                    <div class="col">
  256.                                        ( {{ ride.pickup_longitude }} , {{ ride.pickup_latitude }} )
  257.                                    </div>
  258.                                    <div class="col">
  259.                                        ({{ride.dropoff_longitude}} , {{ride.dropoff_latitude }})
  260.                                    </div>
  261.                                    <div class="col-2">
  262.                                        {{ride.pickup_datetime}}
  263.                                    </div>
  264.                                    <div class="col-3">
  265.                                        {{ride.get_status_display}}
  266.                                    </div>            
  267.                                  </div>
  268.                            {% endfor %}
  269.                            </div>  
  270.                    </div>      
  271.                </div>
  272.                {% endif %}
  273.  
  274.            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
  275.                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  276.                <span class="sr-only">Previous</span>
  277.            </a>
  278.            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
  279.                <span class="carousel-control-next-icon" aria-hidden="true"></span>
  280.                <span class="sr-only">Next</span>
  281.            </a>
  282.            
  283.      </div>
  284.  </div>
  285. </div>
  286. </div>
  287.  
  288. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  289. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  290. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  291.  
  292.  
  293.  
  294. <script>
  295.    var $star_rating = $('.star-rating .fa');
  296.    
  297.    var SetRatingStar = function() {
  298.      return $star_rating.each(function() {
  299.        if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
  300.          return $(this).removeClass('fa-star-o').addClass('fa-star');
  301.        } else {
  302.          return $(this).removeClass('fa-star').addClass('fa-star-o');
  303.        }
  304.      });
  305.    };
  306.    
  307.    $star_rating.on('click', function() {
  308.      $star_rating.siblings('input.rating-value').val($(this).data('rating'));
  309.      document.getElementById('grade').value = parseInt($(this).data('rating'));
  310.      return SetRatingStar();
  311.    });
  312.    
  313.    SetRatingStar();
  314.    $(document).ready(function() {
  315.    
  316.    });
  317. </script>
  318.  
  319.  
  320.  
  321. {% endblock %}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!