simplify refresh, run pre-commit

docs/widgets/services/iframe.md

@@ -2,7 +2,9 @@
 title: iFrame
 Description: Add a custom iFrame Widget
 ---
+
 ### name
+
 **Type:** string <br>
 **Default:** null <br>
 **Required:** Yes <br>
@@ -10,6 +12,7 @@ Description: Add a custom iFrame Widget
 **Example:** "myIframe"
 
 ### src
+
 **Type:** string (URL) <br>
 **Default:** null <br>
 **Required:** Yes <br>
@@ -17,6 +20,7 @@ Description: Add a custom iFrame Widget
 **Example:** "http://example.com"
 
 ### sizes
+
 **Type:** object <br>
 **Default:** {"xs": '60', "sm": "60", "md": "80", "lg": "80", "xl": "80", "2xl": "80"} <br>
 **Required:** No <br>
@@ -24,6 +28,7 @@ Description: Add a custom iFrame Widget
 **Example:** "{"xs": '32', "sm": "12", "md": "44", "lg": "60", "xl": "72", "2xl": "80"}"
 
 ### referrerpolicy
+
 **Type:** string ["no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin-when-cross-origin" | "unsafe-url"] <br>
 **Default:** null <br>
 **Required:** No <br>
@@ -31,6 +36,7 @@ Description: Add a custom iFrame Widget
 **Example:** "no-referrer"
 
 ### allowfullscreen
+
 **Type:** boolean [true | false] <br>
 **Default:** null <br>
 **Required:** No <br>
@@ -38,6 +44,7 @@ Description: Add a custom iFrame Widget
 **Example:** false
 
 ### loading
+
 **Type:** string ["eager" | "lazy"] <br>
 **Default:** null <br>
 **Required:** No <br>
@@ -45,6 +52,7 @@ Description: Add a custom iFrame Widget
 **Example:** "lazy"
 
 ### allowScrolling
+
 **Type:** string ["yes" | "no"] <br>
 **Default:** null <br>
 **Required:** No <br>
@@ -52,6 +60,7 @@ Description: Add a custom iFrame Widget
 **Example:** "no"
 
 ### border
+
 **Type:** number <br>
 **Default:** null <br>
 **Required:** No <br>
@@ -59,6 +68,7 @@ Description: Add a custom iFrame Widget
 **Example:** 2
 
 ### refreshInterval
+
 **Type:** number (in milliseconds) <br>
 **Default:** null <br>
 **Required:** No <br>
@@ -66,6 +76,7 @@ Description: Add a custom iFrame Widget
 **Example:** 2000
 
 ### allowPolicy
+
 **Type:** string <br>
 **Default:** null <br>
 **Required:** No <br>
@@ -77,7 +88,7 @@ widget:
   type: iframe
   name: myIframe
   src: "http://example.com"
-  sizes: {"xs": '60', "sm": "60", "md": "80", "lg": "80", "xl": "80", "2xl": "80"}
+  sizes: { "xs": "60", "sm": "60", "md": "80", "lg": "80", "xl": "80", "2xl": "80" }
   referrerPolicy: "same-origin"
   allowPolicy: ""
   allowFullscreen: "false"
