Content Inventory

Unified View of All Platform Content

Content Inventory

Track all educational content across the IoT Class platform.

Auth = new Promise((resolve, reject) => {
  const authIsReady = () =>
    window.__authReady && typeof window.Auth?.getCurrentUser === 'function';

  if (authIsReady()) {
    resolve(window.Auth);
    return;
  }

  const timeoutMs = 10000;
  const timer = setTimeout(() => {
    window.removeEventListener('auth:ready', onAuthReady);
    reject(new Error('Sign-in system failed to load. Please refresh the page.'));
  }, timeoutMs);

  function onAuthReady() {
    clearTimeout(timer);
    window.removeEventListener('auth:ready', onAuthReady);
    if (authIsReady()) {
      resolve(window.Auth);
    } else {
      reject(new Error('Sign-in system failed to load. Please refresh the page.'));
    }
  }

  window.addEventListener('auth:ready', onAuthReady);
})

// Colors
colors = ({
  navy: '#2C3E50',
  teal: '#16A085',
  orange: '#E67E22',
  gray: '#7F8C8D'
})

// Check authentication and admin status
currentUser = {
  const user = Auth.getCurrentUser();
  if (!user) return null;

  // B8: the admin role is a database fact -- public.is_admin(), backed by the
  // user_roles table and evaluated by the same RLS policies that guard every
  // query below. Auth.isUserAdmin() only string-matches the adminUsers list
  // that ships in public JavaScript, so it is not a control.
  const isAdmin = window.IoTClassSupabase?.isAdminServerSide
    ? await window.IoTClassSupabase.isAdminServerSide()
    : false;
  return { ...user, isAdmin };
}

// Load content inventory from gallery indices
contentInventory = {
  if (!currentUser || !currentUser.isAdmin) {
    return null;
  }

  try {
    // Load all gallery indices
    const [gamesIndex, simsIndex, labsIndex, checksIndex, squadIndex] = await Promise.all([
      fetch('/assets/data/games-master-index.json').then(r => r.json()).catch(() => ({ galleries: {} })),
      fetch('/assets/data/simulations-master-index.json').then(r => r.json()).catch(() => ({ galleries: {} })),
      fetch('/assets/data/labs-master-index.json').then(r => r.json()).catch(() => ({ galleries: {} })),
      fetch('/assets/data/knowledge-checks-master-index.json').then(r => r.json()).catch(() => ({ galleries: {} })),
      fetch('/assets/data/sensor-squad-master-index.json').then(r => r.json()).catch(() => ({ galleries: {} }))
    ]);

    // Aggregate by chapter
    const chapterMap = new Map();

    // Helper to add content to chapter
    const addToChapter = (chapterPath, type) => {
      if (!chapterMap.has(chapterPath)) {
        chapterMap.set(chapterPath, {
          chapter: chapterPath,
          games: 0,
          simulations: 0,
          labs: 0,
          knowledgeChecks: 0,
          sensorSquad: 0
        });
      }
      const entry = chapterMap.get(chapterPath);
      entry[type]++;
    };

    // Process games
    Object.values(gamesIndex.galleries || {}).forEach(gallery => {
      (gallery.items || []).forEach(item => {
        if (item.chapter_path) {
          addToChapter(item.chapter_path, 'games');
        }
      });
    });

    // Process simulations
    Object.values(simsIndex.galleries || {}).forEach(gallery => {
      (gallery.items || []).forEach(item => {
        if (item.chapter_path) {
          addToChapter(item.chapter_path, 'simulations');
        }
      });
    });

    // Process labs
    Object.values(labsIndex.galleries || {}).forEach(gallery => {
      (gallery.items || []).forEach(item => {
        if (item.chapter_path) {
          addToChapter(item.chapter_path, 'labs');
        }
      });
    });

    // Process knowledge checks
    Object.values(checksIndex.galleries || {}).forEach(gallery => {
      (gallery.items || []).forEach(item => {
        if (item.chapter_path) {
          addToChapter(item.chapter_path, 'knowledgeChecks');
        }
      });
    });

    // Process Sensor Squad
    Object.values(squadIndex.galleries || {}).forEach(gallery => {
      (gallery.items || []).forEach(item => {
        if (item.chapter_path) {
          addToChapter(item.chapter_path, 'sensorSquad');
        }
      });
    });

    // Convert to array and sort by chapter name
    const inventory = Array.from(chapterMap.values())
      .sort((a, b) => a.chapter.localeCompare(b.chapter));

    // Calculate totals
    const totals = inventory.reduce((acc, item) => ({
      games: acc.games + item.games,
      simulations: acc.simulations + item.simulations,
      labs: acc.labs + item.labs,
      knowledgeChecks: acc.knowledgeChecks + item.knowledgeChecks,
      sensorSquad: acc.sensorSquad + item.sensorSquad
    }), { games: 0, simulations: 0, labs: 0, knowledgeChecks: 0, sensorSquad: 0 });

    return {
      inventory,
      totals,
      chaptersWithContent: inventory.length,
      chaptersWithGaps: inventory.filter(item =>
        item.games === 0 || item.labs === 0 || item.knowledgeChecks === 0
      ).length
    };
  } catch (error) {
    console.error('Error loading content inventory:', error);
    return null;
  }
}

