RESTORE_FE/js/geospace.js

/*var link = thisUrlParams.link;

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

queryURL = prefixes + (queryManager['queryTimeSpace']['queryTimeLetters']);
doJsonQuery(queryURL).done(function(data) { manageJson(data); });*/


// Raccatto i parametri dall'URL -- mi aspetto un parametro di nome 'link'!
thisUrlParams = {};
window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    thisUrlParams[key] = value;
});
console.log('URL get params: ', thisUrlParams.params);

var params = thisUrlParams.params;
const pp = params.split(";");
var tipo = pp[0];

var sigleFinished = false;
var lemmaFinished = false;
var mappaFinished = false;


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

if (tipo=="lemma") {
    var uri_lemma = pp[1];
    var lemma = pp[2].replace(/%20/g, " ");
    querySigle = prefixes + (queryManager['queryRES']['queryTrovaSigla']).replaceAll('{URI}', uri_lemma);
    queryEsplora = prefixes + (queryManager['queryRES']['queryEsploraDocumenti']).replaceAll('{URI}', uri_lemma);
    queryMappa = prefixes + (queryManager['queryRES']['queryEsploraMappa']).replaceAll('{URI}', uri_lemma);
    doJsonQuery(querySigle).done(function(r) { manageArraySigle(r, lemma); });
    doJsonQuery(queryEsplora).done(function(r) { handleLemma(r, lemma); });
    doJsonQuery(queryMappa).done(function(r) { manageJson(r, lemma); });
}

if (tipo=="lettera") {
    var uri_mittente = pp[2];
    var uri_destinatario = pp[4];
    var mittente = pp[1].replace(/%20/g, " ");
    var destinatario = pp[3].replace(/%20/g, " ");
    queryLettere = prefixes + (queryManager['queryRES']['queryExchange']).replace('{MITTENTE}', uri_mittente).replace('{DESTINATARIO}', uri_destinatario);
    doJsonQuery(queryLettere).done(function(r) { handle_Letters(r, mittente, destinatario); });

}

//console.log(luoghi);
var latitude = 43.8777049;
var longitude = 11.102228;

var mapIcon = "<div id='map_icon' class='no_info_icon'> \
<svg xmlns='http://www.w3.org/2000/svg' width='30' viewBox='0 0 576 512'> \
  <path d='M408 120C408 174.6 334.9 271.9 302.8 311.1C295.1 321.6 280.9 321.6 273.2 311.1C241.1 271.9 168 174.6 168 120C168 53.73 221.7 0 288 0C354.3 0 408 53.73 408 120zM288 152C310.1 152 328 134.1 328 112C328 89.91 310.1 72 288 72C265.9 72 248 89.91 248 112C248 134.1 265.9 152 288 152zM425.6 179.8C426.1 178.6 426.6 177.4 427.1 176.1L543.1 129.7C558.9 123.4 576 135 576 152V422.8C576 432.6 570 441.4 560.9 445.1L416 503V200.4C419.5 193.5 422.7 186.7 425.6 179.8zM150.4 179.8C153.3 186.7 156.5 193.5 160 200.4V451.8L32.91 502.7C17.15 508.1 0 497.4 0 480.4V209.6C0 199.8 5.975 190.1 15.09 187.3L137.6 138.3C140 152.5 144.9 166.6 150.4 179.8H150.4zM327.8 331.1C341.7 314.6 363.5 286.3 384 255V504.3L192 449.4V255C212.5 286.3 234.3 314.6 248.2 331.1C268.7 357.6 307.3 357.6 327.8 331.1L327.8 331.1z'/> \
</svg> \
<p>Nessun luogo trovato</p> \
</div>";


var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
      cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade, Points &copy 2012 LINZ',
      cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 17, attribution: cloudmadeAttribution}),
      latlng = new L.LatLng(latitude, longitude);

  
map = new L.Map('map', {center: latlng, zoom: 5, layers: [cloudmade]});
mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';

