From 689b3fbd199d327beba93ebdf02eeea0dc711638 Mon Sep 17 00:00:00 2001
From: Plumey Simon <simon.plumey@he-arc.ch>
Date: Fri, 15 Mar 2024 14:09:49 +0100
Subject: [PATCH 1/7] update gitignore to ignore capistrano

---
 .gitignore | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/.gitignore b/.gitignore
index 3f8147b..29e67e8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,10 @@
 .idea
 db.sqlite3
 __pycache__
+
+# Capistrano
+/config/
+Capfile
+Gemfile
+Gemfile.lock
+capistrano.log
\ No newline at end of file

From 5df4949b1bed747aae72f338b6fc780577fbac43 Mon Sep 17 00:00:00 2001
From: Plumey Simon <simon.plumey@he-arc.ch>
Date: Fri, 15 Mar 2024 14:10:50 +0100
Subject: [PATCH 2/7] First request and CORS problem resolution

---
 api/Pipfile                     |  1 +
 api/Pipfile.lock                | 11 ++++++++++-
 api/masteriq/settings.py        |  6 ++++++
 api/masteriq/urls.py            |  2 +-
 frontend/src/views/HomeView.vue | 21 +++++++++++++++++++++
 5 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/api/Pipfile b/api/Pipfile
index f21ff8d..d39257b 100644
--- a/api/Pipfile
+++ b/api/Pipfile
@@ -7,6 +7,7 @@ name = "pypi"
 django = "==5.0.2"
 djangorestframework = "==3.14.0"
 pandas = "*"
+django-cors-headers = "*"
 
 [dev-packages]
 
diff --git a/api/Pipfile.lock b/api/Pipfile.lock
index aa65ea6..01ca358 100644
--- a/api/Pipfile.lock
+++ b/api/Pipfile.lock
@@ -1,7 +1,7 @@
 {
     "_meta": {
         "hash": {
-            "sha256": "edae6cc81aa424ed1cebb5c17ba2e06710e8b358349736357a8d185c37cff4b2"
+            "sha256": "ae0fd64da1a6ba308a4ef9796f6cf1300e15a871d05775c966137d67f82a5c11"
         },
         "pipfile-spec": 6,
         "requires": {
@@ -33,6 +33,15 @@
             "markers": "python_version >= '3.10'",
             "version": "==5.0.2"
         },
+        "django-cors-headers": {
+            "hashes": [
+                "sha256:0b1fd19297e37417fc9f835d39e45c8c642938ddba1acce0c1753d3edef04f36",
+                "sha256:0bf65ef45e606aff1994d35503e6b677c0b26cafff6506f8fd7187f3be840207"
+            ],
+            "index": "pypi",
+            "markers": "python_version >= '3.8'",
+            "version": "==4.3.1"
+        },
         "djangorestframework": {
             "hashes": [
                 "sha256:579a333e6256b09489cbe0a067e66abe55c6595d8926be6b99423786334350c8",
diff --git a/api/masteriq/settings.py b/api/masteriq/settings.py
index ef79e5a..0766c8c 100644
--- a/api/masteriq/settings.py
+++ b/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',
diff --git a/api/masteriq/urls.py b/api/masteriq/urls.py
index 28782d9..5a55a85 100644
--- a/api/masteriq/urls.py
+++ b/api/masteriq/urls.py
@@ -28,5 +28,5 @@
 
 urlpatterns = [
     path('admin/', admin.site.urls),
-    path("", include(router.urls))
+    path("api/", include(router.urls))
 ]
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index e979aa8..1917b42 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,9 +1,30 @@
 <script setup>
+import axios from 'axios';
+import { ref, onMounted } from 'vue';
+
+const categories = ref([]);
+
+const fetchCategories = async (query) => {
+    const response = await axios.get('http://127.0.0.1:8000/api/category/iq/', {
+        params: query
+    });
+    categories.value = response.data;
+    console.log(response);
+}
+
+onMounted(() => {
+    fetchCategories();
+});
 </script>
 
 <template>
     <main class="container">
         <h1>This is home page with categories</h1>
+        <ul>
+            <li v-for="category in categories" :key="category.id">
+                {{ category.name }}
+            </li>
+        </ul>
         <button class="btn">Random question</button>
     </main>
 </template>

From 4e460ef1c54f0f8880a94e1ce303a37785ef8378 Mon Sep 17 00:00:00 2001
From: Plumey Simon <simon.plumey@he-arc.ch>
Date: Fri, 15 Mar 2024 21:24:45 +0100
Subject: [PATCH 3/7] Adding environement variables

---
 frontend/package-lock.json      | 13 +++++++++++++
 frontend/package.json           |  1 +
 frontend/src/views/HomeView.vue |  7 ++++---
 frontend/vite.config.js         | 18 +++++++++++-------
 4 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c4ae547..8e0c52d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,6 +14,7 @@
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.3",
+        "dotenv": "^16.4.5",
         "vite": "^5.0.11"
       }
     },
@@ -723,6 +724,18 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 48ed71f..04f80a1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.3",
+    "dotenv": "^16.4.5",
     "vite": "^5.0.11"
   }
 }
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 1917b42..a028e11 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,11 +1,12 @@
 <script setup>
 import axios from 'axios';
 import { ref, onMounted } from 'vue';
+const API_SERVER = import.meta.env.VITE_API_SERVER;
 
 const categories = ref([]);
