dashboard_broken.html

<!-- Emby plugin configuration page (fragment) -->
<div data-role="page" class="type-interior pluginConfigurationPage" id="studioDashboardPage">
  <div data-role="content">
    <h2>🎬 Studio Dashboard - Streaming Services</h2>

    <div class="inputContainer">
      <h3>Plugin-Einstellungen</h3>
      <div class="fieldDescription">
        Konfigurieren Sie die Anzeige der Streaming Services auf der Emby-Startseite.
      </div>
    </div>

    <div class="inputContainer">
      <button is="emby-button" type="button" id="syncCollections" class="raised button-submit">
        🔄 Studio-Collections synchronisieren
      </button>
      <div class="fieldDescription">
        Erstellt/aktualisiert automatisch Collections für alle Studios, damit sie auf der Startseite erscheinen.
      </div>
    </div>

    <div class="inputContainer">
      <input is="emby-input" id="search" type="text" label="Suche Studio…" />
    </div>

    <div class="inputContainer">
      <select is="emby-select" id="sort" label="Sortieren">
        <option value="count_desc" selected>Anzahl ↓</option>
        <option value="count_asc">Anzahl ↑</option>
        <option value="name_asc">Name A–Z</option>
        <option value="name_desc">Name Z–A</option>
      </select>
    </div>

    <div class="inputContainer">
      <select is="emby-select" id="topn" label="Top">
        <option value="0" selected>Alle</option>
        <option value="10">Top 10</option>
        <option value="20">Top 20</option>
        <option value="50">Top 50</option>
      </select>
    </div>

    <div class="inputContainer">
      <select is="emby-select" id="filterType" label="Filter">
        <option value="all" selected>Alle Studios</option>
        <option value="streaming">Nur Streaming-Dienste</option>
        <option value="traditional">Traditionelle Studios</option>
      </select>
    </div>

    <div class="inputContainer">
      <button is="emby-button" type="button" id="reload" class="raised button-submit">Neu laden</button>
    </div>

    <div class="inputContainer">
      <button is="emby-button" type="button" id="exportJson" class="raised">Export JSON (Download)</button>
      <button is="emby-button" type="button" id="exportCsv" class="raised">Export CSV (Download)</button>
    </div>

    <div class="inputContainer">
      <button is="emby-button" type="button" id="saveJson" class="raised">Auf Server speichern (JSON)</button>
      <button is="emby-button" type="button" id="saveCsv" class="raised">Auf Server speichern (CSV)</button>
    </div>

    <div class="fieldDescription" id="status">Bereit</div>

    <div class="verticalSection">
      <div class="sectionTitle">Streaming Studios</div>
      <div id="tablewrap">Lade Daten…</div>
    </div>
  </div>
</div>

