Commit 9b2c567d authored by Jean-Marie Favreau's avatar Jean-Marie Favreau
Browse files

Many improvements

parent 690c7ff4
......@@ -49,6 +49,7 @@
$("#show-all span").html("(" + nb_cr + ")");
$("#show-evaluated span").html("(" + nb_cr_eval + ")");
$("#show-incorrect span").html("(" + nb_cr_incorrect + ")");
$("#show-correct span").html("(" + (nb_cr_eval - nb_cr_incorrect) + ")");
}
function get_evaluation_crossroad(crossroad) {
......@@ -74,7 +75,8 @@
if (window.mode == "all" ||
(cr_line["evaluated"] && window.mode == "evaluated") ||
(cr_line["incorrect"] && window.mode == "incorrect")) {
(cr_line["incorrect"] && window.mode == "incorrect") ||
(cr_line["evaluated"] && !cr_line["incorrect"] && window.mode == "correct")) {
for(var qid in window.q_json) {
if (eval == 0 || eval[qid] == window.q_json[qid]["default"])
cr_line[qid] = "-";
......@@ -105,6 +107,8 @@
$("#crossroads_title").text("Evaluated crossroads");
else if (window.mode == "incorrect")
$("#crossroads_title").text("Incorrect crossroads");
else if (window.mode == "correct")
$("#crossroads_title").text("Correct crossroads");
}
function display_browser_interface() {
......@@ -116,7 +120,7 @@
function build_browser_interface() {
// Create columns
html = '<th scope="row" data-field="id">ID</th>';
html += '<th data-field="state" data-checkbox="true"></th>';
//html += '<th data-field="state" data-checkbox="true"></th>';
window.q_json = JSON.parse(Settings.question_list);
// Columns from questions
......@@ -220,14 +224,17 @@
window.mode = "incorrect";
update_crossroads_display();
});
$("#show-correct").click(function(evt) {
window.mode = "correct";
update_crossroads_display();
});
}
});
</script>
<style>
#question, #chargement, #browser, #error-script { display: none; }
#crossroads-rendering { height: 400px; width: 100%; }
#crossroads-rendering { height: 400px; width: 100%; background: black;}
</style>
</head>
......@@ -236,7 +243,7 @@
<h1>Evaluation tool</h1>
<p class="lead" id="intro"></p>
</p>
<div id="start">
<div class="position-absolute top-50 start-50 translate-middle fs-1">
<p>Select a <code>json</code> file</p>
......@@ -250,6 +257,7 @@
<div class="position-absolute top-50 start-50 translate-middle fs-1">Loading data...</div>
</div>
<div id="browser">
<div class="row">
<div class="col">
<button id="show-all" class="btn btn-primary btn-block form-control" type="button">All crossroads <span></span></button>
......@@ -257,6 +265,9 @@
<div class="col">
<button id="show-evaluated" class="btn btn-primary btn-block form-control" type="button">Evaluated crossroads <span></span></button>
</div>
<div class="col">
<button id="show-correct" class="btn btn-primary btn-block form-control" type="button">Only correct crossroads <span></span></button>
</div>
<div class="col">
<button id="show-incorrect" class="btn btn-primary btn-block form-control" type="button">Only incorrect crossroads <span></span></button>
</div>
......
......@@ -471,8 +471,8 @@
<div class="container-xxl" id="main-container">
<h1>Evaluation tool</h1>
<p class="lead" id="intro"></p>
</p>
<p class="lead" id="intro"></p>
<div id="start">
<div class="position-absolute top-50 start-50 translate-middle fs-1">
<p>Select a <code>json</code> file</p>
......
......@@ -70,11 +70,14 @@ Settings.compute_fields = function(crossroad) {
return result;
}
Settings.init_map = function(divID) {
Settings.init_map = function(divID, dark = false) {
if (typeof window.map === 'undefined') {
window.map = L.map(divID);
var opacity = 1.0;
if (dark)
opacity = 0.65;
L.tileLayer(
window.ign_layer = L.tileLayer(
"https://wxs.ign.fr/jhyvi0fgmnuxvfv0zjzorvdn/geoportail/wmts?" +
"&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" +
"&STYLE=normal" +
......@@ -89,9 +92,11 @@ Settings.init_map = function(divID) {
maxNativeZoom: 19,
maxZoom : 21,
attribution : "IGN-F/Geoportail",
tileSize : 256
tileSize : 256,
opacity: opacity
}
).addTo(window.map);
);
window.ign_layer.addTo(window.map);
var scale = L.control.scale();
scale.addTo(window.map);
......@@ -117,6 +122,7 @@ Settings.render_crossroad = function(current_crossroad, divID, crossroadLinksID)
// build a random list of colors
colors = Settings.Colors.list(current_crossroad.length);
// for each element of the crossroad create a layer
for(var eid in current_crossroad) {
element = current_crossroad[eid];
......@@ -149,6 +155,9 @@ Settings.render_crossroad = function(current_crossroad, divID, crossroadLinksID)
// create crossroad layer
layer = L.polyline(latlng, options);
// add layers
window.crossroad_layers.push(layer);
if (element["type"] == "crossroad") {
center = layer.getBounds().getCenter();
}
......@@ -158,7 +167,6 @@ Settings.render_crossroad = function(current_crossroad, divID, crossroadLinksID)
// create a layergroup
window.layergroup = L.featureGroup(window.crossroad_layers).addTo(window.map);
console.log(window.crossroad_layers);
// set the zoom adjusted on this layergroup
window.map.fitBounds(window.layergroup.getBounds());
......@@ -180,7 +188,7 @@ Settings.render_crossroad = function(current_crossroad, divID, crossroadLinksID)
}
Settings.render_crossroads = function(data, divID) {
Settings.init_map(divID);
Settings.init_map(divID, true);
window.crossroads_layers = [];
......@@ -191,12 +199,12 @@ Settings.render_crossroads = function(data, divID) {
else if (data[eid]["evaluated"])
color = "#00FF00";
else
color = "#CCCCCC";
color = "#FFFFFF";
for(var eid in crossroad) {
element = crossroad[eid];
if (element["type"] == "crossroad") {
if (element["type"] == "crossroad" || element["type"] == "branch") {
// build latlng
latlng = [];
if (element["edges_by_nodes"].length == 0) {
......@@ -212,12 +220,15 @@ Settings.render_crossroads = function(data, divID) {
[element["coordinates"][edge[1]]["y"], element["coordinates"][edge[1]]["x"]]]);
}
}
// set color
options = {color: color};
if (element["type"] == "crossroad")
options = {color: color, weight: '4'};
else
options = {color: "#FFFFFF", opacity: '0.5'};
// create crossroad layer
layer = L.polyline(latlng, options);
window.crossroads_layers.push(layer);
break;
}
}
}
......@@ -225,7 +236,11 @@ Settings.render_crossroads = function(data, divID) {
// create a layergroup
window.layergroup = L.featureGroup(window.crossroads_layers).addTo(window.map);
console.log(window.layergroup.getBounds());
// set the zoom adjusted on this layergroup
window.map.fitBounds(window.layergroup.getBounds());
// hack to fix 0px size bug
setTimeout(function(){ window.map.invalidateSize(); window.map.fitBounds(window.layergroup.getBounds());}, 400);
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment