Skip to content

Commit 52cb3fd

Browse files
teuchezhnurbiy.teuchezh
teuchezh
and
nurbiy.teuchezh
authored
feat: clock format (#31)
Co-authored-by: nurbiy.teuchezh <nurbiy.teuchezh@wilix.org>
1 parent 0cc986b commit 52cb3fd

16 files changed

Lines changed: 176 additions & 88 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ daily_forecast_days: 5
9797
show_sunrise_sunset: true
9898
show_clock: true # Show current time
9999
clock_position: top # 'top' or 'details'
100+
clock_format: 24h # '12h' or '24h'
100101
sunrise_entity: sensor.sun_next_rising # Optional
101102
sunset_entity: sensor.sun_next_setting # Optional
102103
```
@@ -177,6 +178,7 @@ This means that in most cases, you don't need to configure sunrise/sunset sensor
177178
| `show_sunrise_sunset` | boolean | false | Show sunrise and sunset times |
178179
| `show_clock` | boolean | false | Show current time |
179180
| `clock_position` | string | `top` | Clock position (`top` for top right, `details` for info row) |
181+
| `clock_format` | string | `24h` | Clock format (`12h` for 12-hour format with AM/PM, `24h` for 24-hour format) |
180182
| `sunrise_entity` | string | - | Sunrise sensor entity ID (optional). If not specified, the card will use the weather entity attributes or the default `sun.sun` entity |
181183
| `sunset_entity` | string | - | Sunset sensor entity ID (optional). If not specified, the card will use the weather entity attributes or the default `sun.sun` entity |
182184
| `templow_attribute` | string | - | Custom attribute name for minimum temperature (optional). If not specified, the card will automatically search for known attributes: `templow`, `temperature_low`, `temp_low`, `min_temp`, `yandex_pogoda_minimal_forecast_temperature` |

‎README.ru.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ daily_forecast_days: 5
9797
show_sunrise_sunset: true
9898
show_clock: true # Показывать текущее время
9999
clock_position: top # 'top' или 'details'
100+
clock_format: 24h # '12h' или '24h'
100101
sunrise_entity: sensor.sun_next_setting # Опционально
101102
sunset_entity: sensor.sun_next_setting # Опционально
102103
```
@@ -177,6 +178,7 @@ wind_speed_unit: kmh # Требуется только для legacy интег
177178
| `show_sunrise_sunset` | boolean | false | Показывать время восхода и заката |
178179
| `show_clock` | boolean | false | Показывать текущее время |
179180
| `clock_position` | string | `top` | Позиция часов (`top` — справа сверху, `details` — в строке информации) |
181+
| `clock_format` | string | `24h` | Формат времени (`12h` — 12-часовой формат с AM/PM, `24h` — 24-часовой формат) |
180182
| `sunrise_entity` | string | - | ID сенсора восхода солнца (опционально). Если не указан, карточка будет использовать атрибуты weather entity или стандартную сущность `sun.sun` |
181183
| `sunset_entity` | string | - | ID сенсора заката солнца (опционально). Если не указан, карточка будет использовать атрибуты weather entity или стандартную сущность `sun.sun` |
182184
| `templow_attribute` | string | - | Пользовательское имя атрибута для минимальной температуры (опционально). Если не указано, карточка автоматически ищет известные атрибуты: `templow`, `temperature_low`, `temp_low`, `min_temp`, `yandex_pogoda_minimal_forecast_temperature` |

‎dynamic-weather-card.js‎

Lines changed: 86 additions & 71 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/card.ts‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ interface ConfigInput {
8181
show_sunrise_sunset?: boolean;
8282
show_clock?: boolean;
8383
clock_position?: 'top' | 'details';
84+
clock_format?: '12h' | '24h';
8485
overlay_opacity?: number;
8586
language?: 'auto' | 'en' | 'ru' | 'de' | 'nl' | 'fr' | 'es';
8687
wind_speed_unit?: 'ms' | 'kmh';
@@ -706,9 +707,19 @@ export class AnimatedWeatherCard extends LitElement {
706707

707708
private formatCurrentTime(): string {
708709
const now = new Date();
709-
const hours = String(now.getHours()).padStart(2, '0');
710-
const minutes = String(now.getMinutes()).padStart(2, '0');
711-
return `${hours}:${minutes}`;
710+
const is12h = this.config.clockFormat === '12h';
711+
712+
if (is12h) {
713+
let hours = now.getHours();
714+
const minutes = String(now.getMinutes()).padStart(2, '0');
715+
const period = hours >= 12 ? i18n.t('pm') : i18n.t('am');
716+
hours = hours % 12 || 12; // Convert 0 to 12 for 12-hour format
717+
return `${hours}:${minutes} ${period}`;
718+
} else {
719+
const hours = String(now.getHours()).padStart(2, '0');
720+
const minutes = String(now.getMinutes()).padStart(2, '0');
721+
return `${hours}:${minutes}`;
722+
}
712723
}
713724

714725
private startClock(): void {
@@ -759,15 +770,11 @@ export class AnimatedWeatherCard extends LitElement {
759770
<div class="${cardClasses}" style="min-height: ${minHeight}; ${bgStyle}; ${overlayStyle} cursor: pointer;">
760771
<div class="canvas-container"></div>
761772
<div class="content">
762-
${this.config.name === undefined ? html`
763-
<div class="header">
764-
<div class="location">${weather.friendlyName}</div>
765-
</div>
766-
` : (this.config.name && this.config.name.trim() !== '' ? html`
773+
${this.config.name && this.config.name.trim() !== '' ? html`
767774
<div class="header">
768775
<div class="location">${this.config.name}</div>
769776
</div>
770-
` : '')}
777+
` : ''}
771778
<div class="primary">
772779
<div class="primary-left">
773780
<div class="condition">${i18n.t(weather.condition)}</div>
@@ -796,7 +803,7 @@ export class AnimatedWeatherCard extends LitElement {
796803
${this.config.showSunriseSunset && sunData.hasSunData && sunData.sunrise ? html`
797804
<div class="info-item">
798805
<span class="info-icon">${getSVGIcon('sunrise')}</span>
799-
<span>${formatTime(sunData.sunrise)}</span>
806+
<span>${formatTime(sunData.sunrise, this.config.clockFormat, i18n.t('am'), i18n.t('pm'))}</span>
800807
</div>
801808
` : ''}
802809
${this.config.showWind && weather.windSpeed != null ? html`
@@ -815,7 +822,7 @@ export class AnimatedWeatherCard extends LitElement {
815822
${this.config.showSunriseSunset && sunData.hasSunData && sunData.sunset ? html`
816823
<div class="info-item">
817824
<span class="info-icon">${getSVGIcon('sunset')}</span>
818-
<span>${formatTime(sunData.sunset)}</span>
825+
<span>${formatTime(sunData.sunset, this.config.clockFormat, i18n.t('am'), i18n.t('pm'))}</span>
819826
</div>
820827
` : ''}
821828
</div>
@@ -866,6 +873,7 @@ export class AnimatedWeatherCard extends LitElement {
866873
showSunriseSunset: config.show_sunrise_sunset !== false,
867874
showClock: config.show_clock === true,
868875
clockPosition: config.clock_position || DEFAULT_CONFIG.clockPosition,
876+
clockFormat: config.clock_format || DEFAULT_CONFIG.clockFormat,
869877
overlayOpacity: config.overlay_opacity !== undefined ? config.overlay_opacity : DEFAULT_CONFIG.overlayOpacity,
870878
language: config.language || DEFAULT_CONFIG.language,
871879
windSpeedUnit: config.wind_speed_unit || DEFAULT_CONFIG.windSpeedUnit,

‎src/components/editor.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export class DynamicWeatherCardEditor extends LitElement {
3434
show_sunrise_sunset: DEFAULT_CONFIG.showSunriseSunset,
3535
show_clock: DEFAULT_CONFIG.showClock,
3636
clock_position: DEFAULT_CONFIG.clockPosition,
37+
clock_format: DEFAULT_CONFIG.clockFormat,
3738
overlay_opacity: DEFAULT_CONFIG.overlayOpacity,
3839
language: DEFAULT_CONFIG.language,
3940
wind_speed_unit: DEFAULT_CONFIG.windSpeedUnit,
@@ -84,6 +85,17 @@ export class DynamicWeatherCardEditor extends LitElement {
8485
}
8586
}
8687
},
88+
{
89+
name: 'clock_format',
90+
selector: {
91+
select: {
92+
options: [
93+
{ label: i18n.t('editor.clock_format_24h'), value: '24h' },
94+
{ label: i18n.t('editor.clock_format_12h'), value: '12h' }
95+
]
96+
}
97+
}
98+
},
8799
{ name: 'overlay_opacity', selector: { number: { min: 0, max: 1, step: 0.05, mode: 'box' } } },
88100
{
89101
name: 'language',

‎src/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export const DEFAULT_CONFIG: Required<Omit<WeatherCardConfig, 'entity' | 'type'>
3737
showSunriseSunset: false,
3838
showClock: false,
3939
clockPosition: 'top',
40+
clockFormat: '24h',
4041
overlayOpacity: 0.1,
4142
language: 'auto',
4243
height: null,

‎src/internationalization/locales/de/translation.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ const translation: Translation = {
3131
'wind_unit_knots': 'Knoten',
3232
'wind_unit_fts': 'ft/s',
3333
'show_clock': 'Aktuelle Uhrzeit anzeigen',
34+
'am': 'AM',
35+
'pm': 'PM',
3436
'editor': {
3537
'entity': 'Wetter-Entität',
3638
'name': 'Kartentitel',
@@ -52,6 +54,9 @@ const translation: Translation = {
5254
'clock_position': 'Uhrposition',
5355
'clock_position_top': 'Oben',
5456
'clock_position_details': 'Details',
57+
'clock_format': 'Zeitformat',
58+
'clock_format_12h': '12-Stunden (AM/PM)',
59+
'clock_format_24h': '24-Stunden',
5560
'overlay_opacity': 'Überlagerungs-Transparenz',
5661
'language': 'Sprache',
5762
'language_auto': 'Automatisch',

‎src/internationalization/locales/en/translation.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ const translation: Translation = {
3131
'wind_unit_knots': 'knots',
3232
'wind_unit_fts': 'ft/s',
3333
'show_clock': 'Show current time',
34+
'am': 'AM',
35+
'pm': 'PM',
3436
'editor': {
3537
'entity': 'Weather Entity',
3638
'name': 'Card Title',
@@ -52,6 +54,9 @@ const translation: Translation = {
5254
'clock_position': 'Clock Position',
5355
'clock_position_top': 'Top',
5456
'clock_position_details': 'Details',
57+
'clock_format': 'Clock Format',
58+
'clock_format_12h': '12-hour (AM/PM)',
59+
'clock_format_24h': '24-hour',
5560
'overlay_opacity': 'Overlay Opacity',
5661
'language': 'Language',
5762
'language_auto': 'Auto',

‎src/internationalization/locales/es/translation.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ const translation: Translation = {
3131
'wind_unit_knots': 'knots',
3232
'wind_unit_fts': 'ft/s',
3333
'show_clock': 'Mostrar hora actual',
34+
'am': 'AM',
35+
'pm': 'PM',
3436
'editor': {
3537
'entity': 'Entidad de clima',
3638
'name': 'Título de la tarjeta',
@@ -52,6 +54,9 @@ const translation: Translation = {
5254
'clock_position': 'Posición del reloj',
5355
'clock_position_top': 'Arriba',
5456
'clock_position_details': 'Detalles',
57+
'clock_format': 'Formato de hora',
58+
'clock_format_12h': '12 horas (AM/PM)',
59+
'clock_format_24h': '24 horas',
5560
'overlay_opacity': 'Opacidad de superposición',
5661
'language': 'Idioma',
5762
'language_auto': 'Automático',

‎src/internationalization/locales/fr/translation.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ const translation: Translation = {
3131
'wind_unit_knots': 'knots',
3232
'wind_unit_fts': 'ft/s',
3333
'show_clock': 'Afficher l\'heure actuelle',
34+
'am': 'AM',
35+
'pm': 'PM',
3436
'editor': {
3537
'entity': 'Entité météo',
3638
'name': 'Titre de la carte',
@@ -48,10 +50,13 @@ const translation: Translation = {
4850
'show_sunrise_sunset': 'Afficher lever/coucher du soleil',
4951
'sunrise_entity': 'Entité de lever du soleil',
5052
'sunset_entity': 'Entité de coucher du soleil',
51-
'show_clock': 'Afficher l’horloge',
52-
'clock_position': 'Position de l’horloge',
53+
'show_clock': 'Afficher l\'horloge',
54+
'clock_position': 'Position de l\'horloge',
5355
'clock_position_top': 'En haut',
5456
'clock_position_details': 'Détails',
57+
'clock_format': 'Format de l\'heure',
58+
'clock_format_12h': '12 heures (AM/PM)',
59+
'clock_format_24h': '24 heures',
5560
'overlay_opacity': 'Opacité du voile',
5661
'language': 'Langue',
5762
'language_auto': 'Auto',

0 commit comments

Comments
 (0)