Skip to content

Instantly share code, notes, and snippets.

@espoirMur
Created February 4, 2018 19:56
Show Gist options
  • Save espoirMur/15634107912d061251f16e23f53deffd to your computer and use it in GitHub Desktop.
Save espoirMur/15634107912d061251f16e23f53deffd to your computer and use it in GitHub Desktop.
PLT homepage
<html lang="en" >
<style type="text/css">
.progress {
width: 100%;
height: 20px;
}
.progress-wrap {
background: #00a651;
margin: 20px 0;
overflow: hidden;
position: relative;
}
.progress-wrap .progress-bar {
background: #ddd;
left: 0;
position: absolute;
top: 0;
}
body{
font-family: arial;
font-size: 15px;
line-height: 1.6em;
}
li {
list-style: none;
}
a{
text-decoration: none;
}
.container {
width: 60%;
margin: 0 auto;
overflow: auto;
}
header {
border-bottom: 3px solid #00a651;
color: #00a651;
}
footer{
border-top: 3px solid #00a651;
text-align: center;
padding-top: 5px;
}
main {
padding-bottom: 20px;
}
a.start{
display: inline-block;
color: #666;
background: #f4f4f4;
border: 1px dotted #ccc;
padding: 6px 13px;
}
input[type='text']{
width: 97%;
padding: 4px;
border-radius: 5px;
border: 1px #ccc solid;
}
input[type='number']{
width: 50px;
padding: 4px;
border-radius: 5px;
border: 1px #ccc solid;
}
label {
display: inline-block;
width: 200px;
}
.current{
padding: 10px;
background: #f4f4f4;
border: #ccc dotted 1px;
margin: 20px 0 10px 0;
}
button {
color: #fff;
background: #00a651;
border: 1px dotted #ccc;
padding: 6px 13px;
}
@media only screen and (max-width:960px ) {
.container{
width: 80%;
}
}
#logo{
width : 30%;
height : 10%;
float : left;
padding-right : 20px;
padding-bottom : 10px;
}
</style>
<head>
<meta charset="UTF-8">
<title>PLT Tool </title>
</head>
<body>
<header>
<div class="container">
<img id="logo" src="logo.PNG" />
<h1>PLT Tool </h1>
</div>
</header>
<main>
<div class="container">
<h2>Choissez les fichiers </h2>
<form id="upload_form" enctype="multipart/form-data" method="post">
<p>
<label> Fichier 1 Receipe :</label>
<input type="file" name="bom" id="bom" onchange="uploadFile(bom)">
</p>
<p>
<label>Fichier 2 Ressources :</label>
<input type="file" name="ressources" id="ressources" onchange="uploadFile(ressources)"><br>
</p>
<p>
<label> Fichier 3 Interopérations :</label>
<input type="file" name="interoperation" id="interoperation" onchange="uploadFile(interoperation)">
</p>
<p>
<label>Fichier 4 Produits à exclure: </label>
<input type="file" name="excluded" id="excluded" onchange="uploadFile(excluded)">
</p>
<p>
<label>Fichier 5 Produits :</label>
<input type="file" name="product" id="product" onchange="uploadFile(product)"><br>
</p>
</form>
<!-- Change the below data attribute to play -->
<div class="progress-wrap progress" data-progress-percent="25">
<progress value="0" max="100" class="progress-bar progress" id="progressBar">
</progress>
</div>
<!--end-->
</div>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</main>
<footer>
<div class="container">
Copyright &copy; <strong>PLT Tool v1.0.0</strong>, 2018, Powered by SCOPEx
</div>
</footer>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
<script type="text/javascript">
function _(el) {
return document.getElementById(el);
}
function uploadFile(element_name) {
console.warn(element_name.id)
let file = _(element_name.id).files[0];
let formdata = new FormData();
formdata.append("file", file);
formdata.append("category", element_name.id);
let ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "{{url_for('home.upload_bom')}}");
ajax.send(formdata);
}
function progressHandler(event) {
//_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
let percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent) + "% telecharger .. veuillez patienter";
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0; //wil clear progress bar after successful upload
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment