-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
194 lines (172 loc) · 7.79 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html>
<head>
<title>Competenze di Data Literacy</title>
<!-- Aggiungi Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
/* Stile per le righe pari (background grigio) */
#competenzeTable tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
/* Stile per le righe dispari (nessun background) */
#competenzeTable tbody tr:nth-child(odd) {
background-color: transparent;
}
/* Aggiungi uno stile per l'intestazione fissata in alto */
#competenzeTable thead th {
position: sticky;
top: 0;
background-color: white; /* Imposta il colore di sfondo */
}
/* Stile per i filtri fissati in alto */
.filter-row {
position: sticky;
top: 0;
background-color: white;
z-index: 1; /* Imposta una z-index maggiore per sovrapporre l'intestazione della tabella */
}
</style>
</head>
<body>
<div class="container mt-4">
<h1 class="mb-4">Competenze di Data Literacy</h1>
<!-- Filtri fissati in alto -->
<div class="row filter-row">
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="searchInput" placeholder="Inserisci una chiave di ricerca..." onkeyup="searchTable()">
</div>
<div class="col-md-6 mb-3">
<select class="form-control" id="jobVacancyFilter" onchange="filterTable()">
<option value="">Tutte le job vacancy</option>
<!-- Opzioni per selezionare specifiche job vacancy verranno aggiunte qui -->
</select>
</div>
</div>
<!-- Aggiungi un contenitore con uno stile di overflow per abilitare lo scroll -->
<div class="table-responsive">
<table class="table table-bordered" id="competenzeTable">
<thead>
<tr>
<th>Job Vacancy</th>
<th>Competenza Data Literacy</th>
<th>Base</th>
<th>Intermedio</th>
<th>Avanzato</th>
</tr>
</thead>
<tbody>
<!-- I dati verranno caricati qui usando jQuery -->
</tbody>
</table>
</div>
</div>
<!-- Aggiungi Bootstrap JS e jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
// Carica i dati dal file CSV
$.get("competenze.csv", function (data) {
// Dividi il file CSV in righe
var lines = data.split("\n");
// Oggetto per tenere traccia delle job vacancy e dei dati associati
var jobVacancyData = {};
// Popolare il filtro delle job vacancy e raccogli dati associati
var jobVacancyFilter = document.getElementById("jobVacancyFilter");
for (var i = 1; i < lines.length; i++) {
var line = lines[i].split(";");
if (line.length === 5) {
var jobVacancy = line[0].replace(/^"|"$/g, "");
if (!jobVacancyData[jobVacancy]) {
jobVacancyData[jobVacancy] = [];
var option = document.createElement("option");
option.text = jobVacancy;
option.value = jobVacancy;
jobVacancyFilter.appendChild(option);
}
jobVacancyData[jobVacancy].push(line);
}
}
// Mescola l'ordine delle job vacancy
var shuffledJobVacancies = shuffleArray(Object.keys(jobVacancyData));
// Popolare la tabella con dati all'interno dei gruppi di job vacancy in ordine casuale
for (var i = 0; i < shuffledJobVacancies.length; i++) {
var jobVacancy = shuffledJobVacancies[i];
var groupData = jobVacancyData[jobVacancy];
for (var j = 0; j < groupData.length; j++) {
var line = groupData[j];
var row = "<tr>";
for (var k = 0; k < line.length; k++) {
// Rimuovi il simbolo '"' solo se è presente all'inizio o alla fine del valore
var cellData = line[k].replace(/^"|"$/g, "");
row += "<td>" + cellData + "</td>";
}
row += "</tr>";
$("#competenzeTable tbody").append(row);
}
}
});
});
// Funzione per filtrare la tabella in base all'input dell'utente
function searchTable() {
var input, filter, table, tr, td, i, j, txtValue;
input = document.getElementById("searchInput");
filter = input.value.toUpperCase();
table = document.getElementById("competenzeTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
var displayRow = false;
td = tr[i].getElementsByTagName("td");
for (j = 0; j < td.length; j++) {
txtValue = td[j].textContent || td[j].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
displayRow = true;
break;
}
}
if (displayRow) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
// Funzione per filtrare la tabella in base alla selezione della job vacancy
function filterTable() {
var filter, table, tr, td, i, txtValue;
filter = document.getElementById("jobVacancyFilter").value.toUpperCase();
table = document.getElementById("competenzeTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0]; // La prima colonna contiene la job vacancy
if (td) {
txtValue = td.textContent || td.innerText;
// Rimuovi il simbolo '"' solo se è presente all'inizio o alla fine del valore
txtValue = txtValue.trim().replace(/^"|"$/g, "").toUpperCase();
if (txtValue === filter || filter === "") {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
// Funzione per mescolare un array in modo casuale (algoritmo di Fisher-Yates)
function shuffleArray(array) {
var currentIndex = array.length, randomIndex, temporaryValue;
// Finché ci sono elementi rimasti da mescolare...
while (currentIndex !== 0) {
// Scegli un elemento rimasto a caso...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
// E scambia con l'elemento corrente.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
</script>
</body>
</html>