Progetto_2023-OVI/site2/js/ricerca.js

// Config data -- could be whatever
// should be moved to a different file if/when there's a lot of it
const flask_be_address = 'http://127.0.0.1:5000'

// Separate function to handle HTTP requests -- could be moved to different file (a service)
function getData(endpoint, queryDTO){

    let url = flask_be_address.concat(endpoint);

    // This seems to work and it's definitely better than previous version
    return $.ajax(
      {
        url: url,
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify(queryDTO),
      }
    );

    // // This seems to work too (but it's missing the 'return' statement, I'm not sure what 'fetch' returns)
    // fetch(url,
    //     {
    //         method: 'POST',
    //         headers: {
    //             'Content-Type': 'application/json'
    //         },
    //         body: JSON.stringify(queryDTO)
    //     }
    // );


    // // THE OLD, STUPID WAY
    // // This is a stupid way of handling the JSON data, but it works;
    // // trying to send application/json data causes Flask to complain and I can't understand why!    
    // return $.post(url,  {stringifiedDTO: JSON.stringify(queryDTO)});
}

let arrayResponse = [];
// Separate function to handle response data -- could be moved to different file (a service)
function processData(response){
    console.log(response);
    $("#loader").css("display", "none");
    if(response.length==0){
        alert('No results!')
    }
    else {
      arrayResponse = response;
      var keys = Object.keys(response[0]);
      createFirstRow(keys);
      var ll = response.length;
      for (var i=0; i<ll; i++) {
        let newRow = response[i];
        createRow(i, newRow);
      }
    }
    //$("#result").append(response);
}

function processOccData(response){
  console.log(response);
  $("#loader").css("display", "none");
  if(response.length==0){
      alert('No results!')
  }
  else {
    arrayResponse = response;
    var keys = Object.keys(response[0]);
    createFirstRowOcc(keys);
    var ll = response.length;
    for (var i=0; i<ll; i++) {
      let newRow = response[i];
      createOccRow(i, newRow);
    }
  }
  //$("#result").append(response);
}

//Funzione per gestire i contesti
function processSingleContext(response){
  if(response.length==0){
      alert('No results!')
  }
  else {
    console.log(response);
    createPage(response[0]);
  }
}

let queryDTO = {};

function funzioneRicerca(){
  $("#result").html("");
  $("#loader").css("display", "block");
  let collection_elementoDaRicercare = document.getElementsByClassName("barraDiRicerca");
  var collection_types = document.getElementsByClassName("flViewBy");
  var collection_lenght = collection_elementoDaRicercare.length;
  let distanza = document.getElementById("distanza").value;
  let queryList = [];
  var periodo = 0;
  var ordinate = 0;

  var i = 0;
  for (i; i < collection_lenght; i++) {
    elementoDaRicercare = collection_elementoDaRicercare[i].value;
    let word = elementoDaRicercare;
    var tipo = "";
    var espansa = 0;
    var raddoppiata = 0;
    var noLemma = 0;
    var formeLemmi = 0;
    var check_tipo = collection_types[i].value;
 
    //NOLEMMA DEVE ESSERE CONVERTITO IN TIPO (TIPO = 0, 1, 2), TIPO = 2 SE NOLEMMA è SELEZIONATO
       
    if ($('#occ_' + i + ' .ricercaEx').prop("checked"))
    {
      espansa = 1;
    }
    if ($('#occ_' + i + ' .raddoppiata').prop("checked"))
    {
      raddoppiata = 1;
    }
    if ($('#occ_' + i + ' .showOther').prop("checked"))
    {
      formeLemmi = 1;
    }
    if ($('#occ_' + i + ' .lemmatizzata').prop("checked"))
    {
      noLemma = 1;
    }
    

    if ((check_tipo == "forma") && (formeLemmi == 0)) {
      tipo = "forma";
    }
    else if ((check_tipo == "forma") && (formeLemmi == 1)) {
      tipo = "formaLemma";
    }
    else if ((check_tipo == "lemma") && (noLemma == 1)) {
      tipo = "soloLemmatizzate";
    }
    else if ((check_tipo == "lemma") && (formeLemmi == 0)) {
      tipo = "lemma";
    }
    else if ((check_tipo == "lemma") && (formeLemmi == 1)) {
      tipo = "lemmaForma";
    }

    queryList.push( {"stringa": word, "espansa": espansa, "raddoppiata": raddoppiata, "tipo": tipo} );
    //$("#params").append("I tuoi parametri: " + word + "; " + tipo + "; " + espansa + "; " + raddoppiata + "; " + formeLemmi);
  
  }

  if ($('#periodo').prop("checked"))
  {
    periodo = 1;
  }
  if ($('#ordinate').prop("checked"))
  {
    ordinate = 1;
  }

  let cooccorrenze = {"distanza": distanza, "stesso_periodo": periodo, "ordinate": ordinate};

  let numb = document.getElementById("search_form").childElementCount;
  if (numb < 2) {
      queryDTO = {
        queryList: queryList
    }
    getData('/simple_get_query', queryDTO)
    // After request finishes, process response data
    .done(response => processData(response))
    .fail(err => {
      console.log(err);
      $("#loader").css("display", "none");
      alert('Something went wrong!');
    });
  } else {
      queryDTO = {
        queryList: queryList,
        cooccorrenze: cooccorrenze
    }
    getData('/simple_get_query', queryDTO)
    // After request finishes, process response data
    .done(response => processOccData(response))
    .fail(err => {
      console.log(err);
      $("#loader").css("display", "none");
      alert('Something went wrong!');
    });
  } 

  console.log(queryDTO);

  $("#lauchSearchContext").css("display", "flex");
  
} 

