workspace and help doc

shubhvjain · Oct 16, 2024 · 1bf209f · 1bf209f
1 parent 7705e5a
commit 1bf209f
Show file tree

Hide file tree

Showing 6 changed files with 409 additions and 0 deletions.
diff --git a/src/lib/WorkSpace.stories.svelte b/src/lib/WorkSpace.stories.svelte
@@ -0,0 +1,17 @@
+<script context="module">
+  import {Story} from '@storybook/addon-svelte-csf'
+  import WorkSpace from './WorkSpace.svelte';
+  export const meta = {
+    title : "Workspace",
+    component : WorkSpace
+  }
+</script>
+
+<script>
+
+</script>
+
+<Story name="Initial">
+  <WorkSpace></WorkSpace>
+</Story>
+
diff --git a/src/lib/WorkSpace.svelte b/src/lib/WorkSpace.svelte
@@ -0,0 +1,198 @@
+<script>
+  import { onMount } from "svelte";
+  import HelpDoc from "./helppage/HelpDoc.svelte";
+
+  // This will hold our array of opened pages/components
+  let pages = [];
+
+  // Search term input
+  let searchTerm = '';
+
+  // Method to add a new page
+  function addPage(pageType, criteria={}, size = 'medium') {
+    const singlePageTypes = ["dashboard"]
+    const existingPage = pages.find(page => page.pageType === pageType);
+    
+    if (existingPage) {
+      existingPage.isMinimized = false;
+    } else {
+      pages = [...pages, { id: Date.now(), pageType, criteria, title: `Help page`, size }];
+    }
+    
+  }
+
+  const searchPage = (text)=>{
+    const [firstPart, ...rest] = text.split('/')
+    if(firstPart=="help"){
+      addPage("helpPage",{key:rest.join("")})
+    }
+
+
+
+    //addPage("Sample "+Math.round(Math.random()*1000))
+    searchTerm = '';
+  }
+
+  // Method to close a page
+  function closePage(pageId) {
+    pages = pages.filter(page => page.id !== pageId);
+  }
+
+  // Method to minimize a page
+  function toggleMinimize(page) {
+    page.isMinimized = !page.isMinimized;
+  }
+
+  function changePageSize(page, newSize) {
+    page.size = newSize;  // Update the size property
+  }
+
+  onMount(()=>{
+    if(pages.length==0){
+      // new workspace, open the dash board automatically 
+
+    }
+  })
+</script>
+
+<style>
+  .workspace {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  html, body, .workspace {
+  height: 97vh;
+  margin: 0;
+}
+
+  
+  .search-box {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .pages-container {
+    height: 97vh;
+  display: flex;
+  gap: 1rem;
+  overflow-x: auto; /* Allow horizontal scrolling */
+  /* padding: 0.25rem; */
+  /* box-sizing: border-box; */
+  /* border: 1px solid #ddd; */
+  /* background-color: #f0f0f0; */
+}
+
+.page {
+  flex-shrink: 0; /* Prevent pages from shrinking */
+  min-height: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  /* background-color: #fff; */
+  /* padding: 1rem; */
+   border: 0px solid #ddd; 
+  position: relative;
+  margin-right: -14px;
+}
+.card
+{
+  height: 97vh;
+  border-radius: 0;
+  padding: 0px;
+  margin: 0px;
+}
+
+  .page.minimized {
+    padding: 1rem;
+    height: 50px;
+  }
+
+  .close-btn, .minimize-btn {
+    position: absolute;
+    top: 5px;
+  }
+
+  .close-btn {
+    right: 5px;
+  }
+
+  .minimize-btn {
+    right: 25px;
+  }
+
+  .page-title {
+    font-weight: bold;
+  }
+  /* Size classes */
+.page.small {
+  width: 25%;
+}
+
+.page.medium {
+  width: 50%;
+}
+
+.page.large {
+  width: 75%;
+}
+.page.full {
+  width: 98%; /* Take up the full width of the container */
+}
+
+</style>
+
+<div class="workspace">
+  <!-- Search Box -->
+  <div class="search-box">
+
+    <div class="input-group">
+      <input type="text" class="form-control" bind:value={searchTerm} placeholder="Search or open new page..." aria-label="Search term">
+      <button on:click={() => searchPage(searchTerm)} class="btn btn-outline-secondary" type="button">Search</button>
+      <button  class="btn btn-outline-secondary" type="button">Button</button>
+    </div>
+
+    <!-- <input type="text" class="form-control" bind:value={searchTerm} placeholder="Search or open new page..." style="flex-grow: 1;" />
+    <button >Open Page</button> -->
+  </div>
+
+  <!-- Pages Container -->
+  <div class="pages-container">
+    {#each pages as page}
+    <div class="page {page.isMinimized ? 'minimized' : ''} {page.size}">
+      <div class="card">
+
+        <div class="card-header d-flex justify-content-between align-items-center">
+          <!-- Page title on the left -->
+          <span class="page-title">{page.title}</span>
+
+          <!-- Dropdown and Close button on the right -->
+          <div class="d-flex align-items-center">
+            <!-- Size Dropdown -->
+            <select class="form-select form-select-sm me-2" style="width: auto;" on:change={(e) => changePageSize(page, e.target.value)} bind:value={page.size}>
+              <option value="small">25%</option>
+              <option value="medium">50%</option>
+              <option value="large">75%</option>
+              <option value="full">100%</option>
+            </select>
+
+            <!-- Close Button -->
+            <button class="btn btn-sm btn-danger" on:click={() => closePage(page.id)}><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
+              <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+            </svg></button>
+          </div>
+        </div>
+        <div class="card-body">
+          {#if page.pageType == "helpPage"}
+            <HelpDoc key={page.criteria.key} ></HelpDoc>
+          {/if}
+        </div>
+      </div>
+
+
+
+    </div>
+  {/each}
+  </div>
+</div>
diff --git a/src/lib/helppage/HelpDoc.stories.svelte b/src/lib/helppage/HelpDoc.stories.svelte
@@ -0,0 +1,17 @@
+<script context="module">
+  import {Story} from '@storybook/addon-svelte-csf'
+  import HelpDoc from './HelpDoc.svelte';
+  export const meta = {
+    title : "Help doc",
+    component : HelpDoc
+  }
+</script>
+
+<script>
+
+</script>
+
+<Story name="Initial">
+  <HelpDoc key="list"></HelpDoc>
+</Story>
+
diff --git a/src/lib/helppage/HelpDoc.svelte b/src/lib/helppage/HelpDoc.svelte
@@ -0,0 +1,80 @@
+<script>
+  import { onMount } from 'svelte';
+
+  export let key = ''; // The title of the document passed as a prop
+  export let tags = [];
+
+
+  const help_docs = {
+    "list":{
+      title : "List of all help topics",
+      tags:[],
+      doc:``
+    },
+    "search":{
+      title : "Search commands for workspace",
+      tags : [],
+      doc : `The search box in the workspace can be used to load records from the database in many ways. This page shows the list of all commands and how to use them. `
+    }
+
+  }
+
+
+  let doc = {title:"",doc:"",tags:[]};
+  let docFound = false;
+
+  // Function to fetch the doc content based on the title
+  function loadDoc(doc_key) {
+    if(help_docs[doc_key]){
+      docFound = true
+      doc = help_docs[doc_key]
+    }else{
+      docFound = false
+    }
+  }
+
+  // Load the document when the component is mounted
+  onMount(() => {
+    loadDoc(key);
+  });
+
+  $: if (key){
+    loadDoc(key)
+  }
+  
+</script>
+
+<!-- Template: Render the document or a "not found" message -->
+<div class="container mt-4">
+  {#if docFound}
+
+    <div class="card1">
+
+      <div class="card-body1">
+        <h3>{doc.title}</h3>
+        {@html doc.doc} <!-- Render the HTML content safely -->
+
+        {#if key == "list" }
+        <ul>
+          {#each Object.keys(help_docs) as page}          
+          <li>
+             <button type="button" class="btn btn-link" on:click={()=>{key=page}}>{page}</button>  : {help_docs[page]['title']}
+          </li>
+          {/each} 
+        </ul>
+        {/if}
+        {#if key != "list" }
+        <br><br>
+         <button type="button" class="btn btn-link" on:click={()=>{key="list"}}>Help home</button>
+        {/if}
+
+
+
+      </div>
+    </div>
+  {:else}
+  <div class="alert alert-danger" role="alert">
+    Document not found!
+  </div>
+  {/if}
+</div>
diff --git a/src/lib/learningbox/LearnBoard.svelte b/src/lib/learningbox/LearnBoard.svelte
@@ -0,0 +1,80 @@
+<div class="container px-4 py-5" id="featured-3">
+  <h2 class="pb-2 border-bottom">Welcome to the learning dashboard</h2>
+  <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
+    <div class="feature col">
+      <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-secondary bg-gradient fs-2 mb-3">
+        <!-- <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-plus-circle-dotted" viewBox="0 0 16 16">
+          <path d="M8 0q-.264 0-.523.017l.064.998a7 7 0 0 1 .918 0l.064-.998A8 8 0 0 0 8 0M6.44.152q-.52.104-1.012.27l.321.948q.43-.147.884-.237L6.44.153zm4.132.271a8 8 0 0 0-1.011-.27l-.194.98q.453.09.884.237zm1.873.925a8 8 0 0 0-.906-.524l-.443.896q.413.205.793.459zM4.46.824q-.471.233-.905.524l.556.83a7 7 0 0 1 .793-.458zM2.725 1.985q-.394.346-.74.74l.752.66q.303-.345.648-.648zm11.29.74a8 8 0 0 0-.74-.74l-.66.752q.346.303.648.648zm1.161 1.735a8 8 0 0 0-.524-.905l-.83.556q.254.38.458.793l.896-.443zM1.348 3.555q-.292.433-.524.906l.896.443q.205-.413.459-.793zM.423 5.428a8 8 0 0 0-.27 1.011l.98.194q.09-.453.237-.884zM15.848 6.44a8 8 0 0 0-.27-1.012l-.948.321q.147.43.237.884zM.017 7.477a8 8 0 0 0 0 1.046l.998-.064a7 7 0 0 1 0-.918zM16 8a8 8 0 0 0-.017-.523l-.998.064a7 7 0 0 1 0 .918l.998.064A8 8 0 0 0 16 8M.152 9.56q.104.52.27 1.012l.948-.321a7 7 0 0 1-.237-.884l-.98.194zm15.425 1.012q.168-.493.27-1.011l-.98-.194q-.09.453-.237.884zM.824 11.54a8 8 0 0 0 .524.905l.83-.556a7 7 0 0 1-.458-.793zm13.828.905q.292-.434.524-.906l-.896-.443q-.205.413-.459.793zm-12.667.83q.346.394.74.74l.66-.752a7 7 0 0 1-.648-.648zm11.29.74q.394-.346.74-.74l-.752-.66q-.302.346-.648.648zm-1.735 1.161q.471-.233.905-.524l-.556-.83a7 7 0 0 1-.793.458zm-7.985-.524q.434.292.906.524l.443-.896a7 7 0 0 1-.793-.459zm1.873.925q.493.168 1.011.27l.194-.98a7 7 0 0 1-.884-.237zm4.132.271a8 8 0 0 0 1.012-.27l-.321-.948a7 7 0 0 1-.884.237l.194.98zm-2.083.135a8 8 0 0 0 1.046 0l-.064-.998a7 7 0 0 1-.918 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z"/>
+        </svg> -->
+      </div>
+      <h4 class="fs-2 text-body-emphasis">New</h4>
+      <button type="button" class="btn btn-lg btn-link ">  
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-richtext-fill" viewBox="0 0 16 16">
+          <path d="M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M7 4.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m-.861 1.542 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V7.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V7s1.54-1.274 1.639-1.208M5 9h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1m0 2h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1"/>
+        </svg>
+        Page  
+      </button>
+      <button type="button" class="btn btn-lg btn-link">  
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
+          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247m2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
+        </svg>
+        Question  
+      </button>
+      <br>
+      <button type="button" class="btn btn-lg btn-link">  
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-word-fill" viewBox="0 0 16 16">
+          <path d="M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M5.485 4.879l1.036 4.144.997-3.655a.5.5 0 0 1 .964 0l.997 3.655 1.036-4.144a.5.5 0 0 1 .97.242l-1.5 6a.5.5 0 0 1-.967.01L8 7.402l-1.018 3.73a.5.5 0 0 1-.967-.01l-1.5-6a.5.5 0 1 1 .97-.242z"/>
+        </svg>
+        Word  
+      </button>
+      <button type="button" class="btn btn-lg btn-link">  
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-blockquote-right" viewBox="0 0 16 16">
+          <path d="M2.5 3a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1zm10.113-5.373a7 7 0 0 0-.445-.275l.21-.352q.183.111.452.287.27.176.51.428.234.246.398.562.164.31.164.692 0 .54-.216.873-.217.328-.721.328-.322 0-.504-.211a.7.7 0 0 1-.188-.463q0-.345.211-.521.205-.182.569-.182h.281a1.7 1.7 0 0 0-.123-.498 1.4 1.4 0 0 0-.252-.37 2 2 0 0 0-.346-.298m-2.168 0A7 7 0 0 0 10 6.352L10.21 6q.183.111.452.287.27.176.51.428.234.246.398.562.164.31.164.692 0 .54-.216.873-.217.328-.721.328-.322 0-.504-.211a.7.7 0 0 1-.188-.463q0-.345.211-.521.206-.182.569-.182h.281a1.8 1.8 0 0 0-.117-.492 1.4 1.4 0 0 0-.258-.375 2 2 0 0 0-.346-.3z"/>
+        </svg>
+        Phrase  
+      </button>
+      <br>
+      <button type="button" class="btn btn-lg btn-link">  
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
+          <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z"/>
+          <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z"/>
+        </svg>
+        Reference  
+      </button>
+    </div>
+    <div class="feature col">
+      <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
+        <!-- <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"></use></svg> -->
+      </div>
+      <h4 class="fs-2 text-body-emphasis">Actions</h4>
+      <button type="button" class="btn btn-lg btn-link">  
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-diagram-3-fill" viewBox="0 0 16 16">
+          <path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5zm-6 8A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5zm6 0A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5zm6 0a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5z"/>
+        </svg>
+        Explore subject tree  
+      </button>
+      <br>
+      <button type="button" class="btn btn-lg btn-link">  
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-checklist" viewBox="0 0 16 16">
+          <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2z"/>
+          <path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0M7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0"/>
+        </svg>
+        Practice Questions 
+      </button>
+
+      <button type="button" class="btn btn-lg btn-link">  
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-square-fill" viewBox="0 0 16 16">
+          <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm10.03 4.97a.75.75 0 0 1 .011 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.75.75 0 0 1 1.08-.022z"/>
+        </svg>
+        Review Questions 
+      </button>
+      <br>
+      <button type="button" class="btn btn-lg btn-link">  
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-ruled-fill" viewBox="0 0 16 16">
+          <path d="M12 0H4a2 2 0 0 0-2 2v4h12V2a2 2 0 0 0-2-2m2 7H6v2h8zm0 3H6v2h8zm0 3H6v3h6a2 2 0 0 0 2-2zm-9 3v-3H2v1a2 2 0 0 0 2 2zm-3-4h3v-2H2zm0-3h3V7H2z"/>
+        </svg>
+        Process Questions Queue 
+      </button>
+    </div>
+  </div>
+</div>