Various fixes

components/ProductionByCountry.tsx

@@ -2,6 +2,8 @@ import { CommonProps } from "utils/common.ts";
 import { countries } from "config/countries.ts";
 import { DBResultSet, ExchangeRateResult } from "../backend/db/index.ts";
 import { applyExchangeRateSingle, processPrice } from "utils/price.ts";
+import DisplayAd from "components/ads/DisplayAd.tsx";
+import FixedAd from "components/ads/FixedAd.tsx";
 
 interface ProductionByCountryProps extends CommonProps {
   cols: number;
@@ -59,26 +61,29 @@ export default function ProductionByCountry(props: ProductionByCountryProps) {
         </td>
       </tr>
     ));
-    if (country.areas && country.areas.length > 1) for(const area of country.areas) {
-      const 
-        res = GenLoadRow(area.id),
-        resArea = GetPriceRowArea(area.name,country.interval);
-      countryElms.push((
-        <tr class="pl-20 font-size-14 bg-very-dark">
-          <td><a class="hyperlink text-white" href={"/"+country.id+"/"+area.name}>{area.name} - {area.long}</a></td>
-          <td>{processPrice(applyExchangeRateSingle(resArea as number,props.er,props.currency),props)}</td>
-          <td>{res?.generation_total}</td>
-          <td>{res?.load_total}</td>
-          <td><span class={"text-"+ ((res?.net_generation && res.net_generation < 0) ? "danger" : "success")}>{res?.net_generation}</span></td>
-          <td>
-            { res?.primary_psr_group && (
-              <>
-                <span data-t-key={"common.generation.psr_"+res?.primary_psr_group+"_0"}></span><span> ({Math.round((res?.primary_psr_group_generation as number)/(res?.generation_total as number)*100)}%)</span>
-              </>
-            )}
-          </td>            
-        </tr>
-      ));
+    if (country.areas && country.areas.length > 1) {
+      for(const area of country.areas) {
+        const 
+          res = GenLoadRow(area.id),
+          resArea = GetPriceRowArea(area.name,country.interval);
+        countryElms.push((
+          <tr class="pl-20 font-size-14 bg-very-dark">
+            <td><a class="hyperlink text-white" href={"/"+country.id+"/"+area.name}>{area.name} - {area.long}</a></td>
+            <td>{processPrice(applyExchangeRateSingle(resArea as number,props.er,props.currency),props)}</td>
+            <td>{res?.generation_total}</td>
+            <td>{res?.load_total}</td>
+            <td><span class={"text-"+ ((res?.net_generation && res.net_generation < 0) ? "danger" : "success")}>{res?.net_generation}</span></td>
+            <td>
+              { res?.primary_psr_group && (
+                <>
+                  <span data-t-key={"common.generation.psr_"+res?.primary_psr_group+"_0"}></span><span> ({Math.round((res?.primary_psr_group_generation as number)/(res?.generation_total as number)*100)}%)</span>
+                </>
+              )}
+            </td>            
+          </tr>
+        ));
+      }
+      countryElms.push(<tr><td colSpan={6} class={"text-center display-height"}><FixedAd {...props}></FixedAd></td></tr>)
     }
   }
 

components/ads/DisplayAd.tsx

@@ -0,0 +1,25 @@
+import { CommonProps } from "utils/common.ts";
+import { useEffect } from "preact/hooks";
+
+// deno-lint-ignore no-empty-interface
+interface DisplayAdProps extends CommonProps {
+
+}
+
+export default function DisplayAd(props: DisplayAdProps) {
+
+  useEffect(() => {
+    // deno-lint-ignore no-explicit-any
+    const adsbygoogle = (window as unknown as any).adsbygoogle || [];
+    adsbygoogle.push({});
+  });
+
+  return props.adsense && (
+    <ins class="adsbygoogle"
+        style="display:block"
+        data-ad-client="ca-pub-9224018205432249"
+        data-ad-slot="7417217449"
+        data-ad-format="auto"
+        data-full-width-responsive="true"></ins>
+  );
+}

components/ads/FixedAd.tsx

