Flip sunrise/sunset & dusk/dawn when southern_flip is true

README.md

@@ -29,7 +29,7 @@ The current view shows a period of 24 hours centered around the local solar noon
 
 In the Northern hemisphere, East is on the left, South is in the middle (when the Sun is in its highest position), and West is on the right. You are facing South and the Sun travels left-to-right.
 
-In the Southern hemisphere, West is on the left, North is in the middle (when the Sun is in its highest position), and East is on the right. You are facing North and the Sun travels right-to-left. You can disable the direction flip by setting `southern_flip: false`.
+In the Southern hemisphere, West is on the left, North is in the middle (when the Sun is in its highest position), and East is on the right. You are facing North and the Sun travels right-to-left. You can disable the direction flip by setting `southern_flip: false`. This will also affect the sunset/sunrise, dawn/dusk, and moonrise/moonset times shown on the card.
 
 The elevation of the Sun follows a predetermined curve that approximates the actual elevation, while the elevation of the Moon affects its vertical position in the graph. The scale for the Moon elevation is logarithmic, so lower elevations will appear higher (above horizon) or lower (below horizon).
 
@@ -97,14 +97,14 @@ Installation via HACS is recommended, but a manual setup is supported.
 
 ### General options
 
-| Name                | Accepted values                 | Description                                       | Default                                                        |
-| ------------------- | ------------------------------- | ------------------------------------------------- | -------------------------------------------------------------- |
-| title               | _string_                        | Card title                                        | Doesn't display a title by default                             |
-| moon                | _boolean_                       | Shows the Moon together with the Sun              | `true`                                                         |
-| refresh_period      | _number_                        | Refresh period between updates, in seconds        | `60`                                                           |
-| fields              | See [below](#visibility-fields) | Fine-tuned control over visible fields            |                                                                |
-| southern_flip       | _boolean_                       | Draws the graph in the opposite direction         | `true` in the Southern hemisphere, `false` in the Northern one |
-| moon_phase_rotation | _number_                        | Angle in degrees for rotating the moon phase icon | Determined from the latitude                                   |
+| Name                | Accepted values                 | Description                                                      | Default                                                        |
+| ------------------- | ------------------------------- | ---------------------------------------------------------------- | -------------------------------------------------------------- |
+| title               | _string_                        | Card title                                                       | Doesn't display a title by default                             |
+| moon                | _boolean_                       | Shows the Moon together with the Sun                             | `true`                                                         |
+| refresh_period      | _number_                        | Refresh period between updates, in seconds                       | `60`                                                           |
+| fields              | See [below](#visibility-fields) | Fine-tuned control over visible fields                           |                                                                |
+| southern_flip       | _boolean_                       | Draws the graph and accompanying times in the opposite direction | `true` in the Southern hemisphere, `false` in the Northern one |
+| moon_phase_rotation | _number_                        | Angle in degrees for rotating the moon phase icon                | Determined from the latitude                                   |
 
 _Example: [here](#example-config)_
 

src/components/horizonCard/HorizonCardFooter.ts

@@ -21,6 +21,7 @@
   private readonly azimuthExtraClasses: string[]
   private readonly elevations
   private readonly elevationExtraClasses: string[]
+  private readonly southern_flip: boolean
 
   constructor (config: IHorizonCardConfig, data: THorizonCardData, i18n: I18N) {
     this.data = data
@@ -56,22 +57,38 @@
     } else {
       this.elevationExtraClasses = []
     }
+
+    this.southern_flip = config.southern_flip!
   }
 
   public render (): TemplateResult {
+    const dawn = this.fields.dawn
+      ? HelperFunctions.renderFieldElement(this.i18n, EHorizonCardI18NKeys.Dawn, this.sunTimes.dawn)
+      : nothing
+    const dusk = this.fields.dusk
+      ? HelperFunctions.renderFieldElement(this.i18n, EHorizonCardI18NKeys.Dusk, this.sunTimes.dusk)
+      : nothing
+    const sunLeft = this.southern_flip ? dusk : dawn
+    const sunRight = this.southern_flip ? dawn : dusk
+
+    const moonrise = this.fields.moonrise
+      ? HelperFunctions.renderFieldElement(this.i18n, EHorizonCardI18NKeys.Moonrise, this.moonTimes.moonrise)
+      : nothing
+    const moonset = this.fields.moonset
+      ? HelperFunctions.renderFieldElement(this.i18n, EHorizonCardI18NKeys.Moonset, this.moonTimes.moonset)
+      : nothing
+    const moonLeft = this.southern_flip ? moonset : moonrise
+    const moonRight = this.southern_flip ? moonrise : moonset
+
     return html`
       <div class="horizon-card-footer">
         ${
           this.renderRow(
-            this.fields.dawn
-              ? HelperFunctions.renderFieldElement(this.i18n, EHorizonCardI18NKeys.Dawn, this.sunTimes.dawn)
-              : nothing,
+            sunLeft,
             this.fields.noon
               ? HelperFunctions.renderFieldElement(this.i18n, EHorizonCardI18NKeys.Noon, this.sunTimes.noon)
               : nothing,
-            this.fields.dusk
-              ? HelperFunctions.renderFieldElement(this.i18n, EHorizonCardI18NKeys.Dusk, this.sunTimes.dusk)
-              : nothing
+            sunRight
           )
         }
         ${
@@ -88,15 +105,11 @@
         }
         ${
           this.renderRow(
-            this.fields.moonrise
-              ? HelperFunctions.renderFieldElement(this.i18n, EHorizonCardI18NKeys.Moonrise, this.moonTimes.moonrise)
-              : nothing,
+            moonLeft,
             this.fields.moon_phase
               ? HelperFunctions.renderMoonElement(this.i18n, this.data.moonData.phase, this.data.moonData.phaseRotation)
               : nothing,
-            this.fields.moonset
-              ? HelperFunctions.renderFieldElement(this.i18n, EHorizonCardI18NKeys.Moonset, this.moonTimes.moonset)
-              : nothing
+            moonRight
           )
         }
       </div>

src/components/horizonCard/HorizonCardHeader.ts

@@ -9,13 +9,15 @@
   private readonly times: TSunTimes
   private readonly fields: THorizonCardFields
   private readonly i18n: I18N
+  private readonly southern_flip: boolean;
 
   constructor (config: IHorizonCardConfig, data: THorizonCardData, i18n: I18N) {
     this.title = config.title
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     this.fields = config.fields!
     this.times = data.sunData.times
     this.i18n = i18n
+    this.southern_flip = config.southern_flip!
   }
 
   public render (): TemplateResult {
@@ -29,21 +31,16 @@
     return html`<div class="horizon-card-title">${ this.title }</div>`
   }
 
-  private renderHeader (): TemplateResult {
-    return html`
-      <div class="horizon-card-header">
-        ${
-          this.fields.sunrise
-            ? HelperFunctions.renderFieldElement(this.i18n, EHorizonCardI18NKeys.Sunrise, this.times.sunrise)
-            : nothing
-        }
-        ${
-          this.fields.sunset
-            ? HelperFunctions.renderFieldElement(this.i18n, EHorizonCardI18NKeys.Sunset, this.times.sunset)
-            : nothing
-        }
-      </div>
-    `
+  private renderHeader(): TemplateResult {
+    const sunrise = this.fields.sunrise
+      ? HelperFunctions.renderFieldElement(this.i18n, EHorizonCardI18NKeys.Sunrise, this.times.sunrise)
+      : nothing
+    const sunset = this.fields.sunset
+      ? HelperFunctions.renderFieldElement(this.i18n, EHorizonCardI18NKeys.Sunset, this.times.sunset)
+      : nothing
+    const left = this.southern_flip ? sunset : sunrise
+    const right = this.southern_flip ? sunrise : sunset
+    return html`<div class="horizon-card-header">${left}${right}</div>`
   }
 
   private showTitle (): boolean {