RESTORE_FE/js/map.js

var link = thisUrlParams.link;

prefixes = queryManager['prefixes']['all'];

queryURL = prefixes + (queryManager['querySchedaLuogo']['query']).replace('{URI}', link);
doJsonQuery(queryURL).done(function(data) { handle_data(data); });

queryRef = prefixes + (queryManager['querySchedaLuogo']['queryRiferimenti']).replace('{URI}', link);
doJsonQuery(queryRef).done(function(data) { handle_ref(data); });

queryTopo = prefixes + (queryManager['querySchedaLuogo']['queryToponimi']).replace('{URI}', link);
doJsonQuery(queryTopo).done(function(data) { handle_toponym(data); });

queryRec = prefixes + (queryManager['querySchedaLuogo']['queryRicezione']).replace('{URI}', link);
doJsonQuery(queryRec).done(function(data) { handle_receive(data); });

querySend = prefixes + (queryManager['querySchedaLuogo']['queryInvio']).replace('{URI}', link);
doJsonQuery(querySend).done(function(data) { handle_send(data); });

queryCit = prefixes + (queryManager['querySchedaLuogo']['queryCitazione']).replace('{URI}', link);
doJsonQuery(queryCit).done(function(data) { handle_cit(data); });

queryPer = prefixes + (queryManager['querySchedaLuogo']['queryPersone']).replaceAll('{URI}', link);
doJsonQuery(queryPer).done(function(data) { handle_persons(data); });

queryCon1 = prefixes + (queryManager['querySchedaLuogo']['queryCount']).replace('{URI}', link);
doJsonQuery(queryCon1).done(function(data) { handle_count(data); });

queryCon2 = prefixes + (queryManager['querySchedaLuogo']['queryCount2']).replace('{URI}', link);
doJsonQuery(queryCon2).done(function(data) { handle_count2(data); });


function handle_data(json) {
	console.log(json);

	const locations = [];

	$.each(
			json['results']['bindings'],
			function (index, value) {
				const loc = []
				var graph = "Luoghi";
        var uri = value['uri']['value'];
				var label = value['name_place']['value'];
				var coord = value['coordinates']['value'];
        var variante = "";
        var note = "";
				const coordinates = coord.split(", ");
				loc.push(label);
				loc.push(coordinates[0]);
				loc.push(coordinates[1]);
				locations.push(loc);

        if (value.hasOwnProperty('variant')) {
          variante = value['variant']['value'];
        } else {
          variante = "No resource found for this query";
        }

        if (value.hasOwnProperty('notes')) {
          note = value['notes']['value'];
        } else {
          note = "No resource found for this query";
        }

        var Buttons = '<button title="Citazione" type="button" value="object" id="' + uri + '" class="cit btn btn-default" alt="scheda" title="Citazione"><i class="fa fa-quote-right"></i></button> \
        <button title="Permalink" type="button" value="object" id="' + uri + '" class="hyp btn btn-default" alt="scheda" title="Hyperlink"><i class="fa fa-link"></i></button> \
        <a href="http://iperion.vm.fedcloud.eu/lodlive/?' + uri + '" target="_blank"><button title="Naviga il grafo" type="button" class="btn btn-default info" alt="LOD" title="LodLive"><i class="fa fa-share-alt"></i></button></a></div></div>';


        document.getElementById("grafo").innerHTML = graph;
        document.getElementById("nome_luogo").innerHTML = label;
        document.getElementById("place_name").innerHTML = label;
        document.getElementById("coords").innerHTML = coord;
        document.getElementById("note").innerHTML = note;
        document.getElementById("variants").innerHTML = variante;
        document.getElementById("nome_lu").innerHTML = label;
        document.getElementById("nome_lp").innerHTML = label;
        document.getElementById("nome_ll").innerHTML = label;
        document.getElementById("nome_lg").innerHTML = label;
        document.getElementById("link_buttons").innerHTML = Buttons;
				
		});

	var map = L.map('map').setView([locations[0][1], locations[0][2]], 7);
	mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';

	L.tileLayer(
	  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	    attribution: '&copy; ' + mapLink + ' Contributors',
	    maxZoom: 18,
	  }).addTo(map);

	for (var i = 0; i < locations.length; i++) {
	  marker = new L.marker([locations[i][1], locations[i][2]])
	    .bindPopup(locations[i][0])
	    .addTo(map);
	}
}


