APIを使って実装する

コピー

GET https://toseicloud-admin-api.laundry-dx.jp/api/public/device-statuses/{StoreID}?sort=unit_no

コピー

<div id="device-status">読み込み中…</div>

<script>
const STORE_ID = 10001;  // ← 店舗IDを指定
const API = `https://toseicloud-admin-api.laundry-dx.jp/api/public/device-statuses/${STORE_ID}?sort=unit_no`;
const STALE_MS = 10 * 60 * 1000;  // 10分以上古ければ通信途絶とみなす

// updated_at（日本時間・タイムゾーン表記なし）を +09:00 固定で読み取る
function updatedAtMs(s) {
  const m = /^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2}):(\d{2})$/.exec(s || "");
  if (!m) return null;
  const [y, mo, d, h, mi, sec] = m.slice(1).map(Number);
  return Date.UTC(y, mo - 1, d, h - 9, mi, sec);
}

// 通信が落ちている、または更新が止まっていれば未接続
function isOffline(d) {
  if (!d.connection_flg) return true;
  const t = updatedAtMs(d.device_status?.updated_at);
  return t !== null && Date.now() - t > STALE_MS;
}

async function loadDeviceStatus() {
  const res = await fetch(API);
  const { result } = await res.json();

  document.getElementById("device-status").innerHTML = result.map(d => {
    const offline = isOffline(d);
    const running = !offline && d.device_status?.operation_status?.code === "1";
    const state = offline ? "未接続" : running ? "運転中" : "空き";
    const remain = (running && d.device_status.remaining_time > 0)
      ? `（残り${d.device_status.remaining_time}分）` : "";
    return `<li>${d.unit_no}号機 ${d.device_type_master?.name ?? ""}：${state}${remain}</li>`;
  }).join("");
}

loadDeviceStatus();
setInterval(loadDeviceStatus, 30000);  // 30秒ごとに更新
</script>