freeleaps_product/freeleaps_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add websocket framework

Browse Source
This commit is contained in:
Zhigang Wang 2024-06-20 20:02:53 -07:00
parent e3806926d2
commit 0b8ade3f6d
5 changed files with 146 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

342
frontend/src/pages/user/workspace/Home.vue
View File

@ -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>

1
frontend/src/utils/backend/index.js
View File

@ -7,3 +7,4 @@ export { MessageHubApi } from './messageHub'
export { HistoryApi } from './history'
export { ContentApi } from './content'
export { LabApi } from './lab'
export { WsConnectionFactory } from './websocket'

14
frontend/src/utils/backend/websocket.js Normal file
View File

@ -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 }

3
frontend/src/utils/index.js
View File

@ -7,7 +7,8 @@ export {
MessageHubApi,
HistoryApi,
ContentApi,
LabApi
LabApi,
WsConnectionFactory
} from './backend/index'
export { userUtils, userProfileUtils, requestIssueUtils, requestHubUtils } from './store/index'

7
frontend/vite.config.js
View File

@ -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,