<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="manifest" href="/appatk/br/manifest.json">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<link href=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body onload="loadselect();loadtab();loadimg()"> <!-- onload delle funzioni che permettono di prendere i dati dal php-->
<!--navbar--->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="inserimentodati.html"><b style="color:rgb(4, 243, 4);">ATK</b> <b style="color:white;">BIND</b><b style="color:red;">INGS</b></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="inserimentodati.html">Grafica scatole</a>
</li>
<li class="nav-item">
<a class="nav-link" href="anagrafica.html">Anagrafica Prodotto</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">#####</a>
</li>
</ul>
</div>
</nav>
<!--fine navbar--->
<br>
<h5 ><b>codice articolo FR15Y.097</b></h5><br> <p id="testo">ciao : </p> <!--indice che mostra che prodotto stiamo visualizzando-->
<p style="color:red;">I dati della tabella non sono modificabili, per poterli modifica si prega di accedere al gestionale</p><br><br> <!--avvertenza dati non modificabili dall'app-->
<table class = "table table-light table-striped"><!--inizio tabella-->
<tr>
<th>codice articolo </th>
<th>descrizione</th>
<th>catomo</th>
</tr>
<tbody id = "tab"> <!--il php grazie alla funzione js inserisci il codice html della interno della tabella-->
</tbody>
</table> <!--fine tabella-->
<form >
<div class="card" style="width: 18rem;"> <!--carosello per le immagini che scorrono del prodotto-->
<div id="carousel" class="carousel slide" data-bs-ride="carousel"> <!--questo è il div dove la funzione loadimg() carica le immagini -->
<div class="carousel-inner">
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="card-body">
</div>
</div>
</form> <!--fine carosello-->
<div class="form-group mt-4">
</div>
<div class="card w-50 p-10 mx-auto justify-content-center"> <!-- contenitore per la select(scelta delle lingue) e per la descrizione del prodotto-->
<select id="selectl" class="form-control" onchange="trasmissione()" ><!--select dove vengono inseriti i dati del DB grazie alla funzione loadselect()-->
</select>
<div class="card-body">
<h5 class="card-title"><b style="color:red;">Descrizione</b></h5>
<div class="card-text" >
<p id="desc"> </p>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- intestazioni per app json , css,ajax-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"crossorigin="anonymous"></script>
<script>
function loadtab() { //funzione che carica i dati presi dal database che vengono passati dal php e gli inserisce nella tabella id="tab"
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
document.getElementById("tab").innerHTML = this.responseText;
}
xmlhttp.open("GET", "loadprodotto.php");
xmlhttp.send();
}
function loadimg() { //funzione che prende le immagini che vengono passate dal php e le inserisce nel carosello
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
document.getElementById("carousel").innerHTML = this.responseText;
}
xmlhttp.open("GET", "loadimg.php");
xmlhttp.send();
}
/* function loadesc() {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
document.getElementById("desc").innerHTML = this.responseText;
}
xmlhttp.open("GET", "exe.php");
xmlhttp.send();
}*/
function loadselect(){ //funzione che carica la nostra select con i dati passati dal php presi dal database
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
document.getElementById("selectl").innerHTML = this.responseText;
}
xmlhttp.open("GET", "loadselect.php");
xmlhttp.send();}
function trasmissione(){
/* var lingua=document.getElementById("selectl").value;
//creo la variabile lingua che prenderà il valore della select
const xhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
document.getElementById("desc").innerHTML = this.responseText;
document.getElementById("testo").innerHTML= lingua;
xhttp.open("GET", "exe.php?lingua="+lingua);
xhttp.send();
}*/
var lingua=document.getElementById("selectl").value;
const xhttp = new XMLHttpRequest();
xhttp.open("GET", "exe.php?lingua="+lingua);
xhttp.send();
}
</script>
</html>