Tabulatorでタイマーで動的に更新された値をもとにしたHTMLでセルの表示を部分的に変更させてみました。
formatterを使ってない場合は、JSONの配列を使って簡潔に出来そうですが、HTMLの部分入替がややこしくなるので、jQueryでDOMエレメントを書き換えています。
< コード例 >
Unix時刻フォーマット関数
/**
* Unix時刻(ms)指定 時:分 フォーマット時刻
* @param {type} utm ミリ秒Unix時刻
* @param {type} incdate 日付有無
* @param {type} withS 秒有無
* @returns {String}
*/
getFormatLocalTime2(utm, incdate, withS = false, withYMD = false) {
//console.log(utm);
const lTM = new Date(utm);
const currMS = lTM.getTime();
const Y = lTM.getFullYear();
const M = lTM.getMonth() + 1;
const D = lTM.getDate();
let h = lTM.getHours();
let n = lTM.getMinutes();
let s = lTM.getSeconds();
h = h.toString().length === 1 ? "0" + h : h;
n = n.toString().length === 1 ? "0" + n : n;
s = s.toString().length === 1 ? "0" + s : s;
const tmtxt = h + ":" + n;
const tmtxtWithDate = Y + "-" + (M < 10 ? "0" : "") + M + "-" +
(D < 10 ? "0" : "") + D + " " + h + ":" + n;
let res = ""
if (incdate) {
res = tmtxtWithDate;
}
else {
res = tmtxt;
}
if (withS) {
res += ":" + s
}
if (withYMD) {
res = Y + "-" + M + "-" + D + " " + res
}
return res
}
現在時刻タイマー
// 時計スタート時刻 //
const sttmutc = Number(sttm - UTC_OFFSET_SECONDS * 1000)
const lt = new LocalTimes()
let tmtxt = lt.getFormatLocalTime2(sttmutc, 0, true)
$("#utctime").text(tmtxt + " (UTC)")
// tableのcellのformatterで使う //
let tmtxtUTCLong = lt.getFormatLocalTime2(sttmutc, 0, true, true)
//console.log(tmtxtUTCLong)
tmtxt = lt.getFormatLocalTime2(sttm, 0, true)
$("#yourtime").text(tmtxt + " (You)")
// == 時計時刻タイマー == //
let tmpos = 0
const clockTimer = setInterval(() => {
const curtmutc = sttmutc + parseInt(1000 * tmpos)
let tmfmt = lt.getFormatLocalTime2(curtmutc, 0, true)
//console.log(tmfmt)
tmtxtUTCLong = lt.getFormatLocalTime2(curtmutc, 0, true, true)
//console.log(tmtxtUTCLong)
$("#utctime").text(tmfmt + " (UTC)")
const curtmyou = sttm + parseInt(1000 * tmpos)
tmfmt = lt.getFormatLocalTime2(curtmyou, 0, true)
$("#yourtime").text(tmfmt + " (You)")
if (tmpos % 30 === 0 && tmpos !== 0) {
// セルのAgo minutesを書き換え //
updateRowDiffTimes(lt, tmtxtUTCLong)
}
tmpos++;
}, 1000) // <=== 1秒間隔
カラムの初期設定
// ログ追加 クライアント時刻 UTC時刻 更新遅延秒 //
{
//headerTooltip: true,
title: "Your Time", field: "TM_ADD_UTC_SHORT",
width: 50, hozAlign: "center",
formatter: function (cell, formatterParams, onRendered) {
// 反転させて強調 //
const cellelm = cell.getElement()
$(cellelm).on("mouseover", function (e) {
$(this).addClass("text_reverse")
})
$(cellelm).on("mouseout", function (e) {
$(this).removeClass("text_reverse")
})
/**
* Now - UTC追加時刻 分取得
*/
const diffMinutesToNow = (datatm, nowtm) => {
const lts = new LocalTimes()
return Math.round(lts.getMinuteTimeDifference(datatm, nowtm))
}
const utcfmt = cell.getData().TM_ADD_UTC
const dt = utcfmt.split(" ")[0]
const tm = utcfmt.split(" ")[1]
const y = dt.split("-")[0]
let m = dt.split("-")[1]
let d = dt.split("-")[2]
let h = tm.split(":")[0]
let n = tm.split(":")[1]
let s = tm.split(":")[2]
m = m.slice(0, 1) === "0" ? m.slice(1) : m
d = d.slice(0, 1) === "0" ? d.slice(1) : d
h = h.slice(0, 1) === "0" ? h.slice(1) : h
n = n.slice(0, 1) === "0" ? n.slice(1) : n
s = s.slice(0, 1) === "0" ? s.slice(1) : s
const dttm = new Date(y, m, d, h, n, s)
const dttmvalUTC = dttm.getTime()
const dttmvalLocal = Number(dttmvalUTC) + Number(UTC_OFFSET_SECONDS * 1000)
const lt = new LocalTimes()
const ltfmt = lt.getFormatLocalTime2(dttmvalLocal, 0, false, false)
const secagotxt = "SA " + cell.getData().UPDATED_SEC_AGO
const diffToNow = diffMinutesToNow(cell.getData().TM_ADD_UTC, tmtxtUTCLong)
return ltfmt + "<br>" + cell.getValue() + "<br>" + secagotxt + "<br>" +
diffToNow + "MA"
// tmtxtUTCLong
},
タイマーで更新した値にしてHTMLを部分的書き換え
/**
* テーブルの差異分更新
* @param {type} lt 時刻処理ユーティリティクラスのインスタンス
* @param {type} currtmtxt 現在時刻テキスト
* @returns {undefined}
*/
const updateRowDiffTimes = (lt, currtmtxt) => {
const rows = table.getRows()
//console.log("rows.length:" + rows.length)
// ++ テーブル行走査 ++ //
rows.forEach((row) => {
const utclong = row.getData().TM_ADD_UTC
// ++ jQueryによる列走査 ++ //
$.each($(row.getElement()).children(""), function (j, itm) {
const fld = $(this).attr("tabulator-field")
// UTC時刻列の差異分を書き換え //
if (fld === "TM_ADD_UTC_SHORT") {
//console.log($(this).html())
let html = $(this).html()
let ary = html.split("<br>")
// セルデータのUTC時刻と今との差異分 //
const diffToNow = Math.round(lt.getMinuteTimeDifference(utclong, currtmtxt)) + "MA"
//console.log(diffToNow)
// セルを書き換え //
ary[3] = diffToNow
$(this).html(`${ary[0]}<br>${ary[1]}<br>${ary[2]}<br>${ary[3]}`)
}
})
})
}
< 画面例 >
タイマーで30秒に1回、離着陸が何分前であるかを更新していく