From 0b8ade3f6d171481b2b1b1800a42c14099610ed4 Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Thu, 20 Jun 2024 20:02:53 -0700
Subject: [PATCH] add websocket framework

---
 frontend/src/pages/user/workspace/Home.vue | 342 ++++++++-------------
 frontend/src/utils/backend/index.js        |   1 +
 frontend/src/utils/backend/websocket.js    |  14 +
 frontend/src/utils/index.js                |   3 +-
 frontend/vite.config.js                    |   7 +
 5 files changed, 146 insertions(+), 221 deletions(-)
 create mode 100644 frontend/src/utils/backend/websocket.js

diff --git a/frontend/src/pages/user/workspace/Home.vue b/frontend/src/pages/user/workspace/Home.vue
index 6c6de4b..c26a39b 100644
--- a/frontend/src/pages/user/workspace/Home.vue
+++ b/frontend/src/pages/user/workspace/Home.vue
@@ -2,22 +2,13 @@
   <div class="workspace-container">
     <!-- <div class="workspace-header"></div> -->
     <div class="workspace-body">
-      <div
-        class="accordion accordion-list"
-        v-for="(project, project_index) in projects"
-        :key="project_index"
-        :id="project.id"
-      >
+      <div class="accordion accordion-list" v-for="(project, project_index) in projects" :key="project_index"
+        :id="project.id">
         <div class="accordion-item">
           <h2 class="accordion-header">
-            <button
-              class="accordion-button collapsed"
-              type="button"
-              data-bs-toggle="collapse"
-              :data-bs-target="'#collapse-' + project_index"
-              aria-expanded="false"
-              :aria-controls="'collapse-' + project_index"
-            >
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+              :data-bs-target="'#collapse-' + project_index" aria-expanded="false"
+              :aria-controls="'collapse-' + project_index">
               <div class="workspace-item-bar dashed-container">
                 <div class="workspace-item-bar-left">
                   <div class="project-item-title-container">
@@ -44,11 +35,7 @@
               </div>
             </button>
           </h2>
-          <div
-            :id="'collapse-' + project_index"
-            class="accordion-collapse collapse"
-            :data-bs-parent="'#' + project.id"
-          >
+          <div :id="'collapse-' + project_index" class="accordion-collapse collapse" :data-bs-parent="'#' + project.id">
             <div class="accordion-body" v-if="isOpenRequest(project)">
               <div class="float-action-container">
                 <button class="request-action-withdraw" @click="withdrawAndEditRequest(project)">
@@ -56,30 +43,17 @@
                 </button>
               </div>
               <div class="project-request-container">
-                <div
-                  class="project-request-content"
-                  v-html="project.request.content"
-                  @keyup="textAreaAdjust($event)"
-                  contenteditable="false"
-                ></div>
+                <div class="project-request-content" v-html="project.request.content" @keyup="textAreaAdjust($event)"
+                  contenteditable="false"></div>
               </div>
               <div class="project-request-proposals-container">
-                <div
-                  class="accordion"
-                  v-for="(proposal, proposal_index) in project.proposals"
-                  :key="proposal_index"
-                  :id="proposal.id"
-                >
+                <div class="accordion" v-for="(proposal, proposal_index) in project.proposals" :key="proposal_index"
+                  :id="proposal.id">
                   <div class="accordion-item">
                     <h2 class="accordion-header">
-                      <button
-                        class="accordion-button collapsed"
-                        type="button"
-                        data-bs-toggle="collapse"
-                        :data-bs-target="'#collapse-request-proposal' + proposal_index"
-                        aria-expanded="false"
-                        :aria-controls="'collapse-request-proposal' + proposal_index"
-                      >
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                        :data-bs-target="'#collapse-request-proposal' + proposal_index" aria-expanded="false"
+                        :aria-controls="'collapse-request-proposal' + proposal_index">
                         <div class="project-request-proposal-bar-container">
                           <div class="project-request-proposal-quote-container">
                             <label class="project-item-label">Quote</label>
