OwlCyberSecurity - MANAGER

Edit File: Listing.html

{% load static %}

<html>
<head>
<title>LISTING</title>
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<style>
  body{
      padding: 0px;
      margin: 0px;
      background-color: #D5DDE5;
  }
  
  .nav_sup{
        
      margin: 0px;
      height: 100px;
      min-height: 100px ;
      max-height: 100px ;
      min-width: 100%;
      background-color: #201E43;
      display: flex;
      justify-content: space-between;
  
  
  }
  
  .nav_sup h3{
      color: white;
      font-size: larger;
      font-family: Georgia, 'Times New Roman', Times, serif;
      font-size: 32;
  } 
  
  
  .nav_sup img{
      max-width: 200px;
      max-height: 80px;
      margin-top: 10px;
      margin-left: 5px;
      margin-right: 5px;
  }
  
  
  .categories{
      margin-top: 30px;
      min-height: 50px ;
      max-height: 50px ;
      min-width: 100%;
      background-color: #201e43e0;
      
  
  }

.categories_aj{

margin-top: 30px;
      min-height: 50px ;
      max-height: 50px ;
      min-width: 100%;
      background-color: transparent;
      
  
  }

.categories_aj button{
      background-color: #21B5E9;
      padding: 15px 30px;
      
  
  }
  
  
  .horizontal-menu {
      display: flex;
      justify-content: space-between;
      list-style-type: none; /* Remove default list style */
      padding: 0;
      margin: 0;
  }
  
  
  .horizontal-menu li {
      margin-right: 20px; /* Space between items */
  }
  
  
  .horizontal-menu li:last-child {
      margin-right: 0; /* Remove space after the last item */
  }
  .horizontal-menu a {
      font-size: 22;
      text-decoration: none;
      color: white;
      padding: 10px 15px;
      display: block; /* Ensures the clickable area includes padding */
  }
  .horizontal-menu a:hover {
      background-color: #f0f0f0; /* Change background on hover */
  }
  
  
  
  .h_cat{
      font-size: 36;
      color: #21B5E9;
      font-weight: bold;
      margin-left: 10px;
  }
  
  .cat_with_plus{
    display: flex;
    
  }
  .cat_with_plus button{
    background-color: transparent;
    border: 0px solid;
    font-size: 28;
    color: white ;
  }
  
  
  
  
  .content .model {
  
      display: flex;
      margin: 50px;
  }
  .content .model .image {
      min-height: 400px;
      width: 20%;
      border: 1px solid black;
      align-content: center;
      
  }
  
  .content .model .table {
      min-height: 400px;
      width: 80%;
   /* Just for visualization */
  }
  
  
  .over{
      overflow-y: auto;
  }
  
  
  #btn_r{
      color: red;
      background-color: transparent;
      border: 0px;
      font-size: 26;
  }
  
  
  #btn_b{
      color: blue;
      background-color: transparent;
      border: 0px;
      font-size: 26;
  }
  
  
  
  
  
  
  
  
  
  .pruduct_title{
  
      background:#1b1e24;
      color: white;
      font-size: 28;
      margin-bottom: 10px;
      padding: 8px;
      font-weight: bold;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }
  
  
  
  
  
  
  
  
  
  
  .table-fill {
      background: white;
      border-radius:3px;
      border-collapse: collapse;
      height: 320px;
      margin: auto;
      padding:5px;
      width: 100%;
      max-width: 100%;
      overflow-y: auto;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }
     
    th {
      color:#D5DDE5;;
      background:#1b1e24;
      border-bottom:4px solid #9ea7af;
      border-right: 1px solid #343a45;
      font-size:23px;
      font-weight: 100;
      padding:24px;
      text-align:left;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
      vertical-align:middle;
    }
    
    th:first-child {
      border-top-left-radius:3px;
    }
     
    th:last-child {
      border-top-right-radius:3px;
      border-right:none;
    }
      
    tr {
      border-top: 1px solid #C1C3D1;
      border-bottom: 1px solid #C1C3D1;
      color:#666B85;
      font-size:16px;
      font-weight:normal;
      text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
    }
     
    tr:hover td {
      background:#4E5066;
      color:#FFFFFF;
      border-top: 1px solid #22262e;
    }
     
    tr:first-child {
      border-top:none;
    }
    
    tr:last-child {
      border-bottom:none;
    }
     
    tr:nth-child(odd) td {
      background:#EBEBEB;
    }
     
    tr:nth-child(odd):hover td {
      background:#4E5066;
    }
    
    tr:last-child td:first-child {
      border-bottom-left-radius:3px;
    }
     
    tr:last-child td:last-child {
      border-bottom-right-radius:3px;
    }
     
    td {
      background:#FFFFFF;
      padding:5px;
      text-align:left;
      vertical-align:middle;
      font-weight:300;
      font-size:18px;
      text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
      border-right: 1px solid #C1C3D1;
    }
  
    input{
      margin: 0px;
      background:transparent;
      border: 0px;
      font-size: 18;
      max-width: 200px;
    }
    
    td:last-child {
      border-right: 0px;
    }
    
    th.text-left {
      text-align: left;
    }
    
    th.text-center {
      text-align: center;
    }
    
    th.text-right {
      text-align: right;
    }
    
    td.text-left {
      text-align: left;
    }
    
    td.text-center {
      text-align: center;
    }
    
    td.text-right {
      text-align: right;
    }
    
    
    .popup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    
}

/* Popup content */
.popup-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 5px;
    text-align: center;
}

/* Close button */
.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.popup input {
  padding: 20px 30px;
  margin: 10px;
 }

</style>
</head>

<body>