function checkContext() {
  let resulTable = document.getElementById("result");
  const checkBoxes = resulTable.querySelectorAll('input[type="checkbox"]');
  let arrayContesti = [];

  var selected = [];
  $('#result input:checked').each(function() {
      //selected.push($(this).attr('id'));
      var checkNum = $(this).attr('id');
      selected.push(checkNum);
  });

  for (var i=0; i<arrayResponse.length; i++) {
    for (var j=0; j<selected.length; j++) {
      if (arrayResponse[i]["cod"] == selected[j]) {
        arrayResponse[i]["selected"] = true;
        arrayContesti.push(arrayResponse[i]);
      }
    }
  }

  queryDTO["listResults"] = arrayContesti; 

  console.log(queryDTO);

  $("#result").html("");
  $("#loader").css("display", "block");

  getData('/get_context', queryDTO)
  // After request finishes, process response data
  .done(response => processOccData(response))
  .fail(err => {
    console.log(err);
    $("#loader").css("display", "none");
    alert('Something went wrong!');
  });
//  .always(response => console.log(response));
}


$( document ).ready(function() {
  $("select").on("change", function(event) {
    var e = this.value;
    var word = "";
    if (e == "forma") {
      word = "lemmi";
      var parent = this.parentElement.parentElement.parentElement.parentElement.parentElement;
      var pp = parent.getElementsByClassName("lemmatizzata");
      console.log(pp[0]);
    }
    else {
      word = "forme";
    }
    $("#mostraFormaLemma").html(word);
  });

  var occ = 0;

  $("#btnGroupAddon").click(function() {
    $("#cooccorrenze_options").css("display", "flex");
    $("#inner_altro").css("display", "none");
    $("#inner_lemmatizzato").css("display", "flex");

    if (occ > 8) {
      alert("Hai esaurito i parametri a disposizione");
    }
    else {
      occ = occ + 1;
      
      createNewCC(occ);
      
    }
  });

});

