Labs page for dynamic questions

api/app/graphql/types/dynamic_topic_option_type.rb

@@ -3,5 +3,6 @@ class DynamicTopicOptionType < Types::BaseObject
     description 'A type that represents a options for generating a dynamic question.'
     field :name, String, null: false
     field :route, String, null: false
+    field :display_name, String, null: false
   end
 end

api/app/services/fetch_dynamic_routes.rb

@@ -8,7 +8,7 @@ def call(path = 'http://127.0.0.1:8000/api/')
     topics = []
     data.each_key do |key|
       question_routes = data[key.to_s]
-      questions_list = question_routes.map { |k, v| OpenStruct.new(name: k, route: v) }
+      questions_list = question_routes.map { |k, v| OpenStruct.new(name: k, route: v['route'], display_name: v['display_name']) }
       topics << OpenStruct.new(name: key, options: questions_list)
     end
     topics

client/src/App.svelte

@@ -7,6 +7,7 @@
     Home,
     COMP1805Home,
     COMP2804Home,
+    Labs,
     NotFound,
     Test
   } from './pages';
@@ -33,6 +34,9 @@
     // Test path
     '/sessions/:id': CourseSession,
 
+    // Labs path
+    '/labs': Labs,
+
     // Catch-all
     '*': NotFound
   };

client/src/components/ContentCard/ContentCard.svelte

@@ -13,7 +13,8 @@
     faClipboard, //Test
     faPencilAlt, //Midterm
     faPenAlt, //Exam
-    faUser // Person
+    faUser, // Person
+    faVial // Test Tube
   } from '@fortawesome/free-solid-svg-icons';
 
   const tagIcons = {
@@ -30,7 +31,8 @@
     Test: faQuestion,
     Midterm: faQuestion,
     Exam: faQuestion,
-    User: faUser
+    User: faUser,
+    Vial: faVial
   };
 </script>
 

client/src/components/CourseNavbar/CourseNavbar.svelte

@@ -31,7 +31,7 @@
     <a href="/" use:link>
       <Fa icon={faQuestion} />
     </a>
-    <a href="/" use:link>
+    <a href="/labs" use:link>
       <Fa icon={faVial} />
     </a>
     <a href="/" use:link>

client/src/data/queries/DynamicRoutes/Routes.example.js

@@ -16,15 +16,18 @@ const ROUTES_EXAMPLE_DATA = {
         options: [
           {
             name: 'bitstrings-of-length',
-            route: '/comp2804/bitstrings-of-length'
+            route: '/comp2804/bitstrings-of-length',
+            displayName: 'Bitstrings of Length'
           },
           {
             name: 'set-theory-question',
-            route: '/comp2804/set-theory'
+            route: '/comp2804/set-theory',
+            displayName: 'Set Theory'
           },
           {
             name: 'num-of-functions',
-            route: '/comp2804/num-of-functions'
+            route: '/comp2804/num-of-functions',
+            displayName: 'Number of Functions'
           }
         ]
       }

client/src/data/queries/DynamicRoutes/Routes.query.js