<div id="popup" class="popup">
    <div class="popup-content">
        <span class="close-button">&times;</span>
        <h2>Ajouter une categorie</h2>
        <form method="post">
          {% csrf_token %}
        <label for="nom_cat">Nom de la categorie</label>
        <input type="text" name="nom_cat" id="nom_cat"><br>
        <input type="submit" name="categorie" id="categorie"></form>
    </div>
</div>

<div id="popup2" class="popup">
  <div class="popup-content">
      <span class="close-button" id="close-button">&times;</span>
      <h2>Ajouter un produit</h2>
        <form method="post" enctype="multipart/form-data">
          {% csrf_token %}
        <label for="nom_produit">Nom du produit</label>
        <input type="text" name="nom_produit" id="nom_produit"><br>
        
        <label for="categorie">Categorie</label>
        <select name="categorie" id="categorie">
          {% for ct in categories%}
          <option value="{{ct.id}}">{{ct.nom}}</option>
          {%endfor%}
          </select><br>

<label for="img">Image:</label>
        <input type="file" name="img" id="img" required><br>

<div id="popup3" class="popup">
  <div class="popup-content">
      <span class="close-button" id="close-button2">&times;</span>
      <h2>Ajouter une dimention</h2>
        <form method="post">
          {% csrf_token %}
          
        <label for="categorie">Produit</label>
        <select name="produit" id="produit">
          {% for p in products%}
          <option value="{{p.id}}">{{p.nom}}</option>
          {%endfor%}
          </select><br>

<label for="dimentions">Dimensions</label>
        <input type="text" name="dimentions" id="dimentions"><br>
        
        <label for="unite">Uinité</label>
        <input type="text" name="unite" id="unite"><br>

<label for="distributeur">Distributeur</label>
        <input type="text" name="distributeur" id="distributeur"><br>

<label for="revendeur">Revendeur</label>
        <input type="text" name="revendeur" id="revendeur"><br>

<label for="detail">Detail</label>
        <input type="text" name="detail" id="detail"><br>

<div class="nav_sup">
<img src="{% static 'app2/logo.png' %}" alt="GF">
<h3>Listing des prix 2024</h3>
<img src="{% static 'app2/logo.png' %}" alt="GF">
</div>

<div class="categories">
    <ul class="horizontal-menu">
      {% for c in categories %}
        <li class="nav-item">
          <a class="nav-link" href="#{{c.nom}}" onclick="scrollToSection('{{c.nom}}')">{{c.nom}}</a>
        </li>

{%endfor%}
  
      </ul>
</div>
<div class="categories_aj">
  <button id="popupButton">Ajouter une categorie</button>
  <button id="popupButton2">Ajouter un produit</button>
  <button id="popupButton3">Ajouter une dimension</button>
</div>

{% for c in categories %}
<div class="{{c.nom}}" id="{{c.nom}}">
<div class="cat_with_plus"><h3 class="h_cat">{{c.nom}}</h3></div>

{% for p in products %}
        {% if p.categorie.nom == c.nom %}
<div class="model">

<div class="image">
    <img style="width: 100%;" src="{{ p.img.url }}" alt="">
</div>
<div class="table">
  <div class="pruduct_title">{{p.nom}} </div>
  <div class="over">
    <table class="table-fill">
        
        <thead>
        <tr>
        <th class="text-left">DIMENSIONS</th>
        <th class="text-left">UNITE</th>
        <th class="text-left">DISTRIBUTEUR</th>
        <th class="text-left">REVENDEUR</th>
        <th class="text-left">DETAIL</th>
        <th class="text-left"></th>
        </tr>
        </thead>

<tbody class="table-hover">
        
       {% for d in dimentions %}
       {% if d.produit_cible.id == p.id %}
       <form action={{d.id}}>
        <tr>
        <td class="text-left"><input type="text" value="{{d.dimensions}}" name="dimentions" readonly></td>
        <td class="text-left"><input type="text" value="{{d.unite}}" name="unite" readonly></td>
        <td class="text-left"><input type="text" value="{{d.distributeur | floatformat:2}}" name="distributeur" readonly>DA</td>
        <td class="text-left"><input type="text" value="{{d.revendeur | floatformat:2}}" name="revendeur" readonly>DA</td>
        <td class="text-left"><input type="text" value="{{d.details | floatformat:2}}" name="detail" readonly>DA</td>
        <td class="text-left">
          <button id="btn_r" type="button" onclick="makeEditable(this)"><i class='bx bx-cog'></i>
        </button><button id="btn_b" type="submit"><i class='bx bxs-save' ></i></button></td>
        </tr></form>
        {%endif%}
        {%endfor%}
        </tbody>

</table>
    </div>

</div>

</div>
         {%endif%}
        {% endfor %}
</div>{% endfor %}

</div>

// Show the popup when the button is clicked
  popupButton.addEventListener('click', function() {
      popup.style.display = 'block';
  });

// Hide the popup when the close button is clicked
  closeButton.addEventListener('click', function() {
      popup.style.display = 'none';
  });

// Hide the popup when clicking outside of the popup content
  window.addEventListener('click', function(event) {
      if (event.target == popup) {
          popup.style.display = 'none';
      }
  });
});
</script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var popup = document.getElementById('popup2');
    var popupButton = document.getElementById('popupButton2');
    var closeButton = document.getElementById('close-button');
  
    // Show the popup when the button is clicked
    popupButton.addEventListener('click', function() {
        popup.style.display = 'block';
    });
  
    // Hide the popup when the close button is clicked
    closeButton.addEventListener('click', function() {
        popup.style.display = 'none';
    });
  
    // Hide the popup when clicking outside of the popup content
    window.addEventListener('click', function(event) {
        if (event.target == popup) {
            popup.style.display = 'none';
        }
    });
  });
  </script>

</body>

</html>