function createNewCC(occ) {
  
  var new_id = "occ_" + occ;
  var new_par = document.createElement('div');
  new_par.className = "row height d-flex justify-content-center align-items-center";
  new_par.id = new_id;
  
  var search_params = document.createElement('div');
  search_params.className = "col search_params";

  var choose_param = document.createElement('div');
  choose_param.className = "row choose_param";

  var col_6 = document.createElement('div');
  col_6.className = "col-5";

  var input_group = document.createElement('div');
  input_group.className = "input-group form-check";

  var inputSel = document.createElement('input');
  inputSel.className = "barraDiRicerca form-control";
  inputSel.type = "text";

  //Create and append select list
  var selectList = document.createElement("select");
  selectList.className = "flViewBy";

  //Create and append the options
  var optionForma = document.createElement("option");
  optionForma.value = "forma";
  optionForma.text = "Forma";
  optionForma.selected = "selected";
  selectList.appendChild(optionForma);

  var optionLemma = document.createElement("option");
  optionLemma.value = "lemma";
  optionLemma.text = "Lemma";
  selectList.appendChild(optionLemma);

  var col_form = document.createElement("div");
  col_form.className = "col-2";

  var form_check = document.createElement("div");
  form_check.className = "form-check";

  var input_ricerca_espansa = document.createElement("input");
  input_ricerca_espansa.className = "ricercaEx form-check-input";
  input_ricerca_espansa.value = "ricerca_espansa";
  input_ricerca_espansa.type = "checkbox";
  input_ricerca_espansa.name = "espansa";

  var label_ricerca_espansa = document.createElement("label");
  label_ricerca_espansa.className = "form-check-label";
  label_ricerca_espansa.innerHTML = "Ricerca espansa";

  var col_form2 = document.createElement("div");
  col_form2.className = "col-2";

  var form_check2 = document.createElement("div");
  form_check2.className = "form-check";

  var input_ricerca_raddoppiata = document.createElement("input");
  input_ricerca_raddoppiata.className = "raddoppiata form-check-input";
  input_ricerca_raddoppiata.value = "raddoppiata";
  input_ricerca_raddoppiata.type = "checkbox";
  input_ricerca_raddoppiata.name = "raddoppiata";

  var label_ricerca_raddoppiata = document.createElement("label");
  label_ricerca_raddoppiata.className = "form-check-label";
  label_ricerca_raddoppiata.innerHTML = "Raddoppiata";

  var col_form3 = document.createElement("div");
  col_form3.className = "col-2";

  var form_check3 = document.createElement("div");
  form_check3.className = "form-check";

  var input_ricerca_lemmatizzata = document.createElement("input");
  input_ricerca_lemmatizzata.className = "lemmatizzata form-check-input";
  input_ricerca_lemmatizzata.value = "lemmatizzata";
  input_ricerca_lemmatizzata.type = "checkbox";
  input_ricerca_lemmatizzata.name = "lemmatizzata";
  input_ricerca_lemmatizzata.disabled = "true";

  var label_ricerca_lemmatizzata = document.createElement("label");
  label_ricerca_lemmatizzata.className = "form-check-label";
  label_ricerca_lemmatizzata.innerHTML = "Cerca solo lemmatizzate";

  var col_form4 = document.createElement("div");
  col_form4.className = "col-1";

  var form_check4 = document.createElement("div");
  form_check4.className = "form-check deleteCC";
  form_check4.id = occ;

  var trash_button = document.createElement("button");
  trash_button.className = "btn";
  var trash_icon = document.createElement("i");
  trash_icon.className = "fa fa-trash";

  input_group.appendChild(inputSel);
  input_group.appendChild(selectList);
  col_6.appendChild(input_group);

  form_check.appendChild(input_ricerca_espansa);
  form_check.appendChild(label_ricerca_espansa);
  col_form.appendChild(form_check);

  form_check2.appendChild(input_ricerca_raddoppiata);
  form_check2.appendChild(label_ricerca_raddoppiata);
  col_form2.appendChild(form_check2);

  form_check3.appendChild(input_ricerca_lemmatizzata);
  form_check3.appendChild(label_ricerca_lemmatizzata);
  col_form3.appendChild(form_check3);

  trash_button.appendChild(trash_icon);
  form_check4.appendChild(trash_button);
  col_form4.appendChild(form_check4);

  choose_param.appendChild(col_6);
  choose_param.appendChild(col_form);
  choose_param.appendChild(col_form2);
  choose_param.appendChild(col_form3);
  choose_param.appendChild(col_form4);

  search_params.appendChild(choose_param);

  new_par.appendChild(search_params);

  $("#search_form").append(new_par);
}

function changeFL(word) {
  $("#mostraFormaLemma").html(word);
}

function createFirstRow(param) {

  var row = document.createElement('div');
  row.className = "row height d-flex justify-content-center align-items-center";
  row.id = "first_row";

  
    if (param.includes("forma")) {
      var colForma = document.createElement('div');
      colForma.className = "col formaCol";
      colForma.append("Forma");
      row.append(colForma);
    }

    if (param.includes("lemma")) {
      var colLemma = document.createElement('div');
      colLemma.className = "col lemmaCol";
      colLemma.append("Lemma");
      row.append(colLemma);
    }
    
    if (param.includes("cat_gr")) {
      var categoria = document.createElement('div');
      categoria.className = "col cat_gr";
      categoria.append("Categoria Grammaticale");
      row.append(categoria);
    }
    
    if (param.includes("disambiguatore")) {
      var colDis = document.createElement('div');
      colDis.className = "col disambiguatore";
      colDis.append("Disambiguatore");
      row.append(colDis);
    }
    
    if (param.includes("occ")) {
      var colOcc = document.createElement('div');
      colOcc.className = "col occorrenze";
      colOcc.append("Occorrenze");
      row.append(colOcc);
    }

  var colSel = document.createElement('div');
    colSel.className = "col seleziona_elemento";
    colSel.append("Seleziona");
    row.append(colSel);


  $("#result").append(row);

}

//Crea prima riga per contesti multipli 