//var markers = new L.MarkerClusterGroup();
//var markerList = [];

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


var markerList = [];
var markers = new L.MarkerClusterGroup();
let anni = [];
let eventi = {};
let testi_ovi = [];

function handleLemma(json, lemma) {

	let anni = [];
	
	thead = '<div class="row def_res"> \
				<div class="col-10">Documento</div> \
				<div class="col-2">Esplora</div> \
			</div>';

	var DocumentsTable = thead;

	var i = 0;

	$.each(
		json['results']['bindings'],
		function (index, value) {
		  	var document = value['document']['value'];
			var uri_document = value['uri_document']['value'];
			var uri_info = "";
			var type = "";
			var date = "";
			var year = "";
			var month = "";
			var day = "";
			var sigla = "";
			var text = "Nessun testo trovato";
			var object_button = "";
		
			if(value.hasOwnProperty('uri_infObj')) {
				uri_info = value['uri_infObj']['value'];	
			}
			if(value.hasOwnProperty('types')) {
				type = value['types']['value'];
			}
			if(value.hasOwnProperty('time_span')) {
				date = value['time_span']['value'];
			}
			if(value.hasOwnProperty('year')) {
				year = value['year']['value'];
			}
			if(value.hasOwnProperty('month')) {
				month = value['month']['value'];
			}
			if(value.hasOwnProperty('day')) {
				day = value['day']['value'];
			}
			if(value.hasOwnProperty('text')) {
				text = value['text']['value'];
			}
			if(value.hasOwnProperty('sigla')) {
				sigla = value['sigla']['value'];
			}

			if (type.includes("lettera")) {
				object_button  = '<button type="button" id="' + uri_info + 
				'" class="lettera btn btn-default" alt="opera d\'arte" title="' + document + 
				'"><i class="fa fa-envelope"></i></button>';
			} else {
				object_button  = '<button type="button" id="' + uri_document + 
				'" class="object btn btn-default" alt="oggetto" title="' + document + 
				'"><i class="fa fa-book"></i></button>';
			}
			

			DocumentsTable += '<div class="row res">' +
			'<div id="' + uri_document + '" class="col-10 object">' + document + '</div>' +
			'<div class="col-2">' + object_button + '</div>' +
			'</div>';

			i++;

	});


	document.getElementById("lemma_buttons").style.display = "flex";
	document.getElementById("results_table").innerHTML = DocumentsTable;
	document.getElementById("results_title").innerHTML = titleCase(lemma);

}


function manageArraySigle(json, lemma) {
  sigleFinished = true;
  $.each(
		json['results']['bindings'],
		function (index, value) {
        var uri = value['uri']['value'];
        var sigla = value['sigla']['value'];
        var testo = value['text']['value'];

        queryIdLemma = prefixes + (queryManager['queryRES']['queryTrovaIDlemma']).replace('<{SIGLA}>', sigla).replace('<{LEMMA}>', lemma);
        console.log(queryIdLemma);
        doJsonQuery(queryIdLemma).done(function(r) { manageTestoLettere(r, uri, testo); });
			
	});

  if (sigleFinished && lemmaFinished && mappaFinished) {
    $('#Loader').css("display", "none");
    $('#overlay').css("display", "none");
  }
}

