Begin interface

flask_be/engine/data_interface_sqlite3/query_handlers.py

@@ -3,11 +3,23 @@ import sqlite3
 def simpleQueryHandler(data, path):
 
     theSimpleQuery = "SELECT norm FROM form WHERE norm LIKE '" + data + "'"
-
+    
     con = sqlite3.connect(path + "/db/test_x.db")
     cur = con.cursor()
 
     queryReponse = cur.execute(theSimpleQuery)
     results = queryReponse.fetchall()
 
-    return results
+    return results
+
+def simpleQueryHandler2(data, path):
+
+    theSimpleQuery = "SELECT spec AS forma, nocc AS occ, cod FROM form WHERE norm LIKE '" + data + "' ORDER BY idfor"
+    
+    con = sqlite3.connect(path + "/db/test1.db")
+    cur = con.cursor()
+
+    queryReponse = cur.execute(theSimpleQuery)
+    results = queryReponse.fetchall()
+
+    return results

flask_be/engine/query_generator.py

@@ -1,4 +1,5 @@
 from engine.data_interface_sqlite3.query_handlers import simpleQueryHandler
+import sqlite3
 #from engine.simple_query_test import ricercaformefull
 #from engine.simple_query_test import ricercalemmifull
 #from engine.simple_query_test import ricercaformelemmi
@@ -13,6 +14,7 @@ def doSimpleQuery(data, tipo, espansa, raddoppiata, formeLemmi, path):
         if (tipo == "forma"):
             #results = ricercaformefull(data, path, espansa, raddoppiata)
             results = simpleQueryHandler(data, path)
+            #results = ricercaformelemmi(data, path, espansa, raddoppiata)
         elif (tipo == "lemma"):
             #ricercalemmi(entries, path, espansa, raddoppiata)
             results = simpleQueryHandler(data, path)
@@ -28,4 +30,4 @@ def doSimpleQuery(data, tipo, espansa, raddoppiata, formeLemmi, path):
         #Qui vuol dire che c'è un problema. Controlla i parametri e inserisci quello che manca
         results = data + tipo + espansa + raddoppiata + formeLemmi
 
-    return results
+    return results

flask_be/engine/results_output.py

@@ -20,7 +20,7 @@ from simple_query_test_pandas import counter
 
 #%%
 def df_to_json (df):
-    results= df.to_json()
+    results= df.to_json() 
     return results
 
 #%%

site2/css/mystyle.css

@@ -0,0 +1,72 @@
+#lauchSearch{
+  margin:auto;
+}
+
+#title {
+  padding:5% 0;
+}
+
+#searchBar {
+  padding: 5% 0;
+
+}
+
+/* The container must be positioned relative: */
+.custom-select {
+    position: relative;
+    font-family: Arial;
+  }
+  
+  .custom-select select {
+    display: none; /*hide original SELECT element: */
+  }
+  
+  .select-selected {
+    background-color: DodgerBlue;
+  }
+  
+  /* Style the arrow inside the select element: */
+  .select-selected:after {
+    position: absolute;
+    content: "";
+    top: 14px;
+    right: 10px;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-color: #fff transparent transparent transparent;
+  }
+  
+  /* Point the arrow upwards when the select box is open (active): */
+  .select-selected.select-arrow-active:after {
+    border-color: transparent transparent #fff transparent;
+    top: 7px;
+  }
+  
+  /* style the items (options), including the selected item: */
+  .select-items div,.select-selected {
+    color: #ffffff;
+    padding: 8px 16px;
+    border: 1px solid transparent;
+    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
+    cursor: pointer;
+  }
+  
+  /* Style items (options): */
+  .select-items {
+    position: absolute;
+    background-color: DodgerBlue;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 99;
+  }
+  
+  /* Hide the items when the select box is closed: */
+  .select-hide {
+    display: none;
+  }
+  
+  .select-items div:hover, .same-as-selected {
+    background-color: rgba(0, 0, 0, 0.1);
+  }

site2/index.html

@@ -6,9 +6,11 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SEARCH PROGETTO 2023</title>
-   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
-      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
+   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+   <link rel="stylesheet" href="css/mystyle.css">
+   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <header>
       <!-- Navbar -->
       <nav class="navbar navbar-expand-lg navbar-light bg-white">
@@ -36,91 +38,65 @@
          </div>
       </nav>
       <!-- Navbar -->
-
-      <!-- Background image -->
-      <div class="p-5 text-center bg-image" style="
-             background-image: url('http://www.ovi.cnr.it/images/2021-01-1912.43.48.jpg');
-             height: 400px;
-           ">
-         <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">
-            <div class="d-flex justify-content-center align-items-center h-100">
-               <div class="text-white">
-                  <h1 class="mb-3">La Ricerca</h1>
-                  <h4 class="mb-3">Seleziona la tipologia di ricerca: Lemmi o Forme</h4>
-               </div>
-            </div>
-         </div>
-      </div>
-      <!-- Background image -->
    </header>
 
 <body>
