mirror of
https://github.com/welton89/RRBEC.git
synced 2026-04-05 13:35:42 +00:00
136 lines
5.6 KiB
HTML
136 lines
5.6 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 class="btn-primary"
|
|
onclick="openModal()" id="openModal">Novo Produto</button>
|
|
<input onclick="listerSortTeable()" type="text" id="search-product" name="search-product" placeholder="Buscar Produto" hx-get="{% url 'searchProduct' %}" hx-trigger="keyup" hx-target="#product-list">
|
|
<a href="https://raulrockbar.blogspot.com/p/cardapio.html" target="_blank">Cardápio Digital</a>
|
|
</div>
|
|
|
|
<table id="product-list">
|
|
<thead> <tr>
|
|
<th style="text-align: left;" data-col-type="text">Produto</th>
|
|
<th style="text-align: left;width: 20%;" data-col-type="number">Preço</th>
|
|
<th class="hide-on-mobile" style="text-align: left;" data-col-type="number">Quantidade</th>
|
|
<th class="hide-on-mobile" style="text-align: left;" data-col-type="text">Categoria</th>
|
|
<th style="text-align: left;width: 20%;">Ações</th> </tr>
|
|
</thead>
|
|
<tbody> {% for product in products %}
|
|
<tr>
|
|
<td id="name-{{product.id}}" >{{product.name}}</td>
|
|
<td id="price-{{product.id}}" >R$ {{product.price}}</td>
|
|
|
|
{% if product.quantity > 20 %}
|
|
<td class="hide-on-mobile" id="quantity-{{product.id}}" >{{product.quantity}}</td>
|
|
{% else %}
|
|
<td class="hide-on-mobile" id="quantity-{{product.id}}" style="background-color: brown;" >{{product.quantity}}</td>
|
|
{% endif %}
|
|
<td hidden class="hide-on-mobile" id="image-{{product.id}}" >{{product.image}}</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;border: 0px;">
|
|
<span data-tooltip="Ativar ou Desativar Produto" data-flow="top">
|
|
<img
|
|
src="{% static 'midia/icons/toggle-on.svg' %}"
|
|
style="width: 35px; height: 35px; cursor: pointer;"
|
|
>
|
|
</img>
|
|
</span>
|
|
</button>
|
|
{% else %}
|
|
<button style="background-color: rgba(0, 128, 0, 0); padding: 0px;border: 0px;" >
|
|
<span data-tooltip="Ativar ou Desativar Produto" data-flow="top">
|
|
<img
|
|
src="{% static 'midia/icons/toggle-off.svg' %}"
|
|
style="width: 35px; height: 35px; cursor: pointer;"
|
|
>
|
|
</img>
|
|
<span>
|
|
</button>
|
|
{% endif %}
|
|
</form>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</body>
|
|
|
|
<dialog id='Modal-create-product' >
|
|
<article id="modal-product" class="modal-product">
|
|
<form style="z-index: 1000; position: relative;" action="{% url 'create_product' %}" id="productForm" method="post" >
|
|
|
|
{% csrf_token %}
|
|
<h2>Cadastro de Produto</h2>
|
|
<!-- <div style="height: 200px;border-radius: 15px;">
|
|
<img id="image-product" src="" alt="">
|
|
</div> -->
|
|
<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">
|
|
<input type="text" id="url-image" name="image" required placeholder="URL da imagem">
|
|
|
|
<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>
|
|
<div style="display: flex;gap: 10px;">
|
|
|
|
|
|
<button class="btn-primary" id="save" type="submit">Salvar</button>
|
|
<button class="btn-primary" type="submit" onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editProduct' 1 %}" hx-trigger="click" hx-target="#product-list" >Alterar</button>
|
|
<button class="btn-cancel" type="button" onclick="closeModal()">Cancelar</button>
|
|
</div>
|
|
</footer>
|
|
</form>
|
|
|
|
</article>
|
|
</dialog>
|
|
|
|
|
|
<script src="{% static 'products/js/products.js' %}"></script>
|
|
|
|
{% endblock %} |