function manageTestoLettere(json, uri, testo) {

  var id = "";


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

    let regex = "<w>(.{0,50})</w>(.{0,5})<lem n='ID' (.*?)>";
    let regex2 = "<lem n='ID' (.*?)>(.*?)(\\s|,|;|<)";
    regex = regex.replace('ID', id);
    regex = new RegExp(regex);
    regex2 = regex2.replace('ID', id);
    regex2 = new RegExp(regex2);
    var testo3 = "";

    console.log(regex.exec(testo));

    if (regex.test(testo)) {
      console.log("true");

      const match = regex.exec(testo);
      let index = regex.exec(testo).index;
      let last = index + match[0].length;

      let toaddfirst = '<span class="highlight">';
      let toaddlast = '</span>';
      let testo2 = [testo.slice(0, last), toaddlast, testo.slice(last)].join('');
      testo3 = [testo2.slice(0, index), toaddfirst, testo2.slice(index)].join('');

    } else if (regex2.test(testo)) {

      const match = regex2.exec(testo);
      let index = regex2.exec(testo).index;
      let last = index + match[0].length-1;

      let toaddfirst = '<span class="highlight">';
      let toaddlast = '</span>';
      let testo2 = [testo.slice(0, last), toaddlast, testo.slice(last)].join('');
      testo3 = [testo2.slice(0, index), toaddfirst, testo2.slice(index)].join('');

    } else {

      testo = testo3;

    }

    testi_ovi.push([uri, testo3]);

    /*let regex = "<lem n='ID' (.*?)>(.*?)(\\s|,|;|<)";
    regex = regex.replace('ID', id);
    regex = new RegExp(regex);

    const match = regex.exec(testo);
    var index = regex.exec(testo).index;
    var last = index + match[0].length-1;

    var toaddfirst = '<span class="highlight">';
    var toaddlast = '</span>';
    var testo2 = [testo.slice(0, last), toaddlast, testo.slice(last)].join('');
    var testo3 = [testo2.slice(0, index), toaddfirst, testo2.slice(index)].join('');

    testi_ovi.push([uri, testo3]); */

}

console.log(testi_ovi);

function manageJson(json, lemma) {
  lemmaFinished = true;
  console.log("lemmaFinished");
  var i=0;
  $.each(
    json['results']['bindings'],
    function (index, value) {
      var uri = value['uri_place']['value'];
      var label = value['place']['value'];
      var coord = value['coords']['value'];
      var uri_inf = value['uri_infObj']['value'];
      var year = "";
      var month = "";
      var day = "";
      var uri_soggetto = value['uri_subject']['value'];
      var soggetto = value['subject']['value'];
      //var evento = value['event']['value'];
      var evento = "Invio"
      var data = value['time_span']['value'];
      var testo = "";
      
      if (value.hasOwnProperty('year')) {
        year = value['year']['value'];
        if (!anni.includes(year)) {
          anni.push(year);
        }
      }
      if (value.hasOwnProperty('month')) {
        month = value['month']['value'];
      }
      if (value.hasOwnProperty('day')) {
        day = value['day']['value'];
      }
      if (value.hasOwnProperty('text')) {
        testo = value['text']['value'];
      }
      for (kk in testi_ovi) { 
        if (testi_ovi[kk][0] == uri_inf) {
          testo = testi_ovi[kk][1];
        }
      }
      
      eventi[i] = {"uri_soggetto": uri_soggetto, "uri_info": uri_inf,"soggetto": soggetto, "uri_luogo": uri, "luogo": label, "coordinate": coord, "evento": evento, "data": data, "anno": year, "mese": month, "giorno": day, "testo": testo};

      i++;

    });
 
    handle_map(eventi);
    manageYears(anni);
    manageEvents(eventi);
    console.log("lemmaFinished2");
    if (sigleFinished && lemmaFinished && mappaFinished) {
      $('#Loader').css("display", "none");
      $('#overlay').css("display", "none");
    }

}


