<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/LudwigCRON/pen/xjmDE?depth=everything&order=popularity&page=64&q=editable&show_forks=false" />
<style class="cp-pen-styles">@media screen{
body{
background:lightgray;
margin:0;
}
#options{
position:fixed;
top:0px;
left:0px;
height:60px;
width:100%;
background: #e2e2e2; /* Old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
background: linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
box-shadow:0 0 10px gray;
z-Index:2;
padding:5px 0 0 25px;
}
.button, iframe {
margin-left:10px;
-moz-box-shadow:inset 0px 0px 0px 1px #cae3fc;
-webkit-box-shadow:inset 0px 0px 0px 1px #cae3fc;
box-shadow:inset 0px 0px 0px 1px #cae3fc;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
background-color:#79bbff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #469df5;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:15px 38px;
text-decoration:none;
text-shadow:1px 1px 0px #287ace;
}.button:hover, iframe:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
background-color:#4197ee;
}
aside{
border-left:1px solid gray;
box-shadow:7px 0 10px -2px lightgray inset;
}
#etiquette{
margin-top:0mm;
margin-bottom:2mm;
margin-right:1mm;
margin-left:0;
}
#section {
top:80px;
}
}
@media print{
body{
background:white;
}
#options{
visibility:hidden;
}
aside{
border:none;
box-shadow: none;
}
#etiquette{
margin-top:-7mm;
margin-bottom:9mm;
margin-right:1mm;
margin-left:0;
}
#section{
top:0px;
}
}
span.h{
font-family:arial, helvetica,sans-serif;
font-size:3mm;
font-weight:bold;
color:black;
margin:1mm 0 0 0;
}
span{
font-family:arial, helvetica,sans-serif;
font-size:3mm;
font-weight:normal;
color:black;
}
span.h:after{
content:' : ';
}
.logo{
width:37mm;
float:right;
margin:3mm 0mm 5mm 8mm;
display:block;
}
header{
width:70mm;
float:left;
}
h1, h2{
font-family:arial, helvetica,sans-serif;
font-weight:bold;
float:left;
margin:0;
padding:0;
}
h1{
font-size:3mm;
}
h2{
font-size:3mm;
color:rgb(35, 24, 125);
}
aside{
float:right;
margin:-10mm 0 0 -5px;
padding:0 0 0 5px;
width:37mm;
height:50mm;
text-align:justify;
}
aside > span.adresse{
font-size:2mm;
display:block;
margin:0 0 -4mm 0;
}
aside > span.h{
margin-left:5mm;
}
#etiquette{
width:105mm!important;
height:70mm!important;
border:1px solid lightgray;
border-radius:2mm;
box-shadow:0 0 5mm gray;
margin:0mm;
padding:3mm;
background:white;
z-Index:1px;
overflow:none;
display:inline-block;
}
section{
margin:1mm 0 0 0;
float:left;
width:65mm;
display:block;
overflow:none;
}
section > img{
min-width:65mm;
height:15mm;
margin-left:-1mm;
}
section >img[alt="batch"]{
width:105mm;
}
#etiquette > footer{
clear:both;
margin:0mm;
display:block;
}
#section{
width:110mm!important;
margin:0 auto;
position:relative;
overflow:none;
}
footer{
position:relative;
top:-3mm;
}
footer > span{
font-size:3mm;
}
footer > span.h{
font-size:3mm;
}
select{
float:right;
margin-right:50px;
height:40px;
}
iframe{
display:inline-block;
float:left;
}</style></head><body>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" >
<div id="options">
<span class="h">Nb Copie(s)</span>
<span id="nbcopie" contenteditable="true">1</span>
<a onClick="save();" class="button">Save</a>
<a onClick="delete_ref();" class="button">Supprimer</a>
<a onClick="printer();" class="button">Print</a>
<a onClick="exportCSV();" class="button">Export CSV</a>
<iframe id="triche" width="340px" height="50px" style="position:absolute;padding:0;overflow:hidden;">
<html>
<head>
</head>
<body>
</body>
</html>
</iframe>
<a class="button" style="position:fixed;bottom:0;left:auto;right:auto;">Pour Actualiser la page faites F5</a>
<select name="choose list" id="listing">
</select>
</div>
<div id="section">
<div id="etiquette">
<header>
<h1 contenteditable="true">METALLISED PAIRED PIGTAIL /0,1</h1><br>
<h2 contenteditable="true">U2T PRODUCT 50500089</h2>
</header>
<section>
<span class="h">Artikelnummer</span><span id="numero" contenteditable="true">50500089</span><br>
<img src="http://www.barcodesoft.com/barcodesoft.ashx?text=CODE39&s=Code39&r=96&hrfontsize=3&h=60&w=350" alt="numero"/><br>
<span class="h">Bezeichnung</span><span id="bezeichnung" contenteditable="true">AR coating < 0,1 % [1480-1620] &<br> < 0,02% [1540-1560] nm</span><br>
<span class="h">Fiber</span><span id="fiber" contenteditable="true">SMF 28 Glueing inner hytrel yellow jacket</span><br><span class="h">Connector</span><span id="connector" contenteditable="true">LC/PC</span> <span class="h">SEDI</span><span id="batch" contenteditable="true">12-12-012</span>
<img src="http://www.barcodesoft.com/barcodesoft.ashx?text=CODE39&s=Code39&r=24&hrfontsize=3&h=60&w=600" alt="batch"/>
</section>
<aside style="margin-left:-50px;">
<img src="http://gyro.o2switch.net/imgs/SEDI-ATI-2012.jpg" alt="logo" class="logo"/><br>
<span class="adresse">8 Rue Jean Mermoz-ZA de St Guenault<br>91080 Courcouronnes<br>Tel : (33) 01 69 36 64 32<br>Fax : (33) 01 69 36 64 51<br>Adresse Postale : ATI-91031 EVRY CEDEX-France</span><br>
</span><span class="h" style="font-size:6mm;margin:0 auto;">Qte</span>
<span style="font-size:6mm;" contenteditable="true" id="quantity">1</span>
</aside>
<footer>
<span class="h">SEDI PART</span><span id="sedi" contenteditable="true">11-225</span>
<span class="h">ATI PART</span><span id="ati" contenteditable="true">FMAR.009.26-10B/0,1</span>
</footer>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >function AjaxRequest(){
var xhr="undefined";
return{
"_$":function(url,data,fc,method){
try
{
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Essayer IE
}
catch(e) // Echec, utiliser l'objet standard
{
xhr = new XMLHttpRequest();
}
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4)
{
if(xhr.status == 200){
fc(xhr);
}
}
};
if(typeof method=="undefined"){
method='GET';
}
xhr.open(method, url, true);
xhr.send(data);
},
"xhr":function(){
return xhr;
}
};
}
var db=null, websql=false;
var iframe="";
function addEvent(node, event, fc){
if(node.attachEvent){
node.attachEvent('on'+event,fc);
}else{
node.addEventListener(event,fc,true);
}
}
function replaceAll(txt, replace, with_this) {
return txt.replace(new RegExp(replace, 'g'),with_this);
}
function printer(){
var e = getData();
window.location.href="PDF.php?nb="+document.getElementById("nbcopie").innerHTML+"&title="+e.title+"&subtitle="+e.subtitle+"&num="+e.numero+"&bat="+e.batch+"&fiber="+escape(e.fiber)+"&desc="+escape(replaceAll(replaceAll(replaceAll(replaceAll(e.bezeichnung,"<br>"," "),"<","<"),"&","&"),"<br>"," "))+"&quantity="+e.quantity+"&sedi="+e.sedi+"&ati="+e.ati;
}
function Uploader(){
var data=document.getElementById("triche").contentDocument.documentElement.getElementsByTagName("pre")[0].innerHTML;
data=replaceAll(data,"<br>","<br>");
data=replaceAll(data,"%26","&");
window.localStorage.setItem("etiquettes",data);
var etiquettes=JSON.parse(data);
document.getElementById("listing").innerHTML="";
var option=document.createElement("option");
option.value="undefined";
option.text=" ";
document.getElementById("listing").add(option,null);
for(i=0;i<etiquettes.nums.length;i++){if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;}
var option=document.createElement("option");
option.value=etiquettes.nums[i];
option.text=etiquettes.nums[i];
document.getElementById("listing").add(option,null);
}
window.CP.exitedLoop(1);
window.CP.exitedLoop(1);
var x=document.getElementById("triche");
var y=(x.contentWindow || x.contentDocument);
if (y.document)y=y.document;
y.getElementsByTagName("body")[0].innerHTML='<form method="post" enctype="multipart/form-data" action="importcsv.php" style="color:#ffffff;font-family:arial;font-size:15px;font-weight:bold;overflow:hidden;text-shadow:1px 1px 0px #287ace;">Import CSV</form>';
var tmp=document.createElement("input");
tmp.type="file";
tmp.name="import_file";
tmp.id="drop_zone_cache";
tmp.style="display:inline-block";
y.getElementsByTagName("form")[0].insertBefore(tmp,null);
tmp.onchange=function(){
this.parentNode.submit();
}
document.getElementById("triche").onload=function(){
Uploader();
};
}
addEvent(document.querySelector("span#nbcopie"),"keydown",function(e){
touche=(window.Event?1:0)?e.which||e.keyCode:window.event.keyCode;
if(touche!=13 && touche > 95 && touche < 106 || touche==8 || touche==37 || touche==39 || touche==46){
//action par defaut
}else{
if (event.preventDefault) {
event.preventDefault(); // FF
}
event.returnValue = false; // IE
return false;
}
},false);
addEvent(document.querySelector("span#numero"),"keydown",function(e){
touche=(window.Event?1:0)?e.which||e.keyCode:window.event.keyCode;
if(touche!=13 && touche > 95 && touche < 106 || touche==8 || touche==37 || touche==39 || touche==46){
//action par defaut
}else{
if (event.preventDefault) {
event.preventDefault(); // FF
}else{
event.returnValue = false; // IE
}
return false;
}
},false);
addEvent(document.querySelector("span#nbcopie"),"keyup",function(e){
document.querySelector("span#nbcopie").innerHTML=replaceAll(document.querySelector("span#nbcopie").innerHTML,"<br>","");
},false);
addEvent(document.querySelector("span#numero"),"keyup",function(e){
document.querySelector("span#numero").innerHTML=replaceAll(document.querySelector("span#numero").innerHTML,"<br>","");
document.querySelector("img[alt=numero]").src="http://www.barcodesoft.com/barcodesoft.ashx?text="+document.querySelector("span#numero").innerHTML+"&s=Code39&r=96&hrfontsize=5&h=60&w=300";
},false);
addEvent(document.querySelector("span#batch"),"keyup",function(e){
document.querySelector("span#batch").innerHTML=replaceAll(document.querySelector("span#batch").innerHTML,"<br>","");
document.querySelector("img[alt=batch]").src="http://www.barcodesoft.com/barcodesoft.ashx?text=SEDI-"+document.querySelector("span#batch").innerHTML.split("<br>")[0]+"&s=Code39&r=24&hrfontsize=5&h=60&w=600";
},false);
function update_cde(){
document.querySelector("img[alt=batch]").src="http://www.barcodesoft.com/barcodesoft.ashx?text=SEDI-"+document.querySelector("span#batch").innerHTML.split("<br>")[0]+"&s=Code39&r=96&hrfontsize=5&h=60&w=300";
document.querySelector("img[alt=numero]").src="http://www.barcodesoft.com/barcodesoft.ashx?text="+document.querySelector("span#numero").innerHTML.split("<br>")[0]+"&s=Code39&r=96&hrfontsize=5&h=60&w=300";
}
function delete_ref(){
if(window.localStorage.getItem("etiquettes")){
var delete_etiquette=getData();
var db = JSON.parse(window.localStorage.getItem("etiquettes"));
var index = db.nums.indexOf(delete_etiquette.numero);
db.nums.splice(index,1);
db.data.splice(index,1);
window.localStorage.setItem("etiquettes",JSON.stringify(db));
refresh();
}
}
function refresh(){
if(window.localStorage.getItem("etiquettes")){
var etiquettes = JSON.parse(window.localStorage.getItem("etiquettes"));
document.getElementById("listing").innerHTML="";
var option=document.createElement("option");
option.value=" ";
option.text=" ";
document.getElementById("listing").add(option,null);
for(i=0;i<etiquettes.nums.length;i++){if (window.CP.shouldStopExecution(2)){break;}if (window.CP.shouldStopExecution(2)){break;}
var option=document.createElement("option");
option.value=etiquettes.nums[i];
option.text=etiquettes.nums[i];
document.getElementById("listing").add(option,null);
}
window.CP.exitedLoop(2);
window.CP.exitedLoop(2);
addEvent(document.querySelector("select#listing"),"change",function(e){
restore(document.querySelector("select#listing").options[document.querySelector("select#listing").selectedIndex].value);
},false);
}else{
window.localStorage.setItem("etiquettes",'{"nums":[],"data":[]}');
}
update_cde();
}
document.onreadystatechange=function(){
if(document.readyState==="complete"){
var x=document.getElementById("triche");
x.style['zIndex']=10;
var y=(x.contentWindow || x.contentDocument);
if (y.document)y=y.document;
iframe=y;
y.getElementsByTagName("body")[0].innerHTML='<form method="post" enctype="multipart/form-data" action="importcsv.php" style="color:#ffffff;font-family:arial;font-size:15px;font-weight:bold;overflow:hidden;text-shadow:1px 1px 0px #287ace;">Import CSV</form>';
var tmp=document.createElement("input");
tmp.type="file";
tmp.name="import_file";
tmp.id="drop_zone_cache";
tmp.style="display:inline-block";
y.getElementsByTagName("form")[0].insertBefore(tmp,null);
tmp.onchange=function(){
this.parentNode.submit();
}
document.getElementById("triche").onload=function(){
Uploader();
};
refresh();
}
}
function save(){
var num=document.querySelector("span#numero").innerHTML.split("<br>")[0];
var etiquettes=JSON.parse(window.localStorage.getItem("etiquettes"));
if(etiquettes.nums.indexOf(num)!=-1){
if(confirm("une version existe deja. voulez vous l'ecrasez?")){
etiquettes.data[etiquettes.nums.indexOf(num)]='"'+num+'":'+JSON.stringify(getData());
}
}else{
etiquettes.nums.push(num);
etiquettes.data.push('"'+num+'":'+JSON.stringify(getData()));
}
window.localStorage.setItem("etiquettes",JSON.stringify(etiquettes));
document.getElementById("listing").innerHTML="";
for(i=0;i<etiquettes.nums.length;i++){if (window.CP.shouldStopExecution(3)){break;}if (window.CP.shouldStopExecution(3)){break;}
var option=document.createElement("option");
option.value=etiquettes.nums[i];
option.text=etiquettes.nums[i];
document.getElementById("listing").add(option,null);
}
window.CP.exitedLoop(3);
window.CP.exitedLoop(3);
addEvent(document.querySelector("select#listing"),"change",function(e){
restore(document.querySelector("select#listing").options[document.querySelector("select#listing").selectedIndex].value);
},false);
refresh();
}
function restore(num){
var obj = JSON.parse(window.localStorage.getItem("etiquettes"));
var etiquette = JSON.parse("{"+obj.data[obj.nums.indexOf(num)]+"}")[num];
document.querySelector("header>h1").innerHTML=etiquette.title;
document.querySelector("header>h2").innerHTML=etiquette.subtitle;
document.querySelector("span#numero").innerHTML=etiquette.numero;
document.querySelector("span#batch").innerHTML=etiquette.batch;
document.querySelector("span#fiber").innerHTML=etiquette.fiber;
document.querySelector("span#connector").innerHTML=etiquette.connector;
document.querySelector("span#bezeichnung").innerHTML=etiquette.bezeichnung;
document.querySelector("span#quantity").innerHTML=etiquette.quantity;
document.querySelector("span#sedi").innerHTML=etiquette.sedi;
document.querySelector("span#ati").innerHTML=etiquette.ati;
refresh();
}
function list(tx,result){
var list="<option value=\" \"> </option>"
for(i=0;i<result.rows.length;i++){if (window.CP.shouldStopExecution(4)){break;}if (window.CP.shouldStopExecution(4)){break;}
list+="<option value='"+result.rows.item(i)["numero"]+"'>"+result.rows.item(i)["numero"]+"</option>";
}
window.CP.exitedLoop(4);
window.CP.exitedLoop(4);
document.querySelector("select#listing").innerHTML=list;
addEvent(document.querySelector("select#listing"),"change",function(e){
restore(document.querySelector("select#listing").options[document.querySelector("select#listing").selectedIndex].value);
},false);
}
function errorsql(e){
alert(e);
}
function getData(){
var data={};
data.title=replaceAll(document.querySelector("header>h1").innerHTML.split("<br>")[0]," "," ");
data.subtitle=replaceAll(document.querySelector("header>h2").innerHTML.split("<br>")[0]," "," ");
data.numero=replaceAll(document.querySelector("span#numero").innerHTML.split("<br>")[0]," "," ");
data.batch=replaceAll(document.querySelector("span#batch").innerHTML.split("<br>")[0]," "," ");
data.fiber=replaceAll(document.querySelector("span#fiber").innerHTML," "," ");
data.connector=replaceAll(document.querySelector("span#connector").innerHTML," "," ");
data.bezeichnung=replaceAll(document.querySelector("span#bezeichnung").innerHTML," "," ");
data.quantity=replaceAll(document.querySelector("span#quantity").innerHTML.split("<br>")[0]," "," ");
data.sedi=replaceAll(document.querySelector("span#sedi").innerHTML.split("<br>")[0]," "," ");
data.ati=replaceAll(document.querySelector("span#ati").innerHTML.split("<br>")[0]," "," ");
return data;
}
function replaceAll(txt, replace, with_this) { return txt.replace(new RegExp(replace, 'g'),with_this);}
function exportCSV(){
var csvData = "";
var etiquettes = JSON.parse(window.localStorage.getItem("etiquettes"));
for(i=0;i<etiquettes.nums.length;i++){if (window.CP.shouldStopExecution(5)){break;}if (window.CP.shouldStopExecution(5)){break;}
csvData+=etiquettes.nums[i]+";"+etiquettes.data[i];
}
window.CP.exitedLoop(5);
window.CP.exitedLoop(5);
csvData=replaceAll(csvData,"&","&");
csvData=replaceAll(csvData,"<br>"," ");
csvData=replaceAll(csvData,"<","<");
window.location="exportcsv.php?name=db_etiquettes.csv&dta="+escape(csvData);
}
//# sourceURL=pen.js
</script>
</body></html>
