Brwnds · dudaa28 · Sep 14, 2024 · Sep 12, 2024 · Sep 12, 2024 · Sep 13, 2024
diff --git a/app/app/settings.py b/app/app/settings.py
@@ -133,6 +133,6 @@
 # settings.py
 LOGIN_URL = '/login/'
 LOGIN_REDIRECT_URL = '/home/'  # Redireciona para a home após login
-LOGOUT_REDIRECT_URL = '/login/'  # Redireciona para a página de login após logout
+LOGOUT_REDIRECT_URL = '/'  # Redireciona para a página de login após logout
 
 
diff --git a/app/app/urls.py b/app/app/urls.py
@@ -17,6 +17,7 @@
 from django.contrib import admin
 from django.urls import path
 from loja import views
+from django.contrib.auth import views as auth_views
 
 urlpatterns = [
     path('admin/', admin.site.urls),
@@ -28,4 +29,7 @@
     path('adm/', views.admin, name='adm'),
     path('adicionar_ao_carrinho/', views.adicionar_ao_carrinho, name='adicionar_ao_carrinho'),
     path('listar_carrinho/', views.listar_carrinho, name='listar_carrinho'),
+    path('obter_carrinho/', views.obter_carrinho, name='obter_carrinho'),
+    path('finalizar_compra/', views.finalizar_compra, name='finalizar_compra'),
+    path('logout/', views.logout, name='logout'),
 ]
diff --git a/app/loja/templates/base.html b/app/loja/templates/base.html
@@ -11,8 +11,7 @@
     <script src="https://cdn.lordicon.com/bhenfmcm.js"></script>
     {% block extra_css %}{% endblock %}
 </head>
-<body>
-        <!-- Sticky header -->
+<body>   <!-- Sticky header -->
 <header class="header-outer">
     <div class="header-inner responsive-wrapper">
         <div class="header-logo">
@@ -21,7 +20,7 @@
         <nav class="header-navigation">
             <a href="{% url 'home' %}">Home</a>
             <a href="{% url 'catalogo' %}">Catálogo</a>
-            <a href="{% url 'adm' %}" style="text-decoration: none;">
+            <a id="user-icon" style="text-decoration: none; cursor: pointer;">
                 <lord-icon
                     src="https://cdn.lordicon.com/bhfjfgqz.json"
                     trigger="hover"
@@ -30,6 +29,11 @@
                     style="width:40px;height:40px">
                 </lord-icon>
             </a>
+            <div id="user-popup" class="popup hidden" data-is-superuser="{{ user.is_superuser }}">
+                <p>Olá, {{ user.first_name }}</p>
+                <a id="edit-profile-link" href="#">Perfil</a><br>
+                <a href="{% url 'logout' %}">Logout</a>
+            </div>
             <a href="{% url 'basket' %}">
                 <lord-icon
                     src="https://cdn.lordicon.com/odavpkmb.json"
@@ -42,12 +46,12 @@
         </nav>
     </div>
 </header>
-
     <main>
         {% block content %}
         <!-- O conteúdo específico de cada página será inserido aqui -->
         {% endblock %}
     </main>
+    <script src="{% static 'js/base.js' %}"></script>
     {% block extra_js %}{% endblock %}
 </body>
 </html>
diff --git a/app/loja/templates/catalogo.html b/app/loja/templates/catalogo.html
@@ -16,6 +16,9 @@ <h1>Bem-vindo ao Catálogo de Bolos</h1>
    </div>
 </header>
 
+<!-- Token CSRF -->
+<meta name="csrf-token" content="{{ csrf_token }}">
+
 <!-- Layout do Catálogo -->
 <div class="container">
 
@@ -45,26 +48,23 @@ <h3>Tamanhos:</h3>
         </ul>
     </div>
 </aside>
-
-    {% csrf_token %}
-
    <!-- Conteúdo do Catálogo -->