@@ -88,4 +99,3 @@ widget:
   border: 0
   refreshInterval: 2000
 ```
-

src/utils/config/service-helpers.js

@@ -366,14 +366,14 @@ export function cleanServiceGroups(groups) {
           firstDayInWeek,
           view,
           maxEvents,
-          src,
+          src, // iframe widget
           sizes,
           referrerPolicy,
           allowPolicy,
           allowFullscreen,
           loadingStrategy,
           allowScrolling,
-          border
+          border,
         } = cleanedService.widget;
 
         let fieldsList = fields;
@@ -422,15 +422,15 @@ export function cleanServiceGroups(groups) {
           if (podSelector) cleanedService.widget.podSelector = podSelector;
         }
         if (type === "iframe") {
-          if (src) cleanedService.widget.src = src
+          if (src) cleanedService.widget.src = src;
-          if (sizes) cleanedService.widget.sizes = sizes
+          if (sizes) cleanedService.widget.sizes = sizes;
-          if (referrerPolicy) cleanedService.widget.referrerPolicy = referrerPolicy
+          if (referrerPolicy) cleanedService.widget.referrerPolicy = referrerPolicy;
-          if (allowPolicy) cleanedService.widget.allowPolicy = allowPolicy
+          if (allowPolicy) cleanedService.widget.allowPolicy = allowPolicy;
-          if (allowFullscreen) cleanedService.widget.allowFullscreen = allowFullscreen
+          if (allowFullscreen) cleanedService.widget.allowFullscreen = allowFullscreen;
-          if (loadingStrategy) cleanedService.widget.loadingStrategy = loadingStrategy
+          if (loadingStrategy) cleanedService.widget.loadingStrategy = loadingStrategy;
-          if (allowScrolling) cleanedService.widget.allowScrolling = allowScrolling
+          if (allowScrolling) cleanedService.widget.allowScrolling = allowScrolling;
-          if (border) cleanedService.widget.border = border
+          if (border) cleanedService.widget.border = border;
-          if (refreshInterval) cleanedService.widget.refreshInterval = refreshInterval
+          if (refreshInterval) cleanedService.widget.refreshInterval = refreshInterval;
         }
         if (["opnsense", "pfsense"].includes(type)) {
           if (wan) cleanedService.widget.wan = wan;

src/widgets/iframe/component.jsx

@@ -10,27 +10,18 @@ export default function Component({ service }) {
 
   useEffect(() => {
     if (widget?.refreshInterval) {
-      const refreshInterval = setInterval(
+      setInterval(
-        () => {
+        () => setRefreshTimer(refreshTimer + 1),
-          setRefreshTimer(refreshTimer + 1);
+        widget?.refreshInterval < 1000 ? 1000 : widget?.refreshInterval,
-        },
-        widget?.refreshInterval < 1000 ? 1000 : widget?.refreshInterval
       );
-      return () => clearInterval(refreshInterval);
     }
-    return undefined;
   }, [refreshTimer, widget?.refreshInterval]);
 
-  const scrollingDisableStyle =
+  const scrollingDisableStyle = widget?.allowScrolling === "no" ? "pointer-events:none; overflow: hidden" : "";
-    widget?.allowScrolling === "no"
-      ? "pointer-events:none; overflow: hidden"
-      : "";
 
-  const sizeClasses = `h-${widget?.sizes?.xs || 80} sm:h-${
+  const sizeClasses = `h-${widget?.sizes?.xs || 80} sm:h-${widget?.sizes?.sm || 80} md:h-${
-    widget?.sizes?.sm || 80
+    widget?.sizes?.md || 80
-  } md:h-${widget?.sizes?.md || 80} lg:h-${widget?.sizes?.lg || 80} xl:h-${
+  } lg:h-${widget?.sizes?.lg || 80} xl:h-${widget?.sizes?.xl || 80} 2xl:h-${widget?.sizes?.["2xl"] || 80}`;
-    widget?.sizes?.xl || 80
-  } 2xl:h-${widget?.sizes?.["2xl"] || 80}`;
 
   return (
     <Container service={service}>
@@ -59,7 +50,7 @@ function Block({ children }) {
     <div
       className={classNames(
         "bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center text-center p-1",
-        "service-block"
+        "service-block",
       )}
     >
       {children}

src/widgets/iframe/widget.js

@@ -1,4 +1,3 @@
-const widget = {
+const widget = {};
-};
 
 export default widget;

tailwind.config.js

@@ -78,7 +78,7 @@ module.exports = {
     "dark:bg-orange-400",
     {
       pattern: /h-([0-96])/,
-      variants: ["sm","md","lg","xl","2xl"],
+      variants: ["sm", "md", "lg", "xl", "2xl"],
     },
   ],
 };