Merge pull request #227 from Daveiano/220-opening-webcam-stat-tile-modal

Implements GH-220
Daveiano · Nov 22, 2023 · 6ef7d7f · 6ef7d7f
2 parents 9105e60 + ae36760
commit 6ef7d7f
Show file tree

Hide file tree

Showing 27 changed files with 326 additions and 38 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,5 @@
 # Ignore artifacts:
 dist
-skins/weewx-wdc/includes/stat-tile.inc
+skins/weewx-wdc/includes/stat-tile.inc
+*.inc
+*.html.tmpl
diff --git a/changelog.md b/changelog.md
@@ -751,5 +751,6 @@ See https://github.com/Daveiano/weewx-wdc/compare/v3.3.0...580071ca175a03fe4924b
 - Bugfix: Fixed "ValueError: could not convert string to float" in forecast, introduced in GH-191
 - Bugfix: Added missing `nl.conf` in `install.py` GH-221
 - Bugfix: Fixed Gauge tiles daily reset (via MQTT)
+- Open Webcam Links/Stat Tile links in a Modal GH-220
 - Bugfix: Max Rain Rate Does Not Reset GH-224
 - Added MQTT connection with username/password GH-225
diff --git a/install.py b/install.py
@@ -90,6 +90,7 @@ def __init__(self):
                         "skins/weewx-wdc/includes/dwd-warning.inc",
                         "skins/weewx-wdc/includes/stat-tile.inc",
                         "skins/weewx-wdc/includes/stat-tile-xaggs.inc",
+                        "skins/weewx-wdc/includes/stat-tile-modals.inc",
                         "skins/weewx-wdc/includes/conditions-table.inc",
                         "skins/weewx-wdc/includes/climatological-days.inc",
                         "skins/weewx-wdc/includes/ui-shell.inc",

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -57,27 +57,20 @@ const config: PlaywrightTestConfig = {
       },
     },
 
-    {
-      name: "firefox",
-      use: {
-        ...devices["Desktop Firefox"],
-        viewport: { width: 1920, height: 1000 },
-      },
-    },
+    // {
+    //   name: "firefox",
+    //   use: {
+    //     ...devices["Desktop Firefox"],
+    //     viewport: { width: 1920, height: 1000 },
+    //   },
+    // },
 
     // {
     //   name: "webkit",
     //   use: {
     //     ...devices["Desktop Safari"],
     //     viewport: { width: 1920, height: 1000 },
     //   },
-    //   timeout: 50 * 1000,
-    //   expect: {
-    //     timeout: 25000,
-    //     toHaveScreenshot: {
-    //       maxDiffPixelRatio: 0.07,
-    //     },
-    //   },
     // },
 
     /* Test against mobile viewports. */

diff --git a/skins/weewx-wdc/day-archive/day-%Y-%m-%d.html.tmpl b/skins/weewx-wdc/day-archive/day-%Y-%m-%d.html.tmpl
@@ -57,6 +57,11 @@
       </section>
     </main>
 
+    <!--Stat tile Modals-->
+    #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
+      #include "includes/stat-tile-modals.inc"
+    #end if
+
     #include "includes/footer.inc"
 
     <script src="$get_base_path(path='dist/main.js')" defer></script>

diff --git a/skins/weewx-wdc/includes/html-head.inc b/skins/weewx-wdc/includes/html-head.inc
@@ -88,6 +88,11 @@
   };
 </script>
 
+<script
+  type="module"
+  src="https://1.www.s81c.com/common/carbon/web-components/version/v2.0.1/modal.min.js"
+></script>
+
 #if "heights" in $diagrams_config
 <!--prettier-ignore-->
 <style>

