concordia
/
LiDa_Search
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

files added

This commit is contained in:
Cesare Concordia 2021-06-01 11:22:12 +02:00
parent eeead54def
commit 3e5ad12f70
6 changed files with 785 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
css/style.css Normal file
View File

@ -0,0 +1,69 @@
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;300;400;700&display=swap');
body {
text-align: center;
font-family: 'Jost', sans-serif;
background-color: #f0f5ff;
}
h1 {
font-size: 48px;
color: #232c3d;
}
.wrapper {
width: 800px;
margin: auto;
background-color: white;
border-radius: 10px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, .1);
}
.buttonWrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
button {
letter-spacing: 3px;
border: none;
padding: 10px;
background-color: #bccbe9;
color: #232c3d;
font-size: 18px;
cursor: pointer;
transition: 0.5s;
}
button:hover {
background-color: #d5e3ff;
}
button.active {
background-color: white;
}
.active {
background-color: white;
}
p {
text-align: left;
padding: 10px;
}
.content {
display: none;
padding: 10px 20px;
}
.content.active {
display: block;
}
tspan.formaf { font-weight:700;}
table.queryform {
min-width: 80%;
}
td { vertical-align: top; }
th:not(:first-child):not(:last-child), td:not(:first-child):not(:last-child) { padding: 0 10px; }
th { vertical-align: bottom; }

516
index.html Normal file
View File

@ -0,0 +1,516 @@
<!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>
</head>
<body>
<!-- partial:index.partial.html -->
<body>
<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>
<a href="javascript:popupCategoria('0');" title="Configurazione categoria"><small>Categoria</small></a>
</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 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>

2
js/obsmodule.js Normal file
View File

@ -0,0 +1,2 @@
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/@cesare/dsearchcompare.js?v=3";

117
js/utils.js Normal file
View File

