Multi tab support + added by spec search
Browse files- static/script.js +47 -4
- static/style.css +14 -1
- templates/index.html +23 -5
static/script.js
CHANGED
|
@@ -1,4 +1,47 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
document.getElementById('fileInput').addEventListener('change', handleFileSelect);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 2 |
|
| 3 |
function handleFileSelect(event) {
|
| 4 |
const file = event.target.files[0];
|
|
@@ -39,17 +82,17 @@ function handleFileSelect(event) {
|
|
| 39 |
reader.onload = function (e) {
|
| 40 |
try {
|
| 41 |
const jsonContent = JSON.parse(e.target.result);
|
| 42 |
-
renderDocument(jsonContent);
|
| 43 |
} catch (error) {
|
| 44 |
-
document.
|
| 45 |
`<div class="error">Erreur lors du traitement du fichier JSON: ${error.message}</div>`;
|
| 46 |
}
|
| 47 |
};
|
| 48 |
reader.readAsText(file);
|
| 49 |
}
|
| 50 |
|
| 51 |
-
function renderDocument(jsonContent) {
|
| 52 |
-
const container = document.
|
| 53 |
container.innerHTML = '';
|
| 54 |
|
| 55 |
// Parcourir tous les éléments du JSON
|
|
|
|
| 1 |
+
const jsonTab = document.getElementById("tab1-btn")
|
| 2 |
+
const specTab = document.getElementById("tab2-btn")
|
| 3 |
+
|
| 4 |
+
document.getElementById("tab1").style.display = "block";
|
| 5 |
document.getElementById('fileInput').addEventListener('change', handleFileSelect);
|
| 6 |
+
document.getElementById("versCheck").addEventListener('change', event=>{
|
| 7 |
+
if(event.target.checked){document.getElementById("versionInput").removeAttribute("disabled")} else {document.getElementById("versionInput").value = ""; document.getElementById("versionInput").setAttribute("disabled", "")}
|
| 8 |
+
})
|
| 9 |
+
function openTab(evt, tabName) {
|
| 10 |
+
var i, tabcontent, tablinks;
|
| 11 |
+
tabcontent = document.getElementsByClassName("tabcontent");
|
| 12 |
+
for (i = 0; i < tabcontent.length; i++) {
|
| 13 |
+
tabcontent[i].style.display = "none";
|
| 14 |
+
}
|
| 15 |
+
tablinks = document.getElementsByClassName("tablinks");
|
| 16 |
+
for (i = 0; i < tablinks.length; i++) {
|
| 17 |
+
tablinks[i].className = tablinks[i].className.replace(" active", "");
|
| 18 |
+
}
|
| 19 |
+
document.getElementById(tabName).style.display = "block";
|
| 20 |
+
evt.currentTarget.className += " active";
|
| 21 |
+
}
|
| 22 |
+
|
| 23 |
+
function handleSpecSearch(){
|
| 24 |
+
let versCheck = document.getElementById("versCheck").checked;
|
| 25 |
+
let body = {"specification": document.getElementById("specInput").value};
|
| 26 |
+
if(versCheck && document.getElementById("versionInput").value.length > 0){
|
| 27 |
+
body["version"] = document.getElementById("versionInput").value;
|
| 28 |
+
} else {
|
| 29 |
+
fetch("https://organizedprogrammers-3gppdocfinder.hf.space/find",
|
| 30 |
+
{method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify({"doc_id": body.specification})}
|
| 31 |
+
).then(data => data.json())
|
| 32 |
+
.then(resp => body['version'] = resp.version)
|
| 33 |
+
.catch(error => console.error(error))
|
| 34 |
+
}
|
| 35 |
+
|
| 36 |
+
fetch("/from-search", {
|
| 37 |
+
method: "POST",
|
| 38 |
+
headers: {"Content-Type": "application/json"},
|
| 39 |
+
body: JSON.stringify(body)
|
| 40 |
+
})
|
| 41 |
+
.then(data => data.json())
|
| 42 |
+
.then(resp => renderDocument("tab2", resp))
|
| 43 |
+
.catch(error => console.error(error))
|
| 44 |
+
}
|
| 45 |
|
| 46 |
function handleFileSelect(event) {
|
| 47 |
const file = event.target.files[0];
|
|
|
|
| 82 |
reader.onload = function (e) {
|
| 83 |
try {
|
| 84 |
const jsonContent = JSON.parse(e.target.result);
|
| 85 |
+
renderDocument("tab1", jsonContent);
|
| 86 |
} catch (error) {
|
| 87 |
+
document.querySelector('#tab1 #document-container').innerHTML =
|
| 88 |
`<div class="error">Erreur lors du traitement du fichier JSON: ${error.message}</div>`;
|
| 89 |
}
|
| 90 |
};
|
| 91 |
reader.readAsText(file);
|
| 92 |
}
|
| 93 |
|
| 94 |
+
function renderDocument(tab, jsonContent) {
|
| 95 |
+
const container = document.querySelector(`#${tab} #document-container`);
|
| 96 |
container.innerHTML = '';
|
| 97 |
|
| 98 |
// Parcourir tous les éléments du JSON
|
static/style.css
CHANGED
|
@@ -10,7 +10,6 @@ body {
|
|
| 10 |
.header {
|
| 11 |
margin-bottom: 30px;
|
| 12 |
padding-bottom: 15px;
|
| 13 |
-
border-bottom: 1px solid #ddd;
|
| 14 |
}
|
| 15 |
|
| 16 |
.file-input-container {
|
|
@@ -100,6 +99,12 @@ pre {
|
|
| 100 |
margin: 15px 0;
|
| 101 |
}
|
| 102 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 103 |
#fileInput {
|
| 104 |
padding: 10px;
|
| 105 |
border: 1px solid #ddd;
|
|
@@ -122,6 +127,14 @@ button:hover {
|
|
| 122 |
background-color: #2c5282;
|
| 123 |
}
|
| 124 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 125 |
@media print {
|
| 126 |
.file-input-container {
|
| 127 |
display: none;
|
|
|
|
| 10 |
.header {
|
| 11 |
margin-bottom: 30px;
|
| 12 |
padding-bottom: 15px;
|
|
|
|
| 13 |
}
|
| 14 |
|
| 15 |
.file-input-container {
|
|
|
|
| 99 |
margin: 15px 0;
|
| 100 |
}
|
| 101 |
|
| 102 |
+
#specInput, #versionInput {
|
| 103 |
+
padding: 10px;
|
| 104 |
+
border: 1px solid #ddd;
|
| 105 |
+
border-radius: 4px;
|
| 106 |
+
}
|
| 107 |
+
|
| 108 |
#fileInput {
|
| 109 |
padding: 10px;
|
| 110 |
border: 1px solid #ddd;
|
|
|
|
| 127 |
background-color: #2c5282;
|
| 128 |
}
|
| 129 |
|
| 130 |
+
button.active {
|
| 131 |
+
background-color: #223c5d;
|
| 132 |
+
}
|
| 133 |
+
|
| 134 |
+
.tabcontent {
|
| 135 |
+
display: none;
|
| 136 |
+
}
|
| 137 |
+
|
| 138 |
@media print {
|
| 139 |
.file-input-container {
|
| 140 |
display: none;
|
templates/index.html
CHANGED
|
@@ -11,12 +11,30 @@
|
|
| 11 |
<body>
|
| 12 |
<div class="header">
|
| 13 |
<h1>Visualiseur de Spécifications 3GPP</h1>
|
| 14 |
-
<div class="
|
| 15 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 16 |
</div>
|
| 17 |
-
</div>
|
| 18 |
-
<div id="document-container">
|
| 19 |
-
<div class="loading">Veuillez charger un fichier de spécification 3GPP</div>
|
| 20 |
</div>
|
| 21 |
<script src="static/script.js"></script>
|
| 22 |
</body>
|
|
|
|
| 11 |
<body>
|
| 12 |
<div class="header">
|
| 13 |
<h1>Visualiseur de Spécifications 3GPP</h1>
|
| 14 |
+
<div class="tabs">
|
| 15 |
+
<button class="tablinks active" onclick="openTab(event, 'tab1')" data-loading="Veuillez charger un fichier de spécification 3GPP">Fichier JSON</button>
|
| 16 |
+
<button class="tablinks" onclick="openTab(event, 'tab2')" data-loading="Veuillez chercher une spécification 3GPP">Spécification</button>
|
| 17 |
+
</div>
|
| 18 |
+
<div id="tab1" class="tabcontent">
|
| 19 |
+
<div class="file-input-container"> <input type="file" id="fileInput" accept=".json">
|
| 20 |
+
<div id="fileInfo"></div>
|
| 21 |
+
</div>
|
| 22 |
+
<div id="document-container">
|
| 23 |
+
|
| 24 |
+
</div>
|
| 25 |
+
</div>
|
| 26 |
+
<div id="tab2" class="tabcontent">
|
| 27 |
+
<div class="file-input-container">
|
| 28 |
+
<label for="specInput">Spécification N°</label>
|
| 29 |
+
<input type="text" id="specInput" style="width: 45px;">
|
| 30 |
+
<label for="versionInput">Version <input type="checkbox" id="versCheck"></label>
|
| 31 |
+
<input type="text" id="versionInput" style="width: 45px;" disabled>
|
| 32 |
+
<button onclick="handleSpecSearch()">Afficher</button>
|
| 33 |
+
</div>
|
| 34 |
+
<div id="document-container">
|
| 35 |
+
|
| 36 |
+
</div>
|
| 37 |
</div>
|
|
|
|
|
|
|
|
|
|
| 38 |
</div>
|
| 39 |
<script src="static/script.js"></script>
|
| 40 |
</body>
|