added colors themes for questions

accounts/admin.py

@@ -1,4 +1,3 @@
-from typing import Any, Dict, List, Optional, Tuple
 from django.contrib import admin
 from django.http.request import HttpRequest
 from .models import User

accounts/migrations/0001_initial.py

@@ -1,6 +1,7 @@
-# Generated by Django 4.2.3 on 2023-07-25 02:23
+# Generated by Django 4.2.4 on 2023-08-07 18:11
 
 from django.db import migrations, models
+import django.utils.timezone
 
 
 class Migration(migrations.Migration):
@@ -19,9 +20,10 @@ class Migration(migrations.Migration):
                 ('last_login', models.DateTimeField(blank=True, null=True, verbose_name='last login')),
                 ('email', models.EmailField(max_length=255, primary_key=True, serialize=False, unique=True, verbose_name='Email Address')),
                 ('username', models.CharField(max_length=150, verbose_name='Name')),
+                ('joining_date', models.DateTimeField(default=django.utils.timezone.now, verbose_name='Joining Date')),
                 ('is_staff', models.BooleanField(default=False)),
                 ('is_superuser', models.BooleanField(default=False)),
-                ('is_active', models.BooleanField(default=False)),
+                ('is_active', models.BooleanField(default=True)),
                 ('groups', models.ManyToManyField(blank=True, help_text='The groups this user belongs to. A user will get all permissions granted to each of their groups.', related_name='user_set', related_query_name='user', to='auth.group', verbose_name='groups')),
                 ('user_permissions', models.ManyToManyField(blank=True, help_text='Specific permissions for this user.', related_name='user_set', related_query_name='user', to='auth.permission', verbose_name='user permissions')),
             ],

accounts/migrations/0002_alter_user_is_active.py

@@ -1,18 +0,0 @@
-# Generated by Django 4.2.3 on 2023-07-25 16:10
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('accounts', '0001_initial'),
-    ]
-
-    operations = [
-        migrations.AlterField(
-            model_name='user',
-            name='is_active',
-            field=models.BooleanField(default=True),
-        ),
-    ]

accounts/migrations/0003_user_joining_date.py

@@ -1,19 +0,0 @@
-# Generated by Django 4.2.3 on 2023-07-27 01:18
-
-from django.db import migrations, models
-import django.utils.timezone
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('accounts', '0002_alter_user_is_active'),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name='user',
-            name='joining_date',
-            field=models.DateTimeField(default=django.utils.timezone.now, verbose_name='Joining Date'),
-        ),
-    ]

data.json

@@ -0,0 +1,69 @@
+[
+    {
+        "model": "accounts.user",
+        "pk": "panthrianuj@gmail.com",
+        "fields": {
+            "password": "pbkdf2_sha256$600000$Yw9EwWF4CHNA3mjGejYHi1$6EDbuZDZdZnzuBJfn7reD15pmn008ybao3c3osr7x6g=",
+            "last_login": "2023-08-06T15:43:13.536Z",
+            "username": "Anuj",
+            "joining_date": "2023-08-02T17:10:02.894Z",
+            "is_staff": true,
+            "is_superuser": true,
+            "is_active": true,
+            "groups": [],
+            "user_permissions": []
+        }
+    },
+    {
+        "model": "polls.question",
+        "pk": 2,
+        "fields": {
+            "author": "panthrianuj@gmail.com",
+            "question_text": "Best Laptop",
+            "pub_date": "2023-08-06T14:45:39.901Z",
+            "theme_color": null
+        }
+    },
+    {
+        "model": "polls.question",
+        "pk": 3,
+        "fields": {
+            "author": "panthrianuj@gmail.com",
+            "question_text": "new poll",
+            "pub_date": "2023-08-07T17:33:47.846Z",
+            "theme_color": null
+        }
+    },
+    {
+        "model": "polls.choice",
+        "pk": 3,
+        "fields": {
+            "question": 2,
+            "choice_text": "Lenovo"
+        }
+    },
+    {
+        "model": "polls.choice",
+        "pk": 4,
+        "fields": {
+            "question": 2,
+            "choice_text": "HP"
+        }
+    },
+    {
+        "model": "polls.choice",
+        "pk": 5,
+        "fields": {
+            "question": 3,
+            "choice_text": "A"
+        }
+    },
+    {
+        "model": "polls.choice",
+        "pk": 6,
+        "fields": {
+            "question": 3,
+            "choice_text": "B"
+        }
+    }
+]