// Filter state
viewState = ({ search: '', sortBy: 'chapter', filterType: 'all' })

// Filtered and sorted inventory
filteredInventory = {
  if (!contentInventory) return [];

  let filtered = contentInventory.inventory;

  // Apply search filter
  if (viewState.search) {
    const searchLower = viewState.search.toLowerCase();
    filtered = filtered.filter(item =>
      item.chapter.toLowerCase().includes(searchLower)
    );
  }

  // Apply type filter
  if (viewState.filterType !== 'all') {
    filtered = filtered.filter(item => {
      switch (viewState.filterType) {
        case 'with-gaps':
          return item.games === 0 || item.labs === 0 || item.knowledgeChecks === 0;
        case 'complete':
          return item.games > 0 && item.labs > 0 && item.knowledgeChecks > 0;
        case 'games-only':
          return item.games > 0;
        case 'labs-only':
          return item.labs > 0;
        case 'checks-only':
          return item.knowledgeChecks > 0;
        default:
          return true;
      }
    });
  }

  // Apply sorting
  filtered.sort((a, b) => {
    switch (viewState.sortBy) {
      case 'chapter':
        return a.chapter.localeCompare(b.chapter);
      case 'games':
        return b.games - a.games;
      case 'simulations':
        return b.simulations - a.simulations;
      case 'labs':
        return b.labs - a.labs;
      case 'checks':
        return b.knowledgeChecks - a.knowledgeChecks;
      case 'total':
        return (b.games + b.simulations + b.labs + b.knowledgeChecks) -
               (a.games + a.simulations + a.labs + a.knowledgeChecks);
      default:
        return 0;
    }
  });

  return filtered;
}

// Render access denied if not admin
html`${!Auth.isUserAuthenticated() || !currentUser?.isAdmin ? `
  <div class="access-denied">
    <div style="font-size: 72px; margin-bottom: 20px;">🔒</div>
    <h2 style="color: ${colors.navy}; margin-bottom: 16px;">Access Denied</h2>
    <p style="color: ${colors.gray}; margin-bottom: 24px;">
      You must be an administrator to access this page.
    </p>
  </div>
` : ''}`

