From 0e01efd883a5d7e36ff7063f33e3869f953d7b3f Mon Sep 17 00:00:00 2001 From: Omar Reda Date: Fri, 28 Jul 2023 18:50:19 +0300 Subject: [PATCH] Logic in Views and Forms then Integrate Ajax --- core/static/scripts/custom.js | 32 ++++ core/static/tailwindCSS/output.css | 160 +++++++++++++------ qrCodes/forms.py | 9 ++ qrCodes/migrations/0005_alter_qrcode_url.py | 18 +++ qrCodes/migrations/0006_alter_qrcode_url.py | 18 +++ qrCodes/urls.py | 3 +- qrCodes/views.py | 24 ++- templates/apps/qr-codes/create.html | 82 +++++----- templates/base.html | 29 ++-- templates/base/navbar.html | 161 ++------------------ templates/base/scripts.html | 2 +- templates/home.html | 2 +- 12 files changed, 287 insertions(+), 253 deletions(-) create mode 100644 core/static/scripts/custom.js create mode 100644 qrCodes/forms.py create mode 100644 qrCodes/migrations/0005_alter_qrcode_url.py create mode 100644 qrCodes/migrations/0006_alter_qrcode_url.py diff --git a/core/static/scripts/custom.js b/core/static/scripts/custom.js new file mode 100644 index 0000000..a6d08fe --- /dev/null +++ b/core/static/scripts/custom.js @@ -0,0 +1,32 @@ +const qrForm = document.querySelector("#qr-form") +const qrUrl = document.querySelector("#qr-url") +const formCSRF = document.getElementsByName("csrfmiddlewaretoken") +const qrImage = document.getElementById("qr-image") +const qrDownload = document.getElementById("qr-download") + + +console.log(qrDownload.href) +qrForm.addEventListener("submit", (e)=>{ + e.preventDefault(); + const form = new FormData(); + form.append('csrfmiddlewaretoken', formCSRF[0].value); + form.append('url', qrUrl.value) + + $.ajax({ + type:'POST', + url:'/create_request', + data:form, + success:function(response){ + qrImage.classList.remove('display') + qrDownload.classList.remove('display') + qrImage.src = response.qr + qrDownload.href = response.qr + }, + error:function(error){ + console.log(error) + }, + cache:false, + contentType:false, + processData:false, + }) +}) \ No newline at end of file diff --git a/core/static/tailwindCSS/output.css b/core/static/tailwindCSS/output.css index 13a46a1..8789a43 100644 --- a/core/static/tailwindCSS/output.css +++ b/core/static/tailwindCSS/output.css @@ -1195,10 +1195,6 @@ input:checked + .toggle-bg { margin-right: auto; } -.mt-0 { - margin-top: 0px; -} - .mt-10 { margin-top: 2.5rem; } @@ -1223,6 +1219,18 @@ input:checked + .toggle-bg { margin-top: 2.25rem; } +.ml-10 { + margin-left: 2.5rem; +} + +.ml-5 { + margin-left: 1.25rem; +} + +.mr-6 { + margin-right: 1.5rem; +} + .block { display: block; } @@ -1303,10 +1311,6 @@ input:checked + .toggle-bg { height: 2rem; } -.h-auto { - height: auto; -} - .w-1\/2 { width: 50%; } @@ -1351,10 +1355,6 @@ input:checked + .toggle-bg { max-width: 42rem; } -.max-w-lg { - max-width: 32rem; -} - .max-w-screen-xl { max-width: 1280px; } @@ -1511,6 +1511,10 @@ input:checked + .toggle-bg { border-radius: 0.5rem; } +.rounded-full { + border-radius: 9999px; +} + .rounded-l-lg { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; @@ -1590,7 +1594,7 @@ input:checked + .toggle-bg { .bg-primary-700 { --tw-bg-opacity: 1; - background-color: rgb(226 125 17 / var(--tw-bg-opacity)); + background-color: rgb(226 94 17 / var(--tw-bg-opacity)); } .bg-primary-800 { @@ -1607,10 +1611,29 @@ input:checked + .toggle-bg { background-color: rgb(255 255 255 / 0.5); } +.bg-yellow-400 { + --tw-bg-opacity: 1; + background-color: rgb(227 160 8 / var(--tw-bg-opacity)); +} + .bg-opacity-50 { --tw-bg-opacity: 0.5; } +.bg-gradient-to-r { + background-image: linear-gradient(to right, var(--tw-gradient-stops)); +} + +.from-purple-500 { + --tw-gradient-from: #9061F9 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(144 97 249 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.to-pink-500 { + --tw-gradient-to: #E74694 var(--tw-gradient-to-position); +} + .p-1 { padding: 0.25rem; } @@ -1707,6 +1730,11 @@ input:checked + .toggle-bg { line-height: 1.25rem; } +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} + .font-extrabold { font-weight: 800; } @@ -1786,24 +1814,14 @@ input:checked + .toggle-bg { color: rgb(255 96 0 / var(--tw-text-opacity)); } -.text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.text-primary-700 { - --tw-text-opacity: 1; - color: rgb(226 125 17 / var(--tw-text-opacity)); -} - -.text-primary-950 { +.text-primary-900 { --tw-text-opacity: 1; - color: rgb(126 49 2 / var(--tw-text-opacity)); + color: rgb(196 77 3 / var(--tw-text-opacity)); } -.text-primary-900 { +.text-white { --tw-text-opacity: 1; - color: rgb(196 77 3 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)); } .opacity-0 { @@ -1903,6 +1921,11 @@ input:checked + .toggle-bg { background-color: rgb(249 250 251 / var(--tw-bg-opacity)); } +.hover\:bg-primary-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(226 94 17 / var(--tw-bg-opacity)); +} + .hover\:bg-primary-800:hover { --tw-bg-opacity: 1; background-color: rgb(255 96 0 / var(--tw-bg-opacity)); @@ -1913,14 +1936,13 @@ input:checked + .toggle-bg { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.hover\:bg-primary-900:hover { +.hover\:bg-yellow-500:hover { --tw-bg-opacity: 1; - background-color: rgb(196 77 3 / var(--tw-bg-opacity)); + background-color: rgb(194 120 3 / var(--tw-bg-opacity)); } -.hover\:bg-primary-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(226 125 17 / var(--tw-bg-opacity)); +.hover\:bg-gradient-to-l:hover { + background-image: linear-gradient(to left, var(--tw-gradient-stops)); } .hover\:text-blue-600:hover { @@ -1943,6 +1965,10 @@ input:checked + .toggle-bg { color: rgb(235 130 39 / var(--tw-text-opacity)); } +.hover\:underline:hover { + text-decoration-line: underline; +} + .focus\:border-blue-500:focus { --tw-border-opacity: 1; border-color: rgb(63 131 248 / var(--tw-border-opacity)); @@ -1990,6 +2016,16 @@ input:checked + .toggle-bg { --tw-ring-color: rgb(245 171 106 / var(--tw-ring-opacity)); } +.focus\:ring-purple-200:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(220 215 254 / var(--tw-ring-opacity)); +} + +.focus\:ring-yellow-300:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(250 202 21 / var(--tw-ring-opacity)); +} + .group:hover .group-hover\:text-primary-600 { --tw-text-opacity: 1; color: rgb(235 130 39 / var(--tw-text-opacity)); @@ -2109,7 +2145,7 @@ input:checked + .toggle-bg { :is(.dark .dark\:hover\:bg-primary-700:hover) { --tw-bg-opacity: 1; - background-color: rgb(226 125 17 / var(--tw-bg-opacity)); + background-color: rgb(226 94 17 / var(--tw-bg-opacity)); } :is(.dark .dark\:hover\:text-blue-500:hover) { @@ -2162,6 +2198,16 @@ input:checked + .toggle-bg { --tw-ring-color: rgb(196 77 3 / var(--tw-ring-opacity)); } +:is(.dark .dark\:focus\:ring-purple-800:focus) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(85 33 181 / var(--tw-ring-opacity)); +} + +:is(.dark .dark\:focus\:ring-yellow-900:focus) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(99 49 18 / var(--tw-ring-opacity)); +} + :is(.dark .group:hover .dark\:group-hover\:text-primary-500) { --tw-text-opacity: 1; color: rgb(248 142 50 / var(--tw-text-opacity)); @@ -2191,6 +2237,10 @@ input:checked + .toggle-bg { margin-top: 0px; } + .md\:block { + display: block; + } + .md\:flex { display: flex; } @@ -2221,6 +2271,15 @@ input:checked + .toggle-bg { border-width: 0px; } + .md\:bg-transparent { + background-color: transparent; + } + + .md\:bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + } + .md\:p-0 { padding: 0px; } @@ -2259,6 +2318,11 @@ input:checked + .toggle-bg { line-height: 1.75rem; } + .md\:text-blue-700 { + --tw-text-opacity: 1; + color: rgb(26 86 219 / var(--tw-text-opacity)); + } + .md\:hover\:bg-transparent:hover { background-color: transparent; } @@ -2268,6 +2332,21 @@ input:checked + .toggle-bg { color: rgb(235 130 39 / var(--tw-text-opacity)); } + .md\:hover\:text-blue-700:hover { + --tw-text-opacity: 1; + color: rgb(26 86 219 / var(--tw-text-opacity)); + } + + :is(.dark .md\:dark\:bg-gray-900) { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity)); + } + + :is(.dark .md\:dark\:text-blue-500) { + --tw-text-opacity: 1; + color: rgb(63 131 248 / var(--tw-text-opacity)); + } + :is(.dark .md\:dark\:hover\:bg-transparent:hover) { background-color: transparent; } @@ -2276,6 +2355,11 @@ input:checked + .toggle-bg { --tw-text-opacity: 1; color: rgb(248 142 50 / var(--tw-text-opacity)); } + + :is(.dark .md\:dark\:hover\:text-blue-500:hover) { + --tw-text-opacity: 1; + color: rgb(63 131 248 / var(--tw-text-opacity)); + } } @media (min-width: 1024px) { @@ -2322,11 +2406,6 @@ input:checked + .toggle-bg { line-height: 2.25rem; } - .lg\:text-6xl { - font-size: 3.75rem; - line-height: 1; - } - .lg\:text-xl { font-size: 1.25rem; line-height: 1.75rem; @@ -2338,11 +2417,6 @@ input:checked + .toggle-bg { gap: 0px; } - .xl\:px-48 { - padding-left: 12rem; - padding-right: 12rem; - } - .xl\:px-72 { padding-left: 18rem; padding-right: 18rem; diff --git a/qrCodes/forms.py b/qrCodes/forms.py new file mode 100644 index 0000000..3c59279 --- /dev/null +++ b/qrCodes/forms.py @@ -0,0 +1,9 @@ +from django import forms + +from .models import QRCode + + +class QRCodeForm(forms.ModelForm): + class Meta: + model = QRCode + fields = ['url'] \ No newline at end of file diff --git a/qrCodes/migrations/0005_alter_qrcode_url.py b/qrCodes/migrations/0005_alter_qrcode_url.py new file mode 100644 index 0000000..fa564d6 --- /dev/null +++ b/qrCodes/migrations/0005_alter_qrcode_url.py @@ -0,0 +1,18 @@ +# Generated by Django 4.2.3 on 2023-07-28 12:15 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('qrCodes', '0004_alter_qrcode_url'), + ] + + operations = [ + migrations.AlterField( + model_name='qrcode', + name='url', + field=models.CharField(max_length=250), + ), + ] diff --git a/qrCodes/migrations/0006_alter_qrcode_url.py b/qrCodes/migrations/0006_alter_qrcode_url.py new file mode 100644 index 0000000..30a0ffb --- /dev/null +++ b/qrCodes/migrations/0006_alter_qrcode_url.py @@ -0,0 +1,18 @@ +# Generated by Django 4.2.3 on 2023-07-28 12:23 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('qrCodes', '0005_alter_qrcode_url'), + ] + + operations = [ + migrations.AlterField( + model_name='qrcode', + name='url', + field=models.URLField(max_length=250), + ), + ] diff --git a/qrCodes/urls.py b/qrCodes/urls.py index e93c062..5d82921 100644 --- a/qrCodes/urls.py +++ b/qrCodes/urls.py @@ -7,5 +7,6 @@ urlpatterns = [ path('', views.qr_home, name='home'), - path('create/', views.qr_create, name='create') + path('create/', views.qr_create_page, name='create'), + path('create_request', views.qr_create_request, name='qr_create_request') ] diff --git a/qrCodes/views.py b/qrCodes/views.py index 4ebca36..d9de751 100644 --- a/qrCodes/views.py +++ b/qrCodes/views.py @@ -1,11 +1,29 @@ -from django.shortcuts import render +from django.shortcuts import render, redirect +from django.http import JsonResponse +from .models import QRCode +from .forms import QRCodeForm + + +def is_ajax(request): + return request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest' def qr_home(request): context = {} return render(request, 'home.html', context) -def qr_create(request): +def qr_create_page(request): context = {} - return render(request, "apps/qr-codes/create.html", context) \ No newline at end of file + return render(request, "apps/qr-codes/create.html", context) + + +def qr_create_request(request): + # print(request.POST.get('url')) + form = QRCodeForm(request.POST or None) + if is_ajax(request=request): + if form.is_valid: + new_qr = form.save(commit=False) + new_qr.save() + return JsonResponse({'qr':new_qr.qr_code.url}) + return redirect('qr-codes:create') \ No newline at end of file diff --git a/templates/apps/qr-codes/create.html b/templates/apps/qr-codes/create.html index 101039c..6d119b8 100644 --- a/templates/apps/qr-codes/create.html +++ b/templates/apps/qr-codes/create.html @@ -1,42 +1,50 @@ -{% extends '../../base.html' %} -{% load static %} -{% block title %}QR Code Generator | Create{% endblock title %} +{% extends '../../base.html' %} {% load static %} {% block title %}QR Code +Generator | Create{% endblock title %} {% block content %} -{% comment %}
-
- -

Create Your QR Code with Us Free.

-
-
- - - +
+
+
+
+

+ Create Your QR Code with Us Free. +

+ + {% csrf_token %} + + + + Download +
-
- image description -
-
{% endcomment %} - -
-
-
-
-
-

Create Your QR Code with Us Free.

- - - -
-
-
-
- mockup -
+
+ QRImage +
+
-{% endblock content %} \ No newline at end of file +{% endblock content %} +{% block scripts %} + + +{% endblock %} diff --git a/templates/base.html b/templates/base.html index babceba..9bbbc0d 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,22 +1,19 @@ {% load static %} - - - - + + + + {% block title %}QR Code Generator{% endblock title %} - - + + {% include "base/style.html" %} - - + + {% include 'base/navbar.html' %} -
- {% block content %} - - {% endblock content %} -
- {% include 'base/scripts.html' %} - - \ No newline at end of file +
{% block content %} {% endblock content %}
+ {% include 'base/scripts.html' %} + {% block scripts %}{% endblock %} + + diff --git a/templates/base/navbar.html b/templates/base/navbar.html index 6a6e52a..0879952 100644 --- a/templates/base/navbar.html +++ b/templates/base/navbar.html @@ -1,153 +1,12 @@ +
+ + QRCode + +
+ New One + +
+
+ \ No newline at end of file diff --git a/templates/base/scripts.html b/templates/base/scripts.html index 2e1bffe..bcde29c 100644 --- a/templates/base/scripts.html +++ b/templates/base/scripts.html @@ -1 +1 @@ - \ No newline at end of file + diff --git a/templates/home.html b/templates/home.html index f0a9a46..5e23d05 100644 --- a/templates/home.html +++ b/templates/home.html @@ -14,7 +14,7 @@

+
mockup