function handle_map(myArray) {
  //console.log(json);
  mappaFinished = true;
  console.log("mappaFinished");

  const locations = [];
  const place_names = [];
  const luoghi = [];
  

  for (i in myArray) {
    
        const loc = []
        var uri = myArray[i]['uri_luogo'];
        var label = myArray[i]['luogo'];
        var coord = myArray[i]['coordinate'];
        var year = myArray[i]['anno'];
        var month = myArray[i]['mese'];
        var day = myArray[i]['giorno'];
        var uri_soggetto = myArray[i]['uri_soggetto'];
        var soggetto = myArray[i]['soggetto'];
        //var evento = value['event']['value'];
        var evento = myArray[i]['evento']
        var data = myArray[i]['data'];
        
        if (!place_names.includes(uri)) {
          place_names.push(uri);
          const coordinates = coord.split(", ");
          loc.push(uri);
          label = titleCase(label);
          loc.push(label);
          loc.push(coordinates[0]);
          //lat += parseInt(coordinates[0]);
          loc.push(coordinates[1]);
          //long += parseInt(coordinates[1].replace(/^(\.)/,"0.").replace("-.", "-0."));
          locations.push(loc);
          
        }
        

  }


  for (var k=0; k<locations.length; k++) {
    const tempArray = [];
    var nomeLuogo = locations[k][1];
    var lt = locations[k][2];
    var lg = locations[k][3];
    tempArray.push(nomeLuogo);
    tempArray.push(lt);
    tempArray.push(lg);
    luoghi.push(tempArray);
  }

  function populate() {
    for (var i = 0; i < luoghi.length; i++) {
      var a = luoghi[i];
      
      var title = titleCase(a[0]);
      var marker = new L.Marker(new L.LatLng(a[1], a[2]), { title: title });
      //marker.bindPopup(title);
      //marker.on('click', markerOnClick);
      //$(marker._icon).addClass('selectedMarker');
      marker.on('click', function(){
        var name_place = $(this)[0].options.title;
        var markerLat = $(this)[0]._latlng['lat'];
        var markerLng = $(this)[0]._latlng['lng'];
        managePlace(name_place);
        });
      markers.addLayer(marker);
      markerList.push(marker);
    }
  }

  populate();
  //manageYears(anni);

  map.addLayer(markers);
  //manageEvents(eventi)

  console.log("mappaFinished2");
  if (sigleFinished && lemmaFinished && mappaFinished) {
    $('#Loader').css("display", "none");
    $('#overlay').css("display", "none");
  }

}

function markerOnClick(e)
{
  alert("hi. you clicked the marker at " + e.LatLng);
  console.log(e);
  
}


let time_span = [];

/*
function handle_map2(json) {
  
  cleanMap();

  const locations = [];
  const place_names = [];
  const luoghi = [];

  time_span = [];
  
  var lat = 0;
  var long = 0;
  var i=0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        const loc = []
        var uri = value['uri_place']['value'];
        var label = value['place']['value'];
        var coord = value['coords']['value'];
        
        
        if (!place_names.includes(uri)) {
          place_names.push(uri);
          const coordinates = coord.split(", ");
          loc.push(uri);
          label = titleCase(label);
          loc.push(label);
          loc.push(coordinates[0]);
          lat += parseInt(coordinates[0]);
          loc.push(coordinates[1]);
          long += parseInt(coordinates[1].replace(/^(\.)/,"0.").replace("-.", "-0."));
          locations.push(loc);
          i++;
        }

        if (value.hasOwnProperty('time_span')) {
          data = value['time_span']['value'];
          if (!time_span.includes(data)) {
            time_span.push(data);
          }
        }
        
      });


  for (var k=0; k<locations.length; k++) {
    const tempArray = [];
    var nomeLuogo = locations[k][1];
    var lt = locations[k][2];
    var lg = locations[k][3];
    tempArray.push(nomeLuogo);
    tempArray.push(lt);
    tempArray.push(lg);
    luoghi.push(tempArray);
  }
    
  function populate() {
    for (var i = 0; i < luoghi.length; i++) {
      var a = luoghi[i];
      
      var title = "<p>" + titleCase(a[0]) + "</p>";
      var marker = new L.Marker(new L.LatLng(a[1], a[2]), { title: title });
      marker.bindPopup(title);
      markers.addLayer(marker);
      markerList.push(marker);
    }
  }

  populate();
  manageDates(time_span);
  
}
*/

