Merge pull request #26 from HE-Arc/sp-14-page-categories

Sp 14 page categories

.gitignore

@@ -1,3 +1,10 @@
 .idea
 db.sqlite3
 __pycache__
+
+# Capistrano
+/config/
+Capfile
+Gemfile
+Gemfile.lock
+capistrano.log

api/Pipfile

@@ -7,6 +7,7 @@ name = "pypi"
 django = "==5.0.2"
 djangorestframework = "==3.14.0"
 pandas = "*"
+django-cors-headers = "*"
 
 [dev-packages]
 

api/masteriq/settings.py

@@ -28,6 +28,10 @@
 
 ALLOWED_HOSTS = []
 
+CORS_ALLOWED_ORIGINS = [
+    "http://localhost:5173",
+    "http://127.0.0.1:5173",
+]
 
 # Application definition
 
@@ -40,9 +44,11 @@
     'django.contrib.staticfiles',
     'masteriqapp',
     'rest_framework',
+    "corsheaders",
 ]
 
 MIDDLEWARE = [
+    "corsheaders.middleware.CorsMiddleware",
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',

api/masteriq/urls.py

@@ -28,5 +28,5 @@
 
 urlpatterns = [
     path('admin/', admin.site.urls),
-    path("", include(router.urls))
+    path("api/", include(router.urls))
 ]

api/masteriqapp/tests/test_routes.py

@@ -5,21 +5,21 @@
 class RouteTestCases(TestCase):
     def test_route(self):
         c = Client()
-        response = c.get("/category/1/image/")
+        response = c.get("/api/category/1/image/")
         assert response.status_code == 200
 
-        response = c.get("/category/iq/")
+        response = c.get("/api/category/iq/")
         assert response.json()["1"]["category_name"] is not None
         assert response.json()["1"]["user_iq"] is not None
         assert response.status_code == 200
 
-        response = c.get("/question/1/new/")
+        response = c.get("/api/question/1/new/")
         assert response.status_code == 200
         assert response.json()['id'] is not None
         assert response.json()['text'] is not None
         assert response.json()['category'] is not None
 
-        response = c.post("/question/new_community/", {
+        response = c.post("/api/question/new_community/", {
             "question": "How old is Harry Potter at the beginning of the first book?",
             "options": ["11", "15", "He wasn\'t born"],
             "answer": "1"})

frontend/package.json

@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.3",
+    "dotenv": "^16.4.5",
     "vite": "^5.0.11"
   }
 }

frontend/src/assets/main.css

@@ -12,7 +12,11 @@ p,
 li,
 input,
 button,
-label
+label,
+h1,
+h2,
+h3,
+h4
 {
   font-family: 'Montserrat', Inter, sans-serif;
 }
@@ -34,6 +38,15 @@ label
   background-color: var(--color-background-btn-hover);
 }
 
+.title
+{
+  font-family: 'Montserrat', Inter, sans-serif;
+  font-weight: 800;
+  color: black;
+  font-size: 1.75rem;
+  font-style: italic;
+}
+
 .container
 {
   max-width: 1100px;

frontend/src/components/CategoryItem.vue

@@ -0,0 +1,84 @@
+<script setup>
+import axios from 'axios';
+import { onMounted, ref } from 'vue';
+const API_SERVER = import.meta.env.VITE_API_SERVER;
+
+const imageUrl = ref('');
+
+const fetchImage = async () => {
+    const response = await axios.get(`${API_SERVER}/api/category/${props.id}/image/`, { responseType: 'arraybuffer' });
+    imageUrl.value = 'data:image/jpeg;base64,' + arrayBufferToBase64(response.data);
+}
+
+const arrayBufferToBase64 = (buffer) => {
+    let binary = '';
+    const bytes = new Uint8Array(buffer);
+    const len = bytes.byteLength;
+    for (let i = 0; i < len; i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return btoa(binary);
+}
+
+const props = defineProps({
+    id: Number,
+    category: Object
+})
+onMounted(() => {
+    fetchImage();
+});
+</script>
+
+<template>
+    <RouterLink class="link" :to="{ name: 'Quiz', params: { id_category: id } }">
+        <div class="category-item" :style="{ backgroundImage: 'url(' + imageUrl + ')' }">
+            <div class="opacity-filter">
+                <h2 class="name">{{ category.category_name }}</h2>
+                <p class="iq">{{ category.user_iq }}</p>
+            </div>
+        </div>
+    </RouterLink>
+</template>
+
+<style scoped style="scss">
+.link
+{
+    text-decoration: none;
+    color: inherit;
+    transition: all 0.3s ease-in-out;
+    &:hover
+    {
+        transform: scale(1.05);
+    }
+}
+.category-item {
+    border-radius: 1.5rem;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100%;
+
+    .opacity-filter {
+        background-color: rgba(0, 0, 0, 0.5);
+        padding: 2rem 1rem;
+        border-radius: 1.5rem;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .name {
+        color: white;
+        font-size: 1.5rem;
+        font-weight: 800;
+        font-style: italic;
+    }
+
+    .iq {
+        color: white;
+        font-size: 1.2rem;
+        font-weight: 600;
+    }
+}
+</style>

frontend/src/router/index.js

@@ -10,7 +10,7 @@ const router = createRouter({
       component: HomeView
     },
     {
-      path: '/quiz',
+      path: '/quiz/:id_category',
       name: 'Quiz',
       component: () => import('../views/QuizView.vue')
     },

frontend/src/views/HomeView.vue

@@ -1,9 +1,52 @@
 <script setup>
+import axios from 'axios';
+import { ref, onMounted } from 'vue';
+import CategoryItem from '@/components/CategoryItem.vue';
+const API_SERVER = import.meta.env.VITE_API_SERVER;
+
+const categories = ref([]);
+
+const fetchCategories = async (query) => {
+    const response = await axios.get(`${API_SERVER}/api/category/iq/`, {
+        params: query
+    });
+    categories.value = response.data;
+}
+
+onMounted(() => {
+    fetchCategories();
+});
 </script>
 
 <template>
     <main class="container">
-        <h1>This is home page with categories</h1>
-        <button class="btn">Random question</button>
+        <p class="info">Maximise your IQs in each question category and climb the overall rankings.</p>
+        <h1 class="title">Categories</h1>
+        <div class="all-categories">
+            <CategoryItem v-for="category, key in categories" :id="parseInt(key)" :category></CategoryItem>
+        </div>
+        <div class="btn-container">
+            <button class="btn">Random question</button>
+
+        </div>
     </main>
 </template>
+
+<style scoped>
+.all-categories {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+    row-gap: 1rem;
+    column-gap: 1.5rem;
+}
+
+.info {
+    margin: 1.5rem 0 1rem 0;
+}
+
+.btn-container {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 0;
+}
+</style>

frontend/src/views/QuizView.vue

@@ -1,5 +1,6 @@
 <template>
     <section class="quiz container">
         <h1>This is quiz page</h1>
+        Id category {{ $route.params.id_category }}
     </section>
 </template>

frontend/vite.config.js

@@ -1,16 +1,20 @@
 import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
+import dotenv from 'dotenv';
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue(),
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+export default defineConfig(({ mode }) => {
+  dotenv.config({ path: `./.env.${mode}` });
+  return {
+    plugins: [
+      vue(),
+    ],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+      }
     }
   }
 })