- type: custom-api title: "Важные даты" url: http://192.168.50.114:5555/countdown cache: 5s template: | {{/* ===== НАСТРОЙКИ ВРЕМЕННОЙ ШКАЛЫ ===== */}} {{/* Переменная шкала: 2 недели (14 дней) + 40 недель = ~1 год */}} {{/* Первая зона: 2 недели = 14 делений (по дням) = 25% шкалы */}} {{/* Вторая зона: 40 недель = 40 делений (по неделям) = 75% шкалы */}} {{ $daysInFirstZone := 14 }} {{ $weeksInSecondZone := 40 }} {{ $firstZonePercent := 25.0 }} {{ $secondZonePercent := 75.0 }}
{{/* ===== ОТРИСОВКА ЛИНИИ ВРЕМЕНИ ===== */}} {{/* Зона 1 (0-25%): 14 делений по дням - с мягким красным градиентом */}} {{/* Зона 2 (25-100%): 40 делений по неделям */}}
{{/* ===== МАРКЕР "СЕГОДНЯ" ===== */}} {{/* Огонёк показывает текущий момент */}}
🔥
{{/* ===== ОТОБРАЖЕНИЕ СОБЫТИЙ ===== */}} {{/* Позиции рассчитываются с учетом двух зон шкалы */}} {{ $daysZ1 := toFloat $daysInFirstZone }} {{ $weeksZ2 := toFloat $weeksInSecondZone }} {{ $z1Pct := $firstZonePercent }} {{ $z2Pct := $secondZonePercent }} {{ $maxDays := add $daysZ1 (mul $weeksZ2 7.0) }} {{ range .JSON.Array "events" }} {{/* Получаем количество дней до события из API /countdown */}} {{ $days := .Int "days" }} {{ $daysFloat := toFloat $days }} {{/* ФОРМУЛА: Рассчитываем позицию в зависимости от зоны */}} {{ $pos := 0.0 }} {{/* Показываем только события в пределах диапазона (14 дней + 40 недель = 294 дня) */}} {{ if lt $daysFloat $maxDays }} {{ if lt $daysFloat $daysZ1 }} {{/* Зона 1: 0-14 дней -> 0-25% шкалы */}} {{ $pos = mul (div $daysFloat $daysZ1) $z1Pct }} {{ else }} {{/* Зона 2: 14+ дней -> 25-100% шкалы */}} {{ $daysAfterZ1 := sub $daysFloat $daysZ1 }} {{ $weeksInZ2 := div $daysAfterZ1 7.0 }} {{ $posInZ2 := mul (div $weeksInZ2 $weeksZ2) $z2Pct }} {{ $pos = add $z1Pct $posInZ2 }} {{ end }} {{/* ===== КОНТЕЙНЕР СОБЫТИЯ ===== */}} {{/* Абсолютное позиционирование: left = рассчитанный процент */}} {{/* transform: translate(-50%, -50%) центрирует emoji точно на линии */}}
{{/* ===== EMOJI СОБЫТИЯ ===== */}} {{/* При наведении увеличивается и раздвигает соседей */}}
{{ .String "emoji" }}
{{/* ===== РАСШИРЕННЫЙ TOOLTIP ===== */}} {{/* Большой информативный tooltip с детальной информацией */}}
{{/* Emoji и название */}}
{{ .String "emoji" }}
{{ .String "name" }}
{{/* Точная дата события */}}
📅 Дата:
{{ .String "date" }}
{{/* Информация о годовщине (если это anniversary) */}} {{ if eq (.String "type") "anniversary" }}
🎉 Годовщина
{{ $years := .Int "years_passed" }} {{ $lastDigit := mod $years 10 }} {{ $lastTwoDigits := mod $years 100 }}
{{ $years }} {{ if and (eq $lastDigit 1) (ne $lastTwoDigits 11) }}год{{ else if and (or (eq $lastDigit 2) (eq $lastDigit 3) (eq $lastDigit 4)) (not (or (eq $lastTwoDigits 12) (eq $lastTwoDigits 13) (eq $lastTwoDigits 14))) }}года{{ else }}лет{{ end }}
{{ end }} {{/* Детальный countdown */}}
⏰ Осталось
{{ $days := .Int "days" }} {{ if ge $days 30 }} {{/* Если >= 30 дней: показываем месяцы и дни */}} {{ $months := div $days 30 }} {{ $remainingDays := mod $days 30 }}
{{ $months }}
{{ if eq $months 1 }}месяц{{ else if or (eq $months 2) (eq $months 3) (eq $months 4) }}месяца{{ else }}месяцев{{ end }}
{{ $remainingDays }}
{{ if eq $remainingDays 1 }}день{{ else if or (eq $remainingDays 2) (eq $remainingDays 3) (eq $remainingDays 4) }}дня{{ else }}дней{{ end }}
{{ else }} {{/* Если < 30 дней: показываем дни и часы */}}
{{ $days }}
{{ if eq $days 1 }}день{{ else if or (eq $days 2) (eq $days 3) (eq $days 4) }}дня{{ else }}дней{{ end }}
{{ .Int "hours" }}
{{ if eq (.Int "hours") 1 }}час{{ else if or (eq (.Int "hours") 2) (eq (.Int "hours") 3) (eq (.Int "hours") 4) }}часа{{ else }}часов{{ end }}
{{ end }}
{{/* Треугольная стрелка вниз */}}
{{ end }} {{ end }} {{/* ===== ИНТЕРАКТИВНАЯ СЕТКА ДЛЯ НАВЕДЕНИЯ ===== */}} {{/* Невидимые зоны, которые показывают дату при наведении */}} {{ range .JSON.Array "timeline_grid" }} {{ $gridDays := .Int "days" }} {{ $gridDaysFloat := toFloat $gridDays }} {{/* Рассчитываем позицию точки на шкале */}} {{ $gridPos := 0.0 }} {{ $gridWidth := 0.0 }} {{ if lt $gridDaysFloat $maxDays }} {{ if lt $gridDaysFloat $daysZ1 }} {{/* Зона 1: деления по дням */}} {{ $gridPos = mul (div $gridDaysFloat $daysZ1) $z1Pct }} {{ $gridWidth = div $z1Pct $daysZ1 }} {{ else }} {{/* Зона 2: деления по неделям */}} {{ $daysAfterZ1 := sub $gridDaysFloat $daysZ1 }} {{ $weeksInZ2 := div $daysAfterZ1 7.0 }} {{ $posInZ2 := mul (div $weeksInZ2 $weeksZ2) $z2Pct }} {{ $gridPos = add $z1Pct $posInZ2 }} {{ $gridWidth = div $z2Pct $weeksZ2 }} {{ end }} {{/* Интерактивная зона */}}
{{/* Tooltip с датой */}}
{{/* День недели */}}
{{ .String "weekday" }}
{{/* Дата */}}
📅 {{ .String "date" }}
{{/* Треугольная стрелка */}}
{{ end }} {{ end }} {{/* ===== МЕТКИ МЕСЯЦЕВ ПОД ШКАЛОЙ ===== */}} {{/* Используем данные о месяцах из API для элегантного отображения */}} {{ range .JSON.Array "months" }} {{ $monthDays := .Int "days" }} {{ $monthDaysFloat := toFloat $monthDays }} {{/* Показываем только метки в пределах видимого диапазона */}} {{ if lt $monthDaysFloat $maxDays }} {{/* Рассчитываем позицию метки */}} {{ $monthPos := 0.0 }} {{if lt $monthDaysFloat $daysZ1 }} {{ $monthPos = mul (div $monthDaysFloat $daysZ1) $z1Pct }} {{ else }} {{ $daysAfter := sub $monthDaysFloat $daysZ1 }} {{ $weeksIn := div $daysAfter 7.0 }} {{ $posIn := mul (div $weeksIn $weeksZ2) $z2Pct }} {{ $monthPos = add $z1Pct $posIn }} {{ end }} {{/* Отображаем метку месяца */}}
{{ .String "name" }}
{{ end }} {{ end }}
⚙️ Управление