42trans / ft_transcendence

0 stars 0 forks source link

DMの時刻がローカライズされていない #371

Closed uminomae closed 2 months ago

uminomae commented 2 months ago

レビューでトーナメントのアナウンスをDMでチェックする際、日付が気になるかもしれません。

※クライアント側で対応すべき、ということで、トーナメントはjsで対応済みです。 /docker/srcs/uwsgi-django/pong/static/pong/js/tournament/round/StateBaseRound.js toLocaleString()

            // 試合終了している場合はスコア表示
            if (match.is_finished && match.ended_at) {
                const endedAt = new Date(match.ended_at); // ISO 8601形式の日時をDateオブジェクトに変換
                // ユーザーのロケールを自動で使用し、秒以降を除外
                const formattedEndedAt = endedAt.toLocaleString(undefined, {
                    year: 'numeric', // 年
                    month: '2-digit', // 月
                    day: '2-digit', // 日
                    hour: '2-digit', // 時
                    minute: '2-digit' // 分
                });

やるとしたら message_data.timestamp を一旦変数に入れて上記変換と同様のことを適用


export function handleReceiveMessage(event, userInfo, targetInfo) {
    const data = JSON.parse(event.data);
    const message_data = JSON.parse(data.data);

    if (DEBUG_LOG) { console.log('Received WebSocket data        :', data); }
    if (DEBUG_LOG) { console.log('Received WebSocket message_data:', message_data); }

    const senderInfo = getSenderInfo(message_data.sender_id, userInfo, targetInfo);

    let messageElement = createMessageElement(
        senderInfo.nickname,
        message_data.message,
        message_data.timestamp,
        senderInfo.avatar_url
    );
    const isSystemMessage = message_data.is_system_message;

    // メッセージに適切なクラスを適用
    classifyMessage(messageElement, isSystemMessage, message_data.sender_id, targetInfo.id);

    document.querySelector('#dm-log').appendChild(messageElement);

    scrollToBottom();  // dm-logのスクロール位置を調整
}
uminomae commented 2 months ago

ちょっと動かしてみました。トーナメントと同じでいけそうです


    // ---------------------------------------------
    // message_data.timestamp を ローカライズ
    // - サーバー側(Python)では、タイムスタンプを文字列形式(UTC)でクライアントに送信
    // - クライアント側(JavaScript)では、受信したUTCタイムスタンプ文字列をDateオブジェクトに変換
    // - toLocaleStringメソッドを使用して、Dateオブジェクトをクライアントのローカルタイムゾーンに基づいてフォーマット
    // ---------------------------------------------
    // 受信したタイムスタンプ文字列(message_data.timestamp)を、Dateコンストラクタで解析可能な形式(ISO 8601形式)に変換
    const timestamp = message_data.timestamp;
    const msgAt = new Date(timestamp.replace(' ', 'T') + 'Z');
    // toLocaleStringメソッドを使用してローカライズされた日時文字列を取得
    const formattedMsgAt = msgAt.toLocaleString(undefined, {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    });

    let messageElement = createMessageElement(
        senderInfo.nickname,
        message_data.message,
        formattedMsgAt,
        senderInfo.avatar_url
    );

    // UTCで出力する場合の処理(既存)
    // let messageElement = createMessageElement(
    //     senderInfo.nickname,
    //     message_data.message,
    //     message_data.timestamp,
    //     senderInfo.avatar_url
    // );

    // ---------------------------------------------