function handle_ref(json) {

  console.log(json);

  const references = [];

  var list_ref = "";

  $.each(
      json['results']['bindings'],
      function (index, value) {
        var ref = value['references']['value'];
        references.push(ref);        
      });

  
  for (i=0; i<references.length; i++) {
      list_ref += "<a target='_blank' href='" + references[i] + "'>" + references[i] + "</a>";
  }
  
  document.getElementById("riferimenti").innerHTML = list_ref;
  
}

function handle_toponym(json) {

  console.log(json);

  const toponym = [];

  $.each(
      json['results']['bindings'],
      function (index, value) {
        var topo = value['toponimi']['value'];
        toponym.push(" " + topo);        
      });
  
  document.getElementById("toponimi").innerHTML = toponym;

}

function handle_receive(json) {

  console.log(json);

  const received = [];

  var i=0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        uri = value['document_uri']['value'];
        title = value['document_name']['value'];
        segnatura = value['segnatura']['value'];
        var data = "";
        var InfObj = "";
        if (value.hasOwnProperty('time_span')) {
            data = value['time_span']['value'];
        }
        if (value.hasOwnProperty('InfObj')) {
            InfObj = value['InfObj']['value'];
        }
        received.push([uri, title, segnatura, data, InfObj]);    
      });

  var myArray = "";

  for (var i=0; i<received.length; i++) {
    var letter = "";
    var infObject_button = "";
    var object_type = "";

    if (received[i][4] != "") {
          letter = '<div class="col-8"><p><span id="' + received[i][0] + '" class="title_doc lettera">'+ received[i][1] + '</span>';
          object_type = "lettera";
          infObject_button  += '<button type="button" id="' + received[i][4] + 
          '" class="lettera btn btn-default" alt="lettera" ><i class="fa fa-envelope"></i><p class="btn-text">Letter</p></button>';
    } else {
          letter = '<div class="col-8"><p><span id="' + received[i][0] + '" class="title_doc object">'+ received[i][1] + '</span>';
          object_type = "object";
          infObject_button  += '<button type="button" id="' + received[i][0] + 
          '" class="object btn btn-default" alt="oggetto" title="' + received[i][1] + 
          '"><i class="fa fa-book"></i><p class="btn-text">Physical object</p></button>';
    }

    if (received[i][2] != "") {
      letter = letter + "<br />Mark: " + received[i][2];
    }
    if (received[i][3] != "") {
      letter = letter + "<br />Date: " + received[i][3];
    }

    letter = letter + '</p></div>';

    myArray += '<div class="row res">'+ letter + 
        '<div class="col d-flex align-items-start justify-content-end">' + infObject_button +
        '<button value="' + object_type + '" type="button" id="' + received[i][0] + '" class="cit btn btn-default" alt="scheda" title="Info"><i class="fa fa-quote-right"></i><p class="btn-text">Citation</p></button>' +
        '<button value="' + object_type + '" type="button" id="' + received[i][0] + '" class="hyp btn btn-default" alt="scheda" title="Info"><i class="fa fa-link"></i><p class="btn-text">Hyperlink</p></button>' +
        '<a href="http://iperion.vm.fedcloud.eu/lodlive/?' + received[i][0] + '" target="_blank"><button type="button" class="btn btn-default info" alt="LOD"><i class="fa fa-share-alt"></i><p class="btn-text">Lod</p></button></a></div></div>';

  }

  document.getElementById("n_receive").innerHTML = received.length;
  document.getElementById("object_receive").innerHTML = myArray;

  if (received.length==0) {
    var messaggio = "<p class='no-results'>No resource found for this query</p>";
    document.getElementById("object_receive").innerHTML = messaggio;
  }

}


