Commit 50b74c67 authored by ZettaScript's avatar ZettaScript

Avatar, Cesium link

parent 87f4af5b
......@@ -33,14 +33,14 @@ Vous pouvez sélectionner une personne en cliquant sur son point. Les certificat
### Paramètres GET
* **lat**, **lon** : Latitude et longitude au centre de la carte (en degrés)
* exemples :
Zoom sur Bordeaux https://zettascript.org/tux/g1/worldwotmap.html?lat=44.82543879996824&lon=-0.5458831787109376&zoom=13
* exemples :
Zoom sur Bordeaux https://zettascript.org/tux/g1/worldwotmap.html?lat=44.82543879996824&lon=-0.5458831787109376&zoom=13
Zoom sur Toulouse https://zettascript.org/tux/g1/worldwotmap.html?lat=43.595559991515586&lon=1.4560317993164065&zoom=12
* **zoom** : Niveau de zoom
* **pubkey** : Clé publique du compte à sélectionner (ne se déplace pas vers lui)
* **only** : Nombre de niveaux de certifications à afficher autour du compte sélectionné. Une valeur numérique supérieure _0_ active ce mode.
* **goto** : Centrer la carte sur le compte sélectionné. La valeur est le niveau de zoom.
* exemple :
* exemple :
Zoom sur _tuxmain_ https://zettascript.org/tux/g1/worldwotmap.html?pubkey=45GfjkWCWQhJ3epJVGC2NSg1Rcu4Ue1vDD3kk9eLs5TQ&goto=14
## Contribuer
......@@ -48,3 +48,4 @@ Vous pouvez sélectionner une personne en cliquant sur son point. Les certificat
* Pouvoir afficher uniquement les certifications à _n_ niveaux autour du compte sélectionné. Pouvoir représenter la distance au compte sélectionné en faisant varier la couleur ou l'opacité des lignes.
* Changer d'époque (afficher la wotmap à un temps donné) (à voir avec les données Cesium+)
* Vérifier l'utilisation des paramètres GET pour éviter le XSS
* Les lignes dessinées dans le mode "afficher uniquement les certifications du compte sélectionné" ne s'effacent pas bien après déselection du compte.
......@@ -100,21 +100,32 @@ a, a:visited {
<div id="mapmenu-idcard" class="idcard" style="display: none;">
<input type="button" id="mapmenu-idcard-bt" value="Déselectionner" onclick="" />
<input type="button" id="mapmenu-idcard-goto" value="Centrer" onclick="map.setView(accounts[active_account].pos);showURL();" /><br />
<img class="idcard-avatar" src="" alt="Avatar" style="display: none;" /><br />
<strong class="idcard-title"></strong><br />
<span class="idcard-pubkey"></span><hr />
<details><summary class="idcard-pubkey-short"></summary><span class="idcard-pubkey"></span></details><br />
<input type="checkbox" id="mapmenu-idcard-onlycertsofsel" onchange="onlyShowCertsOfSelected();" autocomplete="off" />
<label for="mapmenu-idcard-onlycertsofsel">Afficher uniquement ses certifications</label><br />
<label for="mapmenu-idcard-onlycertsofsel-n">Niveaux&nbsp;:</label>
<input type="text" id="mapmenu-idcard-onlycertsofsel-n" value="1" onchange="onlyShowCertsOfSelected();" /><br />
<input type="number" id="mapmenu-idcard-onlycertsofsel-n" value="1" onchange="onlyShowCertsOfSelected();" style="width: 64px;" /><br />
<select id="mapmenu-idcard-onlycertsofsel-t" onchange="onlyShowCertsOfSelected();" autocomplete="off">
<option value="all" selected>Toutes</option>
<option value="received">Reçues</option>
<option value="issued">Émises</option>
</select>
</select><hr />
<a id="mapmenu-idcard-cesiumlink" href="#" target="_blank">Page Cesium</a>
</div>
</div>
</div>
<script type="text/javascript">
// Instance settings
var cesium_data_url = "https://g1.data.duniter.fr/";
var cesium_url = "https://g1.duniter.fr/";
var duniterdb_url = "duniterdb.json";
var map_tiles_url = "https://{s}.tile.osm.org/{z}/{x}/{y}.png";
var map_tiles_attribution = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
var map_default_pos = [46.725, 2.834];
var map_default_zoom = 6;
function getParam(param, def=null) {
var result = def, tmp = [];
var items = location.search.substr(1).split("&");
......@@ -126,7 +137,7 @@ function getParam(param, def=null) {
}
class Account {
constructor(pubkey, title, pos, address, city, point) {
constructor(pubkey, title, pos, address, city, point, avatar) {
this.pubkey = pubkey;
this.title = title;
this.pos = pos;
......@@ -135,6 +146,7 @@ class Account {
this.point = point;
this.certsIssued = [];
this.certsReceived = [];
this.avatar = avatar;
}
mapActiveAccount() {// Surprisingly, `this` is not the Account instance...
......@@ -144,9 +156,15 @@ class Account {
active_account = account.pubkey;
onlyShowCertsOfSelected()
$("#mapmenu-idcard").attr("style", "display: initial;");
$("#mapmenu-idcard-bt").attr("onclick", "mapInactiveAccount('"+account.pubkey+"');");
$("#mapmenu-idcard-bt").attr("onclick", "mapInactiveAccount('"+active_account+"');");
$("#mapmenu-idcard .idcard-title").html(account.title);
$("#mapmenu-idcard .idcard-pubkey").html(account.pubkey);
$("#mapmenu-idcard .idcard-pubkey").html(active_account);
$("#mapmenu-idcard .idcard-pubkey-short").html(active_account.substr(0,8));
if(account.avatar) {
$("#mapmenu-idcard .idcard-avatar").attr("src", cesium_data_url+"user/profile/"+active_account+"/_image/avatar.png");
$("#mapmenu-idcard .idcard-avatar").attr("style", "display: initial;");
}
$("#mapmenu-idcard-cesiumlink").attr("href", cesium_url+"#/app/wot/"+active_account+"/");
for(var cert in account.certsIssued) {
certs[account.certsIssued[cert]].line.setStyle({color:"#4f4", weight:3, opacity:0.6});
}
......@@ -164,6 +182,9 @@ function mapInactiveAccount(pubkey) {
$("#mapmenu-idcard").attr("onclick", "");
$("#mapmenu-idcard .idcard-title").html("");
$("#mapmenu-idcard .idcard-pubkey").html("");
$("#mapmenu-idcard .idcard-pubkey-short").html();
$("#mapmenu-idcard .idcard-avatar").attr("style", "display: none;");
$("#mapmenu-idcard-cesiumlink").attr("href", "#");
for(var cert in account.certsIssued) {
certs[account.certsIssued[cert]].line.setStyle({color:"black", weight:1, opacity:0.3});
}
......@@ -199,8 +220,6 @@ function onlyShowCertsOfSelected() {
}
}
console.log(accounts[active_account]);
console.log(show_certs);
for(var cert in show_certs) {
var color = "black";
if(certs[show_certs[cert]].issuer == active_account)
......@@ -221,6 +240,8 @@ function showURL() {
var url = window.location.pathname + "?lat="+pos.lat+"&lon="+pos.lng+"&zoom="+map.getZoom();
if(active_account != null)
url += "&pubkey="+active_account;
if(document.getElementById("mapmenu-idcard-onlycertsofsel").checked)
url += "&only="+document.getElementById("mapmenu-idcard-onlycertsofsel-n").value;
$("#mapmenu-maplink").attr("href", url+"#map");
}
......@@ -237,9 +258,8 @@ var ncerts = 0;
var active_certs = [];
var active_ncerts = [];
var active_account = null;
var map = L.map("map").setView([getParam("lat",46.725), getParam("lon",2.834)], getParam("zoom",6));
//var map = L.map("map").setView([44.82543879996824, -0.5458831787109376], 13);// for testing (Bordeaux)
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
var map = L.map("map").setView([getParam("lat",map_default_pos[0]), getParam("lon",map_default_pos[1])], getParam("zoom",map_default_zoom));
L.tileLayer(map_tiles_url, {attribution: map_tiles_attribution}).addTo(map);
var p_certlines = map.createPane("certlines");
var l_accounts_cert = L.layerGroup();
var l_accounts_wallet = L.layerGroup();
......@@ -250,13 +270,14 @@ var overlayMaps = {
"Certifications": l_certlines
};
L.control.layers({}, overlayMaps).addTo(map);
L.control.scale().addTo(map);
map.on("moveend", showURL);
map.on("zoomend", showURL);
//$.post("https://g1.data.duniter.fr/user/profile/_search", '{"query":{"bool":{"must":[{"exists":{"field":"geoPoint"}}]}},"from":1000,"size":1000,"_source":["title","geoPoint","avatar._content_type","address","city","description"]}', function(data) {
$.post("https://g1.data.duniter.fr/user/profile/_search", '{"query":{"bool":{"must":[{"exists":{"field":"geoPoint"}}]}},"from":0,"size":0,"_source":[]}', function(data) {
$.post(cesium_data_url+"user/profile/_search", '{"query":{"bool":{"must":[{"exists":{"field":"geoPoint"}}]}},"from":0,"size":0,"_source":[]}', function(data) {
$("#mapmenu-naccounts").html(data["hits"]["total"]+" comptes trouvés");
$.post("https://g1.data.duniter.fr/user/profile/_search", '{"query":{"bool":{"must":[{"exists":{"field":"geoPoint"}}]}},"from":0,"size":'+data["hits"]["total"]+',"_source":["title","geoPoint","address","city","description"]}', function(data) {
$.post(cesium_data_url+"user/profile/_search", '{"query":{"bool":{"must":[{"exists":{"field":"geoPoint"}}]}},"from":0,"size":'+data["hits"]["total"]+',"_source":["title","geoPoint","avatar._content_type","address","city","description"]}', function(data) {
var accounts_data = data["hits"]["hits"];
for(var i=0; i < accounts_data.length; i ++) {
var account_data = accounts_data[i];
......@@ -268,13 +289,13 @@ $.post("https://g1.data.duniter.fr/user/profile/_search", '{"query":{"bool":{"mu
pubkey: account_data["_id"]// Yay! Hack because JS is so bad with pointers...
}).addTo(map);
point.bindPopup("<b>"+account_data["_source"]["title"]+"</b><br/>"+account_data["_id"]);
var account = new Account(account_data["_id"], account_data["_source"]["title"], [account_data["_source"]["geoPoint"]["lat"], account_data["_source"]["geoPoint"]["lon"]], account_data["_source"]["address"], account_data["_source"]["city"], point);
var account = new Account(account_data["_id"], account_data["_source"]["title"], [account_data["_source"]["geoPoint"]["lat"], account_data["_source"]["geoPoint"]["lon"]], account_data["_source"]["address"], account_data["_source"]["city"], point, "avatar" in account_data["_source"]);
accounts[account_data["_id"]] = account;
point.on("popupopen", account.mapActiveAccount);
point.addTo(l_accounts_wallet);
}
$.get("duniterdb.json", null, function(data) {
$.get(duniterdb_url, null, function(data) {
for(id in data["ids"]) {
if(id in accounts) {
accounts[id].point.setStyle({color: "red", fillColor: "red"});
......
Markdown is supported
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