polls/admin.py

@@ -1,6 +1,6 @@
 from django.contrib import admin
-from .models import Question,Choice,Vote
-
+from .models import Question,Choice,Vote,ThemeColor
+from .forms import ThemeColorForm
 
 class ChoiceInline(admin.TabularInline):
     fields          = ['choice_text']
@@ -18,7 +18,7 @@ class QuestionAdmin(admin.ModelAdmin):
     
     
     fieldsets = [("question",{"fields":['question_text']}),
-                ("Meta data",{"fields":['pub_date','author']})]
+                ("Meta data",{"fields":['pub_date','author','theme_color']})]
     
     model = Question
 
@@ -26,7 +26,19 @@ class QuestionAdmin(admin.ModelAdmin):
         return {"author": request.user}
 
 
+class ThemeColorAdmin(admin.ModelAdmin):
+    # model = ThemeColor
+    form = ThemeColorForm
+    list_display=("title","primary_color","secondary_color")
+
+    fieldsets=[("Title",{"fields":["title"]}),
+               ("Colors",{"fields":["primary_color","secondary_color"]}),
+               ]
+    
+
+
 # Register your models here.
 admin.site.register(Question,QuestionAdmin)
 admin.site.register(Choice)
-admin.site.register(Vote)
+admin.site.register(Vote)
+admin.site.register(ThemeColor,ThemeColorAdmin)

polls/forms.py

@@ -1,7 +1,7 @@
 from django import forms
 from django.contrib.auth import get_user_model
 from accounts.forms import UserAdminCreationForm,UserAdminUpdateForm
-from .models import Question
+from .models import Question,ThemeColor
 
 User=get_user_model()
 
@@ -20,4 +20,11 @@ class QuestionForm(forms.ModelForm):
         model=Question
         fields=('question_text','pub_date','author')
     
-    
+
+class ThemeColorForm(forms.ModelForm):
+    class Meta:
+        model = ThemeColor
+        fields=('primary_color','secondary_color')
+
+    primary_color    = forms.CharField(widget=forms.widgets.TextInput(attrs={"type":"color","value":"#ffffff"}))
+    secondary_color  = forms.CharField(widget=forms.widgets.TextInput(attrs={"type":"color"}))

polls/migrations/0001_initial.py

@@ -1,6 +1,7 @@
-# Generated by Django 4.2.3 on 2023-07-24 17:19
+# Generated by Django 4.2.4 on 2023-08-07 18:11
 
 import datetime
+from django.conf import settings
 from django.db import migrations, models
 import django.db.models.deletion
 
@@ -10,24 +11,46 @@ class Migration(migrations.Migration):
     initial = True
 
     dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
     ]
 
     operations = [
         migrations.CreateModel(
-            name='Question',
+            name='Choice',
             fields=[
                 ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
-                ('question_text', models.CharField(max_length=300)),
-                ('pub_date', models.DateTimeField(default=datetime.datetime.now, verbose_name='date published')),
+                ('choice_text', models.CharField(max_length=200)),
             ],
         ),
         migrations.CreateModel(
-            name='Choice',
+            name='ThemeColor',
+            fields=[
+                ('title', models.CharField(max_length=200, primary_key=True, serialize=False)),
+                ('primary_color', models.CharField(max_length=7)),
+                ('secondary_color', models.CharField(max_length=7)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Vote',
             fields=[
                 ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
-                ('choice_text', models.CharField(max_length=200)),
-                ('votes', models.IntegerField(default=0)),
-                ('question', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='polls.question')),
+                ('choice', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='vote_set', to='polls.choice')),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Question',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('question_text', models.CharField(max_length=300)),
+                ('pub_date', models.DateTimeField(default=datetime.datetime.now, verbose_name='date published')),
+                ('author', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+                ('theme_color', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to='polls.themecolor')),
             ],
         ),
+        migrations.AddField(
+            model_name='choice',
+            name='question',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='choice_set', to='polls.question'),
+        ),
     ]

