Skip to content

Commit

Permalink
Logic in Views and Forms then Integrate Ajax
Browse files Browse the repository at this point in the history
  • Loading branch information
omarreda22 committed Jul 28, 2023
1 parent 5101e88 commit 0e01efd
Show file tree
Hide file tree
Showing 12 changed files with 287 additions and 253 deletions.
32 changes: 32 additions & 0 deletions core/static/scripts/custom.js
Original file line number Diff line number Diff line change
@@ -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,
})
})
160 changes: 117 additions & 43 deletions core/static/tailwindCSS/output.css
Original file line number Diff line number Diff line change
Expand Up @@ -1195,10 +1195,6 @@ input:checked + .toggle-bg {
margin-right: auto;
}

.mt-0 {
margin-top: 0px;
}

.mt-10 {
margin-top: 2.5rem;
}
Expand All @@ -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;
}
Expand Down Expand Up @@ -1303,10 +1311,6 @@ input:checked + .toggle-bg {
height: 2rem;
}

.h-auto {
height: auto;
}

.w-1\/2 {
width: 50%;
}
Expand Down Expand Up @@ -1351,10 +1355,6 @@ input:checked + .toggle-bg {
max-width: 42rem;
}

.max-w-lg {
max-width: 32rem;
}

.max-w-screen-xl {
max-width: 1280px;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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));
Expand All @@ -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 {
Expand All @@ -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));
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -2191,6 +2237,10 @@ input:checked + .toggle-bg {
margin-top: 0px;
}

.md\:block {
display: block;
}

.md\:flex {
display: flex;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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) {
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down
9 changes: 9 additions & 0 deletions qrCodes/forms.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
from django import forms

from .models import QRCode


class QRCodeForm(forms.ModelForm):
class Meta:
model = QRCode
fields = ['url']
18 changes: 18 additions & 0 deletions qrCodes/migrations/0005_alter_qrcode_url.py
Original file line number Diff line number Diff line change
@@ -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),
),
]
Loading

0 comments on commit 0e01efd

Please sign in to comment.