@@ -0,0 +1,23 @@
+import { CommonProps } from "utils/common.ts";
+import { useEffect } from "preact/hooks";
+
+// deno-lint-ignore no-empty-interface
+interface FixedAdProps extends CommonProps {
+
+}
+
+export default function FixedAd(props: FixedAdProps) {
+
+  useEffect(() => {
+    // deno-lint-ignore no-explicit-any
+    const adsbygoogle = (window as unknown as any).adsbygoogle || [];
+    adsbygoogle.push({});
+  });
+
+  return props.adsense && (
+    <ins class="adsbygoogle"
+        style="display:inline-block;width:728px;height:90px"
+        data-ad-client="ca-pub-9224018205432249"
+        data-ad-slot="8951211842"></ins>
+  );
+}

components/ads/MultiPlexAd.tsx

@@ -0,0 +1,29 @@
+import { CommonProps } from "utils/common.ts";
+import { useEffect } from "preact/hooks";
+
+interface MultiPlexAdProps extends CommonProps {
+  cols: number;
+}
+
+export default function MultiPlexAd(props: MultiPlexAdProps) {
+
+  useEffect(() => {
+    // deno-lint-ignore no-explicit-any
+    const adsbygoogle = (window as unknown as any).adsbygoogle || [];
+    adsbygoogle.push({});
+  });
+
+  return props.adsense && (
+    <div class={`col-lg-${props.cols} m-0 p-0`}>
+      <div class="mw-full m-0 p-0 mr-20 mt-20">
+        <div class="card p-0 m-0 text-center">
+          <ins class="adsbygoogle"
+              style="display:block"
+              data-ad-format="autorelaxed"
+              data-ad-client="ca-pub-9224018205432249"
+              data-ad-slot="9853677086"></ins>
+        </div>
+      </div>
+    </div>
+  );
+}

islands/AreaIsland.tsx

@@ -21,6 +21,7 @@ import SingleAreaOverview from "components/partials/SingleAreaOverview.tsx";
 import { AreaPageProps } from "routes/[country]/[area].tsx";
 import ProductionDetailsTodayChart from "components/charts/ProductionDetailsTodayChart.tsx";
 import OutageOverview from "components/partials/OutageOverview.tsx";
+import MultiPlexAd from "components/ads/MultiPlexAd.tsx";
 
 export default function AreaIsland({ data }: PageProps<AreaPageProps>) {
   const [currency, setCurrency] = useState(() => preferences.currency(data.lang));
@@ -55,7 +56,6 @@ export default function AreaIsland({ data }: PageProps<AreaPageProps>) {
         window?.location?.reload();
       }
     });
-
     return () => {
       _reloadJob.stop();
     }