<script>
(function () {
  const page   = document.getElementById(\'studioDashboardPage\');
  const table  = page.querySelector(\'#tablewrap\');
  const search = page.querySelector(\'#search\');
  const sortEl = page.querySelector(\'#sort\');
  const topEl  = page.querySelector(\'#topn\');
  const filterEl = page.querySelector(\'#filterType\');
  const reload = page.querySelector(\'#reload\');
  const status = page.querySelector(\'#status\');
  const syncBtn = page.querySelector(\'#syncCollections\');

  const btnExportJson = page.querySelector(\'#exportJson\');
  const btnExportCsv  = page.querySelector(\'#exportCsv\');
  const btnSaveJson   = page.querySelector(\'#saveJson\');
  const btnSaveCsv    = page.querySelector(\'#saveCsv\');

  let raw = [];
  let currentSort = \'count_desc\';

  function setStatus(msg){ status.textContent = msg || \'\'; }

  function sortData(arr, key) {
    const data = arr.slice();
    switch (key) {
      case \'count_desc\': data.sort((a,b) => (b.Count - a.Count) || a.Studio.localeCompare(b.Studio)); break;
      case \'count_asc\':  data.sort((a,b) => (a.Count - b.Count) || a.Studio.localeCompare(b.Studio)); break;
      case \'name_asc\':   data.sort((a,b) => a.Studio.localeCompare(b.Studio)); break;
      case \'name_desc\':  data.sort((a,b) => b.Studio.localeCompare(a.Studio)); break;
    }
    return data;
  }

  function render(arr) {
    if (!Array.isArray(arr) || arr.length === 0) {
      table.innerHTML = \'<div class="fieldDescription">Keine Studios gefunden.</div>\';
      return;
    }
    
    let html = \'<table class="detailTable"><thead><tr><th data-k="name">Studio</th><th data-k="count">Anzahl</th><th data-k="type">Typ</th><th data-k="logo">Logo</th></tr></thead><tbody>\';
    
    arr.forEach(s => { 
      const typeIcon = s.IsStreamingService ? \'📺\' : \'🎬\';
      const typeText = s.IsStreamingService ? \'Streaming\' : \'Traditional\';
      const logoIndicator = s.LogoUrl ? \'✅\' : \'❌\';
      
      html += `<tr>
        <td><strong>${s.Studio}</strong></td>
        <td>${s.Count}</td>
        <td>${typeIcon} ${typeText}</td>
        <td>${logoIndicator}</td>
      </tr>`; 
    });
    
    html += \'</tbody></table>\';
    table.innerHTML = html;

    const thName  = table.querySelector(\'th[data-k="name"]\');
    const thCount = table.querySelector(\'th[data-k="count"]\');
    thName.addEventListener(\'click\',  () => { sortEl.value = (currentSort === \'name_asc\' ? \'name_desc\' : \'name_asc\');  apply(); });
    thCount.addEventListener(\'click\', () => { sortEl.value = (currentSort === \'count_desc\' ? \'count_asc\' : \'count_desc\'); apply(); });
  }

  function apply() {
    const q = (search.value || \'\').trim().toLowerCase();
    const filter = filterEl.value || \'all\';
    currentSort = sortEl.value;
    const top = parseInt(topEl.value || \'0\', 10);

    let filtered = raw.filter(x => {
      if (q && (!x.Studio || !x.Studio.toLowerCase().includes(q))) return false;
      if (filter === \'streaming\' && !x.IsStreamingService) return false;
      if (filter === \'traditional\' && x.IsStreamingService) return false;
      return true;
    });
    
    filtered = sortData(filtered, currentSort);
    const view = top > 0 ? filtered.slice(0, top) : filtered;

    render(view);
    const streamingCount = filtered.filter(x => x.IsStreamingService).length;
    const traditionalCount = filtered.filter(x => !x.IsStreamingService).length;
    setStatus(`${filtered.length} Studios (${streamingCount} Streaming, ${traditionalCount} Traditional)`);
  }

  async function load() {
    try {
      setStatus('Lade…');
      table.textContent = 'Lade Daten…';
      
      // First, test if the API is working at all
      try {
        const testUrl = ApiClient.getUrl('StudioDashboard/Test');
        const testResult = await ApiClient.getJSON(testUrl);
        console.log('StudioDashboard API Test:', testResult);
      } catch (testError) {
        console.error('StudioDashboard API Test failed:', testError);
        table.innerHTML = 'API Test Fehler: ' + (testError.message || testError);
        setStatus('API nicht erreichbar');
        return;
      }
      
      const url = ApiClient.getUrl('StudioDashboard/StudiosWithLogos');
      console.log('Calling StudioDashboard API:', url);
      raw = await ApiClient.getJSON(url);
      console.log('Received data:', raw);
      apply();
    } catch (e) {
      console.error('Load error:', e);
      table.innerHTML = 'Fehler beim Laden: ' + (e && e.message ? e.message : e);
      setStatus('Fehler');
    }
  }

  async function syncCollections() {
    try {
      setStatus(\'Synchronisiere Collections…\');
      syncBtn.disabled = true;
      syncBtn.textContent = \'⏳ Synchronisiere…\';
      
      const url = ApiClient.getUrl(\'StudioDashboard/SyncCollections\');
      const result = await ApiClient.ajax({ url, type: \'POST\' });
      
      setStatus(\'Collections synchronisiert! Die Studios sollten jetzt auf der Startseite erscheinen.\');
    } catch (e) {
      setStatus(\'Fehler beim Synchronisieren: \' + (e && e.message ? e.message : e));
    } finally {
      syncBtn.disabled = false;
      syncBtn.textContent = \'🔄 Studio-Collections synchronisieren\';
    }
  }

  function download(filename, mimetype, content) {
    const blob = new Blob([content], { type: mimetype });
    const a = document.createElement(\'a\');
    a.href = URL.createObjectURL(blob);
    a.download = filename;
    a.click();
    setTimeout(() => URL.revokeObjectURL(a.href), 2000);
  }

  btnExportJson.addEventListener(\'click\', async () => {
    const url = ApiClient.getUrl(\'StudioDashboard/ExportJson\');
    const data = await ApiClient.getJSON(url);
    download(`studios-${new Date().toISOString().slice(0,19).replace(/[:T]/g,\'\')}.json`, \'application/json\', JSON.stringify(data, null, 2));
  });

  btnExportCsv.addEventListener(\'click\', async () => {
    const url = ApiClient.getUrl(\'StudioDashboard/ExportCsv\');
    const csv = await ApiClient.ajax({ url, type: \'GET\', dataType: \'text\' });
    download(`studios-${new Date().toISOString().slice(0,19).replace(/[:T]/g,\'\')}.csv`, \'text/csv\', csv);
  });

  btnSaveJson.addEventListener(\'click\', async () => {
    try {
      const url = ApiClient.getUrl(\'StudioDashboard/SaveExport\', { Format: \'json\' });
      const res = await ApiClient.ajax({ url, type: \'POST\' });
      setStatus(res && res.Path ? (\'Gespeichert: \' + res.Path) : \'Gespeichert.\');
    } catch (e) {
      setStatus(\'Fehler beim Speichern (JSON)\');
    }
  });

  btnSaveCsv.addEventListener(\'click\', async () => {
    try {
      const url = ApiClient.getUrl(\'StudioDashboard/SaveExport\', { Format: \'csv\' });
      const res = await ApiClient.ajax({ url, type: \'POST\' });
      setStatus(res && res.Path ? (\'Gespeichert: \' + res.Path) : \'Gespeichert.\');
    } catch (e) {
      setStatus(\'Fehler beim Speichern (CSV)\');
    }
  });

  page.addEventListener(\'viewshow\', load);
  search.addEventListener(\'input\', apply);
  sortEl.addEventListener('change', apply);
  topEl.addEventListener('change', apply);
  filterEl.addEventListener('change', apply);
  reload.addEventListener('click', load);
  syncBtn.addEventListener('click', syncCollections);
})();
</script>