MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

provison room

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2025-10-06 11:52:38 -04:00
parent ddcc6f0cd2
commit a8c2dd84f1
3 changed files with 81 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/context/SocketIOContext.jsx
+1 -1
View File
@@ -41,7 +41,7 @@ export default function SocketIOContextProvider({children}) {
socket.on(socketOnEvents.receive_message, (data) => { socket.on(socketOnEvents.receive_message, (data) => {
// setSocketMsgReceived(data.message); // setSocketMsgReceived(data.message);
// dispatch(tableReload({type:'CHATMESSAGELIST'})) // dispatches to update chat message sending from owner to worker and vice versa // dispatch(tableReload({type:'CHATMESSAGELIST'})) // dispatches to update chat message sending from owner to worker and vice versa
console.log('DATA', data) console.log('SOCKET RECEIVED DATA *** ', data)
queryClient.refetchQueries({ queryClient.refetchQueries({
queryKey: [...queryKeys.recentAction], queryKey: [...queryKeys.recentAction],
// type: 'active', // type: 'active',
src/component/product/ProductActive.jsx
+10 -2
View File
@@ -1,14 +1,15 @@
import React, { useMemo, useRef, useState } from "react"; import React, {useEffect, useMemo, useRef, useState} from "react";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import getImage from "../../utils/getImage"; import getImage from "../../utils/getImage";
import { useMutation, useQuery } from "@tanstack/react-query"; import { useMutation, useQuery } from "@tanstack/react-query";
import { productRefreshSite, getSettingsData } from "../../services/services"; import { productRefreshSite, getSettingsData } from "../../services/services";
import Settings from "./settingsTab/Settings"; import Settings from "./settingsTab/Settings";
import queryKeys from "../../services/queryKeys"; import queryKeys from "../../services/queryKeys";
import {SocketContextValues} from "../context/SocketIOContext";
export default function ProductActive({productData}){ export default function ProductActive({productData}){
const {joinRoom} = SocketContextValues() // Destructures values from socket context
const iframe = useRef() const iframe = useRef()
const refresh = useMutation({ const refresh = useMutation({
@@ -31,6 +32,13 @@ export default function ProductActive({productData}){
} }
let externalUrl= 'https://'+productData?.internal_url let externalUrl= 'https://'+productData?.internal_url
const productSubUID = productData.subscription_uid;
useEffect(() => {
const provision_room = "PROVISION_"+productSubUID;
console.log("JOINING ROOM ON ACTIVE *** ", provision_room);
joinRoom(provision_room); // provision subscription room
}, [])
return( return(
<> <>
{/*<BreadcrumbComBS title='Active Product Name' paths={['Dashboard', 'Product']} />*/} {/*<BreadcrumbComBS title='Active Product Name' paths={['Dashboard', 'Product']} />*/}
src/component/product/ProductProvision.jsx
+69 -62
View File
@@ -1,35 +1,37 @@
import { useEffect } from "react"; import {useEffect} from "react";
import { useQuery } from "@tanstack/react-query"; import {useQuery} from "@tanstack/react-query";
import queryKeys from "../../services/queryKeys"; import queryKeys from "../../services/queryKeys";
import { productProvision } from "../../services/services"; import {productProvision} from "../../services/services";
import getImage from "../../utils/getImage"; import getImage from "../../utils/getImage";
import { SocketContextValues } from "../context/SocketIOContext"; import {SocketContextValues} from "../context/SocketIOContext";
export default function ProductProvision(props){ export default function ProductProvision(props) {
const {joinRoom} = SocketContextValues() // Destructures values from socket context const {joinRoom} = SocketContextValues() // Destructures values from socket context
const productTitle = props?.productData?.title; const productTitle = props?.productData?.title;
const productDescription = props?.productData?.description; const productDescription = props?.productData?.description;
const productID = props?.productData?.product_id const productID = props?.productData?.product_id
const productUID = props?.productData?.product_uid const productUID = props?.productData?.product_uid
const productSubUID = props?.productData?.product_subscription_uid const productSubUID = props?.productData?.product_subscription_uid
const reqData = { const reqData = {
product_id : productID, product_id: productID,
product_subscription_uid: productSubUID product_subscription_uid: productSubUID
} }
const {data:provision, isFetching, isError, error} = useQuery({ const {data: provision, isFetching, isError, error} = useQuery({
queryKey: queryKeys.myproduct_provision, queryKey: queryKeys.myproduct_provision,
queryFn: () => productProvision(reqData) queryFn: () => productProvision(reqData)
}) })
const provisionData = provision?.data const provisionData = provision?.data
useEffect(()=>{ useEffect(() => {
joinRoom(productSubUID); // provision subscription room const provision_room = "PROVISION_"+productSubUID;
},[]) console.log("JOINING ROOM ON START *** ", provision_room);
joinRoom(provision_room); // provision subscription room
}, [])
return ( return (
<> <>
@@ -42,82 +44,87 @@ export default function ProductProvision(props){
</div> </div>
</> </>
: isError ? : isError ?
<div className="row">
<div className="col-12">
<p className='text-danger'>{error.message}</p>
</div>
</div>
:
<>
<div className="row"> <div className="row">
<div className="col-md-12"> <div className="col-12">
<div className="card card-statistics"> <p className='text-danger'>{error.message}</p>
<div className="card-header"> </div>
</div>
:
<>
<div className="row">
<div className="col-md-12">
<div className="card card-statistics">
<div className="card-header">
<div className="card-heading"> <div className="card-heading">
<h4 className="card-title">Creating - {productTitle} </h4> <h4 className="card-title">Creating - {productTitle} </h4>
</div> </div>
</div> </div>
<div className="card-body"> <div className="card-body">
<div className="progress"> <div className="progress">
<div className="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" <div className="progress-bar progress-bar-striped progress-bar-animated"
aria-valuenow={`${provisionData?.percent_completed}%`} aria-valuemin="0" aria-valuemax="100" style={{width:`${provisionData?.percent_completed}%`}} ></div> role="progressbar"
aria-valuenow={`${provisionData?.percent_completed}%`}
aria-valuemin="0" aria-valuemax="100"
style={{width: `${provisionData?.percent_completed}%`}}></div>
</div> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div className="row">
<div className="row"> <div className="col-md-12">
<div className="col-md-12">
</div>
</div> </div>
</div> <div className="row">
<div className="row"> <div className="col-lg-6">
<div className="col-lg-6">
<div className="card card-statistics"> <div className="card card-statistics">
<div className="card-header"> <div className="card-header">
<div className="card-heading"> <div className="card-heading">
<h4 className="card-title">Progress Information</h4> <h4 className="card-title">Progress Information</h4>
</div>
</div> </div>
</div> <div className="card-body">
<div className="card-body"> <div className="table-responsive">
<div className="table-responsive"> <table className="table table-info mb-0">
<table className="table table-info mb-0"> <thead>
<thead> <tr>
<tr> <th scope="col" style={{width: '10px'}}>#</th>
<th scope="col" style={{width: '10px'}}>#</th> <th scope="col">Action</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{provisionData?.activities?.map(item => (
<tr key={item.id}>
<th scope="row">{item.id}</th>
<td>{item.action}</td>
</tr> </tr>
</thead>
<tbody>
{provisionData?.activities?.map(item => (
<tr key={item.id}>
<th scope="row">{item.id}</th>
<td>{item.action}</td>
</tr>
))} ))}
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div className="col-lg-6"> <div className="col-lg-6">
<div className="card card-statistics "> <div className="card card-statistics ">
<h4 className="card-title" style={{padding:'10px'}}>Started creating your selection</h4> <h4 className="card-title" style={{padding: '10px'}}>Started creating your
<img className="card-img-top" src={getImage('widget/working.jpg')} alt="Card image cap" /> selection</h4>
{/* <div className="card-body"> <img className="card-img-top" src={getImage('widget/working.jpg')}
alt="Card image cap"/>
{/* <div className="card-body">
<div className="" dangerouslySetInnerHTML={{__html: productDescription}}/> <div className="" dangerouslySetInnerHTML={{__html: productDescription}}/>
</div> */} </div> */}
</div> </div>
</div>
</div> </div>
</div> </>
</>
} }
</> </>
) )