function createFirstRowOcc(param) {

  var row = document.createElement('div');
  row.className = "row height d-flex justify-content-center align-items-center";
  row.id = "first_row";

  
    if (param.includes("Titolo Abbreviato")) {
      var colTitolo = document.createElement('div');
      colTitolo.className = "col-2 abbrCol";
      colTitolo.append("Titolo Abbreviato");
      row.append(colTitolo);
    }

    if (param.includes("Rif_organico")) {
      var colRif = document.createElement('div');
      colRif.className = "col rifCol";
      colRif.append("Rif organico");
      row.append(colRif);
    }
    
    if (param.includes("pag")) {
      var colPag = document.createElement('div');
      colPag.className = "col pag";
      colPag.append("Pag");
      row.append(colPag);
    }
    
    if (param.includes("riga")) {
      var colRiga = document.createElement('div');
      colRiga.className = "col riga";
      colRiga.append("Riga");
      row.append(colRiga);
    }
    
    if (param.includes("stanza")) {
      var colStanza = document.createElement('div');
      colStanza.className = "col stanza";
      colStanza.append("Stanza");
      row.append(colStanza);
    }

    if (param.includes("tipostanza")) {
      var colTipoStanza = document.createElement('div');
      colTipoStanza.className = "col tipostanza";
      colTipoStanza.append("Tipo stanza");
      row.append(colTipoStanza);
    }

    if (param.includes("verso")) {
      var colVerso = document.createElement('div');
      colVerso.className = "col verso";
      colVerso.append("Verso");
      row.append(colVerso);
    }

    if (param.includes("contesto")) {
      var colContesto = document.createElement('div');
      colContesto.className = "col-4 contesto";
      colContesto.append("Contesto");
      row.append(colContesto);
    }


  $("#result").append(row);

}

//

function createRow(num, elem) {
  var cat_gr = elem["cat_gr"];
  var disambiguatore = elem["disambiguatore"];
  var forma = elem["forma"];
  var lemma = elem["lemma"];
  var occ = elem["occ"];
  var cod = elem["cod"];

  var row = document.createElement('div');
  row.className = "row height d-flex justify-content-center align-items-center";
  row.id = num;

  if (elem.hasOwnProperty('forma')) {
    var colForma = document.createElement('div');
    colForma.className = "col formaCol";
    colForma.append(forma);
    row.append(colForma);
  }
  
  if (elem.hasOwnProperty('lemma')) {
    var colLemma = document.createElement('div');
    colLemma.className = "col lemmaCol";
    colLemma.append(lemma);
    row.append(colLemma);
  }
  
  if (elem.hasOwnProperty('cat_gr')) {
    var categoria = document.createElement('div');
    categoria.className = "col cat_gr";
    categoria.append(cat_gr);
    row.append(categoria);
  }
  
  if (elem.hasOwnProperty('disambiguatore')) {
    var colDis = document.createElement('div');
    colDis.className = "col disambiguatore";
    colDis.append(disambiguatore);
    row.append(colDis);
  }
  
  if (elem.hasOwnProperty('occ')) {
    var colOcc = document.createElement('div');
    colOcc.className = "col occorrenze";
    colOcc.append(occ);
    row.append(colOcc);
  }
  
  var colSel = document.createElement('div');
  colSel.className = "col seleziona_elemento";
  var inputSel = document.createElement('input');
  inputSel.className = "form-check-selected";
  inputSel.id = cod;
  inputSel.type = "checkbox";
  colSel.append(inputSel);
  row.append(colSel);

  $("#result").append(row);

}

//Crea tabella cooccorrenze