@@ -7,6 +7,7 @@ const ROUTES = gql`
       options {
         name
         route
+        displayName
       }
     }
   }

client/src/pages/Labs.svelte

@@ -0,0 +1,46 @@
+<script>
+  import {link} from 'svelte-spa-router';
+  import {ContentCard, CourseNavbar as Navbar, Loading} from '../components';
+  import {getRoutes} from '../data';
+  const response = getRoutes();
+</script>
+
+<Navbar />
+<div class="course-page">
+  {#if $response.loading}
+    <div class="loading-wrap"><Loading /></div>
+  {/if}
+
+  {#if $response.error}
+    <div>ERROR: {$response.error.message}</div>
+  {/if}
+
+  {#if !$response.loading && $response}
+    <div class="content-container">
+      {#each $response.data.dynamicRoutes[1].options as routes}
+        <a href={'#/labs'}>
+          <ContentCard
+            title={routes.displayName}
+            info="Lab"
+            tag={'Lab'}
+            type="Vial"
+          />
+        </a>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .content-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    margin-top: 3rem;
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+</style>

client/src/pages/index.js

@@ -1,5 +1,6 @@
 export {default as About} from './About.svelte';
 export {default as Course} from './Course.svelte';
+export {default as Labs} from './Labs.svelte';
 export {default as CourseSession} from './CourseSession.svelte';
 export {default as Home} from './Home.svelte';
 export {default as NotFound} from './NotFound.svelte';

dynamic/router.py

@@ -15,18 +15,44 @@
 )
 
 routes = {
-    "demo": {"graph_theory": "/demo/graph-theory"},
-    "books_shelves": {
-        "books_shelves_0": "/books_shelves/books_shelves_0",
-        "books_shelves_1": "/books_shelves/books_shelves_1",
-        "books_shelves_2": "/books_shelves/books_shelves_2",
-        "books_shelves_3": "/books_shelves/books_shelves_3",
+    'books_shelves': {
+        "books_shelves_0": {
+            'display_name': "Book Shelves",
+            'route': "/books_shelves/books_shelves_0"
+        },
+        "books_shelves_1": {
+            'display_name': "Book Shelve",
+            'route': "/books_shelves/books_shelves_1"
+        },
+        "books_shelves_2": {
+            'display_name': "Book Shelve",
+            'route': "/books_shelves/books_shelves_2"
+        },
+        "books_shelves_3": {
+            'display_name': "Book Shelve",
+            'route': "/books_shelves/books_shelves_3"
+        },
     },
-    "comp2804": {
-        "bitstrings-of-length": "/comp2804/bitstrings-of-length",
-        "set-theory-question": "/comp2804/set-theory",
-        "num-of-functions": "/comp2804/num-of-functions",
+    'demo': {
+        'graph_theory': {
+            'display_name': "Graph Theory",
+            'route': "/demo/graph-theory"
+        }
     },
+    'comp2804': {
+        'bitstrings-of-length': {
+            'display_name': "Bitstrings of Length",
+            'route': "/comp2804/bitstrings-of-length"
+        },
+        'set-theory-question': {
+            'display_name': "Set Theory",
+            'route': "/comp2804/set-theory"
+        },
+        'num-of-functions': {
+            'display_name': "Number of Functions",
+            'route': "/comp2804/num-of-functions"
+        }
+    }
 }
 
 
@@ -35,47 +61,44 @@ async def get_generators():
     return routes
 
 
-@router.get(routes["demo"]["graph_theory"])
+@router.get(routes['demo']['graph_theory']['route'])
 async def generate_graph_theory_question():
     return graph_theory_question_generator.call()
 
 
 ############___Books_Shelves_Questions___############
-@router.get(routes["books_shelves"]["books_shelves_0"])
+@router.get(routes["books_shelves"]["books_shelves_0"]['route'])
 async def generate_books_shelves_0_question():
     return books_shelves_0_generator.call()
 
 
-@router.get(routes["books_shelves"]["books_shelves_1"])
+@router.get(routes["books_shelves"]["books_shelves_1"]['route'])
 async def generate_books_shelves_1_question():
     return books_shelves_1_generator.call()
 
 
-@router.get(routes["books_shelves"]["books_shelves_2"])
+@router.get(routes["books_shelves"]["books_shelves_2"]['route'])
 async def generate_books_shelves_2_question():
     return books_shelves_2_generator.call()
 
 
-@router.get(routes["books_shelves"]["books_shelves_3"])
+@router.get(routes["books_shelves"]["books_shelves_3"]['route'])
 async def generate_books_shelves_3_question():
     return books_shelves_3_generator.call()
 
 
-######################################################
-
-
-@router.get(routes["comp2804"]["set-theory-question"])
+@router.get(routes['comp2804']['set-theory-question']['route'])
 async def generate_set_theory_question():
     return set_theory_question_generator.call()
 
 
-@router.get(routes["comp2804"]["num-of-functions"])
+@router.get(routes['comp2804']['num-of-functions']['route'])
 async def generate_num_of_functions_question(
     lower_range: int = 0, upper_range: int = 10
 ):
     return num_of_functions_generator.call(lower_range, upper_range)
 
 
-@router.get(routes["comp2804"]["bitstrings-of-length"])
+@router.get(routes['comp2804']['bitstrings-of-length']['route'])
 async def bitstrings_of_length_question():
     return bitstrings_of_length_generator.call()