OwlCyberSecurity - MANAGER

Edit File: impression.html

{% extends "base.html" %}

{% load static %}

{% block stylesheets %}
<link rel="stylesheet" href="{% static 'app/base.css' %}">
<link rel="stylesheet" href="{% static 'app/impression.css' %}">
{% endblock stylesheets %}
   
{% block title %}
<title>Impression</title>
{% endblock title %}

{% block content %} 
<div class="bg-modal">
    <div class="modal-contents">

<form method="post">
            {% csrf_token %}
            <label for="nom">Nom:</label>
			<input type="text" id="article" name="nom" placeholder="Nom a l'impression" maxlength="35" required>
            <br>
            <label for="details">Détails:</label>
            <br>
            <textarea id="dt" name="details" rows="4" cols="50" required></textarea><br>
            <br>
            <label for="bar">Code Bar:</label>
			<input type="text" id="bar" name="bar" placeholder="Code Bar" value="000000000000" required>
            <br>
           	<button type="submit" class="button" name="button"><i class='bx bx-save'></i> Ajouter </button>
		</form>

</div></div>

<div class="selection_bar">
    <p><i class='bx bxs-printer'></i> Impression </p>  
</div>

<div class="content_area">
<button id="button_new"><i class='bx bxs-message-alt-add'></i> Nouveau</button>
<table id="content_table">
<thead>
    <tr>
        <th>Nom</th>
        <th id="qt_t">Code Bar</th>
        <th id="dt">Expiration</th>
        <th id="detaills_t"></th>
        <th id="detaills_t"></th>
        
    </tr>
</thead>
<tbody>
{% for imp in imps%}
<tr>
    <form action={{imp.id}}> 
    <td class="produit_name">{{imp.nom}}</td>
    <td id="code" class="code">{{imp.code_bar}}</td>
    <td><input type="date" name="dt_exp"></td>
    <td id="detaills_t"> <button type="submit"><i class='bx bxs-detail'></i> Détails</button> </td> </form>
    <td><button onclick="printer(this)"><i class='bx bxs-printer'></i> Imprimer</button> </td>  </form>

</tr>

{%endfor%}

</tbody>

</table>

</div>

{%endblock content%}

{% block js%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
<script>
document.getElementById('button_new').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "flex";
});

document.querySelector('.close').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "none";
});
</script>

// Lorsque le script est chargé
    script.onload = function() {
        console.log("Button clicked!");
        // Générer le code-barres avec JsBarcode
        JsBarcode("#barcode", "${bar}", {
            format: "ean13", // Format du code-barres (EAN-13, UPC, etc.)
            displayValue: true // Masquer la valeur affichée en dessous du code-barres
        });
    };

// Ajouter le script au document
    document.body.appendChild(script);
});
    </` + `script>`;
        printWindow.document.write(jsBarcodeScript);
        printWindow.document.write('</body></html>');
        printWindow.document.close()
        window.setTimeout(function() {
          printWindow.print();
          printWindow.close();
          
        }, 50);
  
    }
  </script>

{%endblock js%}