Commit f43315cd authored by ZettaScript's avatar ZettaScript

Show certs for 1 idty

parent 6cda0a55
duniterdb.json
......@@ -21,3 +21,17 @@ https://leafletjs.com/
https://jquery.com/
C'est aussi plus joli avec une belle police, par exemple Proza Libre. https://fontlibrary.org/en/font/proza-libre
## Utilisation
Chaque point sur la carte représente un compte. Les points rouges sont les comptes certifiés, les points bleus sont des comptes non certifiés.
Chaque ligne reliant deux points rouges représente une certification.
Vous pouvez sélectionner une personne en cliquant sur son point. Les certifications qu'elle a reçues s'affichent en rouges, celles qu'elle a émises en vert. (si il y a un chevauchement entre une certification reçue et une émise, une seule couleur peut apparaître **(bug à corriger)**) Pour n'afficher que les certifications liées à cette personne, cochez la case "_Afficher uniquement ses certifications_".
## Contribuer
* 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+)
* Définir la position dans l'URL (par ex. _?lat=123&lon=456_) et dans un champ de formulaire (nom de ville ?)
......@@ -95,11 +95,20 @@ a, a:visited {
<li>Bleu&nbsp;: wallet</li>
<li>Rouge&nbsp;: identité</li>
</ul>
<span id="mapmenu-naccounts"></span><br />
<span id="mapmenu-naccounts"></span><hr />
<div id="mapmenu-idcard" class="idcard" style="display: none;">
<input type="button" value="Déselectionner" onclick="" /><br />
<input type="button" id="mapmenu-idcard-bt" value="Déselectionner" onclick="" /><br />
<strong class="idcard-title"></strong><br />
<span class="idcard-pubkey"></span>
<span class="idcard-pubkey"></span><hr />
<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 />
<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>
</div>
</div>
</div>
......@@ -121,8 +130,9 @@ class Account {
mapInactiveAccount(active_account);
var account = accounts[this.options["pubkey"]];// Works for me
active_account = account.pubkey;
onlyShowCertsOfSelected()
$("#mapmenu-idcard").attr("style", "display: initial;");
$("#mapmenu-idcard").attr("onclick", "mapInactiveAccount('"+account.pubkey+"');");
$("#mapmenu-idcard-bt").attr("onclick", "mapInactiveAccount('"+account.pubkey+"');");
$("#mapmenu-idcard .idcard-title").html(account.title);
$("#mapmenu-idcard .idcard-pubkey").html(account.pubkey);
for(var cert in account.certsIssued) {
......@@ -135,6 +145,7 @@ class Account {
}
function mapInactiveAccount(pubkey) {
active_account = null;
onlyShowCertsOfSelected()
var account = accounts[pubkey];
$("#mapmenu-idcard").attr("style", "display: none;");
$("#mapmenu-idcard").attr("onclick", "");
......@@ -146,7 +157,51 @@ function mapInactiveAccount(pubkey) {
for(var cert in account.certsReceived) {
certs[account.certsReceived[cert]].line.setStyle({color:"black", weight:1, opacity:0.3});
}
onlyShowCertsOfSelected();
}
function onlyShowCertsOfSelected() {
for(var cert in active_certs) {
active_certs[cert][1].remove();
}
active_certs = [];
if(active_account == null || !document.getElementById("mapmenu-idcard-onlycertsofsel").checked) {
p_certlines.style.display = "initial";
return;
}
p_certlines.style.display = "none";
var show_certs = [];
if(document.getElementById("mapmenu-idcard-onlycertsofsel-t").value == "all" ||
document.getElementById("mapmenu-idcard-onlycertsofsel-t").value == "received") {
for(var cert in accounts[active_account].certsReceived) {
show_certs.push(accounts[active_account].certsReceived[cert]);
}
}
if(document.getElementById("mapmenu-idcard-onlycertsofsel-t").value == "all" ||
document.getElementById("mapmenu-idcard-onlycertsofsel-t").value == "issued") {
for(var cert in accounts[active_account].certsIssued) {
show_certs.push(accounts[active_account].certsIssued[cert]);
}
}
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)
color = "#4f4";
else
color = "#f44";
var line = L.polyline([accounts[certs[show_certs[cert]].issuer].pos, accounts[certs[show_certs[cert]].receiver].pos], {color:color, weight:2, opacity:0.7}).addTo(map);
line.bindPopup("<b>"+accounts[certs[show_certs[cert]].issuer].title+"</b> &rarr; <b>"+accounts[certs[show_certs[cert]].receiver].title+"</b>");
line.addTo(l_certlines);
active_certs.push([show_certs[cert], line]);
active_ncerts ++;
}
// TODO: show certs for n levels around active_account
}
class Cert {
constructor(issuer, receiver, line) {
this.issuer = issuer;
......@@ -157,12 +212,16 @@ class Cert {
var accounts = {};
var certs = [];
var ncerts = 0;
var active_certs = [];
var active_ncerts = [];
var active_account = null;
var map = L.map("map").setView([46.725, 2.834], 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 p_certlines = map.createPane("certlines");
var l_accounts_cert = L.layerGroup();
var l_accounts_wallet = L.layerGroup();
var l_certlines = L.layerGroup();
var l_certlines = L.layerGroup([]);
var overlayMaps = {
"Identités": l_accounts_cert,
"Porte-feuilles": l_accounts_wallet,
......@@ -200,7 +259,7 @@ $.post("https://g1.data.duniter.fr/user/profile/_search", '{"query":{"bool":{"mu
}
for(var i=0; i < data["certs"].length; i ++) {
if(data["certs"][i][0] in accounts && data["certs"][i][1] in accounts && data["certs"][i][3] == 0) {
var line = L.polyline([accounts[data["certs"][i][0]].pos, accounts[data["certs"][i][1]].pos], {color:'black', weight:1, opacity:0.3}).addTo(map);
var line = L.polyline([accounts[data["certs"][i][0]].pos, accounts[data["certs"][i][1]].pos], {color:'black', weight:1, opacity:0.3, pane:"certlines"}).addTo(map);
line.bindPopup("<b>"+accounts[data["certs"][i][0]].title+"</b> &rarr; <b>"+accounts[data["certs"][i][1]].title+"</b>");
line.addTo(l_certlines);
certs.push(new Cert(data["certs"][i][0], data["certs"][i][1], line));
......
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