function handle_send(json) {

  console.log(json);

  const sent = [];

  var i=0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        uri = value['document_uri']['value'];
        title = value['document_name']['value'];
        segnatura = value['segnatura']['value'];
        var data = "";
        var InfObj = "";
        if (value.hasOwnProperty('time_span')) {
            data = value['time_span']['value'];
        }
        if (value.hasOwnProperty('InfObj')) {
            InfObj = value['InfObj']['value'];
        }
        sent.push([uri, title, segnatura, data, InfObj]);    
      });

  var myArray = "";

  for (var i=0; i<sent.length; i++) {
    var letter = "";
    var infObject_button = "";
    var object_type = "";

    if (sent[i][4] != "") {
          letter = '<div class="col-8"><p><span id="' + sent[i][0] + '" class="title_doc lettera">'+ sent[i][1] + '</span>';
          object_type = "lettera";
          infObject_button  += '<button type="button" id="' + sent[i][4] + 
          '" class="lettera btn btn-default" alt="lettera" ><i class="fa fa-envelope"></i><p class="btn-text">Letter</p></button>';
    } else {
          letter = '<div class="col-8"><p><span id="' + sent[i][0] + '" class="title_doc object">'+ sent[i][1] + '</span>';
          object_type = "object";
          infObject_button  += '<button type="button" id="' + sent[i][0] + 
          '" class="object btn btn-default" alt="oggetto" title="' + sent[i][1] + 
          '"><i class="fa fa-book"></i><p class="btn-text">Physical object</p></button>';
    }

    if (sent[i][2] != "") {
      letter = letter + "<br />Mark: " + sent[i][2];
    }
    if (sent[i][3] != "") {
      letter = letter + "<br />Date: " + sent[i][3];
    }

    letter = letter + '</p></div>';

    myArray += '<div class="row res">'+ letter + 
        '<div class="col d-flex align-items-start justify-content-end">' + infObject_button +
        '<button value="' + object_type + '" type="button" id="' + sent[i][0] + '" class="cit btn btn-default" alt="scheda" title="Info"><i class="fa fa-quote-right"></i><p class="btn-text">Citation</p></button>' +
        '<button value="' + object_type + '" type="button" id="' + sent[i][0] + '" class="hyp btn btn-default" alt="scheda" title="Info"><i class="fa fa-link"></i><p class="btn-text">Hyperlink</p></button>' +
        '<a href="http://iperion.vm.fedcloud.eu/lodlive/?' + sent[i][0] + '" target="_blank"><button type="button" class="btn btn-default info" alt="LOD"><i class="fa fa-share-alt"></i><p class="btn-text">Lod</p></button></a></div></div>';

  }

  document.getElementById("n_send").innerHTML = sent.length;
  document.getElementById("object_send").innerHTML = myArray;

  if (sent.length==0) {
    var messaggio = "<p class='no-results'>No resource found for this query</p>";
    document.getElementById("object_send").innerHTML = messaggio;
  }

}

function handle_cit(json) {

  console.log(json);

  const citations = [];

  var i=0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        uri = value['document_uri']['value'];
        title = value['document_name']['value'];
        segnatura = value['segnatura']['value'];
        var data = "";
        var InfObj = "";
        if (value.hasOwnProperty('time_span')) {
            data = value['time_span']['value'];
        }
        if (value.hasOwnProperty('InfObj')) {
            InfObj = value['InfObj']['value'];
        }
        citations.push([uri, title, segnatura, data, InfObj]);    
      });

  var myArray = "";

  for (var i=0; i<citations.length; i++) {
    var letter = "";
    var infObject_button = "";
    var object_type = "";

    if (citations[i][4] != "") {
          letter = '<div class="col-8"><p><span id="' + citations[i][0] + '" class="title_doc lettera">'+ citations[i][1] + '</span>';
          object_type = "lettera";
          infObject_button  += '<button type="button" id="' + citations[i][4] + 
          '" class="lettera btn btn-default" alt="lettera" ><i class="fa fa-envelope"></i><p class="btn-text">Lettera</p></button>';
    } else {
          letter = '<div class="col-8"><p><span id="' + citations[i][0] + '" class="title_doc object">'+ citations[i][1] + '</span>';
          object_type = "object";
          infObject_button  += '<button type="button" id="' + citations[i][0] + 
          '" class="object btn btn-default" alt="oggetto" title="' + citations[i][1] + 
          '"><i class="fa fa-book"></i><p class="btn-text">Physical object</p></button>';
    }

    if (citations[i][2] != "") {
      letter = letter + "<br />Mark: " + citations[i][2];
    }
    if (citations[i][3] != "") {
      letter = letter + "<br />Date: " + citations[i][3];
    }

    letter = letter + "</p></div>";

    myArray += '<div class="row res">'+ letter + 
        '<div class="col d-flex align-items-start justify-content-end">' + infObject_button +
        '<button type="button" value="' + object_type + '" id="' + citations[i][0] + '" class="cit btn btn-default" alt="scheda" title="Info"><i class="fa fa-quote-right"></i><p class="btn-text">Citation</p></button>' +
        '<button type="button" value="' + object_type + '" id="' + citations[i][0] + '" class="hyp btn btn-default" alt="scheda" title="Info"><i class="fa fa-link"></i><p class="btn-text">Hyperlink</p></button>' +
        '<a href="http://iperion.vm.fedcloud.eu/lodlive/?' + citations[i][0] + '" target="_blank"><button type="button" class="btn btn-default info" alt="LOD"><i class="fa fa-share-alt"></i><p class="btn-text">Lod</p></button></a></div></div>';

  }

  document.getElementById("n_cit").innerHTML = citations.length;
  document.getElementById("object_cit").innerHTML = myArray;

  if (citations.length==0) {
    var messaggio = "<p class='no-results'>No resource found for this query</p>";
    document.getElementById("object_cit").innerHTML = messaggio;
  }

}