/*
function handle_map3(json) {
  
  cleanMap();

  const locations = [];
  const place_names = [];
  const luoghi = [];

  let eventi = [];
  
  var lat = 0;
  var long = 0;
  var i=0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        const loc = []
        var uri = value['uri_place']['value'];
        var label = value['place']['value'];
        var coord = value['coords']['value'];
        
        
        if (!place_names.includes(uri)) {
          place_names.push(uri);
          const coordinates = coord.split(", ");
          loc.push(uri);
          label = titleCase(label);
          loc.push(label);
          loc.push(coordinates[0]);
          lat += parseInt(coordinates[0]);
          loc.push(coordinates[1]);
          long += parseInt(coordinates[1].replace(/^(\.)/,"0.").replace("-.", "-0."));
          locations.push(loc);
          i++;
        }

        var uri_person = "";
        var person = "";
        var ev = "";

        if (value.hasOwnProperty('uri_person')) {
          uri_person = value['uri_person']['value'];
        }
        if (value.hasOwnProperty('person')) {
          person = value['person']['value'];
        }
        if (value.hasOwnProperty('event')) {
          ev = value['event']['value'];
        }

        eventi.push([ev, person, uri_person, coord]);
        
      });


  for (var k=0; k<locations.length; k++) {
    const tempArray = [];
    var nomeLuogo = locations[k][1];
    var lt = locations[k][2];
    var lg = locations[k][3];
    tempArray.push(nomeLuogo);
    tempArray.push(lt);
    tempArray.push(lg);
    luoghi.push(tempArray);
  }
    
  function populate() {
    for (var i = 0; i < luoghi.length; i++) {
      var a = luoghi[i];
      
      var title = "<p>" + titleCase(a[0]) + "</p>";
      var marker = new L.Marker(new L.LatLng(a[1], a[2]), { title: title });
      marker.bindPopup(title);
      markers.addLayer(marker);
      markerList.push(marker);
    }
  }

  populate();
  manageEvents(eventi);
  
}
*/

function managePlace(namePlace) {
  let eventPlace = {};
  var j=0;
  var place = namePlace.replace('<p>', '').replace('</p>', '');
  for (i in eventi) {
    if (eventi[i]['luogo'] == place) {
      eventPlace[j] = eventi[i];
      j++;
    } 
  }

  console.log(eventPlace);
  document.getElementById('timeline').innerHTML = "";
  manageEvents(eventPlace);

}

function manageYears(anni) {

  var Anni = "";

  anni.sort();

  var left = 10;
  
  for (i in anni) {
    var anno = anni[i];
    if (anno.length == 4) {
      Anni += '<li id="'+ anno + '" class="year event_days" style="left:' + left + 'px"><div>' + anno + '</div></li>';
      left = left + 80;
    }
  }

  document.getElementById("anni").innerHTML = Anni;

}

let uniqueDates = [];

function manageDates(date) {

  uniqueDates = [];

  let evDates = {};

  var Date = "";
  var left = 30;

  for (i in date) {
    if (!uniqueDates.includes(date[i])) {
      uniqueDates.push(date[i]);
      var data = date[i];
      Date += '<li id="'+ data + '" class="date event_days" style="left:' + left + 'px"><div>' + data + '</div></li>';
      left = left + 100;
    }
    for (j in eventi) {
      if (date[i] == eventi[j]['data']) {
        evDates[i] = eventi[j];
      }
    }
  }

  document.getElementById("anni").innerHTML = Date;

}