-<div id="catalogo">
+   <div id="catalogo">
     <section class="categoria">
         <div class="card-container">
             <div class="card-row">
                 {% for bolo in bolos %}
                 <div class="card">
                     <img src="{{ bolo.imagem_url }}" alt="{{ bolo.sabor }}">
                     <h3>{{ bolo.sabor }}</h3>
-                    <p class="preco">Pequeno: R$ {{ bolo.preco_pequeno }}</p>
+                    <p class="preco"> R$ <span class="preco-dinamico">{{ bolo.preco_pequeno }}</span></p>
                     <p class="tamanho">Tamanhos:</p>
                     <select class="tamanho-select">
-                        <option value="p" data-preco="{{ bolo.preco_pequeno }}">P - R$ {{ bolo.preco_pequeno }}</option>
-                        <option value="m" data-preco="{{ bolo.preco_medio }}">M - R$ {{ bolo.preco_medio }}</option>
-                        <option value="g" data-preco="{{ bolo.preco_grande }}">G - R$ {{ bolo.preco_grande }}</option>
+                        <option value="P" data-preco="{{ bolo.preco_pequeno }}">Pequeno - R$ {{ bolo.preco_pequeno }}</option>
+                        <option value="M" data-preco="{{ bolo.preco_medio }}">Médio - R$ {{ bolo.preco_medio }}</option>
+                        <option value="G" data-preco="{{ bolo.preco_grande }}">Grande - R$ {{ bolo.preco_grande }}</option>
                     </select>
-                    <button class="botao-comprar" data-product-id="{{ bolo.id }}" data-product="{{ bolo.sabor }}">Comprar</button>
+                    <button class="botao-comprar" data-product-id="{{ bolo.id }}" data-product="{{ bolo.sabor }}">Comprar</button>                    
                 </div>
                 {% endfor %}
             </div>
@@ -84,4 +84,4 @@ <h2>Carrinho de Compras</h2>
 
 {% block extra_js %}
     <script src="{% static 'js/catalogo.js' %}"></script>
-{% endblock %}
+{% endblock %}
diff --git a/app/loja/views.py b/app/loja/views.py
@@ -1,7 +1,7 @@
 from django.shortcuts import render, redirect, get_object_or_404
 from django.contrib.auth.models import User
 from django.contrib import messages
-from django.contrib.auth import authenticate, login as auth_login
+from django.contrib.auth import authenticate, logout as logout_view, login as auth_login
 from django.contrib.auth.decorators import login_required
 from django.http import JsonResponse
 from django.views.decorators.http import require_POST
@@ -27,6 +27,12 @@ def login(request):
 
     return render(request, 'login.html')
 
+def logout(request):
+    logout_view(request)
+    return redirect('login')
+
+
+
 def cadastro(request):
     if request.method == "POST":
         username = request.POST['username']
@@ -61,20 +67,34 @@ def admin(request):
 @require_POST
 def adicionar_ao_carrinho(request):
     data = json.loads(request.body)
-    bolo_nome = data['bolo_nome']
-    tamanho = data['tamanho']
-    
-    # Encontra o bolo pelo nome
-    bolo = get_object_or_404(Bolo, sabor=bolo_nome)
-    
+    bolo_id = data['bolo_id']  # Agora recebemos o id do bolo
+    tamanho = data['tamanho'].upper()  # Converte o tamanho para maiúsculas
+
+    # Encontra o bolo pelo ID
+    bolo = get_object_or_404(Bolo, id=bolo_id)
+
     # Obtém o perfil do usuário
     profile = Profile.objects.get(user=request.user)
-    
+
     # Adiciona o bolo ao carrinho
     profile.adicionar_bolo_ao_carrinho(bolo, tamanho)
 
     return JsonResponse({'success': True})
 
+@login_required
+def obter_carrinho(request):
+    profile = Profile.objects.get(user=request.user)
+    carrinho = profile.listar_carrinho()
+    total = profile.obter_valor_total()
+    return JsonResponse({'carrinho': carrinho, 'total': str(total)})
+
 def listar_carrinho(request):
     profile = Profile.objects.get(user=request.user)
     return JsonResponse({'carrinho': profile.listar_carrinho()})
