LiDa_Search/index.html

535 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>LiDaDashboard</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="https://bundle.run/sparqljs@3.4.1"></script>
<script type="text/javascript">
function mostra() {
document.getElementById("divContentId").style.display="block";
}
function nascondi() {
document.getElementById("divContentId").style.display="none";
}
</script>
</head>
<!-- partial:index.partial.html -->
<body onLoad="javascript:nascondi()">
<h2>Linking Dante Search</h2>
<!-- form -->
<form id='myform' onsubmit="return false">
<table border="0" cellspacing="0" cellpadding="5px" class='queryform'>
<tbody>
<tr bgcolor="lightgray">
<td align="right">
<select name="oggetto" value="oggetto">
<option value="forma">Forma</option>
<option value="lemma">Lemma</option>
</select>
</td>
<td>
<input type="text" id="query0" name="query" value="" title="Testo da ricercare">
</td>
<td>
<select name="tipo" title="Tipo di ricerca">
<option value="parola" onclick="">Parola</option>
<option value="sottostringa" onclick="">Sottostringa</option>
<option value="prefisso" onclick="">Prefisso</option>
<option value="suffisso" onclick="">Suffisso</option>
<option value="espressione" onclick="">Espressione regolare</option>
<option value="occorrenze" onclick="">Tutte le occorrenze</option>
</select>
</td>
<td align="right">
<select name="categoria" onchange="" title="Macro categoria">
<option value="all">Tutte le categorie</option>
<optgroup label="Volgare">
<option value="verbovolgare">Verbo volgare</option>
<option value="sostantivovolgare">Sostantivo volgare</option>
<option value="aggettivovolgare">Aggettivo volgare</option>
<option value="pronomevolgare">Pronome volgare</option>
<option value="articolovolgare">Articolo volgare</option>
<option value="avverbiovolgare">Avverbio volgare</option>
<option value="preposizionevolgare">Preposizione volgare</option>
<option value="congiunzionevolgare">Congiunzione volgare</option>
<option value="interiezionevolgare">Interiezione volgare</option>
<option value="onomasticavolgare">Onomastica volgare</option>
<option value="citazionevolgare">Citazione volgare</option>
</optgroup>
<optgroup label="Latino">
<option value="verbo_latino_v">Verbo latino</option>
<option value="sostantivo_latino_s">Sostantivo latino</option>
<option value="aggettivo_latino_a">Aggettivo latino</option>
<option value="pronome_latino_p">Pronome latino</option>
<option value="avverbio_latino_r">Avverbio latino</option>
<option value="preposizione_latino_e">Preposizione latino</option>
<option value="congiunzione_latino_c">Congiunzione latino</option>
<option value="interiezione_latino_i">Interiezione latino</option>
<option value="enclitica_latino_9">Enclitica latino</option>
<option value="citazione_latino_zi">Citazione latino</option>
<option value="simbolo_latino_yy">Simbolo latino</option>
</optgroup>
</select>
</td>
<td>
<!-- <input type=”button” value=”Mostra” onclick="javascript:mostra()" />
<input type=”button” value=”Nascondi” onclick="javascript:nascondi()" />-->
<a href="#nomeancora" onclick="javascript:mostra()"><small>Categoria</small></a>
<a name="nomeancora"> </a>
<div id="divContentId">
<small>Opzione1<br>Opzione2<br>Opzione3</small>
</div>
<!-- <a href="javascript:popupCategoria('0');" title="Configurazione categoria"><small>Categoria</small></a>
<div>tanto per fare una prova</div> -->
</td>
<td>
<span id="plainCatg0"><span id="span0"><small><font color="silver"></font></small></span></span>
<input type="hidden" name="plainCatg0" value="" readonly="readonly">
<input type="hidden" name="catg0" value=".+" readonly="readonly">
</td>
</tr>
<tr bgcolor="whitesmoke">
<td align="right">
<select name="oggetto1" value="oggetto">
<option value="forma">Forma</option>
<option value="lemma">Lemma</option>
</select>
</td>
<td>
<input type="text" id="query1" name="query1" value="" title="Testo da ricercare">
</td>
<td>
<select name="tipo1" title="Tipo di ricerca">
<option value="parola" onclick="">Parola</option>
<option value="sottostringa" onclick="">Sottostringa</option>
<option value="prefisso" onclick="">Prefisso</option>
<option value="suffisso" onclick="">Suffisso</option>
<option value="espressione" onclick="">Espressione regolare</option>
<option value="occorrenze" onclick="">Tutte le occorrenze</option>
</select>
</td>
<td align="right">
<select name="categoria1" onchange="" title="Macro categoria">
<option value="all">Tutte le categorie</option>
<optgroup label="Volgare">
<option value="verbovolgare">Verbo volgare</option>
<option value="sostantivovolgare">Sostantivo volgare</option>
<option value="aggettivovolgare">Aggettivo volgare</option>
<option value="pronomevolgare">Pronome volgare</option>
<option value="articolovolgare">Articolo volgare</option>
<option value="avverbiovolgare">Avverbio volgare</option>
<option value="preposizionevolgare">Preposizione volgare</option>
<option value="congiunzionevolgare">Congiunzione volgare</option>
<option value="interiezionevolgare">Interiezione volgare</option>
<option value="onomasticavolgare">Onomastica volgare</option>
<option value="citazionevolgare">Citazione volgare</option>
</optgroup>
<optgroup label="Latino">
<option value="verbo_latino_v">Verbo latino</option>
<option value="sostantivo_latino_s">Sostantivo latino</option>
<option value="aggettivo_latino_a">Aggettivo latino</option>
<option value="pronome_latino_p">Pronome latino</option>
<option value="avverbio_latino_r">Avverbio latino</option>
<option value="preposizione_latino_e">Preposizione latino</option>
<option value="congiunzione_latino_c">Congiunzione latino</option>
<option value="interiezione_latino_i">Interiezione latino</option>
<option value="enclitica_latino_9">Enclitica latino</option>
<option value="citazione_latino_zi">Citazione latino</option>
<option value="simbolo_latino_yy">Simbolo latino</option>
</optgroup>
</select>
</td>
<td>
<a href="javascript:popupCategoria('1');" title="Configurazione categoria"><small>Categoria</small></a>
</td>
<td>
<span id="plainCatg1"><span id="span1"><small><font color="silver"></font></small></span></span>
<input type="hidden" name="plainCatg1" value="" readonly="readonly">
<input type="hidden" name="catg1" value=".+" readonly="readonly">
</td>
</tr>
<tr bgcolor="lightgray">
<td align="right">
<select name="oggetto2" value="oggetto">
<option value="forma">Forma</option>
<option value="lemma">Lemma</option>
</select>
</td>
<td>
<input type="text" id="query2" name="query2" value="" title="Testo da ricercare">
</td>
<td>
<select name="tipo2" title="Tipo di ricerca">
<option value="parola" onclick="">Parola</option>
<option value="sottostringa" onclick="">Sottostringa</option>
<option value="prefisso" onclick="">Prefisso</option>
<option value="suffisso" onclick="">Suffisso</option>
<option value="espressione" onclick="">Espressione regolare</option>
<option value="occorrenze" onclick="">Tutte le occorrenze</option>
</select>
</td>
<td align="right">
<select name="categoria2" onchange="" title="Macro categoria">
<option value="all">Tutte le categorie</option>
<optgroup label="Volgare">
<option value="verbovolgare">Verbo volgare</option>
<option value="sostantivovolgare">Sostantivo volgare</option>
<option value="aggettivovolgare">Aggettivo volgare</option>
<option value="pronomevolgare">Pronome volgare</option>
<option value="articolovolgare">Articolo volgare</option>
<option value="avverbiovolgare">Avverbio volgare</option>
<option value="preposizionevolgare">Preposizione volgare</option>
<option value="congiunzionevolgare">Congiunzione volgare</option>
<option value="interiezionevolgare">Interiezione volgare</option>
<option value="onomasticavolgare">Onomastica volgare</option>
<option value="citazionevolgare">Citazione volgare</option>
</optgroup>
<optgroup label="Latino">
<option value="verbo_latino_v">Verbo latino</option>
<option value="sostantivo_latino_s">Sostantivo latino</option>
<option value="aggettivo_latino_a">Aggettivo latino</option>
<option value="pronome_latino_p">Pronome latino</option>
<option value="avverbio_latino_r">Avverbio latino</option>
<option value="preposizione_latino_e">Preposizione latino</option>
<option value="congiunzione_latino_c">Congiunzione latino</option>
<option value="interiezione_latino_i">Interiezione latino</option>
<option value="enclitica_latino_9">Enclitica latino</option>
<option value="citazione_latino_zi">Citazione latino</option>
<option value="simbolo_latino_yy">Simbolo latino</option>
</optgroup>
</select>
</td>
<td>
<a href="javascript:popupCategoria('2');" title="Configurazione categoria"><small>Categoria</small></a>
</td>
<td>
<span id="plainCatg2"><span id="span2"><small><font color="silver"></font></small></span></span>
<input type="hidden" name="plainCatg2" value="" readonly="readonly">
<input type="hidden" name="catg2" value=".+" readonly="readonly">
</td>
</tr>
<tr bgcolor="whitesmoke">
<td align="right">
<select name="oggetto3" value="oggetto">
<option value="forma">Forma</option>
<option value="lemma">Lemma</option>
</select>
</td>
<td>
<input type="text" id="query3" name="query3" value="" title="Testo da ricercare">
</td>
<td>
<select name="tipo3" title="Tipo di ricerca">
<option value="parola" onclick="">Parola</option>
<option value="sottostringa" onclick="">Sottostringa</option>
<option value="prefisso" onclick="">Prefisso</option>
<option value="suffisso" onclick="">Suffisso</option>
<option value="espressione" onclick="">Espressione regolare</option>
<option value="occorrenze" onclick="">Tutte le occorrenze</option>
</select>
</td>
<td align="right">
<select name="categoria3" onchange="" title="Macro categoria">
<option value="all">Tutte le categorie</option>
<optgroup label="Volgare">
<option value="verbovolgare">Verbo volgare</option>
<option value="sostantivovolgare">Sostantivo volgare</option>
<option value="aggettivovolgare">Aggettivo volgare</option>
<option value="pronomevolgare">Pronome volgare</option>
<option value="articolovolgare">Articolo volgare</option>
<option value="avverbiovolgare">Avverbio volgare</option>
<option value="preposizionevolgare">Preposizione volgare</option>
<option value="congiunzionevolgare">Congiunzione volgare</option>
<option value="interiezionevolgare">Interiezione volgare</option>
<option value="onomasticavolgare">Onomastica volgare</option>
<option value="citazionevolgare">Citazione volgare</option>
</optgroup>
<optgroup label="Latino">
<option value="verbo_latino_v">Verbo latino</option>
<option value="sostantivo_latino_s">Sostantivo latino</option>
<option value="aggettivo_latino_a">Aggettivo latino</option>
<option value="pronome_latino_p">Pronome latino</option>
<option value="avverbio_latino_r">Avverbio latino</option>
<option value="preposizione_latino_e">Preposizione latino</option>
<option value="congiunzione_latino_c">Congiunzione latino</option>
<option value="interiezione_latino_i">Interiezione latino</option>
<option value="enclitica_latino_9">Enclitica latino</option>
<option value="citazione_latino_zi">Citazione latino</option>
<option value="simbolo_latino_yy">Simbolo latino</option>
</optgroup>
</select>
</td>
<td>
<a href="javascript:popupCategoria('3');" title="Configurazione categoria"><small>Categoria</small></a>
</td>
<td>
<span id="plainCatg3"><span id="span3"><small><font color="silver"></font></small></span></span>
<input type="hidden" name="plainCatg3" value="" readonly="readonly">
<input type="hidden" name="catg3" value=".+" readonly="readonly">
</td>
</tr>
<tr bgcolor="lightgray">
<td align="right">
<select name="oggetto4" value="oggetto">
<option value="forma">Forma</option>
<option value="lemma">Lemma</option>
</select>
</td>
<td>
<input type="text" id="query4" name="query4" value="" title="Testo da ricercare">
</td>
<td>
<select name="tipo4" title="Tipo di ricerca">
<option value="parola" onclick="">Parola</option>
<option value="sottostringa" onclick="">Sottostringa</option>
<option value="prefisso" onclick="">Prefisso</option>
<option value="suffisso" onclick="">Suffisso</option>
<option value="espressione" onclick="">Espressione regolare</option>
<option value="occorrenze" onclick="">Tutte le occorrenze</option>
</select>
</td>
<td align="right">
<select name="categoria4" onchange="" title="Macro categoria">
<option value="all">Tutte le categorie</option>
<optgroup label="Volgare">
<option value="verbovolgare">Verbo volgare</option>
<option value="sostantivovolgare">Sostantivo volgare</option>
<option value="aggettivovolgare">Aggettivo volgare</option>
<option value="pronomevolgare">Pronome volgare</option>
<option value="articolovolgare">Articolo volgare</option>
<option value="avverbiovolgare">Avverbio volgare</option>
<option value="preposizionevolgare">Preposizione volgare</option>
<option value="congiunzionevolgare">Congiunzione volgare</option>
<option value="interiezionevolgare">Interiezione volgare</option>
<option value="onomasticavolgare">Onomastica volgare</option>
<option value="citazionevolgare">Citazione volgare</option>
</optgroup>
<optgroup label="Latino">
<option value="verbo_latino_v">Verbo latino</option>
<option value="sostantivo_latino_s">Sostantivo latino</option>
<option value="aggettivo_latino_a">Aggettivo latino</option>
<option value="pronome_latino_p">Pronome latino</option>
<option value="avverbio_latino_r">Avverbio latino</option>
<option value="preposizione_latino_e">Preposizione latino</option>
<option value="congiunzione_latino_c">Congiunzione latino</option>
<option value="interiezione_latino_i">Interiezione latino</option>
<option value="enclitica_latino_9">Enclitica latino</option>
<option value="citazione_latino_zi">Citazione latino</option>
<option value="simbolo_latino_yy">Simbolo latino</option>
</optgroup>
</select>
</td>
<td>
<a href="javascript:popupCategoria('4');" title="Configurazione categoria"><small>Categoria</small></a>
</td>
<td>
<span id="plainCatg4"><span id="span4"><small><font color="silver"></font></small></span></span>
<input type="hidden" name="plainCatg4" value="" readonly="readonly">
<input type="hidden" name="catg4" value=".+" readonly="readonly">
</td>
</tr>
<tr>
<td colspan="6">
<hr noshade="noshade" size="1" color="silver">
</td>
</tr>
<tr>
<td align="left" colspan="2">
<label>
Cerca in:
<select id="operand" name="operand" onchange="getElementById('nearOptions').style.display = (operand.options[operand.selectedIndex].value == 'near') ? 'inline' : 'none';">
<option value="and" selected="">AND</option>
<option value="or">OR</option>
<option value="not">NOT</option>
<option value="near">NEAR</option>
</select>
</label>
</td>
<td colspan="2">
<span id="nearOptions" style="display: none">
Distanza:
<select name="distance" id="distance">
<option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option><option>32</option><option>33</option><option>34</option><option>35</option><option>36</option><option>37</option><option>38</option><option>39</option><option>40</option><option>41</option><option>42</option><option>43</option><option>44</option><option>45</option><option>46</option><option>47</option><option>48</option><option>49</option><option>50</option><option>51</option><option>52</option><option>53</option><option>54</option><option>55</option><option>56</option><option>57</option><option>58</option><option>59</option><option>60</option><option>61</option><option>62</option><option>63</option><option>64</option><option>65</option><option>66</option><option>67</option><option>68</option><option>69</option><option>70</option><option>71</option><option>72</option><option>73</option><option>74</option><option>75</option><option>76</option><option>77</option><option>78</option><option>79</option><option>80</option><option>81</option><option>82</option><option>83</option><option>84</option><option>85</option><option>86</option><option>87</option><option>88</option><option>89</option><option>90</option><option>91</option><option>92</option><option>93</option><option>94</option><option>95</option><option>96</option><option>97</option><option>98</option><option>99</option><option>100</option>
</select>
<label><input type="checkbox" name="inorder">In ordine</label>
</span>
</td>
<td>
<input type="submit" name="grammar" id="grammarbutton" value="Cerca" title="Applica i criteri di ricerca">
<input type="hidden" readonly="readonly" name="lang" value="all">
</td>
</tr>
</tbody></table>
</form>
<!-- End form -->
<hr>
<!-- submit event listener -->
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import notebook from "https://api.observablehq.com/@cesare/d3search/2.js?v=3&api_key=a05c55ad119cc37428496af43d692d30cbc35546";
document.querySelector('#grammarbutton').addEventListener('click', () => {
const display1 = document.querySelector("#tick1");
const displayres = document.querySelector("#result");
const displaysvgres = document.querySelector("#svgresult");
const displaysprql = document.querySelector("#sparqlquery");
const mform = document.querySelector("#myform");
//alert('pippone');
const spq=gimmespqfromjson(mform);
const runtime = new Runtime();
const main = runtime.module(notebook, name => {
if (name === "pppp") {
return new Inspector(display1);
}
if (name === "showmytable") {
return new Inspector(displayres);
}
if (name === "svg_v1") {
return new Inspector(displaysvgres);
}
displaysprql.innerHTML =writesparqlquery(spq);
});
main.redefine("querytxt", writesearchValue(mform));
//alert(spq)
main.redefine("completeq", gimmespqfromjson(mform));
//alert(executeSparqlQuery(gimmespqfromjson(mform)));
});
</script>
<div class="wrapper">
<div class="buttonWrapper">
<button class="tab-button" style="border-top-left-radius: 10px;" data-id="home">Query</button>
<button class="tab-button" data-id="about">Tabella</button>
<button class="tab-button active" data-id="versi">Versi</button>
<button class="tab-button" style="border-top-right-radius: 10px;" data-id="sparql">Sparql query</button>
</div>
<div class="contentWrapper">
<p class="content" id="home">
La <i>query</i> &egrave;:
<span id="tick1">
</span>
</p>
<p class="content" id="about">
<span id="result">
</span>
</p>
<p class="content active" id="versi">
<span id="svgresult">
</span>
</p>
<p class="content" id="sparql">
La <i>query SPARQL</i> &egrave;:
<br>
<span id="showsparqlquery">
<textarea id="sparqlquery" rows="20" cols="80"></textarea>
</span>
</p>
</div>
</div>
<!-- partial -->
<script src="./script.js"></script>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import notebook from "https://api.observablehq.com/@cesare/d3search/2.js?v=3&api_key=a05c55ad119cc37428496af43d692d30cbc35546";
//https://api.observablehq.com/d/[NOTEBOOK_ID][@VERSION].[FORMAT]?v=3&api_key=xxxx
// Select the element into which well show the observed value.
const display1 = document.querySelector("#tick1");
const mform = document.querySelector("#myform");
//alert (mform.elements);
// Load the notebook, observing the “tick” cell with a custom Inspector that
// renders any fulfilled value into the previously-selected element.
const runtime = new Runtime();
const main = runtime.module(notebook, name => {
if (name === "pppp") {
return new Inspector(display1);
}
});
// Redefine the cell “data” as the contents of the local file population.json;
// this will affect the chart embedded above.
main.redefine("querytxt", writesearchValue(mform));
</script>
</body>
</html>