<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>

  <style>

    table {

      border-collapse: collapse;

      width: 100%;

      margin-top: 1em;

    }

    th, td {

      border: 1px solid #ccc;

      padding: 8px;

      text-align: left;

    }

    th {

      background-color: #f0f0f0;

    }

  </style>

<div>

    データベースを開くお呪い: <span id="hint" style="color: white;">wicm</span>

    <input type="text" id="add_code" placeholder="半角英小文字４つ">

    <button onclick="openSupabase()">開く</button>

</div>

  <h1>PC学習室の利用状況</h1>

  <table id="data-table">

    <thead>

      <tr>

        <th>頻度</th>

        <th>人数</th>

      </tr>

    </thead>

    <tbody id="data-body">

      <tr><td colspan="2">お呪いを入力して「開く」</td></tr>

    </tbody>

  </table>

  <script>

    let supabase;

    function openSupabase() {

      const input = document.getElementById('add_code').value;

      const supabaseUrl = 'https://（非公開）.supabase.co';

      const supabaseKey1 = '（非公開）';

      const supabaseKey2 = '（非公開）';

      const supabaseKey3 = '（非公開）';

      const supabaseKey4 = '（非公開）';

      const supabaseKey = supabaseKey1 + '.' + supabaseKey2 + input.trim() + supabaseKey3 + '.' + supabaseKey4;

      supabase = window.supabase.createClient(supabaseUrl, supabaseKey);

      fetchData();

    }

    async function fetchData() {

      const tableBody = document.getElementById('data-body');

      tableBody.innerHTML = ''; // 初期化

      const { data, error } = await supabase.rpc('frequency_of_frequency');

      if (error) {

        console.error('データ取得エラー:', error.message);

        tableBody.innerHTML = '<tr><td colspan="2">データ取得に失敗しました。</td></tr>';

        return;

      }

      if (data.length === 0) {

        tableBody.innerHTML = '<tr><td colspan="2">データはありません。</td></tr>';

        return;

      }

      data.forEach(row => {

        const tr = document.createElement('tr');

        tr.innerHTML = `

          <td>${row.frequency || ''}</td>

          <td>${row.person_count || ''}</td>

        `;

        tableBody.appendChild(tr);

      });

    }

  </script>