@@ -110,23 +84,14 @@
                         </div>
                       </button>
                     </h2>
-                    <div
-                      :id="'collapse-request-proposal' + proposal_index"
-                      class="accordion-collapse collapse"
-                      :data-bs-parent="'#' + proposal.id"
-                    >
+                    <div :id="'collapse-request-proposal' + proposal_index" class="accordion-collapse collapse"
+                      :data-bs-parent="'#' + proposal.id">
                       <div class="accordion-body">
                         <div class="request-proposal-action-container">
-                          <button
-                            class="request-proposal-action-reject"
-                            @click="rejectProposal(project, proposal_index)"
-                          >
+                          <button class="request-proposal-action-reject" @click="rejectProposal(project, proposal_index)">
                             reject
                           </button>
-                          <button
-                            class="request-proposal-action-accept"
-                            @click="acceptProposal(project, proposal_index)"
-                          >
+                          <button class="request-proposal-action-accept" @click="acceptProposal(project, proposal_index)">
                             accept
                           </button>
                         </div>
@@ -134,12 +99,9 @@
                           <div class="request-proposal-content" v-html="proposal.content" />
                         </div>
                         <div class="request-proposal-payment-plan">
-                          <div
-                            class="request-proposal-payment-plan-stage-container"
-                            v-for="(stage, stage_index) in proposal.payment_plan.stages"
-                            :key="stage_index"
-                            :id="'payment-stage-' + stage_index"
-                          >
+                          <div class="request-proposal-payment-plan-stage-container"
+                            v-for="(stage, stage_index) in proposal.payment_plan.stages" :key="stage_index"
+                            :id="'payment-stage-' + stage_index">
                             <div class="project-request-proposal-stage-payment-container">
                               <label class="project-item-label">Payment</label>
                               <p class="project-item-text">
@@ -172,12 +134,9 @@
                 <div class="request-proposal-content" v-html="project.proposal.content" />
               </div>
               <div class="request-proposal-payment-plan">
-                <div
-                  class="request-proposal-payment-plan-stage-container"
-                  v-for="(stage, stage_index) in project.proposal.payment_plan.stages"
-                  :key="stage_index"
-                  :id="'payment-stage-' + stage_index"
-                >
+                <div class="request-proposal-payment-plan-stage-container"
+                  v-for="(stage, stage_index) in project.proposal.payment_plan.stages" :key="stage_index"
+                  :id="'payment-stage-' + stage_index">
                   <div class="project-request-proposal-stage-payment-container">
                     <label class="project-item-label">Payment</label>
                     <p class="project-item-text">{{ stage.amount }} {{ stage.currency }}</p>
@@ -193,45 +152,27 @@
                 </div>
               </div>
               <div class="project-request-container">
-                <div
-                  class="project-request-content"
-                  v-html="project.request.content"
-                  @keyup="textAreaAdjust($event)"
-                  contenteditable="false"
-                ></div>
+                <div class="project-request-content" v-html="project.request.content" @keyup="textAreaAdjust($event)"
+                  contenteditable="false"></div>
               </div>
             </div>
             <div class="accordion-body" v-if="isOngoingProject(project)">
               <div class="project-invite-collaborator-containter">
-                <button
-                  class="accordion-button collapsed"
-                  type="button"
-                  data-bs-toggle="collapse"
-                  data-bs-target="#collapse-project-invite-collaborator"
-                  aria-expanded="false"
-                  aria-controls="collapse-project-invite-collaborator"
-                >
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                  data-bs-target="#collapse-project-invite-collaborator" aria-expanded="false"
+                  aria-controls="collapse-project-invite-collaborator">
                   <div class="project-invite-collaborator">+ Invite</div>
                 </button>