+
+@login_required
+def finalizar_compra(request):
+    profile = request.user.profile  # Obtém o perfil do usuário logado
+    profile.limpar_carrinho()       # Limpa o carrinho
+    return JsonResponse({'success': True})
+
diff --git a/app/static/css/base.css b/app/static/css/base.css
@@ -71,6 +71,7 @@ header {
 .header-navigation {
 	display: flex;
 	flex-wrap: wrap;
+	position: relative;
 }
 
 .header-navigation a,
@@ -122,4 +123,59 @@ header {
 	.header-navigation button {
 		display: none;
 	}
-}
+}
+
+/* Popup para o menu de usuário */
+.popup {
+    position: absolute; /* Garante que o popup seja posicionado relativamente ao seu contêiner pai */
+    top: 100%; /* Posiciona o popup logo abaixo do ícone de usuário */
+    left: 0; /* Alinha o popup ao lado esquerdo do ícone de usuário */
+    background-color: white; /* Adiciona um fundo branco ao popup */
+    border: 1px solid #ccc; /* Adiciona uma borda ao popup */
+    padding: 10px; /* Adiciona algum espaçamento interno */
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Adiciona uma sombra para maior destaque */
+    z-index: 1000; /* Garante que o popup esteja sobre outros elementos */
+    display: none;
+}
+
+.popup a {
+    text-decoration: none;
+    color: #121331;
+    font-weight: 500;
+}
+
+.popup a:hover {
+    text-decoration: underline;
+}
+
+/* Classe que oculta o popup */
+.popup.hidden {
+    display: none;
+}
+
+.popup:not(.hidden) {
+    display: block;
+}
+
+/* Centraliza o ícone com o popup */
+#user-icon {
+    position: relative;
+}
+
+#user-icon:hover + .popup {
+    display: none;
+}
+
+/* Centralizar o popup em relação ao ícone de usuário */
+#user-popup {
+	position: absolute; /* Posiciona o popup em relação ao ícone */
+    top: 100%; /* Coloca o popup imediatamente abaixo do ícone */
+    left: 0; /* Alinha o popup à esquerda do ícone */
+    margin-top: 5px; /* Espaçamento entre o ícone e o popup */
+    display: none; /* Inicialmente escondido */
+    background-color: white; /* Cor de fundo do popup */
+    border: 1px solid #ccc; /* Borda do popup */
+    padding: 10px; /* Espaçamento interno do popup */
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Sombra para dar destaque */
+    z-index: 1000; /* Garante que o popup esteja acima de outros elementos */
+}
diff --git a/app/static/js/base.js b/app/static/js/base.js
@@ -0,0 +1,31 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const userIcon = document.getElementById('user-icon');
+    const userPopup = document.getElementById('user-popup');
+    const editProfileLink = document.getElementById('edit-profile-link');
+
+    // Função para abrir/fechar o popup ao clicar no ícone de usuário
+    userIcon.addEventListener('click', function (event) {
+        userPopup.style.display = userPopup.style.display === 'block' ? 'none' : 'block';
+    });
+
+    // Fechar o popup se o usuário clicar fora dele
+    document.addEventListener('click', function (event) {
+        if (!userPopup.contains(event.target) && !userIcon.contains(event.target)) {
+            userPopup.style.display = "none";
+        }
+    });
+
+    // Redirecionamento ao clicar em "Editar Perfil"
+    if (editProfileLink) {
+        const isSuperuser = userPopup.getAttribute('data-is-superuser') === 'True';  // Verifica se é superusuário
+
+        editProfileLink.addEventListener('click', function (event) {
+            event.preventDefault();  // Previne o comportamento padrão do link
+            if (isSuperuser) {
+                window.location.href = "/admin";  // Redireciona para a página de admin se for superusuário
+            } else {
+                window.location.href = "/adm";    // Redireciona para a página de perfil comum se for usuário comum
+            }
+        });
+    }
+});