Redmage/views/utils/relative_schedule_time.templ

package utils

import "strings"
import "strconv"

// RelativeTimeText updates the text content of the element to be a relative time text.
//
// Every second it updates the text content to be the relative time text of the input string.

script RelativeFromTimeText(id string, time int64, inter int) {
    const el = document.getElementById(id)
    el.parentNode.dataset.tip = dayjs.unix(time).tz(dayjs.tz.guess()).format('ddd, D MMM YYYY HH:mm:ss')
    
    const timeText = dayjs.unix(time).fromNow()
    el.textContent = timeText

    const interval = setInterval(() => {
        const timeText = dayjs.unix(time).fromNow()
        el.textContent = timeText
    }, inter)

    const obs = new MutationObserver((mutations) => {
        for (const mutation of mutations) {
            for (const removed of mutation.removedNodes) {
                if (el === removed) {
                    clearInterval(interval)
                    obs.disconnect()
                }
            }
        }
    })

    obs.observe(el.parentNode, { childList: true })
}

templ RelativeTimeNode(id string, time int64, class ...string) {
	<div class="tooltip" data-tip={ strconv.FormatInt(time, 10) }>
		<span
			id={ id }
			class={ strings.Join(class, " ") }
		>{ strconv.FormatInt(time, 10) }</span>
	</div>
	@RelativeFromTimeText(id, time, 10000)
}