Init of Vue based frontend

mrlvsb · Jun 27, 2024 · 4562ae6 · 4562ae6
1 parent fe62167
commit 4562ae6
Show file tree

Hide file tree

Showing 22 changed files with 3,036 additions and 0 deletions.
diff --git a/README.development.md b/README.development.md
@@ -0,0 +1,82 @@
+## Development Notes
+
+
+### Developing Vue.js Frontend
+
+
+Add the following lines **before** `MIDDLEWARE` section in `settings.py`:
+
+```python
+if DEBUG:
+    INSTALLED_APPS.append('corsheaders')
+```
+
+Add the following lines **after** `MIDDLEWARE` section in `settings.py`:
+
+```python
+if DEBUG:
+    MIDDLEWARE.insert(2, 'corsheaders.middleware.CorsMiddleware')
+    MIDDLEWARE.insert(2, 'corsheaders.middleware.CorsMiddleware')
+
+    CORS_ALLOWED_ORIGINS = [
+        "http://localhost:5173",
+    ]
+    CORS_ALLOW_ALL_ORIGINS = True
+    CSRF_TRUSTED_ORIGINS = [
+    ]
+    CORS_ALLOW_CREDENTIALS = True
+```
+
+Add the following line to `requirements.txt`:
+
+```
+django-cors-headers==3.11.0
+```
+
+Or you can apply the following patch:
+
+```
+diff --git a/kelvin/settings.py b/kelvin/settings.py
+index 7febe5f..388aba5 100644
+--- a/kelvin/settings.py
++++ b/kelvin/settings.py
+@@ -48,6 +48,9 @@ INSTALLED_APPS = [
+     'webpush',
+ ]
+ 
++if DEBUG:
++    INSTALLED_APPS.append('corsheaders')
++
+ MIDDLEWARE = [
+     'django.middleware.security.SecurityMiddleware',
+     'django.contrib.sessions.middleware.SessionMiddleware',
+@@ -60,6 +63,19 @@ MIDDLEWARE = [
+     'django_cas_ng.middleware.CASMiddleware',
+ ]
+ 
++if DEBUG:
++    MIDDLEWARE.insert(2, 'corsheaders.middleware.CorsMiddleware')
++
++    CORS_ALLOWED_ORIGINS = [
++        "http://localhost:5173",
++    ]
++    CORS_ALLOW_ALL_ORIGINS = True
++    CSRF_TRUSTED_ORIGINS = [
++        'www.safesite.com',
++    ]
++    CORS_ALLOW_CREDENTIALS = True
++
++
+ ROOT_URLCONF = 'kelvin.urls'
+ 
+ TEMPLATES = [
+diff --git a/requirements.txt b/requirements.txt
+index 073b20c..6022af2 100644
+--- a/requirements.txt
++++ b/requirements.txt
+@@ -30,3 +30,4 @@ rq-scheduler==0.11.0
+ six==1.16.0
+ typing_extensions==4.11.0
+ Unidecode==1.3.6
++django-cors-headers==3.11.0
+```
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -87,6 +87,14 @@ services:
     working_dir: /kelvin/frontend
     command: sh -c "npm install && npm run dev"
 
+  frontend-vue-ts:
+    image: node
+    container_name: kelvin_frontend_vue_ts_build
+    volumes:
+      - ./:/kelvin
+    working_dir: /kelvin/frontend-vue-ts
+    command: sh -c "npm install && npm run build --emptyOutDir"
+
   redis:
     image: redis
     container_name: kelvin_redis

diff --git a/frontend-vue-ts/index.html b/frontend-vue-ts/index.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Kelvin Vue.js</title>
+
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/resources/public/js/asciinema-player.min.js"></script>
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/resources/public/css/asciinema-player.css">
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+
+      <link rel="apple-touch-icon" sizes="180x180" href="/static/favicon/apple-touch-icon.png">
+      <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon/favicon-32x32.png">
+      <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon/favicon-16x16.png">
+
+  </head>
+  <body>
+
+    <nav class="navbar navbar-expand-md mb-2">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="/">Kelvin</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav me-auto">
+            <li class="nav-item"><a class="nav-link" href="/submits">Submits</a></li>
+            <li class="nav-item"><a class="nav-link" href="/tasks">Tasks</a></li>
+            <li class="nav-item"><a class="nav-link" href="/student-view">Student view</a></li>
+            <li class="nav-item"><a class="nav-link" href="/admin/">Admin</a></li>
+          </ul>
+          <ul class="navbar-nav">
+            <span class="ml-auto navbar-text">
+              <span class="d-md-none">Logged as: </span><span class="text-body-emphasis">Jan Gaura (GAU01)</span>
+            </span>
+            <li class="nav-item"><a class="nav-link text-primary-emphasis" href="/accounts/logout/?next=/">Logout</a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+<!---->
+    <div class="content container-md"></div>
+
+    <div id="app"></div>
+
+    <script type="module" src="/src/main.ts"></script>
+<!---->
+  </body>
+</html>