diff --git a/skins/weewx-wdc/includes/stat-tile-modals.inc b/skins/weewx-wdc/includes/stat-tile-modals.inc
@@ -0,0 +1,40 @@
+#errorCatcher Echo
+#encoding UTF-8
+
+#if $DisplayOptions.get('layout', 'alternative') == 'alternative' and 'stat_tile_links' in $DisplayOptions
+  #for $skin_obs in $DisplayOptions.get('stat_tile_links')
+    #set $render_modal = "stat_tile_links" in $DisplayOptions and $skin_obs in $DisplayOptions["stat_tile_links"] and $DisplayOptions["stat_tile_links"][$skin_obs]["open"] == "modal"
+    #set $skin_obs_key = $get_custom_data_binding_obs_key($skin_obs)
+
+    #if $render_modal
+        <cds-modal id="modal-$skin_obs_key" size="lg" fullWidth>
+        <cds-modal-header>
+            <cds-modal-close-button></cds-modal-close-button>
+            <!-- <cds-modal-label>Label (Optional)</cds-modal-label> -->
+            <cds-modal-heading>$obs.label[$skin_obs]</cds-modal-heading>
+        </cds-modal-header>
+        <cds-modal-body>
+            <iframe src='$DisplayOptions["stat_tile_links"][$skin_obs]["link"]' style="width: 100%; height: 100%; border: none;" ></iframe>
+        </cds-modal-body>
+        </cds-modal>
+
+        <script type="text/javascript">
+            document
+                .querySelector(".stat-tile[data-observation='$skin_obs_key']")
+                .addEventListener("click", () => {
+                    document.getElementById("modal-$skin_obs_key").open = true;
+                });
+        </script>
+
+        <style>
+            .stat-tile[data-observation='$skin_obs_key'] {
+                cursor: pointer;
+            }
+            #modal-$skin_obs_key cds-modal-body {
+                min-height: 65vh;
+                overflow: hidden;
+            }
+        </style>
+    #end if
+  #end for
+#end if
diff --git a/skins/weewx-wdc/includes/stat-tile.inc b/skins/weewx-wdc/includes/stat-tile.inc
@@ -17,15 +17,20 @@
 #set $skin_obs_key = $get_custom_data_binding_obs_key($partial_obs)
 #set $rounding = $str($get_rounding($partial_obs, $skin_obs_key))
 #set $observation_binding =  $get_time_span_from_context($context, $day($data_binding=$skin_obs_binding), $week($data_binding=$skin_obs_binding), $month($data_binding=$skin_obs_binding), $year($data_binding=$skin_obs_binding), $alltime($data_binding=$skin_obs_binding), $yesterday($data_binding=$skin_obs_binding))
+
+#set $render_link = "stat_tile_links" in $DisplayOptions and $partial_obs in $DisplayOptions["stat_tile_links"] and $DisplayOptions["stat_tile_links"][$partial_obs]["open"] in ["new_tab", "same_tab"]
+#set $render_modal = "stat_tile_links" in $DisplayOptions and $partial_obs in $DisplayOptions["stat_tile_links"] and $DisplayOptions["stat_tile_links"][$partial_obs]["open"] == "modal"
+
 <script
   type="module"
   src="https://1.www.s81c.com/common/carbon/web-components/version/v1.27.0/tooltip.min.js"
 ></script>
 
-<div class="bx--col-sm-4 bx--col-md-4 bx--col-lg-6 bx--col-xlg-3 bx--col-max-2">
+
+<div class="bx--col-sm-4 bx--col-md-4 bx--col-lg-6 bx--col-xlg-3 bx--col-max-2 stat-tile-wrap-$skin_obs_key">
   <!--prettier-ignore-->
-  #if "stat_tile_links" in $DisplayOptions and $partial_obs in $DisplayOptions["stat_tile_links"]
-    #set $open_new_tab = "_blank" if $to_bool($DisplayOptions["stat_tile_links"][$partial_obs]["open_new_tab"]) else "_self"
+  #if $render_link
+    #set $open_new_tab = "_blank" if $DisplayOptions["stat_tile_links"][$partial_obs]["open"] == "new_tab" else "_self"
     <a class="stat-tile-link" href='$DisplayOptions["stat_tile_links"][$partial_obs]["link"]' target='$open_new_tab'>
   #end if
   <div
@@ -41,7 +46,7 @@
     <!-- Main row -->
     <div class="bx--row">
 
-      #if "stat_tile_links" in $DisplayOptions and $partial_obs in $DisplayOptions["stat_tile_links"]
+      #if $render_link or $render_modal
         <svg
           class="icon-link"
           xmlns="http://www.w3.org/2000/svg"
