Skip to content

Commit

Permalink
Sanitify eventsBus
Browse files Browse the repository at this point in the history 
comment  events.off
Add some debug
  • Loading branch information
@luc-github
luc-github committed Aug 2, 2024
1 parent d908554 commit b2e7975
Show file tree
Hide file tree
Showing 6 changed files with 184 additions and 124 deletions.
2 changes: 1 addition & 1 deletion src/areas/elementsCache.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const ElementsCache = () => {
});
return result;
};

console.log("ElementsCache is rendering")
useEffect(() => {
if (ui.ready && interfaceSettings.current?.settings?.extracontents) {
//console.log("ElementsCache can now be created")
Expand Down
5 changes: 3 additions & 2 deletions src/components/Controls/ContainerHelper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ const ContainerHelper = ({id, active=false}) => {

const [enabled, setEnabled] = useState(active)
//console.log("ContainerHelper id", id ,"active", active)
const listenerId = `listener_containerhelper_${id}`;
useEffect(() => {
const handleUpdateState = (msg) => {
if ('isFullScreen' in msg) {
Expand All @@ -45,9 +46,9 @@ const ContainerHelper = ({id, active=false}) => {
}
}
}
eventBus.on("updateState", handleUpdateState)
eventBus.on("updateState", handleUpdateState, listenerId)
return () => {
eventBus.off("updateState", handleUpdateState)
//eventBus.off("updateState", handleUpdateState,listenerId)
}})


Expand Down
14 changes: 9 additions & 5 deletions src/components/ExtraContent/extraContentItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ const ExtraContentItem = ({
const { createNewRequest } = useHttpFn
const element_id = id.replace("extra_content_", type)
const refreshIntervalRef = useRef(null)
console.log(`Rendering ExtraContentItem ${id} at ${Date.now()}`);


const handleContentSuccess = useCallback((result) => {
let blob
Expand Down Expand Up @@ -95,12 +97,13 @@ const ExtraContentItem = ({
}, [loadContent])

useEffect(() => {
const listenerId = `listener_${id}`;
const handleUpdateState = (msg) => {
if (msg.id == id) {
console.log("Matching message for element " + id)
console.log(msg)
console.log(`Received message for ${id} with listener ${listenerId}`, msg);
const element = document.getElementById(id)
if ( 'forceRefresh' in msg && msg.forceRefresh) {
console.log(`Processing forceRefresh for ${id}`);
loadContent()
}
if ('isVisible' in msg) {
Expand All @@ -124,9 +127,10 @@ const ExtraContentItem = ({
}
}
}
eventBus.on("updateState", handleUpdateState)
eventBus.on("updateState", handleUpdateState, listenerId)
return () => {
eventBus.off("updateState", handleUpdateState)
//console.log(`Removing listener ${listenerId} for ${id}`);
//eventBus.off("updateState", handleUpdateState, listenerId)
}
}, [id, loadContent])

Expand Down Expand Up @@ -277,7 +281,7 @@ const ExtraContentItem = ({
)}
</div>
), [type, refreshtime, isPaused, captureImage, togglePause]);

console.log("Rendering :" + "<div id=" + id+ " class='extra-content-container'>")
return (
<div id={id} class="extra-content-container">
<ContainerHelper id={id} />
Expand Down
206 changes: 115 additions & 91 deletions src/components/ExtraContent/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,143 +31,167 @@ import { T } from "../Translations"
import { RefreshCcw } from "preact-feather"
import { iconsFeather } from "../Images"
import { iconsTarget } from "../../targets"
import { useUiContextFn } from "../../contexts"
import { useUiContextFn, useUiContext } from "../../contexts"

const ExtraContent = ({ id, source, refreshtime, label, type, target, icon }) => {

const [isFullScreen, setIsFullScreen] = useState(false)
const { panels } = useUiContext()
const extra_content_id = `extra_content_${id}`
const target_id = `target_${id}`
const iconsList = { ...iconsTarget, ...iconsFeather }
console.log("Extra Content " + id)

const updateContentPosition = () => {
if (!useUiContextFn.panels.isVisible(id)) return
console.log("Updating position for element " + extra_content_id, "in target", target_id, " of panel ", id)
const container = document.getElementById(target_id)
if (container) {
const { top, left, width, height } = container.getBoundingClientRect()
console.log("New Position for element " + extra_content_id + ":", top, left, width, height)
eventBus.emit('updateState', {id: extra_content_id, position: {top, left, width, height}, isVisible: true, from: "extraContent(position)"})
eventBus.emit('updateState', { id: extra_content_id, position: { top, left, width, height }, isVisible: true, from: "extraContent(position)" })
} else {
console.log("Element " + target_id + " doesn't exist")
}
}


const handleScrollAndResize = () => requestAnimationFrame(updateContentPosition)
useEffect(() => {
console.log("Updating element " + extra_content_id + " because visible list changed")
if (useUiContextFn.panels.isVisible(id)) {
const main = document.getElementById("main")
if (main) {
main.removeEventListener('scroll', handleScrollAndResize)
main.removeEventListener('resize', handleScrollAndResize)
}
window.removeEventListener('resize', handleScrollAndResize)
if (main) {
main.addEventListener('scroll', handleScrollAndResize)
main.addEventListener('resize', handleScrollAndResize)
}
window.addEventListener('resize', handleScrollAndResize)

updateContentPosition()
}
}, [panels.visibles])

useEffect(() => {
console.log("Mount element " + id)
if (!elementsCache.has(extra_content_id)) {
console.error("Error display element " + extra_content_id," because it doesn't exist")
console.error("Error display element " + extra_content_id, " because it doesn't exist")
} else {
console.log("Updating element " + extra_content_id + " because it already exists")
updateContentPosition()
}

const handleScrollAndResize = () => requestAnimationFrame(updateContentPosition)

const main = document.getElementById("main")
if (main) {
const main = document.getElementById("main")
if (main) {
main.addEventListener('scroll', handleScrollAndResize)
main.addEventListener('resize', handleScrollAndResize)
}
window.addEventListener('resize', handleScrollAndResize)
}
window.addEventListener('resize', handleScrollAndResize)


return () => {
const main = document.getElementById("main")
if (main) {
main.removeEventListener('scroll', handleScrollAndResize)
main.removeEventListener('resize', handleScrollAndResize)
}
}
window.removeEventListener('resize', handleScrollAndResize)
console.log("Hiding element " + id)
eventBus.emit('updateState', {id: extra_content_id, isVisible: false, from: "extraContent(return)"})
eventBus.emit('updateState', { id: extra_content_id, isVisible: false, from: "extraContent(return)" })
}
}, [])


const handleRefresh = () => {
useUiContextFn.haptic()
//console.log("Refreshing element " + extra_content_id)
eventBus.emit('updateState', {id: extra_content_id, forceRefresh: true, from: "extraContent(refresh)"})
}

const handleRefresh = () => {
useUiContextFn.haptic()
console.log("Refreshing element " + extra_content_id)
//eventBus.list()
eventBus.emit('updateState', { id: extra_content_id, isVisible: true, forceRefresh: true, from: "extraContent(refresh)-" + Date.now() })
updateContentPosition()
}


const PanelRenderControls = () => (
<span class="full-height">

<ButtonImg
xs
m1
nomin="yes"
icon={<RefreshCcw size="0.8rem" />}
onclick={handleRefresh}
/>
<FullScreenButton
elementId={extra_content_id}
/>
<CloseButton
elementId={id}
hideOnFullScreen={true}
/>


</span>
)

const PageRenderControls = () => (
<div class="m-2 image-button-bar">
<ButtonImg
m1
nomin="yes"
icon={<RefreshCcw size="0.8rem" />}
onclick={handleRefresh}
/>

<FullScreenButton
elementId={extra_content_id}
asButton={true}
/>

const PanelRenderControls = () => (
<span class="full-height">

<ButtonImg
xs
m1
nomin="yes"
icon={<RefreshCcw size="0.8rem" />}
onclick={handleRefresh}
/>
<FullScreenButton
elementId={extra_content_id}
/>
<CloseButton
elementId={id}
hideOnFullScreen={true}
/>


</span>
)

const PageRenderControls = () => (
<div class="m-2 image-button-bar">
<ButtonImg
m1
nomin="yes"
icon={<RefreshCcw size="0.8rem" />}
onclick={handleRefresh}
/>

<FullScreenButton
elementId={extra_content_id}
asButton={true}
/>

</div>
)

if (target === "page") {
//console.log("Rendering page element " + extra_content_id)
//console.log("Page Id " + id)
return (
<div class="page-container" id={id}>
<div id={target_id} class="page-target-container">
{/* content should fit this container */}
</div>
<PageRenderControls />
</div>
)
}

if (target === "page") {
//console.log("Rendering page element " + extra_content_id)
//console.log("Page Id " + id)
return (
<div class = "page-container" id={id}>
<div id={target_id} class="page-target-container">
{/* content should fit this container */}
</div>
<PageRenderControls/>
if (target === "panel") {
// console.log("Rendering panel element " + extra_content_id)
//console.log("Panel Id " + id)
const displayIcon = iconsList[icon] || ""
return (
<Fragment>
<div class="panel panel-dashboard" id={id}>

<div class="navbar">
<span class="navbar-section feather-icon-container">
{displayIcon}
<strong class="text-ellipsis">{T(label)}</strong>
</span>
<span class="navbar-section">
{PanelRenderControls()}
</span>
</div>
<div class="panel-body panel-body-dashboard no-margin-no-padding panel-target-container" id={target_id}>
{/* content should fit this container */}
</div>
</div>
)
}

if (target === "panel") {
// console.log("Rendering panel element " + extra_content_id)
//console.log("Panel Id " + id)
const displayIcon = iconsList[icon] || ""
return (
<Fragment>
<div class="panel panel-dashboard" id={id}>

<div class="navbar">
<span class="navbar-section feather-icon-container">
{displayIcon}
<strong class="text-ellipsis">{T(label)}</strong>
</span>
<span class="navbar-section">
{PanelRenderControls()}
</span>
</div>
<div class="panel-body panel-body-dashboard no-margin-no-padding panel-target-container" id={target_id}>
{/* content should fit this container */}
</div>
</div>

</Fragment>
)
}
</Fragment>
)
}
}

export { ExtraContent, ExtraContentItem }
7 changes: 4 additions & 3 deletions src/contexts/UiContext.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,10 @@ const UiContextProvider = ({ children }) => {
notificationsRef.current = notifications

const removeFromVisibles = (id) => {
setVisiblePanelsList(
visiblePanelsList.filter((element) => element.id != id)
)
const newlist = visiblePanelsList.filter((element) => element.id != id)
console.log("Removing element " + id + " from visible panels list")
console.log(visiblePanelsList)
setVisiblePanelsList(newlist)
}

const addToVisibles = (id, fixed) => {
Expand Down
Loading

0 comments on commit b2e7975

Please sign in to comment.