function manageEvents(events) {

  var Eventi = "";
  var anni = [];
  var days = [];
  var simpleDate = "";
  
  for (i in events) {
    var ev = events[i]['evento'];
    var soggetto = events[i]['soggetto'];
    var uri_soggetto = events[i]['uri_soggetto'];
    var uri_luogo = events[i]['uri_luogo'];
    var luogo = events[i]['place'];
    var coordinates = events[i]['coordinate'];
    var date = events[i]['data'];
    var anno = events[i]['anno'];
    var mese = events[i]['mese'];
    var giorno = events[i]['giorno'];
    var testo = events[i]['testo'];
    var informationObject = eventi[i]['uri_info'];

    if (anno.length == 4) {
      if (!anni.includes(anno)) {
        createYearSeed(anno);
        anni.push(anno);
      }
    }

    if (!days.includes(date)) {
        days.push(date);
        simpleDate = date;
        createDateSeed(simpleDate);
    } else {
        simpleDate = "";
    }
    
    var object_button = '<button type="button" id="' + uri_soggetto + 
				'" class="object btn btn-default geo-text" alt="oggetto" title="' + soggetto + 
				'">Vedi scheda oggetto <i class="fa fa-book"></i></button>';

    Eventi = '<div class="event"> \
    <div class="eventSeed"><div data-point="' + coordinates + '" style="cursor:zoom-in;" class="event_title">' + soggetto + '</div><div class="d-flex justify-content-end">' + object_button +'</div> \
    <div>' + testo + '</div></div></div>';
    //<div class="col-2"><div class="row">' + object_button + '</div></div></div>';
  
    $('#timeline').append(Eventi);
  }

 
}

function createYearSeed(year) {

  var Anno = "<div class='yearSeed' id='" + year + "'><h2>" + year + "</h2></div>";

  $('#timeline').append(Anno);
}

function cleanMap() {
  markers.clearLayers();
}

function createDateSeed(date) {

  var Data = "<div id='" + date + "'><div class='dateSeed'>" + date + "</div>";

  $('#timeline').append(Data);
}

function cleanMap() {
  markers.clearLayers();
}


$(document).on("click", ".year", function (ev) {
  let eventYear = {};
  let date = [];
  var zoom = 5;
  var j=0;
  map.setView([latitude, longitude], zoom);
  anno = parseInt(this.id);
  for (i in eventi) {
    if (eventi[i]['anno'] == anno) {
      var data = eventi[i]['data'];
      date.push(data);
      eventYear[j] = eventi[i];
      j++;
    } 
  }

  document.getElementById('timeline').innerHTML = "";
  manageDates(date);
  manageEvents(eventYear);
  cleanMap();
  handle_map(eventYear);
  
  //queryAnno = prefixes + (queryManager['queryTimeSpace']['queryTime1']).replace('{YEAR}', anno);
  //doJsonQuery(queryAnno).done(function(data) { handle_map2(data); }); 

}); 

$(document).on("click", ".date", function (ev) {
  var date = this.id;
  let eventDay = {};
  var zoom = 5;
  var j=0;
  map.setView([latitude, longitude], zoom);
  var data = parseInt(this.id);
  for (i in eventi) {
    if (eventi[i]['data'] == date) {
      eventDay[j] = eventi[i];
      j++;
    } 
  }

  console.log(eventDay);
  document.getElementById('timeline').innerHTML = "";
  manageEvents(eventDay);
  cleanMap();
  handle_map(eventDay);

  //queryAnno = prefixes + (queryManager['queryTimeSpace']['queryTime2']).replace('{DATE}', date);
  //doJsonQuery(queryAnno).done(function(data) { handle_map3(data); }); 

}); 

//EVENT ON HOVER. ACTIVATE BY PASSING ON TITLE
/*
$(document).on("mouseover", ".event", function(){
  // parse lat and lng from the divs data attribute
  var latlng = $(this).data().point.split(', ');
  var lat = latlng[0];
  var lng = latlng[1];
  var zoom = 10;

  map.setView([lat, lng], zoom);
});
*/
$(document).on("click", ".event_title", function(){
  // parse lat and lng from the divs data attribute
  var latlng = $(this).data().point.split(', ');
  var lat = latlng[0];
  var lng = latlng[1];
  var zoom = 14;

  map.setView([lat, lng], zoom);
});



$(document).on("click", "#backToAnni", function (ev) {
  manageYears(anni);   

});  

$(document).on("click", "#backToDate", function (ev) {
  manageDates(time_span);   

}); 

function show_list(){
	document.getElementById("res_container").style.display = "block";
	document.getElementById("evenTime").style.display = "none";
}

function show_map(){
	document.getElementById("res_container").style.display = "none";
	document.getElementById("evenTime").style.display = "block";
}