Update interface

flask_be/app.py

@@ -17,11 +17,11 @@ def simpleQuery():
     appath = app.root_path
 
     try:        
-        data = request.form['word']
-        tipo = request.form['tipo']
-        espansa = request.form['espansa']
-        raddoppiata = request.form['raddoppiata']
-        formeLemmi = request.form['formeLemmi']
+        #data = request.form['word']
+        #tipo = request.form['tipo']
+        #espansa = request.form['espansa']
+        #raddoppiata = request.form['raddoppiata']
+        #formeLemmi = request.form['formeLemmi']
 
         # Il motore: classe funzionale, che sta nel pacchetto 'engine'
         #output = doSimpleQuery(data, tipo, espansa, raddoppiata, formeLemmi, appath)

site2/css/mystyle.css

@@ -6,7 +6,7 @@
   padding:5% 0;
 }
 
-#searchBar {
+.searchBar {
   padding: 5% 0;
 
 }
@@ -16,6 +16,47 @@
   height:auto;
 }
 
+.choose_param {
+  margin-bottom: 2%;
+}
+
+.barraDiRicerca {
+  width:70%;
+}
+
+#cooccorrenze {
+  margin-left: 5px;
+}
+
+#cooccorrenze_options {
+  text-align: center;
+  margin-top: 2%;
+  padding: 0% 15%;
+}
+
+#add_cc {
+  border: 1px solid grey;
+  padding: 5px;
+}
+#result {
+  margin:3%;
+}
+
+#result .row {
+  padding: 1%;
+}
+
+#result .row:nth-child(even){
+  background-color: #fff;
+}
+
+#result .row:nth-child(odd){
+  background-color: #efefef;
+}
+
+
+
+
 /* The container must be positioned relative: */
 .custom-select {
     position: relative;

site2/index.html

@@ -56,11 +56,11 @@
 
             <div class="col search_params">
                
-               <div class="row">
+               <div class="row choose_param">
                   <div class="col-6">
                      <div class="input-group form-check">
-                        <input id="barraDiRicerca" type="text" class="form-control" aria-label="Text input with dropdown button">
-                           <select id="flViewBy">
+                        <input class="barraDiRicerca" type="text" class="form-control" aria-label="Text input with dropdown button">
+                           <select class="flViewBy">
                            <option value="forma" selected="selected">Forma</option>
                            <option value="lemma">Lemma</option>
                            </select>
@@ -68,7 +68,7 @@
                   </div>
                   <div class="col">
                      <div class="form-check">
-                        <input id="ricercaEx" value="ricerca_espansa" class="form-check-input" type="checkbox" name="espansa" >
+                        <input class="ricercaEx" value="ricerca_espansa" class="form-check-input" type="checkbox" name="espansa" >
                         <label class="form-check-label" for="checkbox1">
                         Ricerca espansa
                         </label>
@@ -76,7 +76,7 @@
                   </div>
                   <div class="col">
                      <div class="form-check">
-                        <input id="raddoppiata" value="raddoppiata" class="form-check-input" type="checkbox" name="raddoppiata">
+                        <input class="raddoppiata" value="raddoppiata" class="form-check-input" type="checkbox" name="raddoppiata">
                         <label class="form-check-label" for="checkbox2">
                         Raddoppiata
                         </label>
@@ -84,7 +84,7 @@
                   </div>
                   <div class="col">
                      <div class="form-check">
-                        <input id="showOther" value="mostra" class="form-check-input" type="checkbox" name="altro">
+                        <input class="showOther" value="mostra" class="form-check-input" type="checkbox" name="altro">
                         <label class="form-check-label" for="showOther">
                         Mostra <span id="mostraFormaLemma">lemmi</span>
                         </label>
@@ -98,11 +98,42 @@
          </div>
       </div>
 
-      <div class="input-group">
-         <div class="input-group-prepend">
-           <div class="btn btn-outline-secondary" id="btnGroupAddon">&#43</div>
+      <div id="cooccorrenze" class="row">
+         <div class="col">
+            <div class="input-group">
+               <div class="input-group-prepend">
+               <div class="btn btn-outline-secondary" id="btnGroupAddon">&#43</div>
+               </div>
+               <div id="add_cc">Aggiungi cooccorrenza</div>
+            </div>
+         </div>
+      </div>
+
+      <div id="cooccorrenze_options" class="row" style="display:none;">
+         <div class="col">
+            <div class="form-check">
+               <div class="input-group mb-3">
+                  <span class="input-group-text" id="distanza_label">Distanza</span>
+                  <input type="number" id="distanza" class="form-control" id="basic-url" aria-describedby="distanza">
+                </div>
+            </div>
+         </div>
+         <div class="col">
+            <div class="form-check">
+               <input id="periodo" value="periodo" class="form-check-input" type="checkbox" name="periodo">
+               <label class="form-check-label" for="periodo">
+               Stesso periodo
+               </label>
+            </div>
+         </div>
+         <div class="col">
+            <div class="form-check">
+               <input id="ordinate" value="ordinate" class="form-check-input" type="checkbox" name="ordinate">
+               <label class="form-check-label" for="ordinate">
+               Ordinate
+               </label>
+            </div>
          </div>
-         <button id="add_cc" class="btn" onclick="add_cooccurrence()">Aggiungi cooccorrenza</button>
       </div>
 
       <div id="searchBar" class="row">
@@ -110,7 +141,7 @@
       </div>
 
       <span id="params"></span><br />
-      <span id="result"></span>
+      <div id="result"></div>
 
    </div>
 

site2/js/ricerca.js

@@ -17,58 +17,97 @@ function processData(response){
     if(response.length==0){
         alert('No results!')
     }
-    $("#result").html(response.join('<br/>'));
+    else {
+      var ll = response.length;
+      for (var i=0; i<ll; i++) {
+        let newRow = response[i];
+        createRow(i, newRow);
+      }
+      //$("#result").html(response.join('<br/>'));
+    }
     //$("#result").append(response);
 }
 
 function funzioneRicerca(){
-  let elementoDaRicercare = document.getElementById("barraDiRicerca").value;
-  let word = elementoDaRicercare;
-  var tipo = "";
-  var espansa = 0;
-  var raddoppiata = 0;
-  var formeLemmi = 0;
-  var e = document.getElementById("flViewBy");
-  tipo = e.value;
-  /*if ($('#cbLemmi').prop("checked"))
-  {
-    tipo = "lemma";
-  }
-  if ($('#cbForme').prop("checked"))
-  {
-    tipo = "forma";
-  }*/
-  if ($('#ricercaEx').prop("checked"))
-  {
-    espansa = 1;
+  $("#result").html("");
+  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 formeLemmi = 0;
+    var check_tipo = collection_types[i].value;
+    
+    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 ((check_tipo == "forma") && (formeLemmi == 0)) {
+      tipo = "forma";
+    }
+    else if ((check_tipo == "forma") && (formeLemmi == 1)) {
+      tipo = "formaLemma";
+    }
+    else if ((check_tipo == "lemma") && (formeLemmi == 0)) {
+      tipo = "lemma";
+    }
+    else if ((check_tipo == "lemma") && (formeLemmi == 1)) {
+      tipo = "lemmaForma";
+    }
+
+    queryList[i] = {"stringa": word, "espansa": espansa, "raddoppiata": raddoppiata, "tipo": tipo}
+    //$("#params").append("I tuoi parametri: " + word + "; " + tipo + "; " + espansa + "; " + raddoppiata + "; " + formeLemmi);
+  
   }
-  if ($('#raddoppiata').prop("checked"))
+
+  if ($('#periodo').prop("checked"))
   {
-    raddoppiata = 1;
+    periodo = 1;
   }
-  if ($('#showOther').prop("checked"))
+  if ($('#ordinate').prop("checked"))
   {
-    formeLemmi = 1;
+    ordinate = 1;
   }
 
-  $("#params").html("I tuoi parametri: " + word + "; " + tipo + "; " + espansa + "; " + raddoppiata + "; " + formeLemmi)
-  
+  let cooccorrenze = {"distanza": distanza, "stesso_periodo": periodo, "ordinate": ordinate};
+
+
+
   //
   // DTO: 'Data Transfer Object'
   let queryDTO = {
-      word: word,
-      tipo: tipo,
-      espansa: espansa,
-      raddoppiata: raddoppiata,
-      formeLemmi: formeLemmi
+      queryList : queryList,
+      cooccorrenze: cooccorrenze
   }
 
+  console.log(queryDTO);
+
   getData(queryDTO)
     // After request finishes, process response data
     .done(response => processData(response));
   
 } 
 
+
 $( document ).ready(function() {
   $("select").on("change", function(event) {
     var e = this.value;
@@ -81,32 +120,82 @@ $( document ).ready(function() {
     }
     $("#mostraFormaLemma").html(word);
   });
+
+  var occ = 0;
+  
+  const node = document.getElementsByClassName("search_params")[0];
+
+  $("#btnGroupAddon").click(function() {
+    $("#cooccorrenze_options").css("display", "flex");
+
+    if (occ > 8) {
+      alert("Hai esaurito i parametri a disposizione");
+    }
+    else {
+      occ = occ + 1;
+      
+      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;
+      const clone = node.cloneNode(true);
+      new_par.append(clone);
+      $("#search_form").append(new_par);
+    }
+  });
+
 });
 
 function changeFL(word) {
   $("#mostraFormaLemma").html(word);
 }
 
-var occ = 0;
+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"];
 
-function add_cooccurrence() {
+  var row = document.createElement('div');
+  row.className = "row height d-flex justify-content-center align-items-center";
+  row.id = num;
 
-  if (occ > 8) {
-    alert("Hai esaurito i parametri a disposizione");
-  }
-  else {
-    occ = occ + 1;
-    
-    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;
-    const node = document.getElementsByClassName("search_params")[0];
-    const clone = node.cloneNode(true);
-    new_par.append(clone);
-    console.log(clone);
-    $("#search_form").append(new_par);
-  }
- 
-  
-}
+  var colForma = document.createElement('div');
+  colForma.className = "col formaCol";
+  colForma.append(forma);
+  row.append(colForma);
+
+  var colLemma = document.createElement('div');
+  colLemma.className = "col lemmaCol";
+  colLemma.append(lemma);
+  row.append(colLemma);
+
+  var categoria = document.createElement('div');
+  categoria.className = "col cat_gr";
+  categoria.append(cat_gr);
+  row.append(categoria);
+
+  var colDis = document.createElement('div');
+  colDis.className = "col disambiguatore";
+  colDis.append(disambiguatore);
+  row.append(colDis);
+
+  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 = "seleziona_" + num;
+  inputSel.type = "checkbox";
+  colSel.append(inputSel);
+  row.append(colSel);
+
+  $("#result").append(row);
+
+
+}