-                <div
-                  id="collapse-project-invite-collaborator"
-                  class="accordion-collapse collapse"
-                  data-bs-parent="#collapse-project-invite-collaborator"
-                >
+                <div id="collapse-project-invite-collaborator" class="accordion-collapse collapse"
+                  data-bs-parent="#collapse-project-invite-collaborator">
                   <div class="project-invite-collaborator-form-container">
                     <div class="project-invite-collaborator-form">
                       <label class="project-item-label">Input E-mail to invite other</label>
-                      <input
-                        class="project-invite-collaborator-input"
-                        v-model="newInviteCollaborator[project_index]"
-                      />
+                      <input class="project-invite-collaborator-input" v-model="newInviteCollaborator[project_index]" />
                     </div>
-                    <button
-                      class="project-invite-collaborator-action-button"
-                      @click="
-                        inviteCollaborator(project.project_id, newInviteCollaborator[project_index])
-                      "
-                    >
+                    <button class="project-invite-collaborator-action-button" @click="
+                      inviteCollaborator(project.project_id, newInviteCollaborator[project_index])
+                      ">
                       Submit
                     </button>
                   </div>
@@ -240,14 +181,9 @@
               <div class="accordion" id="workspace-project-accordion">
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button
-                      class="accordion-button collapsed"
-                      type="button"
-                      data-bs-toggle="collapse"
-                      data-bs-target="#collapse-project-milestone"
-                      aria-expanded="false"
-                      aria-controls="collapse-project-milestone"
-                    >
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-milestone" aria-expanded="false"
+                      aria-controls="collapse-project-milestone">
                       <div class="project-milestone-bar-container">
                         <div class="project-milestone-bar-progress">
                           <label class="project-item-label">Progress</label>
@@ -281,18 +217,11 @@
                       </div>
                     </button>
                   </h2>
-                  <div
-                    id="collapse-project-milestone"
-                    class="accordion-collapse collapse"
-                    data-bs-parent="#collapse-project-milestone"
-                  >
+                  <div id="collapse-project-milestone" class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-milestone">
                     <div class="project-milestones-containter">
-                      <div
-                        class="project-milestone-container"
-                        v-for="milestone in project.project.progress.milestones"
-                        :key="milestone.index"
-                        :id="'project-milestone-' + milestone.index"
-                      >
+                      <div class="project-milestone-container" v-for="milestone in project.project.progress.milestones"
+                        :key="milestone.index" :id="'project-milestone-' + milestone.index">
                         <div class="project-milestone-index">
                           <label class="project-item-label">Milestone</label>
                           <p class="project-item-text">
@@ -325,21 +254,17 @@
                           </p>
                         </div>
                         <div class="project-milestone-action-button-container">
-                          <button
-                            class="project-milestone-action-button"
+                          <button class="project-milestone-action-button"
                             :disabled="isMilestoneActionButtonDisabled(project.project, milestone)"
                             :hidden="isMilestoneActionButtonHidden(project.project, milestone)"
-                            @click="handleMilestoneAction(project.project, milestone)"
-                          >
+                            @click="handleMilestoneAction(project.project, milestone)">
                             {{ fetchMilestoneActionButtonText(project.project, milestone) }}
                           </button>
                         </div>
                         <div v-if="this.qrCode.index === milestone.index">
                           <img width="100" height="100" :src="this.qrCode.imageUrl" />
-                          <button
-                            class="project-milestone-payment-confirm-button"
-                            @click="handlePaymentAction(project.project, milestone)"
-                          >
+                          <button class="project-milestone-payment-confirm-button"
+                            @click="handlePaymentAction(project.project, milestone)">
                             Mark As Paid
                           </button>
                         </div>
@@ -349,14 +274,8 @@
                 </div>
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button
-                      class="accordion-button collapsed"
-                      type="button"
-                      data-bs-toggle="collapse"
-                      data-bs-target="#collapse-project-code"
-                      aria-expanded="false"
-                      aria-controls="collapse-project-code"
-                    >
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-code" aria-expanded="false" aria-controls="collapse-project-code">
                       <div class="project-code-bar-container">
                         <div class="project-code-git-status">
                           <label class="project-item-label">Code Depot</label>