function handle_persons(json) {

  console.log(json);

  const people = [];
  const person_names = [];
  const person_events = [];
  var Person = "";

  $.each(
      json['results']['bindings'],
      function (index, value) {
        var uri = value['range']['value'];
        var label = value['label']['value'];
        var ruolo = value['role']['value']
        var count = value['count']['value']
        var evento = ruolo + ": " + count
        person_events.push([uri, label, evento]);
        if (!person_names.includes(uri)) {
          person_names.push([uri, label]);
        }
        
      });

  for (var k=0; k<person_names.length; k++) {
    const tempArray = [];
    var uri = person_names[k][0];
    var nome = person_names[k][1]
    tempArray.push(uri);
    tempArray.push(nome);
    for (var y=0; y<person_events.length; y++) {
      var ev = person_events[y][2];
      if (person_names[k][0] == person_events[y][0]) {
        tempArray.push(ev);
      }
    }
    people.push(tempArray);
  }

  for (var i=0; i<people.length; i++) {

      var info = "";
      for (var h=2; h<people[i].length; h++) {
        info += people[i][h] + ' occurrences<br />';
      }

      Person += '<div class="row res"><div class="col-8">' +
      '<p><span id="' + people[i][0] + '" class="title_doc persona">'+ people[i][1] + '</span><br />' + info + '</p></div>' +
      '<div class="col d-flex align-items-start justify-content-end"><button type="button" id="' + people[i][0] + '" class="persona btn btn-default" alt="persona" title="' +
      people[i][1] + '"><i class="fa fa-user"></i><p class="btn-text">Persona</p></button>' +
      '<button type="button" value="Persona" id="' + people[i][0] + '" class="cit btn btn-default" alt="scheda" title="Info"><i class="fa fa-quote-right"></i><p class="btn-text">Citation</p></button>' +
      /*DA QUI HYPERLINK ->*/'<button type="button" value="Persona" id="' + people[i][0] + '" class="hyp btn btn-default" alt="scheda" title="Info"><i class="fa fa-link"></i><p class="btn-text">Hyperlink</p></button>' +
      /*DA QUI LOD ->*/'<a href="http://iperion.vm.fedcloud.eu/lodlive/?' + people[i][0] + '" target="_blank"><button type="button" class="btn btn-default info" alt="LOD"><i class="fa fa-share-alt"></i><p class="btn-text">Lod</p></button></a></div></div>';
  }

  document.getElementById("n_per").innerHTML = people.length;
  document.getElementById("object_per").innerHTML = Person;

  if (people.length==0) {
    var messaggio = "<p class='no-results'>Nessun risultato trovato</p>";
    document.getElementById("object_per").innerHTML = messaggio;
  }
} 

