From cb4c3719f5401dfe0b0efaf04cac806df57262de Mon Sep 17 00:00:00 2001
From: Luc <8822552+luc-github@users.noreply.github.com>
Date: Wed, 31 Jul 2024 20:20:42 +0800
Subject: [PATCH] Fix css

Simplify ID of extra content
Fix page does not show up
---
 src/areas/elementsCache.js                 |  6 +++---
 src/components/Controls/ContainerHelper.js |  2 +-
 src/components/ExtraContent/index.js       | 13 +++++++------
 src/pages/dashboard/index.js               |  4 ++--
 src/style/components/_menu.scss            |  1 +
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/areas/elementsCache.js b/src/areas/elementsCache.js
index ddfbd630..5b653aaa 100644
--- a/src/areas/elementsCache.js
+++ b/src/areas/elementsCache.js
@@ -30,7 +30,7 @@ const ElementsCache = () => {
     const [content, setContent] = useState([])
 
     const extractValues = (entry) => {
-        const result = { id: "extra_content_EXTRAPANEL_" + entry.id };
+        const result = { id: "extra_content_" + entry.id };
         entry.value.forEach(param => {
             result[param.name] = param.value;
         });
@@ -39,7 +39,7 @@ const ElementsCache = () => {
 
     useEffect(() => {
         if (ui.ready && interfaceSettings.current?.settings?.extracontents) {
-            console.log("ElementsCache can now be created")
+            //console.log("ElementsCache can now be created")
             
             const extraContentSettings = interfaceSettings.current.settings.extracontents;
             const extraContentsEntry = extraContentSettings.find(entry => entry.id === 'extracontents');
@@ -47,7 +47,7 @@ const ElementsCache = () => {
             if (extraContentsEntry?.value?.length > 0) {
                 const newContent = extraContentsEntry.value.map(entry => {
                     const item = extractValues(entry)
-                    console.log(item)
+                   // console.log(item)
                     return <ExtraContentItem key={item.id} {...item} />
                 });
                 setContent(newContent);
diff --git a/src/components/Controls/ContainerHelper.js b/src/components/Controls/ContainerHelper.js
index 663eaecf..5e2adc11 100644
--- a/src/components/Controls/ContainerHelper.js
+++ b/src/components/Controls/ContainerHelper.js
@@ -26,7 +26,7 @@ import { eventBus } from "../../hooks/eventBus"
 const ContainerHelper = ({id, active=false}) => {
     
    const  [enabled, setEnabled] = useState(active)
-    console.log("ContainerHelper id", id ,"active", active)
+    //console.log("ContainerHelper id", id ,"active", active)
     useEffect(() => {
         const handleUpdateState = (msg) => {
                 if ('isFullScreen' in msg) {
diff --git a/src/components/ExtraContent/index.js b/src/components/ExtraContent/index.js
index 018ca92f..055b65e4 100644
--- a/src/components/ExtraContent/index.js
+++ b/src/components/ExtraContent/index.js
@@ -39,7 +39,7 @@ const ExtraContent = ({ id, source, refreshtime, label, type, target, icon }) =>
     const extra_content_id = `extra_content_${id}`
     const target_id = `target_${id}`
     const iconsList = { ...iconsTarget, ...iconsFeather }
-   console.log(id)
+    console.log(id)
     const updateContentPosition = () => {
         if (containerRef.current) {
             const { top, left, width, height } = containerRef.current.getBoundingClientRect()
@@ -53,7 +53,7 @@ const ExtraContent = ({ id, source, refreshtime, label, type, target, icon }) =>
     updateContentPosition()
     useEffect(() => {
         if (!elementsCache.has(extra_content_id)) {
-            //console.log("Creating element " + extra_content_id," because it doesn't exist")
+            console.log("Creating element " + extra_content_id," because it doesn't exist")
             elementsCache.create(extra_content_id, { 
                 id, 
                 source, 
@@ -65,7 +65,7 @@ const ExtraContent = ({ id, source, refreshtime, label, type, target, icon }) =>
                 isVisible: true
             })
         } else {
-            //console.log("Updating element " + extra_content_id + " because it already exists")
+            console.log("Updating element " + extra_content_id + " because it already exists")
             elementsCache.updateState(extra_content_id, { isVisible: true})
             updateContentPosition()
         }
@@ -136,7 +136,6 @@ const ExtraContent = ({ id, source, refreshtime, label, type, target, icon }) =>
            
                 <FullScreenButton
                     elementId={extra_content_id}
-                    onclick={handleFullScreen}
                     asButton={true}
                 />
      
@@ -145,8 +144,9 @@ const ExtraContent = ({ id, source, refreshtime, label, type, target, icon }) =>
 
     if (target === "page") {
         console.log("Rendering page element " + extra_content_id)
+        console.log("Page Id " + id)
         return (
-            <div class = "page-container">
+            <div class = "page-container" id={id}>
             <div id={target_id} ref={containerRef} class="page-target-container">
               {/* content should fit this container */}
             </div>
@@ -157,11 +157,12 @@ const ExtraContent = ({ id, source, refreshtime, label, type, target, icon }) =>
 
     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}>
-                    <ContainerHelper id={id} />
+                   
                     <div class="navbar">
                         <span class="navbar-section feather-icon-container">
                             {displayIcon}
diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js
index dd1c9cfc..9a44b758 100644
--- a/src/pages/dashboard/index.js
+++ b/src/pages/dashboard/index.js
@@ -269,7 +269,7 @@ const Dashboard = () => {
                 }, {})
 
                 if (item.target == "panel") {
-                    acc.push(ExtraPanelElement(item, "EXTRAPANEL_" + curr.id))
+                    acc.push(ExtraPanelElement(item,  curr.id))
                 }
                 return acc
             }, [])
@@ -293,7 +293,7 @@ const Dashboard = () => {
                         <span
                             class="dropdown-toggle btn tooltip tooltip-right m-1"
                             tabindex="0"
-                            style="z-index: 10000"
+                            style="z-index: 1000"
                             data-tooltip={T("S187")}
                             onclick={() => {
                                 useUiContextFn.haptic()
diff --git a/src/style/components/_menu.scss b/src/style/components/_menu.scss
index 73734bfb..fa380d4c 100644
--- a/src/style/components/_menu.scss
+++ b/src/style/components/_menu.scss
@@ -41,6 +41,7 @@
 .information-container {
     flex: 0 1 auto;
     z-index: 10000;
+    border: 0px !important;
 }
 
 .menu-item-panel{