@ -0,0 +1,117 @@
//query
sparqlquery=`PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX ecrm: <http://erlangen-crm.org/current/>
PREFIX hdn: <http://hdn.dantenetwork.it/resource/work/commedia/cantica/>
PREFIX lemon: <http://lemon-model.net/lemon#>
PREFIX orl: <http://dantenetwork.it/resource/ontology/ORL/>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
SELECT ?pos ?sc ?ver ?canto ?cantica ?form
WHERE {
?occ ecrm:P148_is_component_of ?ver .
?occ hdn:isInPosition ?pos .
?canto ecrm:P148_has_component ?ver .
?ver ecrm:P190_has_symbolic_content ?sc .
?cantica ecrm:P148_has_component ?canto .
?occ hdn:occurrenceOf ?form .
?form a orl:FormaVerboVolgare .
?form orl:TipoTransitivitàVerboVolgare orl:VerboVolgareTransitivo .
?form orl:TipoDiatesiVerboVolgare orl:VerboVolgareAttivo .
?form orl:TipoConiugazioneVerboVolgare orl:VerboVolgarePrimaConiugazione .
?form orl:TipoTempoVerboVolgare orl:FuturoSempliceIndicativoVerboVolgare .
?form orl:TipoPersonaVerboVolgare orl:PrimaPersonaSingolareVerboVolgare .
?form lemon:writtenRep ?Rappresentazione .
FILTER regex(?Rappresentazione,"^farò$","i") .
}`
function writesparqlquery(query) {
return (query);
}
// write the query in natural language
function writesearchValue(form) {
var strq='il lemma';
var strcategoria='in tutte le categorie'
if (form.oggetto.value=='forma')
strq='la forma';
if (form.categoria.value!='all')
strcategoria='nella categoria '+ form.categoria.value;
return `Cerco: ${strq} ${form.query.value}, ${form.tipo.value}, ${strcategoria}`
}
// the basic initial query is parsed
function gimmespq(){
var SparqlParser = sparqljs.Parser;
var parser = new SparqlParser();
//const sparqlParser = sp_js.Parser;
return parser.parse(
`PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX ecrm: <http://erlangen-crm.org/current/>
PREFIX hdn: <http://hdn.dantenetwork.it/resource/work/commedia/cantica/>
PREFIX lemon: <http://lemon-model.net/lemon#>
PREFIX orl: <http://dantenetwork.it/resource/ontology/ORL/>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns>
SELECT ?pos ?sc ?ver ?canto ?cantica ?form ?categ
WHERE {
?occ ecrm:P148_is_component_of ?ver .
?occ hdn:isInPosition ?pos .
?canto ecrm:P148_has_component ?ver .
?ver ecrm:P190_has_symbolic_content ?sc .
?cantica ecrm:P148_has_component ?canto .
?occ hdn:occurrenceOf ?form .
?form a ?categ .
?form lemon:writtenRep ?Rappresentazione .
FILTER regex(?Rappresentazione,"^farò$","i") .
}`);
}
// the query is transformed according the form values
function gimmespqfromjson(form){
const sparqlgen = sparqljs.Generator;
const generator = new sparqlgen({orl: "http://www.w3.org/2000/01/rdf-schema#" })
const parsedquery=gimmespq()
if (form.categoria.value!='all')
parsedquery.where[0].triples.push(JSON.parse(data21)[form.categoria.value]);
if (form.query.value!="")
switch(form.tipo.value) {
case 'parola':
parsedquery.where[1].expression.args[1].value="^"+form.query.value+"$";
break;
case 'sottostringa':
parsedquery.where[1].expression.args[1].value=form.query.value;
break;
case 'prefisso':
parsedquery.where[1].expression.args[1].value=form.query.value;
break;
case 'suffisso':
parsedquery.where[1].expression.args[1].value=form.query.value+"$";
break;
default:
parsedquery.where[1].expression.args[1].value="^"+form.query.value+"$";
};
return generator.stringify(parsedquery);
}
data21 = `{"verbovolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaVerboVolgare"}},
"sostantivovolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaSostantivoVolgare"}},
"aggettivovolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaAggettivoVolgare"}},
"avverbiovolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaAvverbioVolgare"}},
"pronomevolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaPronomeVolgare"}},
"congiunzionevolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaCongiunzioneVolgare"}},
"articolovolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaArticoloVolgare"}},
"preposizionevolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaPreposizioneVolgare"}},
"interiezionevolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaInteriezioneVolgare"}},
"onomasticavolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaOnomasticaVolgare"}},
"citazionevolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaCitazioneVolgare"}},
"locuzionevolgare": {"subject": {"termType": "Variable", "value":"form"}, "predicate": {"termType":"NamedNode", "value": "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}, "object": {"termType": "NamedNode", "value": "http://dantenetwork.it/resource/ontology/ORL/FormaLocuzioneVolgare"}}
}
`

19
script.js Normal file
View File

@ -0,0 +1,19 @@
const tabs = document.querySelector(".wrapper");
const tabButton = document.querySelectorAll(".tab-button");
const contents = document.querySelectorAll(".content");
tabs.onclick = e => {
const id = e.target.dataset.id;
if (id) {
tabButton.forEach(btn => {
btn.classList.remove("active");
});
e.target.classList.add("active");
contents.forEach(content => {
content.classList.remove("active");
});
const element = document.getElementById(id);
element.classList.add("active");
}
}

62
style.css Normal file
View File

@ -0,0 +1,62 @@
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;300;400;700&display=swap');
body {
text-align: center;
font-family: 'Jost', sans-serif;
background-color: #f0f5ff;
}
h1 {
font-size: 48px;
color: #232c3d;
}
.wrapper {
width: 800px;
margin: auto;
background-color: white;
border-radius: 10px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, .1);
}
.buttonWrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
button {
letter-spacing: 3px;
border: none;
padding: 10px;
background-color: #bccbe9;
color: #232c3d;
font-size: 18px;
cursor: pointer;
transition: 0.5s;
}
button:hover {
background-color: #d5e3ff;
}
button.active {
background-color: white;
}
.active {
background-color: white;
}
p {
text-align: left;
padding: 10px;
}
.content {
display: none;
padding: 10px 20px;
}
.content.active {
display: block;
}