OverheadVisualization/index.html at main · ElectricVehicleChargingCoverage/OverheadVisualization · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<head>
    <link
        rel="stylesheet"
        href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""
    />

    <link rel="stylesheet" href="style.css" />

    <script
        src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""
    ></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Overhead Visualization</title>
</head>

<div id="sidebar" class="sidebar">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
        >&times;</a
    >
    <form onsubmit="saveAPIKey(event)" title="This data is required for calculating routes on demand.">
        <label for="apiKeyInput">TomTom API-Key:</label>
        <input type="text" id="apiKeyInput" name="APIKey" placeholder="Your API-Key">
        <label for="vehicleDataInput">Vehicle Data (Array):</label>
        <input type="text" id="vehicleDataInput" name="vehicleData" placeholder="[{name: ...}, {...}, ...]">
        <input type="submit" value="Save">
    </form>


    <form onsubmit="applyCostData(event)" title="This data is required for a cost model.">
        <h2> Combustion </h2>
        <label for="gasPriceInput">Price per liter:</label>
        <input type="number" id="gasPriceInput" name="gasPrice" placeholder="Gas price" step="0.001">
        <label for="gasConsumptionInput">Gas consumption per 100km in liter:</label>
        <input type="number" id="gasConsumptionInput" name="gasConsumption" placeholder="consumption in liter" step="0.001">
        <h2> Electric </h2>
        <label for="pricekWhInput">Price per kWh:</label>
        <input type="number" id="pricekWhInput" name="pricekWh" placeholder="price" step="0.001">
        <input type="submit" value="Save">
    </form>

    <form onsubmit="changeConstants(event)" title="Change constants of the website.">
        <h2> Constants </h2>
        <label for="minRouteDistanceInput">Minimum distance in km between cities:</label>
        <input type="number" id="minRouteDistanceInput" name="minRouteDistance" placeholder="Minimum distance between cities" step="1">
        <label for="attributeToCompareInput">Compare cities/routes based on:</label>
        <select name="attributeToCompare" id="attributeToCompareInput">
            <option value="timeFactor">Time factor</option>
            <option value="distanceFactor">Distance factor</option>
            <option value="costsFactor">Costs factor</option>
        </select>
        <input type="submit" value="Save">
    </form>
    <button onclick="resetLocalStorage()" style="background-color: red;"> Reset Settings </button>
</div>

<div id="main">
    <div id="map"></div>
</div>

<div class="global-scores" id="global-scores" title="Global Scores">
</div>

<h1 onclick="openNav()" title="Click here to open sidebar" style="cursor: pointer;"><span>Visualization</span></h1>

<script>
    function openNav() {
        document.getElementById("sidebar").style.width = "400px";
    }

    function closeNav() {
        document.getElementById("sidebar").style.width = "0";
    }

    var vehicleData = [];
    var gasPrice = 1.74; // price per liter
    var gasConsumption = 7.3; // liter per 100 km
    var kWhPrice = 0.3; // price per kWh
    var minRouteDistance = 100;
    var attributeToCompare = "timeFactor";

    function saveAPIKey(e) {
        e.preventDefault();
        const APIKey = $("#apiKeyInput").val();
        localStorage.setItem("API-Key", APIKey);
        try {
            const rawVehicleData = $("#vehicleDataInput").val();
            const parsedData = JSON.parse(rawVehicleData);
            localStorage.setItem("vehicleData", JSON.stringify(parsedData));
            vehicleData = parsedData;
        }
        catch (e){
            window.alert(e);
            console.warn(e);
        }
    }

    // Load api key and vehicleData
    try {
        $("#apiKeyInput").val(localStorage.getItem("API-Key"));
        $("#vehicleDataInput").val(localStorage.getItem("vehicleData"));
        const rawVehicleData = localStorage.getItem("vehicleData");
        if (rawVehicleData) {
            vehicleData = JSON.parse(rawVehicleData);
        }
    }
    catch (e) {
        console.warn(e);
    }

    // Load price data
    try {
        gasPrice = localStorage.getItem("gasPrice") ? localStorage.getItem("gasPrice") : gasPrice;
        $("#gasPriceInput").val(gasPrice);
        gasConsumption = localStorage.getItem("gasConsumption") ? localStorage.getItem("gasConsumption") : gasConsumption;
        $("#gasConsumptionInput").val(gasConsumption);
        kWhPrice = localStorage.getItem("kWhPrice") ? localStorage.getItem("kWhPrice") : kWhPrice;
        $("#pricekWhInput").val(kWhPrice);
    }
    catch (e) {
        console.warn(e);
    }

    function applyCostData(e) {
        // e.preventDefault(); // This will prevent the page from reloading
        gasPrice = $("#gasPriceInput").val();
        localStorage.setItem("gasPrice", gasPrice);
        gasConsumption = $("#gasConsumptionInput").val();
        localStorage.setItem("gasConsumption", gasConsumption);
        kWhPrice = $("#pricekWhInput").val();
        localStorage.setItem("kWhPrice", kWhPrice);
    }

    try {
        minRouteDistance = localStorage.getItem("minRouteDistance") ? localStorage.getItem("minRouteDistance") : minRouteDistance;
        $("#minRouteDistanceInput").val(minRouteDistance);
        attributeToCompare = localStorage.getItem("attributeToCompare") ? localStorage.getItem("attributeToCompare") : attributeToCompare;
        $("#attributeToCompareInput").val(attributeToCompare);
    }
    catch (e) {
        console.warn(e);
    }

    function changeConstants(e) {
        // e.preventDefault(); // This will prevent the page from reloading
        minRouteDistance = $("#minRouteDistanceInput").val();
        localStorage.setItem("minRouteDistance", minRouteDistance);
        attributeToCompare = $("#attributeToCompareInput").val();
        localStorage.setItem("attributeToCompare", attributeToCompare);
    }

    function resetLocalStorage() {
        localStorage.clear();
        console.warn("You cleared the local storage. Reload page to get default values.");
    }
</script>

<script src="helpers.js"></script>
<script src="data/cityData.js"></script>
<script src="data/routeData.js"></script>
<script src="map.js"></script>
<script src="calculateRoutes.js"></script>