@@ -379,22 +298,13 @@
                       </div>
                     </button>
                   </h2>
-                  <div
-                    id="collapse-project-code"
-                    class="accordion-collapse collapse"
-                    data-bs-parent="#collapse-project-code"
-                  >
+                  <div id="collapse-project-code" class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-code">
                     <div class="project-code-details-container">
                       <div class="project-code-git-url-container">
-                        <button
-                          v-if="project.project.code.git_url"
-                          class="project-code-copy-git-url"
-                          @click="copyCodeGit(project)"
-                          v-tooltip
-                          title="Copied"
-                          trigger="click"
-                          delay='{"show":"500", "hide":"100"}'
-                        >
+                        <button v-if="project.project.code.git_url" class="project-code-copy-git-url"
+                          @click="copyCodeGit(project)" v-tooltip title="Copied" trigger="click"
+                          delay='{"show":"500", "hide":"100"}'>
                           copy git url
                         </button>
                       </div>
@@ -407,14 +317,9 @@
                 </div>
                 <div class="accordion-item">
                   <h2 class="accordion-header">
-                    <button
-                      class="accordion-button collapsed"
-                      type="button"
-                      data-bs-toggle="collapse"
-                      data-bs-target="#collapse-project-issue"
-                      aria-expanded="false"
-                      aria-controls="collapse-project-issue"
-                    >
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                      data-bs-target="#collapse-project-issue" aria-expanded="false"
+                      aria-controls="collapse-project-issue">
                       <div class="project-issue-bar-container">
                         <div class="project-issue-open-issues">
                           <label class="project-item-label">Open issues</label>
@@ -437,51 +342,34 @@
                       </div>
                     </button>
                   </h2>
-                  <div
-                    id="collapse-project-issue"
-                    class="accordion-collapse collapse"
-                    data-bs-parent="#collapse-project-issue"
-                  >
+                  <div id="collapse-project-issue" class="accordion-collapse collapse"
+                    data-bs-parent="#collapse-project-issue">
                     <!-- <div class="project-issue-statistics-container">
                       <button class="project-issue-manage-button">Manage</button>
                       TO BE IMPLEMENTED.
                     </div> -->
                     <div class="project-new-issue-containter">
-                      <button
-                        class="accordion-button collapsed"
-                        type="button"
-                        data-bs-toggle="collapse"
-                        data-bs-target="#collapse-project-new-issue"
-                        aria-expanded="false"
-                        aria-controls="collapse-project-issue"
-                      >
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                        data-bs-target="#collapse-project-new-issue" aria-expanded="false"
+                        aria-controls="collapse-project-issue">
                         <div class="project-add-new-issue">+ Add Issue</div>
                       </button>
-                      <div
-                        id="collapse-project-new-issue"
-                        class="accordion-collapse collapse"
-                        data-bs-parent="#collapse-project-new-issue"
-                      >
+                      <div id="collapse-project-new-issue" class="accordion-collapse collapse"
+                        data-bs-parent="#collapse-project-new-issue">
                         <div class="project-issue-description-container">
                           <div class="project-issue-description">
                             <label class="project-item-label">New issue description</label>
-                            <textarea
-                              class="project-new-issue-textarea"
-                              type="text"
-                              v-model="newIssueDescriptions[project_index]"
-                            />
+                            <textarea class="project-new-issue-textarea" type="text"
+                              v-model="newIssueDescriptions[project_index]" />
                           </div>
                           <div class="project-new-issue-action-container">
-                            <button
-                              class="project-new-issue-action-button"
-                              @click="
-                                postNewIssue(
-                                  project.request.product_id,
-                                  project.project_id,
-                                  newIssueDescriptions[project_index]
-                                )
-                              "
-                            >
+                            <button class="project-new-issue-action-button" @click="
+                              postNewIssue(
+                                project.request.product_id,
+                                project.project_id,
+                                newIssueDescriptions[project_index]
+                              )
+                              ">
                               Submit
                             </button>
                           </div>