@@ -105,6 +105,9 @@ export default function AreaIsland({ data }: PageProps<AreaPageProps>) {
                 {...data}
               ></ProductionOverview>
             </div>
+            <div class="row">
+              <MultiPlexAd cols={12} {...commonprops} {...data}></MultiPlexAd>
+            </div>
             <div class="row">
               <ProductionDetailsTodayChart
                 cols={6}

islands/CountryIsland.tsx

@@ -11,6 +11,7 @@ import { preferences } from "config/preferences.js";
 import Navbar from "components/layout/NavBar.tsx";
 import Sidebar from "components/layout/Sidebar.tsx";
 
+import MultiPlexAd from "components/ads/MultiPlexAd.tsx";
 import AllAreaChart from "components/charts/AllAreaChart.tsx";
 import AllAreaChartLongTerm from "components/charts/AllAreaChartLongTerm.tsx";
 import ProductionTodayChart from "components/charts/ProductionTodayChart.tsx";
@@ -96,6 +97,16 @@ export default function CountryIsland({ data }: PageProps<CountryPageProps>) {
               {countryElms}
             </div>
           </div>
+          <div class="content mt-0 mr-0 ml-20">
+            <div class="row mt-0">
+              <ProductionOverview
+                  cols={6}
+                  {...commonprops}
+                  {...data}
+                ></ProductionOverview>
+                <MultiPlexAd cols={6} {...commonprops} {...data}></MultiPlexAd>
+            </div>
+          </div>
           <div class="content mt-0 mb-0 mr-0 ml-20">
             <div class="row">
               <AllAreaChart
@@ -114,21 +125,16 @@ export default function CountryIsland({ data }: PageProps<CountryPageProps>) {
           </div>
           <div class="content mt-0 mr-0 ml-20">
             <div class="row mt-0">
-            <ProductionOverview
-                cols={4}
-                {...commonprops}
-                {...data}
-              ></ProductionOverview>
-              <ProductionDetailsTodayChart
-                cols={4}
-                {...commonprops}
-                {...data}
-                ></ProductionDetailsTodayChart>
-              <ProductionTodayChart
-                cols={4}
-                {...commonprops}
-                {...data}
-                ></ProductionTodayChart>
+            <ProductionDetailsTodayChart
+                  cols={6}
+                  {...commonprops}
+                  {...data}
+            ></ProductionDetailsTodayChart>
+            <ProductionTodayChart
+              cols={6}
+              {...commonprops}
+              {...data}
+              ></ProductionTodayChart>
             </div>
           </div>
           <div class="content mt-0 mr-0 ml-20">

routes/[country]/[area].tsx

@@ -81,6 +81,7 @@ export const handler: Handlers = {
       generation: await GetGenerationDay(area.id, yesterdayDate, todayDate, country.interval),
       load: await GetLoadDay(area.id, yesterdayDate, todayDate, country.interval),
       page: area.id,
+      adsense: Deno.env.get("SPOTWEB_ADSENSE"),
       er,
       lang: ctx.state.lang as string | undefined || ctx.params.country,
     };

routes/[country]/index.tsx

@@ -77,6 +77,7 @@ export const handler: Handlers = {
       futureOutages: await GetFutureOutages(country.id),
       er,
       page: country.id,
+      adsense: Deno.env.get("SPOTWEB_ADSENSE"),
       areas,
       lang: ctx.state.lang as string | undefined || ctx.params.country,
     };
@@ -90,7 +91,6 @@ export default function Index(props: PageProps<CountryPageProps>) {
     <>
       <SwHead
         title={props.data.country?.name + " - " + props.data.country?.areas.map((a) => a.name).join(", ")}
-        adsense={Deno.env.get("SPOTWEB_ADSENSE")}
         {...props}
         {...props.data}
       >

routes/custom.tsx

@@ -28,6 +28,7 @@ export const handler: Handlers = {
       startDate,
       endDate,
       er,
+      adsense: Deno.env.get("SPOTWEB_ADSENSE"),
       lang: ctx.state.lang,
     });
   },

routes/help.tsx

@@ -17,6 +17,7 @@ export const handler: Handlers = {
     const pageProps: HelpPageProps = {
       er,
       page: "index",
+      adsense: Deno.env.get("SPOTWEB_ADSENSE"),
       lang: ctx.state.lang as string | undefined || ctx.params.country,
     };
 

routes/homeassistant.tsx

@@ -17,6 +17,7 @@ export const handler: Handlers = {
     const pageProps: HassPageProps = {
       er,
       page: "homeassistant",
+      adsense: Deno.env.get("SPOTWEB_ADSENSE"),
       lang: ctx.state.lang as string | undefined || ctx.params.country,
     };
 

routes/index.tsx

@@ -41,6 +41,7 @@ export const handler: Handlers = {
       pricePerArea,
       er,
       page: "index",
+      adsense: Deno.env.get("SPOTWEB_ADSENSE"),
       lang: ctx.state.lang as string | undefined || ctx.params.country,
     };
 
@@ -55,7 +56,6 @@ export default function Index(props: PageProps<IndexPageProps>) {
         title={locale_kit.t("common.header.title", { lang: props.data.lang })}
         {...props}
         {...props.data}
-        adsense={Deno.env.get("SPOTWEB_ADSENSE")}
       >
       </SwHead>
       <body lang={props.data.lang} class="dark-mode">

static/css/custom.css

@@ -78,4 +78,9 @@
     background: #333435;
     border-radius: 4px;
     padding:3px;
+}
+
+/* Ads */
+.display-height {
+    max-height: 70px;
 }

utils/common.ts

@@ -2,7 +2,9 @@ import { SpotApiRow } from "backend/db/index.ts";
 
 interface BasePageProps {
   page: string;
+  adsense?: string;
   lang: string;
+  disable_auto_adsense?: boolean;
 }
 
 interface CommonProps extends BasePageProps {