Merge pull request #177 from COS301-SE-2024/feature/tour

Feature/tour
COS301-SE-2024 · Sep 29, 2024 · 53c4f3f · 53c4f3f
2 parents fbddea9 + bddac27
commit 53c4f3f
Show file tree

Hide file tree

Showing 12 changed files with 705 additions and 359 deletions.
diff --git a/Desktop/.svelte-kit/generated/client/nodes/0.js b/Desktop/.svelte-kit/generated/client/nodes/0.js
diff --git a/Desktop/.svelte-kit/generated/client/nodes/1.js b/Desktop/.svelte-kit/generated/client/nodes/1.js
diff --git a/Desktop/package.json b/Desktop/package.json
@@ -54,6 +54,7 @@
     "rollup-plugin-svelte": "^7.0.0",
     "sass": "^1.77.6",
     "sequelize": "^6.37.3",
+    "shepherd.js": "^13.0.3",
     "sqlite3": "^5.1.7",
     "svelte": "^3.0.0",
     "svelte-file-dropzone": "^2.0.7",

diff --git a/Desktop/src/App.svelte b/Desktop/src/App.svelte
@@ -4,6 +4,7 @@
   import { cuda, loadState } from "./stores/processing";
   import { theme } from './stores/themeStore.js';
 
+
   import toast, { Toaster } from "svelte-french-toast";
   import { onMount } from "svelte";
 
@@ -62,6 +63,8 @@ $: {
   <!-- class="mainContainer" -->
   <Toaster />
   <Router {routes} />
+
+
 </div>
 
 <style>

diff --git a/Desktop/src/components/ModelsCard.svelte b/Desktop/src/components/ModelsCard.svelte
@@ -95,7 +95,7 @@
 
   const handleClick = () => {
     selectedModel.set(Model); 
-    console.log("handleClick for " + selectedModel.mName);
+    console.log("handleClick for " + Model.mName);
   };
 
 

diff --git a/Desktop/src/components/ModelsCardContent.svelte b/Desktop/src/components/ModelsCardContent.svelte
@@ -4,6 +4,7 @@
     import { get } from "svelte/store";
    import {mdiArrowLeftBold} from "@mdi/js";
    import { push } from "svelte-spa-router";
+   import {theme} from '../stores/themeStore';
     
     export let Model= get(selectedModel);
 
@@ -13,14 +14,49 @@
     };
 </script>
 
