Is it possible refresh the value calculation in route segment?

Question

I would like to refresh the route segment after entering the value in combo-box. Refresh the calculation.

Html

<div id="map"></div>
<div id="right-panel">
  <select id="lorrytype">
<option name="1"value="1.6">1</option>
<option name="2"value="2.6">2</option>
<option name="3"value="3.6">3</option>
</select>
<div>
<b>Start:</b><br>
<input id="start"  placeholder="Start point" type="text" class="form-control">
<br>
<b>Waypoints:</b> <br>
<input id="waypoints" class="waypoints" placeholder="Waypoint" type="text" class="form-control">
<input id="waypoints1" class="waypoints" placeholder="Waypoint" type="text" class="form-control">
<br>
<b>End:</b><br>
<input id="end"  placeholder="End point" type="text" class="form-control">
<br>

</div>
<div id="directions-panel"></div>
</div>

Javascript

      function(response, status) {
        if (status === 'OK') {
          me.directionsRenderer.setDirections(response);
          var route = response.routes[0];
          var summaryPanel = document.getElementById('directions-panel');


          summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var lorrytype = document.getElementById('lorrytype').value;
        var routeSegment = i + 1;
        //calculate the one way price using the klms
        var kms = route.legs[i].distance.value/1000;
        var price_1 = (kms > 0) ? 3 : 0; kms =  (kms > 0)? kms - 1 :  0;
        var price_2 = (kms - 14) > 0 ? (14 * 1.60) : (kms * lorrytype); kms = (kms-14)>0 ? kms - 14 : 0;
        var price_3 = (kms - 15) > 0 ? (15 * 1.40) : (kms * lorrytype); kms = (kms-15)>0 ? kms - 15 : 0;
        var price_4 = (kms > 0) ? (kms * lorrytype) : 0;
        var total = price_1 + price_2 + price_3 + price_4;
        var totaldecimal = total.toFixed(2);

        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
            '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + '<br> to <br>';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].duration.text + '<br>';
        summaryPanel.innerHTML += "the one way price is: RM " + totaldecimal + "<br>";
        summaryPanel.innerHTML += "lorry price" + lorrytype + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
        console.log();


      }

        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
};

Example : If we change the the value in combo-box,the calculation doesn't refresh,I have to re-enter the destination address for refresh.

Answer 1

You can try to calculate and display the routes first and then put a listener to the select tag to choose the option. To handle the calculation for each option, you can then use a switch case to calculate each price. Here is the code I created to show this.

Here is a breakdown of each function:

I calculate the routes first using a button: document.getElementById('submit').addEventListener('click', function() { calculateAndDisplayRoute(directionsService, directionsRenderer, map); });

It will call this function where it is displaying the results in the map and the details in the text panel :

    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    //resetting the values of the Select box and the price everytime you are finding a new route
    document.getElementById('price').innerHTML = "";
    document.getElementById("lorryType").selectedIndex = 0;

    directionsService.route({
        origin: start,
        destination: end,
        travelMode: 'DRIVING'
    }, function(response, status) {
        if (status === 'OK') {
            directionsRenderer.setDirections(response);
            //setting values
            document.getElementById('from').innerHTML = document.getElementById('start').value;
            document.getElementById('to').innerHTML = document.getElementById('end').value;
            document.getElementById('time').innerHTML = response.routes[0].legs[0].duration.text
            kms = response.routes[0].legs[0].distance.value / 1000;
            document.getElementById('distance').innerHTML = kms;
            console.log(response.routes[0].legs[0].distance.value / 1000);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}

I put an event listener in the select tag to listen to every click. This click will check if there is already a route selected:

 var activities = document.getElementById("lorryType");
//this is listening everytime you click the selectbox without getting a route first it will show an alert
    activities.addEventListener("click", function() {
        if (document.getElementById('distance').innerHTML == "") {
            alert("Get Route First!")
        }
        console.log("test" + activities.value);
    });

There is also an event listener to detect every change in the select tag so that every change will calculate different values for the price you choose in the select tag:

activities.addEventListener("change", function() {
        var kmsValue = document.getElementById('distance').innerHTML;
        var lorrytype = activities.value;
       //You can change the value or the formula on how you are calculating the price.
       switch (activities.value) {
            case "":
             //Price1
                price_1 = (kmsValue > 0) ? kmsValue - 1 : 0;
                totaldecimal = price_1.toFixed(2);
                document.getElementById('price').innerHTML = totaldecimal;
                break;
            case "1.6":
            //Price2
                price_1 = (kmsValue - 14) > 0 ? (14 * 1.60) : (kmsValue * lorrytype); kmsValue = (kmsValue-14)>0 ? kmsValue - 14 : 0;
                totaldecimal = price_1.toFixed(2);
                document.getElementById('price').innerHTML = totaldecimal;
                break;
            case "2.6":
            //Price3
                price_1 = (kmsValue - 15) > 0 ? (15 * 1.40) : (kmsValue * lorrytype); kmsValue = (kmsValue-15)>0 ? kmsValue - 15 : 0;
                totaldecimal = price_1.toFixed(2);
                document.getElementById('price').innerHTML = totaldecimal;
                break;
            case "3.6":
            //Price4
                price_1 = (kmsValue > 0) ? (kmsValue * lorrytype) : 0;
                totaldecimal = price_1.toFixed(2);
                document.getElementById('price').innerHTML = totaldecimal;
                break;
            default:
                alert("default");
        }
    });