@@ -51,7 +56,6 @@
             points="10 6 10 8 22.59 8 6 24.59 7.41 26 24 9.41 24 22 26 22 26 6 10 6"
           />
           <rect
-            id="_Transparent_Rectangle_"
             data-name="&lt;Transparent Rectangle&gt;"
             class="cls-1"
             width="32"
@@ -371,7 +375,8 @@
     </div>
     #end if
   </div>
-  #if "stat_tile_links" in $DisplayOptions and $partial_obs in $DisplayOptions["stat_tile_links"]
+  #if $render_link
     </a>
   #end if
 </div>
+
diff --git a/skins/weewx-wdc/index.html.tmpl b/skins/weewx-wdc/index.html.tmpl
@@ -69,11 +69,98 @@
       </section>
     </main>
 
+    <!--Stat tile Modals-->
+    #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
+      #include "includes/stat-tile-modals.inc"
+    #end if
+
+    <!--Externals Modals-->
+    #set $externals_list = []
+    #if 'externals' in $Extras and $len($Extras['externals']) > 0
+      #for $external in $Extras['externals']
+        #if $external == 'description'
+          #continue
+        #end if
+        #if $to_bool($Extras['externals'][$external].show_on_front)
+          #silent $externals_list.append($external)
+        #end if
+      #end for
+    #end if
+
+    #if ('radar_html' in $Extras or $len($externals_list) > 0) and 'open_radar_and_externals_modal' in $Extras and $to_bool($Extras['open_radar_and_externals_modal'])
+      #if 'radar_html' in $Extras
+        <cds-modal id="modal-radar-default" size="md" fullWidth>
+          <cds-modal-header>
+            <cds-modal-close-button></cds-modal-close-button>
+            <!-- <cds-modal-label>Label (Optional)</cds-modal-label> -->
+            <cds-modal-heading>$gettext("Recent radar")</cds-modal-heading>
+          </cds-modal-header>
+          <cds-modal-body>
+            $Extras.radar_html
+          </cds-modal-body>
+        </cds-modal>
+
+        <script type="text/javascript">
+          document
+            .getElementById("panel-radar")
+            .addEventListener("click", () => {
+              document.getElementById("modal-radar-default").open = true;
+            });
+
+          if (document .querySelector("#panel-radar a")) {
+            document
+              .querySelector("#panel-radar a")
+              .addEventListener("click", (event) => {
+                event.preventDefault();
+              });
+          }
+        </script>
+        <style>
+          #panel-radar {
+            cursor: pointer;
+          }
+        </style>
+      #end if
+
+      #for $external in externals_list
+        <cds-modal id="modal-$external" size="md" fullWidth>
+          <cds-modal-header>
+            <cds-modal-close-button></cds-modal-close-button>
+            <cds-modal-label>$Extras['externals'][$external].title_long</cds-modal-label>
+            <cds-modal-heading>$Extras['externals'][$external].title</cds-modal-heading>
+          </cds-modal-header>
+          <cds-modal-body>
+            $Extras['externals'][$external].source
+          </cds-modal-body>
+        </cds-modal>
+
+        <script type="text/javascript">
+          document
+            .getElementById("panel-$external")
+            .addEventListener("click", () => {
+              document.getElementById("modal-$external").open = true;
+            });
+
+          if (document .querySelector("#panel-$external a")) {
+            document
+              .querySelector("#panel-$external a")
+              .addEventListener("click", (event) => {
+                event.preventDefault();
+              });
+          }
+        </script>
+        <style>
+          #panel-$external {
+            cursor: pointer;
+          }
+        </style>
+      #end for
+    #end if
+
     #include "includes/footer.inc"
 
     <script src="$get_base_path(path='dist/main.js')" defer></script>
     #if $to_bool($Extras['mqtt']['mqtt_websockets_enabled'])
-    <!--prettier-ignore-->
     <script>
       var mqtt_host = "$Extras['mqtt']['mqtt_websockets_host']";
       var mqtt_port = "$Extras['mqtt']['mqtt_websockets_port']";

diff --git a/skins/weewx-wdc/month-%Y-%m.html.tmpl b/skins/weewx-wdc/month-%Y-%m.html.tmpl
@@ -47,6 +47,11 @@
       </section>
     </main>
 
+    <!--Stat tile Modals-->
+    #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
+      #include "includes/stat-tile-modals.inc"
+    #end if
+
     #include "includes/footer.inc"
 
     <script src="$get_base_path(path='dist/main.js')" defer></script>

diff --git a/skins/weewx-wdc/month.html.tmpl b/skins/weewx-wdc/month.html.tmpl
@@ -40,6 +40,11 @@
       </section>
     </main>
 
+    <!--Stat tile Modals-->
+    #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
+      #include "includes/stat-tile-modals.inc"
+    #end if
+
     #include "includes/footer.inc"
 
     <script src="$get_base_path(path='dist/main.js')" defer></script>

diff --git a/skins/weewx-wdc/skin.conf b/skins/weewx-wdc/skin.conf
@@ -30,9 +30,13 @@ SKIN_VERSION = 3.4.0
 
     # The radar code. Full html allowed.
     #radar_html = ''
+
     # The Foreacst/Radar/Webcam section heading.
     #forecast_radar_heading = "Forecast & Recent radar"
 
+    # Open the radar and external images/videos in a modal.
+    open_radar_and_externals_modal = False
+
     # Set to True to have the Forecast tile and the radar/externals tile to have the same width.
     # Default is forecast = 2/3 and radar tile = 1/3.
     forecast_radar_equal_width = False

diff --git a/skins/weewx-wdc/src/scss/index.scss b/skins/weewx-wdc/src/scss/index.scss
@@ -16,10 +16,23 @@ bx-header,
 bx-btn,
 bx-tooltip,
 bx-tooltip-definition,
-bx-structured-list {
+bx-structured-list,
+cds-modal {
   @include carbon--theme($carbon--theme--g10, true);
 }
 
+cds-modal cds-modal-body {
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+    max-height: 100%;
+    width: auto;
+    margin: 0 auto;
+    display: block;
+  }
+}
+
 html.dark {
   @include carbon--theme($carbon--theme--g90, true);
 
@@ -32,7 +45,8 @@ html.dark {
   bx-btn,
   bx-tooltip,
   bx-tooltip-definition,
-  bx-structured-list {
+  bx-structured-list,
+  cds-modal {
     @include carbon--theme($carbon--theme--g90, true);
   }
 

diff --git a/skins/weewx-wdc/statistics.html.tmpl b/skins/weewx-wdc/statistics.html.tmpl
@@ -64,6 +64,11 @@
       </section>
     </main>
 
+    <!--Stat tile Modals-->
+    #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
+      #include "includes/stat-tile-modals.inc"
+    #end if
+
     #include "includes/footer.inc"
 
     <script src="$get_base_path(path='dist/main.js')" defer></script>

diff --git a/skins/weewx-wdc/week.html.tmpl b/skins/weewx-wdc/week.html.tmpl
@@ -40,6 +40,11 @@
       </section>
     </main>
 
+    <!--Stat tile Modals-->
+    #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
+      #include "includes/stat-tile-modals.inc"
+    #end if
+
     #include "includes/footer.inc"
 
     <script src="$get_base_path(path='dist/main.js')" defer></script>

diff --git a/skins/weewx-wdc/year-%Y.html.tmpl b/skins/weewx-wdc/year-%Y.html.tmpl
@@ -56,6 +56,11 @@
       </section>
     </main>
 
+    <!--Stat tile Modals-->
+    #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
+      #include "includes/stat-tile-modals.inc"
+    #end if
+
     #include "includes/footer.inc"
 
     <script src="$get_base_path(path='dist/main.js')" defer></script>

diff --git a/skins/weewx-wdc/year.html.tmpl b/skins/weewx-wdc/year.html.tmpl
@@ -40,6 +40,11 @@
       </section>
     </main>
 
+    <!--Stat tile Modals-->
+    #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
+      #include "includes/stat-tile-modals.inc"
+    #end if
+
     #include "includes/footer.inc"
 
     <script src="$get_base_path(path='dist/main.js')" defer></script>