diff --git a/README.md b/README.md
index 6981b86..23d2391 100644
--- a/README.md
+++ b/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)_
diff --git a/src/components/horizonCard/HorizonCardFooter.ts b/src/components/horizonCard/HorizonCardFooter.ts
index 79f130a..162823f 100644
--- a/src/components/horizonCard/HorizonCardFooter.ts
+++ b/src/components/horizonCard/HorizonCardFooter.ts
@@ -21,6 +21,7 @@ export class HorizonCardFooter {
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 @@ export class HorizonCardFooter {
} 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`
diff --git a/src/components/horizonCard/HorizonCardHeader.ts b/src/components/horizonCard/HorizonCardHeader.ts
index 69d8e84..bdbbc12 100644
--- a/src/components/horizonCard/HorizonCardHeader.ts
+++ b/src/components/horizonCard/HorizonCardHeader.ts
@@ -9,6 +9,7 @@ export class HorizonCardHeader {
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
@@ -16,6 +17,7 @@ export class HorizonCardHeader {
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 @@ export class HorizonCardHeader {
return html`${ this.title }
`
}
- private renderHeader (): TemplateResult {
- return html`
-
- `
+ 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``
}
private showTitle (): boolean {