function handle_count(json) {
  console.log(json);

  const toponimi = [];

  const dataToponimi = [];

  var max = 0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        const topo = [];

        var toponimo = value['label']['value'];
        var count = value['Count']['value'];
        var temp = parseInt(count);
        toponimi.push(toponimo);
        dataToponimi.push([toponimo, count]);

        if (temp>max) {
          max = temp;
        }
        
      });

  // set the dimensions and margins of the graph
      var margin = {top: 20, right: 30, bottom: 40, left: 90},
          width = 460 - margin.left - margin.right,
          height = 400 - margin.top - margin.bottom;

      // append the svg object to the body of the page
      var svg = d3.select("#my_dataviz")
        .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");

      // Parse the Data
      //d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/7_OneCatOneNum_header.csv", function(data) {
        // Add X axis
        var x = d3.scaleLinear()
          .domain([0, max])
          .range([ 0, width]);
        svg.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x))
          .selectAll("text")
            .attr("transform", "translate(-10,0)rotate(-45)")
            .style("text-anchor", "end");

        // Y axis
        var y = d3.scaleBand()
          .range([ 0, height ])
          .domain(toponimi)
          .padding(.1);
        svg.append("g")
          .call(d3.axisLeft(y))

        //Bars
        svg.selectAll("myRect")
          .data(dataToponimi)
          .enter()
          .append("rect")
          .attr("x", x(0) )
          .attr("y", function(d) { return y(d[0]); })
          .attr("width", function(d) { return x(d[1]); })
          .attr("height", y.bandwidth() )
          .attr("fill", "#69b3a2")


  /*var texts = svg.selectAll("myRect")
    .data(dataToponimi)
    .enter()
    .append("text");

  texts.attr("x", function(d){ return d[1] / 4 - 20})
      .attr("y", function(d,i){ return 22.26*i +20})
      .attr("text-anchor", "middle")
      .attr("fill", "#fff")
      .text(function(d){ return d[1]});*/

}


function handle_count2(json) {
  console.log(json);

  const toponimi = [];

  const dataToponimi = [];

  const values = [];

  var max = 0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        const topo = [];

        var toponimo = value['label']['value'];
        var count = value['Count']['value'];
        var temp = parseInt(count);
        toponimi.push(toponimo);
        dataToponimi.push([toponimo, count]);

        if (temp>max) {
          max = temp;
        }
        
      });

  // set the dimensions and margins of the graph
      var margin = {top: 20, right: 30, bottom: 40, left: 90},
          width = 460 - margin.left - margin.right,
          height = 400 - margin.top - margin.bottom;

      // append the svg object to the body of the page
      var svg = d3.select("#my_dataviz2")
        .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");

      // Parse the Data
      //d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/7_OneCatOneNum_header.csv", function(data) {
        // Add X axis
        var x = d3.scaleLinear()
          .domain([0, max])
          .range([ 0, width]);
        
        svg.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x))
          .selectAll("text")
            .attr("transform", "translate(-10,0)rotate(-45)")
            .style("text-anchor", "end");

        // Y axis
        var y = d3.scaleBand()
          .range([ 0, height ])
          .domain(toponimi)
          .padding(.1);

        svg.append("g")
          .call(d3.axisLeft(y))

        //Bars
        svg.selectAll("myRect")
          .data(dataToponimi)
          .enter()
          .append("rect")
          .attr("x", x(0) )
          .attr("y", function(d) { return y(d[0]); })
          .attr("width", function(d) { return x(d[1]); })
          .attr("height", y.bandwidth() )
          .attr("fill", "#69b3a2")

        svg.selectAll("text2")
          .data(dataToponimi)
          .enter().append("text2")
          .text(function(d) {return d[1]})
          .attr("class", "text")
}

function open_info() {

    document.getElementById("info_luogo").style.display = "block";
    document.getElementById("place_info").style.display = "block";
    document.getElementById("topo").style.display = "none";
    document.getElementById("rif").style.display = "none";
}

function open_toponimi() {

    document.getElementById("info_luogo").style.display = "block";
    document.getElementById("place_info").style.display = "none";
    document.getElementById("topo").style.display = "block";
    document.getElementById("rif").style.display = "none";
}

function open_riferimenti() {

    document.getElementById("info_luogo").style.display = "block";
    document.getElementById("place_info").style.display = "none";
    document.getElementById("topo").style.display = "none";
    document.getElementById("rif").style.display = "block";
}