<!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> è:
<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> è:
<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 we’ll 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>