-<div>
+
+{#if $theme === 'highVizLight'}
+<div class="bg-highVizLight-secondary rounded-lg">
+  <button
+        class="text-black border-none p-1 rounded cursor-pointer text-xs bg-highVizLight-secondary hover:bg-theme-dark-background transition-all duration-300 ease-in-out"
+        on:click={goBack}> 
+          <Icon path={mdiArrowLeftBold} />
+        <span class="ml-2"> Back </span>
+        </button>
+  <div class="grid grid-cols-2 grid-rows-3 bg-highVizLight-secondary grid-rows-2 gap-2 p-4 shadow-lg w-full h-full">
+    <!-- Video Section -->
+    <div class="relative bg-highVizLight-accent rounded-lg block items-center justify-center col-span-1 row-span-2">
+      <video src="https://www.pexels.com/download/video/3121459/" class="p-1 rounded-lg" loop autoplay muted playsinline></video>
+      <!-- svelte-ignore a11y-img-redundant-alt -->
+    </div>
+
+    <!-- Model Name and Description -->
+    <div class="flex flex-col p-4 col-span-1 row-span-1">
+      <div class="text-2xl  text-primary font-bold justify-center ">{Model.mName}</div>
+      <div class=" text-black text-base">{Model.mDescription}</div>
+      <div class="align-right font-bold text-black justify-right mt-2 text-lg "> Version: {Model.mVersion}</div>
+    </div>
+
+    <!-- Placeholder for Dashboard -->
+    <div class="text-primary bg-highVizLight-accent rounded-lg flex items-center justify-center col-span-1 row-span-2">
+      <span>placeholder for {Model.mName} dashboard </span>
+    </div>
+
+    <!-- Summary -->
+    <div class="text-black p-4 text-xl col-span-1 row-span-2">
+      {Model.mSummary}
+    </div>
+  </div>
+</div>
+{:else}
+<div class="bg-theme-dark-background rounded-lg">
   <button
         class="text-theme-dark-lightText border-none p-1 rounded cursor-pointer text-xs bg-theme-dark-background hover:bg-theme-dark-background transition-all duration-300 ease-in-out"
         on:click={goBack}> 
           <Icon path={mdiArrowLeftBold} />
         <span class="ml-2"> Back </span>
         </button>
-  <div class="grid grid-cols-2 grid-rows-4 bg-theme-dark grid-rows-2 gap-2 p-4 shadow-lg w-full h-full">
+  <div class="grid grid-cols-2 grid-rows-3 bg-theme-dark grid-rows-2 gap-2 p-4 shadow-lg w-full h-full">
     <!-- Video Section -->
     <div class="relative bg-theme-dark-primary rounded-lg block items-center justify-center col-span-1 row-span-2">
       <video src="https://www.pexels.com/download/video/3121459/" class="p-1 rounded-lg" loop autoplay muted playsinline></video>
@@ -35,16 +71,18 @@
     </div>
 
     <!-- Placeholder for Dashboard -->
-    <div class="text-theme-dark bg-theme-dark-primary rounded-lg flex items-center justify-center col-span-1 row-span-3">
+    <div class="text-theme-dark bg-theme-dark-primary rounded-lg flex items-center justify-center col-span-1 row-span-2">
       <span>placeholder for {Model.mName} dashboard </span>
     </div>
 
-     <!-- Summary -->
-     <div class="text-white p-4 text-xl col-span-1 row-span-2">
+    <!-- Summary -->
+    <div class="text-white p-4 text-xl col-span-1 row-span-2">
       {Model.mSummary}
     </div>
   </div>
 </div>
+{/if}
+
 
 
 <style>

diff --git a/Desktop/src/components/SidebarV2.svelte b/Desktop/src/components/SidebarV2.svelte
@@ -39,47 +39,56 @@
 
     let routes = [
         {
+            id: "extend-teams",
             name: "Team",
             iconPath: mdiAccountGroup,
             subRoutes: [  // Subroutes for the Team dropdown
                 {
+                    id: "go-to-teams-view",
                     name: "Team View",
                     route: "#/teamView",
                     iconPath: mdiAccountCheckOutline,
                 },
                 {
+                    id: "go-to-teams-network",
                     name: "Team Network",
                     route: "#/teamNetwork",
                     iconPath: mdiLanPending,
                 },
             ]
         },
         {
+            id: "go-to-visualizer",
             name: "Visualizer",
             route: "#/visualize",
             iconPath: mdiEyeRefresh,
         },
         {
+            id: "go-to-drive-gallery",
             name: "Drive Gallery",
             route: "#/drivegallery",
             iconPath: mdiCar,
         },
         {
+            id: "go-to-pipes",
             name: "Pipes",
             route: "#/svelvet",
             iconPath: mdiPipeDisconnected,
         },
         {
+            id: "go-to-gallery",
             name: "Gallery",
             route: "#/gallery",
             iconPath: mdiViewGallery,
         },
         {
+            id: "go-to-models",
             name: "Models",
             route: "#/models",
             iconPath: mdiCloudPrintOutline,
         },
         {
+             id: "go-to-help",
             name: "Help",
             route: "#/help",
             iconPath: mdiHelpCircle,
@@ -88,11 +97,16 @@
 
     const accountPopupItems = [
         {
+            id: "go-to-account-settings",
             name: "Account settings",
             route: "#/accountsettings",
             iconPath: mdiAccountCog,
         },
-        { name: "Log out", route: "#/", iconPath: mdiLogout },
+        { 
+            id: "go-to-logout",
+            name: "Log out", 
+            route: "#/", 
+            iconPath: mdiLogout },
     ];
 
     function toggleAccountPopup() {
@@ -164,7 +178,7 @@
             {#if route.subRoutes}
                 <!-- svelte-ignore a11y-click-events-have-key-events -->
                 <div class="w-full opacity-50 flex justify-start gap-2 items-center cursor-pointer" on:click={toggleTeamDropdown}>
-                    <Icon path={route.iconPath} />
+                    <Icon path={route.iconPath} id={route.id}/>
                     {#if width >= 150}
                         <span class="ml-2">
                             {route.name}
@@ -173,16 +187,16 @@
                     <Icon path={showTeamDropdown ? mdiChevronUp : mdiChevronDown} />
                 </div>
             {:else}
-            <a class="w-full" href={route.route} on:click={route.subRoutes ? toggleTeamDropdown : undefined}>
+            <a class="w-full" id={route.id} href={route.route} on:click={route.subRoutes ? toggleTeamDropdown : undefined}>
                 <div class="flex justify-start gap-2 items-center">
-                    <Icon path={route.iconPath} />
+                    <Icon path={route.iconPath} id={route.id}/>
                     {#if width >= 150}
                         <span class="ml-2">
                             {route.name}
                         </span>
                     {/if}
                     {#if route.subRoutes}
-                        <Icon path={showTeamDropdown ? mdiChevronUp : mdiChevronDown} />
+                        <Icon path={showTeamDropdown ? mdiChevronUp : mdiChevronDown} id={route.id}/>
                     {/if}
                 </div>
             </a>
@@ -254,25 +268,25 @@ class="sidebarV2 h-full w-auto bg-theme-dark-background text-white flex flex-col
         {#if route.subRoutes}
             <!-- svelte-ignore a11y-click-events-have-key-events -->
             <div class="w-full opacity-70 flex justify-start gap-2 items-center cursor-pointer" on:click={toggleTeamDropdown}>
-                <Icon path={route.iconPath} />
+                <Icon path={route.iconPath} id={route.id}/>
                 {#if width >= 150}
                     <span class="ml-2">
                         {route.name}
                     </span>
                 {/if}
-                <Icon path={showTeamDropdown ? mdiChevronUp : mdiChevronDown} />
+                <Icon path={showTeamDropdown ? mdiChevronUp : mdiChevronDown} id={route.id}/>
             </div>
         {:else}
-        <a class="w-full" href={route.route} on:click={route.subRoutes ? toggleTeamDropdown : undefined}>
+        <a class="w-full" id={route.id} href={route.route} on:click={route.subRoutes ? toggleTeamDropdown : undefined}>
             <div class="flex justify-start gap-2 items-center">
-                <Icon path={route.iconPath} />
+                <Icon path={route.iconPath} id={route.id}/>
                 {#if width >= 150}
                     <span class="ml-2">
                         {route.name}
                     </span>
                 {/if}
                 {#if route.subRoutes}
-                    <Icon path={showTeamDropdown ? mdiChevronUp : mdiChevronDown} />
+                    <Icon path={showTeamDropdown ? mdiChevronUp : mdiChevronDown} id={route.id}/>
                 {/if}
             </div>
         </a>