-   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
-      </script>
-   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
-      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
-      </script>
-   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
-      crossorigin="anonymous"></script>
 
    <script type="text/javascript" src="js/ricerca.js"></script>
 
-   <div class="container m-2">
+   <div class="container">
+
+      <div id="title" class="row justify-content-center align-items-center">
+         <h1>Progetto 2023</h1>
+      </div>
 
       <div class="row height d-flex justify-content-center align-items-center">
 
-         <div class="col-md-8">
-            <div class="row">
-               <div class="search">
-                  <i class="fa fa-search"></i>
-                  <input id="barraDiRicerca" type="text" class="form-control" placeholder="Inserisci il Lemma o la Forma da cercare">
-                  <button class="btn btn-primary" onclick="funzioneRicerca()">Cerca</button>
-               </div>
-            </div>
+         <div class="col">
             
             <div class="row">
-               <div class="form-check">
-                  <input id="cbForme" value="forma" class="form-check-input" type="radio" name="exampleRadios" onclick="changeFL('lemmi')">
-                  <label class="form-check-label" for="exampleRadios1">
-                  FORME
-                  </label>
+               <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">
+                        <option value="forma" selected="selected">Forma</option>
+                        <option value="lemma">Lemma</option>
+                        </select>
+                  </div>
                </div>
-               <div class="form-check">
-                  <input id="cbLemmi" value="lemma" class="form-check-input" type="radio" name="exampleRadios" onclick="changeFL('forme')">
-                  <label class="form-check-label" for="exampleRadios2">
-                  LEMMI
-                  </label>
+               <div class="col">
+                  <div class="form-check">
+                     <input id="ricercaEx" value="ricerca_espansa" class="form-check-input" type="checkbox" name="espansa" >
+                     <label class="form-check-label" for="checkbox1">
+                     Ricerca espansa
+                     </label>
+                  </div>
                </div>
-            </div>
-            <div class="row">
-               <div class="form-check">
-                  <input id="ricercaEx" value="ricerca_espansa" class="form-check-input" type="checkbox" name="espansa" >
-                  <label class="form-check-label" for="checkbox1">
-                  Ricerca espansa
-                  </label>
+               <div class="col">
+                  <div class="form-check">
+                     <input id="raddoppiata" value="raddoppiata" class="form-check-input" type="checkbox" name="raddoppiata">
+                     <label class="form-check-label" for="checkbox2">
+                     Raddoppiata
+                     </label>
+                  </div>
                </div>
-               <div class="form-check">
-                  <input id="raddoppiata" value="raddoppiata" class="form-check-input" type="checkbox" name="raddoppiata">
-                  <label class="form-check-label" for="checkbox2">
-                  Raddoppiata
-                  </label>
+               <div class="col">
+                  <div class="form-check">
+                     <input id="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>
+                  </div>
                </div>
-            </div>
 
-            <div class="row">
-               <div class="form-check">
-                  <input id="showOther" value="mostra" class="form-check-input" type="checkbox" name="altro">
-                  <label class="form-check-label" for="showOther">
-                  Mostra <span id="mostraFormaLemma"></span>
-                  </label>
-               </div>
             </div>
+
          </div>
 
-         
+      </div>
 
+      <div id="searchBar" class="row">
+         <button id="lauchSearch" class="btn btn-primary" onclick="funzioneRicerca()">Cerca</button>
       </div>
 
       <span id="params"></span><br />

site2/js/ricerca.js

@@ -22,20 +22,22 @@ function processData(response){
 }
 
 function funzioneRicerca(){
-  let elementoDaRIcercare = document.getElementById("barraDiRicerca").value;
-  let word = elementoDaRIcercare;
+  let elementoDaRicercare = document.getElementById("barraDiRicerca").value;
+  let word = elementoDaRicercare;
   var tipo = "";
   var espansa = 0;
   var raddoppiata = 0;
   var formeLemmi = 0;
-  if ($('#cbLemmi').prop("checked"))
+  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;
@@ -48,8 +50,6 @@ function funzioneRicerca(){
   {
     formeLemmi = 1;
   }
-  var checkBoxLemmi = document.getElementById("cbLemmi").value;
-  var checkBoxForme = document.getElementById("cbForme").value;
 
   $("#params").html("I tuoi parametri: " + word + "; " + tipo + "; " + espansa + "; " + raddoppiata + "; " + formeLemmi)
   
@@ -69,6 +69,20 @@ function funzioneRicerca(){
   
 } 
 
+$( document ).ready(function() {
+  $("select").on("change", function(event) {
+    var e = this.value;
+    var word = "";
+    if (e == "forma") {
+      word = "lemmi";
+    }
+    else {
+      word = "forme";
+    }
+    $("#mostraFormaLemma").html(word);
+  });
+});
+
 function changeFL(word) {
   $("#mostraFormaLemma").html(word);
 }