Files
RRBEC/gestaoRaul/products/templates/products.html
2025-01-13 15:15:42 -03:00

124 lines
4.4 KiB
HTML

{% extends "base.html" %}
{% load static %}
{% block 'head' %}
<link rel="stylesheet" href="{% static 'products/css/products.css' %}">
{% endblock %}
{% block 'title' %}
Produtos
{% endblock %}
{% block 'body' %}
<body>
<div class="grid-container">
<div class="grid-top">
<button style="
width: 30%;
margin: 5px 10px 20px 10px;"
onclick="openModal()" id="openModal">Novo Produto</button>
<input type="text" id="search-product" name="search-product" placeholder="Buscar Produto" hx-get="{% url 'searchProduct' %}" hx-trigger="keyup" hx-target="#product-list">
</div>
<table id="product-list">
<tr>
<th style="text-align: left;">Produto</th>
<th style="text-align: left;width: 20%;">Preço</th>
<th class="hide-on-mobile" style="text-align: left;">Quantidade</th>
<th class="hide-on-mobile" style="text-align: left;">Categoria</th>
<th style="text-align: left;width: 20%;">Ações</th>
</tr>
{% for product in products %}
<tr>
<td id="name-{{product.id}}" >{{product.name}}</td>
<td id="price-{{product.id}}" >R$ {{product.price}}</td>
<td class="hide-on-mobile" id="quantity-{{product.id}}" >{{product.quantity}}</td>
<td class="hide-on-mobile" id="category-{{product.id}}" >{{product.category.name}}</td>
<td>
<div class="grid-buttons">
<img
src="{% static 'midia/icons/edit.svg' %}"
style=" width: 35px; height: 35px; cursor: pointer;"
onclick="editProduct({{product.id}})" >
</img>
<input type="hidden" id="h-category-{{product.id}}" value="{{ product.category.id }}">
<input type="hidden" id="description-{{product.id}}" value="{{ product.description }}">
<input type="hidden" id="cuisine-{{product.id}}" value="{{ product.cuisine }}">
<form hx-post="{% url 'onOffproduct' %}" hx-trigger="click" hx-target="#product-list">
{% csrf_token %}
<input type="hidden" name="id-product" id="id-{{product.id}}" value="{{ product.id }}">
{% if product.active == True %}
<button style="background-color: rgba(255, 0, 0, 0); padding: 0px;">
<img
src="{% static 'midia/icons/toggle-on.svg' %}"
style=" width: 35px; height: 35px; cursor: pointer;"
>
</img>
</button>
{% else %}
<button style="background-color: rgba(0, 128, 0, 0); padding: 0px;" >
<img
src="{% static 'midia/icons/toggle-off.svg' %}"
style=" width: 35px; height: 35px; cursor: pointer;"
>
</img>
</button>
{% endif %}
</form>
</div>
</td>
</tr>
{% endfor %}
</table>
</div>
</body>
<dialog id='Modal-create-product' >
<article >
<form action="{% url 'create_product' %}" id="productForm" method="post" >
{% csrf_token %}
<h2>Cadastro de Produto</h2>
<input type="text" id="productId" name="productId" hidden >
<input type="text" id="productName" name="name" required placeholder="Nome">
<input type="number" step="0.01" id="productPrice" name="price" required placeholder="Preço">
<input type="number" step="1" id="productqtd" name="qtd" placeholder="Quantidade">
<div>
<input type="checkbox" id="cuisine" name="cuisine" placeholder="Cozinha">Cozinha
</div>
<select id="select-categorie" name="select-categorie" >
{% for categorie in categories %}
<option value="{{categorie.id}}">{{categorie.name}}</option>
{% endfor %}
</select>
<textarea id="productDescription" name="description" rows="4" placeholder="Descrição"></textarea>
<footer class="grid-buttons">
<button id="save" type="submit">Salvar</button>
<button onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editProduct' 1 %}" hx-trigger="click" hx-target="#product-list" >Alterar</button>
<button type="button" onclick="closeModal()" style="background-color:red;">Fechar</button>
</footer>
</form>
</article>
</dialog>
<script src="{% static 'products/js/products.js' %}"></script>
{% endblock %}