BinghamtonBetterBus/BBB_frontend/main.js

import './style.css'

window.main = main;

var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBa1wDqAMfKv30BSzSdXB-AEsk4BRD9xTw&callback=main&libraries=geometry';
script.async = true;

document.head.appendChild(script);

async function main(){
    const {Map} = await google.maps.importLibrary("maps");
    const map = new Map(document.getElementById("map"),{
        center: {lat: 42.10125081757972, lng:-75.94181323552698},
        zoom: 14
    });
    const UI = document.createElement("div");
    UI.id = "UI";
    
    const from_lattitude_input = document.createElement("input");
    from_lattitude_input.placeholder = "42.10125081757972";
    from_lattitude_input.type = "number";
    from_lattitude_input.id = "from_lattitude_input";
    UI.appendChild(from_lattitude_input);

    const from_longitude_input = document.createElement("input");
    from_longitude_input.type = "number";
    from_longitude_input.placeholder = "-75.94181323552698";
    from_longitude_input.id = "from_longitude_input";
    UI.appendChild(from_longitude_input);

    const from_pos_button = document.createElement("button");
    from_pos_button.id = "from_pos_button";
    from_pos_button.innerText = "Set Start Position";
    let from_pos_toggle = false;
    UI.appendChild(from_pos_button);
    from_pos_button.addEventListener("click",e=>{
        from_pos_toggle = !from_pos_toggle;
        to_pos_toggle = false;
    });

    const to_lattitude_input = document.createElement("input");
    to_lattitude_input.placeholder = "42.10125081757972";
    to_lattitude_input.type = "number";
    to_lattitude_input.id = "to_lattitude_input";
    UI.appendChild(to_lattitude_input);

    const to_longitude_input = document.createElement("input");
    to_longitude_input.type = "number";
    to_longitude_input.placeholder = "-75.94181323552698";
    to_longitude_input.id = "to_longitude_input";
    UI.appendChild(to_longitude_input);

    const to_pos_button = document.createElement("button");
    to_pos_button.id = "to_pos_button"
    to_pos_button.innerText = "Set End Position"
    let to_pos_toggle = false;
    to_pos_button.addEventListener("click",e=>{
        to_pos_toggle = !to_pos_toggle;
        from_pos_toggle = false;
    });
    UI.appendChild(to_pos_button);

    const sub_button = document.createElement("button");
    sub_button.addEventListener("click",submit_func(map));
    sub_button.id = "sub_button";
    sub_button.innerText = "Submit";
    UI.appendChild(sub_button);

    window.paths = [];
    let clear_button = document.createElement("button");
    clear_button.addEventListener("click", clear_lines);
    clear_button.id = "clear_button";
    clear_button.innerText = "Clear";
    UI.appendChild(clear_button)

    map.addListener("click", e=>{
        const {lat, lng} = e.latLng;
        if(from_pos_toggle){
            from_lattitude_input.value = lat();
            from_longitude_input.value = lng();
        }
        if(to_pos_toggle){
            to_lattitude_input.value = lat();
            to_longitude_input.value = lng();
        }
    });
    document.body.appendChild(UI)
    const time = new Date().toISOString();

}
function submit_func(map){
//TODO: grab the path and show the poly lines and the bus route name
async function submit(clickEvent){
    let from_lat = document.getElementById("from_lattitude_input").value; 
    let from_lon = document.getElementById("from_longitude_input").value; 
    let to_lat = document.getElementById("to_lattitude_input").value; 
    let to_lon = document.getElementById("to_longitude_input").value;
    let path = await fetch(`http://localhost:8080/path?time=e&from_lat=${from_lat}&from_lon=${from_lon}&to_lat=${to_lat}&to_lon=${to_lon}`).then(r=>r.json());
    let secs = [];
    for(let route of path.path){
        console.log(route.route_name);
        secs.push(fetch(`http://localhost:8080/time_to_arrive?service=${route.service}&from=${route.enter_stop_id}&to=${route.exit_stop_id}&route=${route.route_id}`).then(r=>r.json()));
        fetch(`http://localhost:8080/route_draw?service=${route.service}&id=${route.route_id}`).then(r=>r.json()).then(v=>{
            return {path:google.maps.geometry.encoding.decodePath(v.poly_line), color:v.color}
        })
        .then(o=>{
            //console.log(`"${o.path}"`);
            let line = new google.maps.Polyline({
                path:o.path,
                strokeColor: o.color,
                strokeOpacity: 1.0,
                strokeWeight: 3,
            });
            line.setMap(map);
            window.paths.push(line);
            //setTimeout(()=>line.setVisible(false), 5000);
        })
    }
    Promise.all(secs).then(l=>l.reduce((a,b)=>a+b)).then(v=>alert(`bus ride will take ${display_time(v)}`));
}                 
return submit;
}

function display_time(secs){
    if(secs > 60){
        return `${Math.floor(secs/60)} minutes and ${secs%60} seconds`;
    }
    else{
        return `${secs%60} seconds`;

    }
}
async function clear_lines(){
    for (let path of window.paths) path.setMap(null);
    window.paths = [];
    console.clear();
}