OwlCyberSecurity - MANAGER

Edit File: commandes.html

{% extends "base.html" %}

{% load static %}

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

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

<form method="post">
            {% csrf_token %}
            <br>
            <label for="designation">Designation :</label><br>
			<input type="text" id="designation" name="designation" placeholder="Designation" required><br>
            <label for="client">Client :</label><br>
			<input type="text" id="client" name="client" placeholder="Client" required><br>
            <label for="prix">Prix :</label><br>
			<input type="number" name="prix" placeholder="Prix" required><br>
            <label for="acompte">Acompte :</label><br>
            <input type="number" name="acompte" placeholder="Acompte" value="0" required><br>
            <br>

<button type="submit" class="button" name="button"><i class='bx bx-save'></i> Enregistrer</button>
		</form>

</div></div>

<form method="post">
    {% csrf_token %}
<div class="selection_bar">
    <p><i class='bx bx-rotate-left'></i> Commandes</p>  
    <button type="submit" name="nondelivré" class="aproduire"><i class='bx bxs-time'></i> Non delivré </button>
    <button type="submit" name="delivré"><i class='bx bx-check'></i> Delivré</button>
</form>
</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 id="id_t">Id</th>
        <th>Client</th>
        <th id="qt_t">Designation</th>
        <th>Prix</th>
        <th id="statut_t">Statut</th>
        <th id="detaills_t"></th>
    </tr>
</thead>
<tbody>
{% for c in cmds reversed %}
<tr>
    <form action={{c.id}}>
        
    <td id="id_t">{{c.id}}</td>
    <td>{{c.client}}</td>
    <td id="qt_t">{{c.designation}}</td>
    <td>{{c.prix | floatformat:2}} Da</td>
    {% if c.statut == 'Delivré' %}
    <td id="etat_t"><p id="a_etatpret" class="a_etat">{{c.statut}}</p></td>
    {%else%}
    <td id="etat_t"><p id="a_etat" class="a_etat">{{c.statut}}</p></td>
    {% endif %}
    <td id="detaills_t"><button type="submit"><i class='bx bxs-detail'></i> Détails</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";
});

function ajout_produits() {
 
 var e = document.getElementById("select_products");
 var value=e.options[e.selectedIndex].text;
 var v=e.options[e.selectedIndex].value;
 var d = document.getElementById("quantity");
 var val = d.value
 html='<div class="inpt">\
         <input type="text" name="pruduct_item" id="pruduct_item" value="'+value+'">\
         <input type="number" name="item_quantity" id="item_quantity" value="'+val+'">\
         <input type="hidden" name="item_id" id="item_id" value="'+v+'">\
         <input type="button" class="remove-field" name="remove-field" id="remove-field" value="X" ">\
     </div> '
 
 var form = document.getElementById("the_div");
 form.innerHTML += html;
 
}

$(document).on("click", "#remove-field", function(){
 $(this).parent('div').remove();
 });;

;

</script>
{%endblock js%}