function createOccRow(num, elem) {
  var titolo_abbreviato = elem["Titolo Abbreviato"];
  var contesto = elem["contesto"];
  contesto = contesto.replace(/\n/g, "<br />");
  let words = elem["highlights_combined"];
  var rif_organico = elem["Rif_organico"];
  var pag = elem["pag"];
  var riga = elem["riga"];
  var stanza = elem["stanza"];
  var tipostanza = elem["tipostanza"];
  var verso = elem["verso"];

  for (var i=0; i<words.length; i++) {
    contesto = contesto.replace(words[i], '<span class="highlight">' + words[i] + '</span>');
  }
  //contesto = contesto.replace(/\n/g, "<br />");
  //let str = contesto.replace(word, '<span style="color:red">' + word + '</span>');

  var row = document.createElement('div');
  row.className = "row height d-flex justify-content-center align-items-center";
  row.id = num;
  var onClickCommand = "goToSingleContext(" + num + ", 31, 0, 0)";
  row.setAttribute("onclick", onClickCommand);

  if (elem.hasOwnProperty('Titolo Abbreviato')) {
    var colTitolo = document.createElement('div');
    colTitolo.className = "col-2 abbrCol";
    colTitolo.append(titolo_abbreviato);
    row.append(colTitolo);
  }

  if (elem.hasOwnProperty('Rif_organico')) {
    var colRif = document.createElement('div');
    colRif.className = "col rifCol";
    colRif.append(rif_organico);
    row.append(colRif);
  }

  if (elem.hasOwnProperty('pag')) {
    var colPag = document.createElement('div');
    colPag.className = "col pagCol";
    colPag.append(pag);
    row.append(colPag);
  }

  if (elem.hasOwnProperty('riga')) {
    var colRiga = document.createElement('div');
    colRiga.className = "col rigaCol";
    colRiga.append(riga);
    row.append(colRiga);
  }

  if (elem.hasOwnProperty('stanza')) {
    var colStanza = document.createElement('div');
    colStanza.className = "col stanzaCol";
    colStanza.append(stanza);
    row.append(colStanza);
  }

  if (elem.hasOwnProperty('tipostanza')) {
    var colTipoStanza = document.createElement('div');
    colTipoStanza.className = "col tipostanzaCol";
    colTipoStanza.append(tipostanza);
    row.append(colTipoStanza);
  }

  if (elem.hasOwnProperty('verso')) {
    var colVerso = document.createElement('div');
    colVerso.className = "col versoCol";
    colVerso.append(verso);
    row.append(colVerso);
  }

  if (elem.hasOwnProperty('contesto')) {
    var colContesto = document.createElement('div');
    colContesto.className = "col-4 contestoCol";
    colContesto.innerHTML = contesto;
    row.append(colContesto);
  }

  $("#result").append(row);

}

//

//START GET SINGLE CONTEXT

function goToSingleContext(num, parole, periodi, brani) {
  let params = {"indice": num, "parole": parole, "periodi": periodi, "brani": brani};

  let queryGSC = {
    elem: arrayResponse[num],
    params: params
  }

  getData('/get_single_context', queryGSC)
    // After request finishes, process response data
    .done(response => processSingleContext(response))
    .fail(err => {
      console.log(err);
      $("#loader").css("display", "none");
      alert('Something went wrong!');
    });
}

//CREATE NEW PAGE FOR SINGLE CONTEXT

function createPage(elem) {
  var contesto = elem['contesto'];
/*
  var contesto = elem['contesto'];
  var annoF = elem["Anno finale"];
  var anniI = elem["Anno iniziale"];
  var area_generica = elem["Area generica"];
  var area_specifica = elem["Area specifica"];
  var autore = elem["Autore"];
  var curatore = Curatore;
  var data_cod = Data codificata;
  var data_des = descrittiva
  var forma = Forma
  var genere = Genere
  var iq = IQ
  var rif_organico = Rif_organico
  var rig = Rig_completo
  var tipo = Tipo
  var titolo = Titolo
  var titolo_abb = Titolo Abbreviato
  var cat_gr
  var cod
  var col
  var disambiguatore
  var elemlen
  var formattazione
  var highlight
  var highlights_combined
  var lemma
  var links
  var mappa
  var ntx
  var numbrano
  var numorg
  var numperiod
  var pag
  var pfin
  var piniz
  var pitxt
  var riga
  var sigla
  var stanza
  var tipostanza
  var verso
  var vol
  var note = "";
  var testo_associato = "";*/

  console.log(elem);

 // if (elem.hasOwnProperty('contesto')) {
 //   contesto = elem["contesto"];
  // }

  //var opened = window.open("pages/singleContext.html");
  //opened.write("<h2>" + contesto + "</h2>");

  var win = window.open("");
  win.document.body.innerHTML = "<p>" + contesto + "</p>";
  
}


$(document).on("click", ".deleteCC", function (ev) {
  var deleteID = "occ_" + this.id;
  const element = document.getElementById(deleteID);
  element.remove();

  let numb = document.getElementById("search_form").childElementCount;
  if (numb < 2) {
    $("#cooccorrenze_options").css("display", "none");
    $("#inner_altro").css("display", "flex");
    $("#inner_lemmatizzato").css("display", "none");
  }

});

$(document).on("change", ".flViewBy", function (ev) {
  var check_tipo = this.value;
  var parent = this.parentElement.parentElement.parentElement.parentElement.parentElement;
  var cc = parent.getElementsByClassName("lemmatizzata");
  
  if (check_tipo == "forma") {
    cc[0].disabled = true;
    cc[0].checked = false;
  } 
  else if (check_tipo == "lemma"){
    cc[0].disabled = false;
  }

});