polls/migrations/0002_question_author.py

@@ -1,22 +0,0 @@
-# Generated by Django 4.2.3 on 2023-07-27 01:27
-
-from django.conf import settings
-from django.db import migrations, models
-import django.db.models.deletion
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
-        ('polls', '0001_initial'),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name='question',
-            name='author',
-            field=models.ForeignKey(default='panthrianuj@gmail.com', on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL),
-            preserve_default=False,
-        ),
-    ]

polls/migrations/0003_remove_choice_votes_votes.py

@@ -1,28 +0,0 @@
-# Generated by Django 4.2.3 on 2023-07-28 06:29
-
-from django.conf import settings
-from django.db import migrations, models
-import django.db.models.deletion
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
-        ('polls', '0002_question_author'),
-    ]
-
-    operations = [
-        migrations.RemoveField(
-            model_name='choice',
-            name='votes',
-        ),
-        migrations.CreateModel(
-            name='Votes',
-            fields=[
-                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
-                ('choice', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='polls.choice')),
-                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
-            ],
-        ),
-    ]

polls/migrations/0004_rename_votes_vote.py

@@ -1,19 +0,0 @@
-# Generated by Django 4.2.3 on 2023-07-28 06:32
-
-from django.conf import settings
-from django.db import migrations
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
-        ('polls', '0003_remove_choice_votes_votes'),
-    ]
-
-    operations = [
-        migrations.RenameModel(
-            old_name='Votes',
-            new_name='Vote',
-        ),
-    ]

polls/models.py

@@ -5,11 +5,25 @@ from django.contrib.auth import get_user_model
 
 User=get_user_model()
 # Create your models here.
+
+class ThemeColor(models.Model):
+    
+    title           = models.CharField(max_length=200,primary_key=True)
+    primary_color   = models.CharField(max_length=7)
+    secondary_color = models.CharField(max_length=7)
+
+    def __str__(self):
+        return self.pk
+    
+
+
+
 class Question(models.Model):
     
     author        = models.ForeignKey(User,on_delete=models.CASCADE)
     question_text = models.CharField(max_length=300)
     pub_date      = models.DateTimeField("date published",default=datetime.datetime.now)
+    theme_color    = models.ForeignKey(ThemeColor,on_delete=models.SET_NULL,blank=True,null=True)
     
     def __str__(self):
         return self.question_text

polls/static/polls/create.css

@@ -1,3 +1,8 @@
+:root{
+    --primary-color:#5B66C6;
+    --secondary-color:#5b66c670;
+}
+
 /*********************sub header***************************/
 #sub_header{
     font-weight:100;
@@ -15,18 +20,18 @@
 
 }
 
-.question_container{
+#question_container{
     width:500px;
     
     color:#ffffff;
-    background-color: #5B66C6;
+    background-color: var(--primary-color);
     
     border-radius: 7px;
     box-shadow: 0px 20px 52px 0px #0000004b;
     overflow: hidden;
     margin-top:40px;
 }
-.question_container:last-child{
+#question_container:last-child{
     margin-bottom:40px;
 }
 
@@ -54,8 +59,8 @@
 .question_header>#question_text{
     height: 20px;
     width: 60%;
-    color:white;
-    background-color: #5B66C6;
+    color:inherit;
+    background-color: inherit;
     border:none;
     outline: none;
     border-bottom:white solid 2px;
@@ -65,7 +70,7 @@
     resize: none;
 }
 .question_header>#question_text::placeholder{
-    color:#dddbdb;
+    color:#ffffff;
 }
 
 .question_header>.right_section{
@@ -80,7 +85,7 @@
     
 }  
 
-.question_container>.form_container{
+#question_container>.form_container{
     box-sizing: border-box;
     padding: 10px 20px;
     width: 100%;
@@ -103,7 +108,7 @@
     margin: 10px 0;
     padding: 10px 20px;
     
-    background-color: #5b66c670;
+    background-color:var(--secondary-color); 
     
     border-radius: 3px;
 
@@ -139,7 +144,7 @@
     border:none;
     outline: none;
     
-    background-color: #5B66C6;
+    background-color: var(--primary-color);
     color: white;
     padding: 10px 30px;
     border-radius: 8px;
@@ -151,10 +156,42 @@
 
 
 #add_option{
-    color:#5B66C6;
+    color:var(--primary-color);
     
 }
 #add_option:hover{
