OwlCyberSecurity - MANAGER

Edit File: finance.html

{% extends "base.html" %}
{% load static %}

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

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

<form method="post">
            {% csrf_token %}
            <label for="select_type">Type : </label>
            <select name="select_type" id="select_type">
            {% for type in types %}   
            <option value="{{type.0}}">{{type.0}}</option>
            {%endfor%}
            </select>
            <br>
            <label for="date">Date : </label>
            <input type="date" name="date" id="date_select" required>
            <br>
            <label for="motif">Motif : </label>
            <input type="text" name="motif" id="motif" required>
            <br>
            <label for="montant">Montant : </label>
            <input type="number" name="montant" id="montant" required>
            <br>
            
            <button type="submit" onclick="return confirm('Voulez vous ajouter ?')" name="ajouter" id="sauvegarder">Ajouter</button>
           
		</form>

</div></div>

<form method="post">
    {% csrf_token %}
<div class="selection_bar">
    <p><i class='bx bx-rotate-left'></i> Finance</p>  
    <button type="submit" name="Dépence" class="Dépence"><i class='bx bxs-time'></i> Dépence</button>
    <button type="submit" name="Gain"><i class='bx bx-revision'></i> Gain</button>
</form>
</div>

<div class="content_area">
<button id="button_new"><i class='bx bxs-message-alt-add'></i> Nouveau</button>
<div class="filtre"><form method="post">{%csrf_token%}<label for="date_de">De : </label><input type="date" name="date_de" id="date_de" required><label for="date_a"> A : </label><input type="date" name="date_a" id="date_a" required> <button type="submit" id="filtrer" name="filtrer">Filtrer</button></form></div>
{% if date_de %}<p style="font-weight: bold; text-align: center;">Du : <span style="color: blue ;">{{date_de}}</span> Au :  <span style="color: blue ;">{{date_a}}</span></p>{%endif%}

{% if date_de %}
<p style="text-align: center;margin-top: 5px;"> Accumulé :<span style="color: green ; font-weight: bold;text-align: center;">{{gain_taux | floatformat:2}} Da</span></p>
<p style="text-align: center;margin-top: 5px;"> Dépencé :<span style="color: red ; font-weight: bold;text-align: center;">{{dépence_taux | floatformat:2}} Da</span></p>
<p style="text-align: center;margin-top: 5px;"> Bénéfices : {% if bénef > 0 %}<span style="color: green ; font-weight: bold;text-align: center;">{{bénef | floatformat:2}} Da</span>{%else%}<span style="color: red ; font-weight: bold;text-align: center;">{{bénef | floatformat:2}} Da</span>{%endif%}</p>
{%endif%}
<table id="content_table">
<thead>
    <tr>
        <th id="id_t">Id</th>
        <th>Type</th>
        <th id="qt_t">Motif</th>
        <th id="etat_t">Date</th>
        <th id="statut_t">Montant</th>
        <th id="detaills_t"></th>
    </tr>
</thead>
<tbody>
{% for dg in depgain reversed %}
<tr>
    <form action={{dg.id}}>
        
    <td id="id_t">{{dg.id}}</td>
    {% if dg.type == 'Gain'%}
    <td id="green_color"><i class='bx bx-up-arrow-circle'></i> {{dg.type}}</td>
    {% else %}
    <td id="red_color"><i class='bx bx-down-arrow-circle' ></i> {{dg.type}}</td>
    {% endif %}
    <td id="qt_t">{{dg.motif}}</td>
    <td id="qt_t">{{dg.date}}</td>
    <td id="qt_t">{{dg.montant | floatformat:2}} Da</td>

<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%}