-
+console.log(API_SERVER);
 const fetchCategories = async (query) => {
-    const response = await axios.get('http://127.0.0.1:8000/api/category/iq/', {
+    const response = await axios.get(`${API_SERVER}/api/category/iq/`, {
         params: query
     });
     categories.value = response.data;
@@ -22,7 +23,7 @@ onMounted(() => {
         <h1>This is home page with categories</h1>
         <ul>
             <li v-for="category in categories" :key="category.id">
-                {{ category.name }}
+                {{ category.category_name }}
             </li>
         </ul>
         <button class="btn">Random question</button>
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 5c45e1d..21a911b 100644
--- a/frontend/vite.config.js
+++ b/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))
+      }
     }
   }
 })

From 0ccb0c0f6c275aa72ea1c98f66e22b71512cb773 Mon Sep 17 00:00:00 2001
From: Plumey Simon <simon.plumey@he-arc.ch>
Date: Sat, 16 Mar 2024 10:55:43 +0100
Subject: [PATCH 4/7] MVP Page categories

---
 frontend/src/assets/main.css             | 15 ++++-
 frontend/src/components/Categories.vue   |  9 ---
 frontend/src/components/CategoryItem.vue | 84 ++++++++++++++++++++++++
 frontend/src/router/index.js             |  2 +-
 frontend/src/views/HomeView.vue          | 39 ++++++++---
 frontend/src/views/QuizView.vue          |  1 +
 6 files changed, 130 insertions(+), 20 deletions(-)
 delete mode 100644 frontend/src/components/Categories.vue
 create mode 100644 frontend/src/components/CategoryItem.vue

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 78b74f2..21aba6a 100644
--- a/frontend/src/assets/main.css
+++ b/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;
diff --git a/frontend/src/components/Categories.vue b/frontend/src/components/Categories.vue
deleted file mode 100644
index 9580f25..0000000
--- a/frontend/src/components/Categories.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup>
-</script>
-
-<template>
-  
-</template>
-
-<style scoped>
-</style>
diff --git a/frontend/src/components/CategoryItem.vue b/frontend/src/components/CategoryItem.vue
new file mode 100644
index 0000000..bd074bb
--- /dev/null
+++ b/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>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index f824cc1..e4de527 100644
--- a/frontend/src/router/index.js
+++ b/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')
     },
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index a028e11..0008346 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,16 +1,16 @@
 <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([]);
-console.log(API_SERVER);
+
 const fetchCategories = async (query) => {
     const response = await axios.get(`${API_SERVER}/api/category/iq/`, {
         params: query
     });
     categories.value = response.data;
-    console.log(response);
 }
 
 onMounted(() => {
@@ -20,12 +20,33 @@ onMounted(() => {
 
 <template>
     <main class="container">
-        <h1>This is home page with categories</h1>
-        <ul>
-            <li v-for="category in categories" :key="category.id">
-                {{ category.category_name }}
-            </li>
-        </ul>
-        <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>
diff --git a/frontend/src/views/QuizView.vue b/frontend/src/views/QuizView.vue
index a092cbc..d5af841 100644
--- a/frontend/src/views/QuizView.vue
+++ b/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>
\ No newline at end of file

From 9514e6a224b6e7d3877ba100c966851ebed88949 Mon Sep 17 00:00:00 2001
From: Plumey Simon <simon.plumey@he-arc.ch>
Date: Sat, 16 Mar 2024 10:59:24 +0100
Subject: [PATCH 5/7] Adding cors headers package

---
 api/requirements.txt | Bin 362 -> 416 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/api/requirements.txt b/api/requirements.txt
index d5c71e1c372b14db1469b57fa41cdfe397fd4d19..7d6586ee2879c2a8932352b61a40093eb833ba11 100644
GIT binary patch
delta 62
zcmaFGw19a-7Nc1TLl#3KLmopqLq3BpLo$#oVkic(G8j^U;weB9#J6QIVbEhR24X`7
IUIs1(0Kmu#i2wiq

delta 7
OcmZ3${EBHq79#))_yVf{


From 693c7069175934df97b2ca2b0b78f77fe0e978a5 Mon Sep 17 00:00:00 2001
From: Plumey Simon <simon.plumey@he-arc.ch>
Date: Sat, 16 Mar 2024 11:00:00 +0100
Subject: [PATCH 6/7] Je suis con mb

---
 api/requirements.txt | Bin 416 -> 418 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/api/requirements.txt b/api/requirements.txt
index 7d6586ee2879c2a8932352b61a40093eb833ba11..beebb28cc41d016fc547a172dc1aaac912b62dd4 100644
GIT binary patch
delta 24
ecmZ3$yoh<jBt`*S1``H724f&LWZ-4sVgLX{>;vQg

delta 22
ccmZ3)ynuPbBt||H20aF2AU0&+W#D1}06WS9r2qf`


From daae14000a12088e2a7ca4e5ecdbfedaad107caf Mon Sep 17 00:00:00 2001
From: Plumey Simon <simon.plumey@he-arc.ch>
Date: Sat, 16 Mar 2024 11:04:03 +0100
Subject: [PATCH 7/7] Adapting test

---
 api/masteriqapp/tests/test_routes.py | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/api/masteriqapp/tests/test_routes.py b/api/masteriqapp/tests/test_routes.py
index ac9a423..08bdd18 100644
--- a/api/masteriqapp/tests/test_routes.py
+++ b/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"})