OwlCyberSecurity - MANAGER

Edit File: production.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>Production</title>
{% endblock title %}

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

<form method="post">
            {% csrf_token %}
            <p style="font-size: 12px; color:red">* En cas de produit éxistant il est préférable de copier le nom du produit du stock</p>
            <br>
            <label for="article">Article:</label>
			<input type="text" id="article" name="article" placeholder="Article a produire" required>
			<input type="number" name="quantity_pr" placeholder="Quantité" required>
            <br>

<br>
            <label for="select_statut">Statut:</label>
            <select name="select_statut" id="select_statut">
                {% for st in status %}
                <option value="{{st.0}}">{{st.0}}</option>
                {% endfor %}
            </select>
            <br>
            <label for="select_products">Produits nécissaire:</label>
            <select name="select_products" id="select_products">
                {% for produit in produits %}
                <option value={{produit.id}}>{{produit.nom}} ({{produit.quantite}})</option>
                {% endfor %}
            </select>
            <input type="number" id="quantity" name="quantity" placeholder="Quantité" value=1 >
            <input type="button" onclick="ajout_produits()" value="+" >        
            <br>
            <div class="the_div" id="the_div"></div>
            <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> Production</p>  
    <button type="submit" name="aproduire" class="aproduire"><i class='bx bxs-time'></i> A produire</button>
    <button type="submit" name="encours"><i class='bx bx-revision'></i> En cours</button>
    <button type="submit" name="terminé"><i class='bx bxs-check-square'></i> Terminé</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>Produit</th>
        <th id="qt_t">Quantité</th>
        <th id="etat_t">Etat</th>
        <th id="statut_t">Statut</th>
        <th id="detaills_t"></th>
    </tr>
</thead>
<tbody>
{% for prod in prods%}
<tr>
    <form action={{prod.id}}>
        
    <td id="id_t">{{prod.id}}</td>
    <td>{{prod.nom}}</td>
    <td id="qt_t">{{prod.quantite}}</td>
    {% if prod.etat == 'Prêt' %}
    <td id="etat_t"><p id="a_etatpret" class="a_etat">{{prod.etat}}</p></td>
    {%else%}
    <td id="etat_t"><p id="a_etat" class="a_etat">{{prod.etat}}</p></td>
    {% endif %}
    {% if prod.statut == 'A Produire' %}
    <td id="statut_t"><p id="" class="a_etat"><i class='bx bxs-time'></i></p></td>
    {% endif %}
    {% if prod.statut == 'En cours' %}
    <td id="statut_t"><p id="" class="a_etat"><i class='bx bx-revision'></i></p></td>
    {% endif %}
    {% if prod.statut == 'Terminé' %}
    <td id="statut_t"><p id="" class="a_etat"><i class='bx bxs-check-square'></i></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%}