@@ -489,22 +377,14 @@
                       </div>
                     </div>
                     <div class="project-issues-containter">
-                      <div
-                        class="project-issue-container"
-                        v-for="(issue, issue_index) in project.project.issue.open_issues"
-                        :key="issue_index"
-                        :id="'project-issue-' + issue_index"
-                      >
+                      <div class="project-issue-container"
+                        v-for="(issue, issue_index) in project.project.issue.open_issues" :key="issue_index"
+                        :id="'project-issue-' + issue_index">
                         <div class="accordion-item">
                           <h2 class="accordion-header">
-                            <button
-                              class="accordion-button collapsed"
-                              type="button"
-                              data-bs-toggle="collapse"
-                              :data-bs-target="'#collapse-project-issue-details' + issue_index"
-                              aria-expanded="false"
-                              aria-controls="collapse-project-issue-details"
-                            >
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                              :data-bs-target="'#collapse-project-issue-details' + issue_index" aria-expanded="false"
+                              aria-controls="collapse-project-issue-details">
                               <div class="project-issue-title">
                                 <label class="project-item-label">Issue title</label>
                                 <p class="project-item-text">{{ issue.title }}</p>
@@ -523,35 +403,23 @@
                               </div>
                             </button>
                           </h2>
-                          <div
-                            :id="'collapse-project-issue-details' + issue_index"
-                            class="accordion-collapse collapse"
-                            :data-bs-parent="'#collapse-project-issue-details' + issue_index"
-                          >
+                          <div :id="'collapse-project-issue-details' + issue_index" class="accordion-collapse collapse"
+                            :data-bs-parent="'#collapse-project-issue-details' + issue_index">
                             <div class="project-issue-description-container">
                               <label class="project-item-label">Issue description</label>
                               <p class="project-item-text">{{ issue.description }}</p>
                             </div>
                             <div class="project-issue-action-container">
-                              <button
-                                :hidden="!showIssueActionButton(project.project, issue, 'Resolve')"
-                                class="project-issue-action-button"
-                                @click="setProjectIssueStatus(issue.id, 1)"
-                              >
+                              <button :hidden="!showIssueActionButton(project.project, issue, 'Resolve')"
+                                class="project-issue-action-button" @click="setProjectIssueStatus(issue.id, 1)">
                                 Resolve
                               </button>
-                              <button
-                                :hidden="!showIssueActionButton(project.project, issue, 'Confirm')"
-                                class="project-issue-action-button"
-                                @click="setProjectIssueStatus(issue.id, 2)"
-                              >
+                              <button :hidden="!showIssueActionButton(project.project, issue, 'Confirm')"
+                                class="project-issue-action-button" @click="setProjectIssueStatus(issue.id, 2)">
                                 Confirm
                               </button>
-                              <button
-                                :hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
-                                class="project-issue-action-button"
-                                @click="setProjectIssueStatus(issue.id, 0)"
-                              >
+                              <button :hidden="!showIssueActionButton(project.project, issue, 'Reopen')"
+                                class="project-issue-action-button" @click="setProjectIssueStatus(issue.id, 0)">
                                 Reopen
                               </button>
                             </div>
@@ -571,7 +439,13 @@
 </template>
 
 <script>
