$p.send

/**
 * ================================================================
 * サンプル  開いたままの一覧を一定間隔で描き直し、新着の件数を知らせる
 * ================================================================
 *
 * 【概要】
 *   問い合わせの受付ボードなど、開いたままにしておく一覧を、一定間隔で
 *   $p.send($('#Grid')) により描き直します。前回の表示に無かったレコードの件数を、
 *   一覧の上の表示欄と、ブラウザのタブのタイトルの先頭（「(2) 」など）で知らせます。
 *   タブが裏にあるときと、ダイアログを開いているときは描き直しません。
 *   表示欄のボタンで自動更新を止められ、その状態はブラウザに保存します。
 *
 * 【使い方】
 *   出力先：一覧
 *   件数の多い一覧ではなく、「未完了」などに絞ったビューで使ってください。
 * ================================================================
 */

// 描き直す間隔（秒）
const REFRESH_SECONDS = 60;
// 自動更新のオン・オフを保存するキー（テーブルごと）
const STORAGE_KEY = `autoRefreshGrid_${$p.siteId()}`;
const BASE_TITLE = document.title;

let knownIds = null; // 前回表示していたレコードのID
let newCount = 0; // 表示欄をクリックしてからの新着の件数
let lastUpdated = new Date();
let timerStarted = false;

function gridIds() {
    return $('#Grid tbody tr[data-id]').map(function () {
        return $(this).attr('data-id');
    }).get();
}

// 自動更新のオン・オフ（ブラウザに保存できないときはオンとして扱う）
function isEnabled() {
    try {
        return localStorage.getItem(STORAGE_KEY) !== 'off';
    } catch (e) {
        return true;
    }
}

function setEnabled(enabled) {
    try {
        localStorage.setItem(STORAGE_KEY, enabled ? 'on' : 'off');
    } catch (e) {
        // 保存できなくても、画面の動きには関係しない
    }
}

function isPaused() {
    return document.hidden || $('.ui-dialog:visible').length > 0;
}

// 一覧の上の表示欄と、タブのタイトルを描き直す
function render() {
    let $bar = $('#AutoRefreshBar');
    if ($bar.length === 0) {
        $bar = $('<div id="AutoRefreshBar" style="margin:4px 0;padding:6px 10px;border:1px solid #c8d8ee;background:#eef4fb;cursor:pointer;"></div>')
            .on('click', function () {
                newCount = 0;
                render();
            });
        $('#Grid').before($bar);
    }
    const state = !isEnabled() ? '自動更新：オフ' : isPaused() ? '自動更新：停止中' : `自動更新：${REFRESH_SECONDS}秒ごと`;
    const news = newCount > 0 ? `新着${newCount}件（クリックで消す）　` : '';
    $bar.text(`${news}最終更新 ${lastUpdated.toTimeString().slice(0, 8)}　${state}　`);
    $('<button type="button" class="button ui-button ui-corner-all ui-widget"></button>')
        .text(isEnabled() ? '止める' : '再開する')
        .on('click', function (e) {
            e.stopPropagation();
            setEnabled(!isEnabled());
            render();
        })
        .appendTo($bar);
    document.title = newCount > 0 ? `(${newCount}) ${BASE_TITLE}` : BASE_TITLE;
}

function refresh() {
    if (!isEnabled() || isPaused()) {
        render();
        return;
    }
    $p.send($('#Grid'));
}

// 一覧を初めて表示したとき（$p.send で描き直したときは呼ばれない）
$p.events.on_grid_load = function () {
    knownIds = gridIds();
    lastUpdated = new Date();
    render();
    if (!timerStarted) {
        timerStarted = true;
        setInterval(refresh, REFRESH_SECONDS * 1000);
        // タブが表に戻ったら、すぐ1回描き直す
        document.addEventListener('visibilitychange', function () {
            if (!document.hidden) {
                refresh();
            }
        });
    }
};

// $p.send で一覧を描き直し終えたとき
$p.events.after_set_GridRows = function () {
    const ids = gridIds();
    if (knownIds !== null) {
        newCount += ids.filter((id) => !knownIds.includes(id)).length;
    }
    knownIds = ids;
    lastUpdated = new Date();
    render();
};