Day 21：基礎時間轉換器設計

🎯 系列目標：用 30 天時間，從零開始打造一個專屬輔大學生的課表生成 Chrome 擴充功能

💻 作者：輔大智慧資安 412580084

📅 Day 21：基礎時間轉換器設計

🔗 課程系列回顧

經過前 20 天的學習，我們已經建立了完整的資料提取架構。今天我們要開始處理課程時間資料，先建立一個基礎的時間轉換器。

📋 學習目標

今天我們要完成：

1. 🕐 設計標準時段對照表
2. 📊 實作基礎時間轉換功能
3. 🔧 建立星期轉換機制
4. 🧪 測試轉換器功能

🕐 標準時段對照表設計

1.1 輔大時段分析

輔大的課程時段有其特定的編號系統，這裡我們將建立完整與輔大對應的時間表：

// 時間轉換器類別
class TimeConverter {
  constructor() {
    // 建立基本時段對照表
    this.periodTimeMap = {
      '1': {
        time: '08:10-09:00',
        display: '第一節',
        order: 1
      },
      '2': {
        time: '09:10-10:00', 
        display: '第二節',
        order: 2
      },
      '3': {
        time: '10:10-11:00',
        display: '第三節', 
        order: 3
      },
      '4': {
        time: '11:10-12:00',
        display: '第四節',
        order: 4
      },
      'DN': {
        time: '12:10-13:00',
        display: '午休',
        order: 5
      },
      '5': {
        time: '13:40-14:30',
        display: '第五節',
        order: 6
      },
      '6': {
        time: '14:40-15:30',
        display: '第六節',
        order: 7
      },
      '7': {
        time: '15:40-16:30',
        display: '第七節',
        order: 8
      },
      '8': {
        time: '16:40-17:30',
        display: '第八節',
        order: 9
      },
      'E0': {
        time: '17:40-18:30',
        display: '夜間第零節',
        order: 10
      }
    };
    
    this.log('⏰ 時間轉換器初始化完成');
  }

  // 轉換時段編號為時間
  convertPeriodToTime(period) {
    const timeInfo = this.periodTimeMap[period];
    if (!timeInfo) {
      this.log(`⚠️ 未知時段: ${period}`);
      return {
        time: '未知時間',
        display: `第${period}節`,
        order: 999
      };
    }
    
    return timeInfo;
  }

  // 日誌輸出
  log(message) {
    console.log(`[TimeConverter] ${message}`);
  }
}

1.2 星期轉換機制

處理中文星期與數字的轉換：

// 在 TimeConverter 類別中新增星期轉換功能
class TimeConverter {
  constructor() {
    // ... 原有的 periodTimeMap ...
    
    // 星期對照表
    this.dayMap = {
      '一': 1,
      '二': 2,
      '三': 3,
      '四': 4,
      '五': 5,
      '六': 6,
      '日': 0
    };
    
    this.log('⏰ 時間轉換器初始化完成');
  }

  // 轉換星期為數字
  convertDayToNumber(day) {
    const dayNumber = this.dayMap[day];
    if (dayNumber === undefined) {
      this.log(`⚠️ 未知星期: ${day}`);
      return -1;
    }
    
    return dayNumber;
  }

  // 轉換數字為星期
  convertNumberToDay(number) {
    const dayNames = ['日', '一', '二', '三', '四', '五', '六'];
    return dayNames[number] || '未知';
  }

  // ... 原有的其他方法 ...
}

📊 基礎測試功能

2.1 轉換器測試

建立測試功能來驗證轉換器：

// 時間轉換器測試函數
function testTimeConverter() {
  console.log('🕐 開始測試時間轉換器');
  
  const converter = new TimeConverter();
  
  // 測試時段轉換
  const testPeriods = ['1', '2', 'DN', '5', 'E0'];
  testPeriods.forEach(period => {
    const result = converter.convertPeriodToTime(period);
    console.log(`時段 ${period}:`, result);
  });
  
  // 測試星期轉換
  const testDays = ['一', '二', '三', '四', '五'];
  testDays.forEach(day => {
    const number = converter.convertDayToNumber(day);
    const backToDay = converter.convertNumberToDay(number);
    console.log(`星期${day} -> ${number} -> 星期${backToDay}`);
  });
  
  console.log('✅ 時間轉換器測試完成');
}

2.2 在 content.js 中整合

將時間轉換器加入到我們的 content.js 中：

// 在 content.js 最後加入以下程式碼

// 複製上述的 TimeConverter 類別
// ... TimeConverter 類別定義 ...

// 複製測試函數
// ... testTimeConverter 函數 ...

// 執行測試
testTimeConverter();

2.3 程式碼清理說明

ℹ️ 重要提示：在加入新的 TimeConverter 類別時，我們需要移除一些重複的程式碼：

// 已刪除：第一個不完整的 TimeConverter 類別定義
// class TimeConverter { 
//   constructor() {
//     // ... 原有的 periodTimeMap ...
//     // 星期對照表
//     this.dayMap = { /* ... */ };
//     console.log('⏰ 時間轉換器初始化完成');
//   }
//   // 不完整的方法定義...
// }

// 保留：完整的 TimeConverter 類別定義
// 包含所有必要的方法和屬性

可以避免出現 Identifier 'TimeConverter' has already been declared 的錯誤。

若以上步驟皆完成了將會看到以下效果在選課清單日誌中

🎯 明日預告

今天我們建立了基礎的時間轉換系統，明天我們要處理更複雜的多時段組合！