Init of Vue based frontend

mrlvsb · Apr 15, 2024 · fcf2383 · fcf2383
1 parent 232cc00
commit fcf2383
Show file tree

Hide file tree

Showing 22 changed files with 2,968 additions and 0 deletions.
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>