-    text-decoration:#5B66C6 underline solid 2px;
+    text-decoration:var(--primary-color) underline solid 2px;
+    cursor: pointer;
+}
+
+
+.themes_container{
+    border: 2px solid black;
+    width: fit-content;
+}
+.themes{
+    display: flex;
+    flex-direction: row;
+    border-top: 2px solid black;
+}
+
+.theme{
+    height: 50px;
+    aspect-ratio: 1;
+    background-color: blueviolet;
+    margin: 2px 5px;
+    color:white;
+    border-radius: 50%;
+    position:relative;
+}
+.theme:hover{
     cursor: pointer;
+    transform: scale(1.1);
+}
+
+.theme span{
+    position: absolute;
+    left:50%;
+    top:50%;
+    transform: translate(-50%,-50%);
 }

polls/static/polls/create.js

@@ -119,7 +119,7 @@ function validate(){
     return true;
 }
 
-
+var theme=null;
 
 function create_question(){
     if(!validate()) return;
@@ -144,6 +144,9 @@ function create_question(){
 
     data_to_send["question_text"]=question_text.value;
     data_to_send["choice_text_list"]=choice_text_list;
+    if (theme!=null)
+        data_to_send['theme_color']=theme;
+    
 
     fetch("",{
         method:"POST",
@@ -161,4 +164,26 @@ function create_question(){
 }
 
 create_choice();
-create_choice();
+create_choice();
+
+function rgbtohex(value){
+    value=value.split("(")[1].split(")")[0];
+    value=value.split(",");
+    value = value.map(function(x){             //For each array element
+        x = parseInt(x).toString(16);      //Convert to a base16 string
+        return (x.length==1) ? "0"+x : x;  //Add zero if we get only one character
+    });
+    value="#"+value.join("");
+
+    return value;
+}
+function changetheme(elem){
+    // set question to theme color
+    // console.log(rgbtohex(elem.style.backgroundColor));
+    // console.log(rgbtohex(elem.style.color));
+    // question_container.style.color=rgbtohex(elem.style.color);
+    document.documentElement.style.setProperty("--primary-color",rgbtohex(elem.style.backgroundColor));
+    document.documentElement.style.setProperty("--secondary-color",rgbtohex(elem.style.color));
+    theme=elem.dataset.id;
+    // set form theme value 
+}

polls/static/polls/index.css

@@ -101,7 +101,7 @@
 .question_header>.question_text{
     width: 60%;
     color:white;
-    background-color: var(--primary-color);
+    background-color: transparent;
     border:none;
     outline: none;
 

polls/static/polls/index.js

@@ -91,11 +91,45 @@ function Vote(elem){
 }
 
 document.querySelectorAll(".choices.result>.choice").forEach(choice=>{
-    console.log(choice.dataset.percent);
+    // console.log(choice.dataset.percent);
     show_result(choice);
 });
 
 function show_result(choice){
-    choice.style.background= `linear-gradient(90deg, var(--percentage-color) ${choice.dataset.percent}%, var(--secondary-color) 0%)`;
+    var q=choice.closest(".question_container");
+    if(q.hasAttribute("data-primary"))
+        choice.style.background= `linear-gradient(90deg, ${q.dataset.primary} ${choice.dataset.percent}%, ${q.dataset.secondary} 0%)`;
+    else
+        choice.style.background= `linear-gradient(90deg, var(--percentage-color) ${choice.dataset.percent}%, var(--secondary-color) 0%)`;
     choice.innerHTML+=choice.dataset.percent+"%";
-}
+}
+
+
+
+
+document.querySelectorAll(".question_container").forEach(q=>{
+    if (!q.hasAttribute("data-primary")) return;
+    
+    // console.log(q);
+    var style=`
+                .question_container[data-primary="${q.dataset.primary}"]{
+                    background-color:${q.dataset.primary};
+                }
+                .question_container[data-primary="${q.dataset.primary}"] .choice{
+                    background-color:${q.dataset.secondary};
+                }
+                .question_container[data-primary="${q.dataset.primary}"] .choice:hover{
+                    background-color:${q.dataset.primary};
+                }
+                .question_container[data-primary="${q.dataset.primary}"] .choice.active{
+                    background-color:${q.dataset.primary};
+                }
+                .question_container[data-primary="${q.dataset.primary}"] .vote_btn{
+                    background-color:${q.dataset.primary};
+                }
+
+    `;
+
+    custom_style.innerText+=style;
+    
+});

polls/templates/polls/create.html

@@ -9,13 +9,35 @@
     
     <h2 id="sub_header">Create Poll</h2>
 
-    
+
+        <div class="themes_container">
+            Themes
+            <div class="themes">
+            {% for theme in themes %}
+                <div class="theme" 
+                
+                data-id="{{ theme.pk }}"
+                
+                style="
+                background-color: {{ theme.primary_color }};
+                color: {{ theme.secondary_color }};
+                border: 10px solid {{ theme.secondary_color }};
+                "
+                onclick="changetheme(this);"
+
+                >
+            
+                    <span>{{ theme }}</span>
+                </div>
+            {% endfor %}
+            </div>
+        </div>
 
 
         <div id="main_container">
            
 
-                <div class="question_container">
+                <div id="question_container">
                     <div class="question_header">
                         <textarea id="question_text" placeholder="New question"></textarea>
                         

polls/templates/polls/index.html

@@ -4,6 +4,7 @@
     {% load index %}
     {% load static %}
     <link type="text/css" rel="stylesheet" href="{% static 'polls/index.css' %}">
+    <style id="custom_style"></style>
 {% endblock %}
 
 {% block body %}

polls/templates/polls/question_list.html

@@ -4,8 +4,14 @@
 
     <div id="main_container">
         {% for question in latest_questions_list %}
-
-            <div class="question_container" data-id="{{ question.pk }}">
+            
+            <div class="question_container" data-id="{{ question.pk }}" 
+                    
+                    {% if question.theme_color %}
+                        data-primary="{{ question.theme_color.primary_color }}"
+                        data-secondary="{{ question.theme_color.secondary_color }}"
+                    {% endif %}
+                    >
                 <div class="question_header">
                     <textarea oninput="OnInput(event)" class="question_text" readonly="true">{{ question.question_text }}</textarea>
                     <div class="right_section">
@@ -34,6 +40,7 @@
                                 {% if question.has_voted %}
                                     data-percent="{{ choice.vote_percent }}"
                                 {% endif %}        
+                                
                                 >
 
                                 <span>
@@ -51,7 +58,10 @@
                         {% if canDelete %}
                         <button class="delete_btn" onclick="DeletePoll(this)">Delete</button>
                         {% endif %}
-                        <button class="vote_btn" onclick="Vote(this)">Vote</button>
+                        <button class="vote_btn" onclick="Vote(this)"
+                        
+                        >
+                        Vote</button>
                     </div>
                 </div>
             </div>

polls/views.py

@@ -5,7 +5,7 @@ from django.contrib.auth import get_user_model
 from django.contrib.auth.decorators import login_required
 from django.urls import reverse
 import json
-from .models import Question,Choice,Vote
+from .models import Question,Choice,Vote,ThemeColor
 from .forms import UserSignupForm,UserLoginForm
 
 
@@ -137,15 +137,24 @@ def login(request):
 
     return render(request,"polls/login.html",context)
 
+
 @login_required(login_url=login_url) 
 def create(request):
     if request.method=="GET":
-        return render(request,'polls/create.html',{})
+        # get themes
+        themes=ThemeColor.objects.all()
+        return render(request,'polls/create.html',{"themes":themes})
     
     json_data=json.loads(request.body)
     print(json_data)
+    if "theme_color" in json_data:
+        theme_color=ThemeColor.objects.get(pk=json_data['theme_color'])
+    else:
+        theme_color=None
+
     question=Question.objects.create(author=request.user,
-                            question_text=json_data['question_text'])
+                            question_text=json_data['question_text'],
+                            theme_color=theme_color)
     question.save()
 
     for choice_text in json_data['choice_text_list']: