# CurrentWeather.yaml
# Built-in layouts for the CurrentWeather widget.
# This file is part of Reactor. Copyright (c) 2020-2025 Patrick H. Rigney, All Rights Reserved.
---
version: 25080
defaultlayout: default
layouts:
  default:
    content: |
      <div class="ff" style="height: 100%; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center;">
        <h1 class="widget-title" data-bind='entity?.attributes?.wx?.location;#Location?'>&nbsp;</h1>
        <div class="widget-body">
          <h2 class="widget-value" data-bind="entity?.attributes?.wx?.description;#--"></h2>
          <div id='temperature-ico'><i data-bind="<class>iconmap[entity?.attributes?.wx?.icon] ?? 'wi-day-sunny';#wi-day-sunny" class="wi"></i></div>
          <div id='temperature-val' data-bind='round(entity?.attributes?.wx?.temperature,1);#--'></div>
        </div>
        <div class="widget-footer">
          <div class='humidity wxdetail'>
              <i class="wi wi-humidity"></i>&nbsp;<span data-bind='round(entity?.attributes?.wx?.humidity,0)'></span><br/>
              <i class="wi wi-raindrop"></i>&nbsp;<span data-bind='round(entity?.attributes?.wx?.rainfall_24hr,2)'></span>
          </div>
          <div class='window wxdetail'>
              <i class="wi wi-strong-wind"></i>&nbsp;<span data-bind='round(entity?.attributes?.wx?.wind_speed,0)'></span><br/>
              <span data-bind='entity?.attributes?.wx?.wind_direction'></span>
          </div>
          <div class='baro wxdetail'>
              <i class="wi wi-barometer"></i>&nbsp;<span data-bind='entity?.attributes?.wx?.pressure'></span><br/>
              <span data-bind="strftime('%l:%M%p', entity?.attributes?.wx?.asoftime ?# 0)"></span>
          </div>
        </div>
      </div>
    styles: |
      $ div#temperature-ico { font-size: 2rem; line-height: 2rem !important; }
      $ div#temperature-val { font-size: 1.5rem; font-weight: bold; line-height: 1.5em; }
      $ div#temperature-val:after { content: "\00b0"; }
      $ div.humidity { flex-grow: 1; }
      $ div.window { flex-grow: 2; }
      $ div.baro { flex-grow: 1; }
      $ h1.widget-title { width: 100%; font-size: 1rem; font-weight: normal; text-align: center; padding-top: 0.33rem; }
      $ h2.widget-value { width: 100%; font-size: 1.2rem; font-weight: bold; text-align: center; line-height: 2rem; }
      $ div.widget-body { width: 100%; flex-grow: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; }
      $ div.widget-footer { width: 100%; display: flex; flex-wrap: none; flex-direction: row; justify-content: center; }
      $ div.wxdetail { text-align: center; margin-top: auto; font-size: 0.85em; }
    expression_context:
      iconmap:
        01d: wi-day-sunny
        01n: wi-night-clear
        02d: wi-day-cloudy-high
        02n: wi-night-partly-cloudy
        03d: wi-day-cloudy
        03n: wi-night-cloudy
        04d: wi-cloudy
        04n: wi-cloudy
        '09d': wi-showers
        '09n': wi-showers
        11d: wi-thunderstorm
        11n: wi-thunderstorm
        13d: wi-snow
        13n: wi-snow
        50d: wi-day-fog
        50n: wi-night-fog

    head: |
      <link rel="stylesheet" type="text/css" href="./slapdash/node_modules/weathericons/css/weather-icons.min.css">

  owm-icon:
    content: |
      <h1 class="widget-title" data-bind='entity.attributes.wx.location;#Location?'>&nbsp;</h1>
      <h2 class="widget-value" data-bind='entity.attributes.wx.description;#--'></h2>
      <div class="widget-body">
        <div id='temperature-ico'><img src="" data-bind="<src>'http://openweathermap.org/img/wn/'+entity.attributes.wx.icon+'.png'"></div>
        <div id='temperature-val' data-bind='round(entity.attributes.wx.temperature,1)'>--</div></div>
        <div style="width: 100%">
          <div class="flex-container">
            <div class='humidity'>
              <span id='humidity-ico'>&nbsp;</span><span data-bind='round(entity.attributes.wx.humidity,0)'></span><br/>
              <span id='rainfall-ico'>&nbsp;</span><span data-bind='round(entity.attributes.wx.rainfall_24hr,1)'></span>
            </div>
            <div class='window'>
              <span id='windspeed-ico'>&nbsp;</span><span data-bind='round(entity?.attributes?.wx?.wind_speed,0)'></span><br/>
              <span data-bind='entity?.attributes?.wx?.wind_direction'></span>
            </div>
            <div class='baro'>
              <span id='barometer-ico'>&nbsp;</span><span data-bind='round(entity?.attributes?.wx?.pressure,2)'></span><br/>
              <span data-bind="strftime('%l:%M%p', entity.attributes.wx.asoftime)"></span>
            </div>
          </div>
        </div>
      </div>
    styles: |
      $ div#temperature-val { font-size: 2rem; font-weight: bold; line-height: 1em; }
      $ div#temperature-val:after { content: "\00b0"; }
      $ div.flex-container { padding: 0px 6px; }
      $ div.humidity { flex-grow: 4; }
      $ div.window { flex-grow: 4; }
      $ div.baro { }
    head: |
      <link rel="stylesheet" type="text/css" href="./slapdash/node_modules/weathericons/css/weather-icons.min.css">

  largeX:
    content: |
      <div id='location' data-bind='entity.attributes.wx.location'>&nbsp;</div><div
      id='conditions'><div id='temperature-ico'><img src="" data-bind="<src>'http://openweathermap.org/img/wn/'+entity.attributes.wx.icon+'@2x.png'"></div>
      <div id='temperature-val' data-bind='entity.attributes.wx.temperature'>--</div></div><ul><li
      class='humidity'><span id='humidity-ico'>&nbsp;</span><span data-bind='entity.attributes.wx.humidity'></span><br><span
      id='rainfall-ico'>&nbsp;</span><span data-bind='entity.attributes.wx.rainfall_24hr'></span></li><li
      class='window'><span id='windspeed-ico'>&nbsp;</span><span data-bind='entity.attributes.wx.wind_speed'></span><br><span
      data-bind='entity.attributes.wx.wind_direction'></span></li><li class='baro'><span
      id='barometer-ico'>&nbsp;</span><span data-bind='entity.attributes.wx.barometer'></span><br><span
      data-bind="strftime('%l:%M%p', entity.attributes.wx.asoftime)"></span></li></ul>
    styles: |
      $ { }
      $ div#location { flex: 2em 0 0; font-size: 1em; line-height: 1.3em; font-weight: bold; margin: 0px 0px 6px 0px; overflow: hidden; }
      $ div#conditions { flex: 2 0 0; }
      $ div#temperature-ico { font-size: 2em; font-weight: bold; line-height: 1em; margin: 0px 1em 0.2em 1em; }
      $ div#temperature-val { font-size: 2em; font-weight: bold; line-height: 1em; margin: 0px 1em 0px 1em; }
      $ div#temperature-val:after { content: "\00b0"; } $ ul { flex: 1 0 0; font-size: 0.667em; line-height: 1.3em; list-style: none; list-style-type: none; width: 100%; }
      $ li { width: 33%; float: left; }
      $ li:last-child { float: left; }
    head: |
      <link rel="stylesheet" type="text/css" href="./slapdash/node_modules/weathericons/css/weather-icons.min.css">