-import { WorksapceApi, DateUtils, requestIssueUtils, requestHubUtils } from '../../../utils/index'
+import {
+  WorksapceApi,
+  DateUtils,
+  requestIssueUtils,
+  requestHubUtils,
+  WsConnectionFactory
+} from '@/utils/index'
 import {
   projectStatusEnum,
   projectIssueStatusEnum,
@@ -582,12 +456,13 @@ import {
   milestoneStatusEnum,
   convertIntoToMilestoneStatus,
   convertIntoToProjectIssueStatus
-} from '../../../types/index'
+} from '@/types/index'
 export default {
   name: 'Workspace',
   props: {},
   mounted() {
     this.fetchView()
+    //this.connectWebSocket()
   },
   data() {
     return {
@@ -598,7 +473,9 @@ export default {
       qrCode: {
         imageUrl: null,
         index: null
-      }
+      },
+
+      downstream_web_socket: null,
     }
   },
 
@@ -905,7 +782,32 @@ export default {
         default:
           return false
       }
+    },
+    /** web socket. we put them here for test purpose. they need to be moved to an appropriate place**/
+    websocketOnOpen(event) {
+      console.log(event);
+    },
+    websocketOnMessage(event) {
+      console.log(event.data);
+
+    },
+    websocketOnError(event) {
+      console.log(event);
+
+    },
+    websocketOnClose(event) {
+      console.log(event);
+
+    },
+    connectWebSocket() {
+      this.downstream_web_socket = WsConnectionFactory.CreateWebSocket(
+        this.websocketOnOpen,
+        this.websocketOnMessage,
+        this.websocketOnError,
+        this.websocketOnClose
+      )
     }
+
   }
 }
 </script>
diff --git a/frontend/src/utils/backend/index.js b/frontend/src/utils/backend/index.js
index cf5baa1..f20674f 100644
--- a/frontend/src/utils/backend/index.js
+++ b/frontend/src/utils/backend/index.js
@@ -7,3 +7,4 @@ export { MessageHubApi } from './messageHub'
 export { HistoryApi } from './history'
 export { ContentApi } from './content'
 export { LabApi } from './lab'
+export { WsConnectionFactory } from './websocket'
diff --git a/frontend/src/utils/backend/websocket.js b/frontend/src/utils/backend/websocket.js
new file mode 100644
index 0000000..d9c3913
--- /dev/null
+++ b/frontend/src/utils/backend/websocket.js
@@ -0,0 +1,14 @@
+import { userUtils } from '../store/index'
+
+class WsConnectionFactory {
+    static CreateWebSocket(onOpen, onMessage, onError, onClose) {
+        let jwt = userUtils.getJwtToken()
+        this.socket = new WebSocket(`/ws/downstream/downstream_notification?token=${jwt}`)
+        this.socket.onopen = onOpen
+        this.socket.onmessage = onMessage
+        this.socket.onerror = onError
+        this.socket.onclose = onClose
+    }
+}
+
+export { WsConnectionFactory }
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index a6c7d79..329e855 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -7,7 +7,8 @@ export {
   MessageHubApi,
   HistoryApi,
   ContentApi,
-  LabApi
+  LabApi,
+  WsConnectionFactory
 } from './backend/index'
 
 export { userUtils, userProfileUtils, requestIssueUtils, requestHubUtils } from './store/index'
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 3012747..d8f3457 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -11,6 +11,7 @@ function resolve(dir) {
 // https://vitejs.dev/config/
 export default defineConfig(({ command, mode }) => {
   let API_URL = 'http://127.0.0.1:8001'
+  let WEBSOCKET_URL = 'ws://127.0.0.1:8001'
   let PORT = '5173'
 
   if (command === 'serve') {
@@ -18,6 +19,7 @@ export default defineConfig(({ command, mode }) => {
     console.log('loading environment variables from .env and .env.' + mode + ' under ' + process.cwd())
     const env = loadEnv(mode, process.cwd());
     API_URL = `${env.VITE_API_URL ?? 'http://127.0.0.1:8001'}`;
+    WEBSOCKET_URL = `${env.VITE_WEBSOCKET_URL ?? 'ws://127.0.0.1:8001'}`;
     PORT = `${env.VITE_PORT ?? '5173'}`;
   } else {
     // command === 'build'
@@ -58,6 +60,11 @@ export default defineConfig(({ command, mode }) => {
           target: API_URL,
           ws: true,
           changeOrigin: true
+        },
+        '^/ws/': {
+          target: WEBSOCKET_URL,
+          ws: true,
+          changeOrigin: true
         }
       },
       port: PORT,