// Render inventory if admin
html`${currentUser?.isAdmin && contentInventory ? `
  <!-- Summary Cards -->
  <div class="summary-cards">
    <div class="summary-card">
      <div class="summary-value">${contentInventory.chaptersWithContent}</div>
      <div class="summary-label">Chapters with Content</div>
    </div>

    <div class="summary-card">
      <div class="summary-value" style="color: ${colors.teal};">${contentInventory.totals.games}</div>
      <div class="summary-label">Total Games</div>
    </div>

    <div class="summary-card">
      <div class="summary-value" style="color: #2874A6;">${contentInventory.totals.simulations}</div>
      <div class="summary-label">Total Simulations</div>
    </div>

    <div class="summary-card">
      <div class="summary-value" style="color: #D68910;">${contentInventory.totals.labs}</div>
      <div class="summary-label">Total Labs</div>
    </div>

    <div class="summary-card">
      <div class="summary-value" style="color: #7D3C98;">${contentInventory.totals.knowledgeChecks}</div>
      <div class="summary-label">Total Knowledge Checks</div>
    </div>

    <div class="summary-card">
      <div class="summary-value" style="color: #943126;">${contentInventory.totals.sensorSquad}</div>
      <div class="summary-label">Total Sensor Squad</div>
    </div>
  </div>

  <!-- Filter Bar -->
  <div class="filter-bar">
    <input
      type="text"
      class="filter-input"
      placeholder="Search chapters..."
      value="${viewState.search}"
      oninput="viewState = { ...viewState, search: this.value }"
    />

    <select
      class="filter-select"
      value="${viewState.filterType}"
      onchange="viewState = { ...viewState, filterType: this.value }"
    >
      <option value="all">All Chapters</option>
      <option value="with-gaps">Chapters with Gaps</option>
      <option value="complete">Complete Chapters</option>
      <option value="games-only">Has Games</option>
      <option value="labs-only">Has Labs</option>
      <option value="checks-only">Has Knowledge Checks</option>
    </select>

    <select
      class="filter-select"
      value="${viewState.sortBy}"
      onchange="viewState = { ...viewState, sortBy: this.value }"
    >
      <option value="chapter">Sort by Chapter</option>
      <option value="games">Sort by Games</option>
      <option value="simulations">Sort by Simulations</option>
      <option value="labs">Sort by Labs</option>
      <option value="checks">Sort by Checks</option>
      <option value="total">Sort by Total Content</option>
    </select>
  </div>

  <!-- Inventory Table -->
  <table class="inventory-table">
    <thead>
      <tr>
        <th onclick="viewState = { ...viewState, sortBy: 'chapter' }">Chapter</th>
        <th style="width: 100px; text-align: center;" onclick="viewState = { ...viewState, sortBy: 'games' }">Games</th>
        <th style="width: 100px; text-align: center;" onclick="viewState = { ...viewState, sortBy: 'simulations' }">Sims</th>
        <th style="width: 100px; text-align: center;" onclick="viewState = { ...viewState, sortBy: 'labs' }">Labs</th>
        <th style="width: 100px; text-align: center;" onclick="viewState = { ...viewState, sortBy: 'checks' }">Checks</th>
        <th style="width: 100px; text-align: center;">Squad</th>
        <th style="width: 100px; text-align: center;" onclick="viewState = { ...viewState, sortBy: 'total' }">Total</th>
        <th style="width: 100px;">Status</th>
      </tr>
    </thead>
    <tbody>
      ${filteredInventory.length === 0 ? `
        <tr>
          <td colspan="8" style="text-align: center; padding: 40px; color: ${colors.gray};">
            No chapters match the current filter.
          </td>
        </tr>
      ` : filteredInventory.map(item => {
        const total = item.games + item.simulations + item.labs + item.knowledgeChecks + item.sensorSquad;
        const hasGaps = item.games === 0 || item.labs === 0 || item.knowledgeChecks === 0;
        const chapterName = item.chapter.split('/').pop().replace('.qmd', '').replace(/-/g, ' ');

        return `
          <tr>
            <td>
              <div style="font-weight: 500; margin-bottom: 4px;">${chapterName}</div>
              <div style="font-size: 12px; color: ${colors.gray};">${item.chapter}</div>
            </td>
            <td style="text-align: center;">
              <span class="content-count ${item.games > 0 ? 'count-games' : 'count-zero'}">
                ${item.games}
              </span>
            </td>
            <td style="text-align: center;">
              <span class="content-count ${item.simulations > 0 ? 'count-simulations' : 'count-zero'}">
                ${item.simulations}
              </span>
            </td>
            <td style="text-align: center;">
              <span class="content-count ${item.labs > 0 ? 'count-labs' : 'count-zero'}">
                ${item.labs}
              </span>
            </td>
            <td style="text-align: center;">
              <span class="content-count ${item.knowledgeChecks > 0 ? 'count-checks' : 'count-zero'}">
                ${item.knowledgeChecks}
              </span>
            </td>
            <td style="text-align: center;">
              <span class="content-count ${item.sensorSquad > 0 ? 'count-sensor-squad' : 'count-zero'}">
                ${item.sensorSquad}
              </span>
            </td>
            <td style="text-align: center; font-weight: 600; color: ${colors.navy};">
              ${total}
            </td>
            <td style="text-align: center;">
              ${hasGaps ? '<span class="gap-indicator">Gaps</span>' : '<span style="color: ${colors.teal}; font-weight: 600;">✓</span>'}
            </td>
          </tr>
        `;
      }).join('')}
    </tbody>
  </table>

  <div style="text-align: center; color: ${colors.gray}; font-size: 14px; margin-top: 20px;">
    Showing ${filteredInventory.length} of ${contentInventory.chaptersWithContent} chapters •
    ${contentInventory.chaptersWithGaps} chapters have content gaps
  </div>

` : ''}`

Managing Content

Content Gap Guidelines

Chapters are considered “complete” when they have:

• ✅ At least 1 educational game
• ✅ At least 1 hands-on lab (Wokwi or other)
• ✅ At least 1 knowledge check (inline MCQ)

Optional but recommended:

• Simulations for complex concepts
• Sensor Squad sections for beginner-friendly explanations

Use this inventory to identify chapters that need additional content to improve learning outcomes.