橘子蘋果課程活動報名系統 | 程式專案

{"id":847528,"student_id":2589,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"zh-TW\\\"\u003e\\n  \u003chead\u003e\\n    \u003cmeta charset=\\\"UTF-8\\\" /\u003e\\n    \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\" /\u003e\\n    \u003ctitle\u003e橘子蘋果課程活動報名系統\u003c/title\u003e\\n    \u003clink rel=\\\"preconnect\\\" href=\\\"https://fonts.googleapis.com\\\" /\u003e\\n    \u003clink rel=\\\"preconnect\\\" href=\\\"https://fonts.gstatic.com\\\" crossorigin /\u003e\\n    \u003clink\\n      href=\\\"https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900\u0026family=Noto+Sans+TC:wght@100..900\u0026display=swap\\\"\\n      rel=\\\"stylesheet\\\"\\n    /\u003e\\n    \u003c!-- Bootstrap 5 CSS --\u003e\\n    \u003clink\\n      href=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css\\\"\\n      rel=\\\"stylesheet\\\"\\n    /\u003e\\n    \u003clink\\n      rel=\\\"stylesheet\\\"\\n      href=\\\"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css\\\"\\n      integrity=\\\"sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ==\\\"\\n      crossorigin=\\\"anonymous\\\"\\n      referrerpolicy=\\\"no-referrer\\\"\\n    /\u003e\\n\\n    \u003clink rel=\\\"stylesheet\\\" href=\\\"./style.css\\\" /\u003e\\n\\n    \u003c!-- jQuery --\u003e\\n    \u003cscript src=\\\"https://code.jquery.com/jquery-3.6.0.min.js\\\"\u003e\u003c/script\u003e\\n    \u003c!-- Bootstrap 5 JS --\u003e\\n    \u003cscript src=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js\\\"\u003e\u003c/script\u003e\\n  \u003c/head\u003e\\n  \u003cbody\u003e\\n    \u003c!-- 載入指示器 --\u003e\\n    \u003cdiv class=\\\"spinner-overlay d-none\\\" id=\\\"loadingPage\\\"\u003e\\n      \u003cdiv class=\\\"spinner-border text-primary\\\" role=\\\"status\\\"\u003e\\n        \u003cspan class=\\\"visually-hidden\\\"\u003e載入中...\u003c/span\u003e\\n      \u003c/div\u003e\\n    \u003c/div\u003e\\n\\n    \u003c!-- 導航欄 --\u003e\\n    \u003cnav class=\\\"navbar fixed-top navbar-expand-lg navbar-dark bg-dark\\\"\u003e\\n      \u003cdiv class=\\\"container-fluid\\\"\u003e\\n        \u003ca class=\\\"navbar-brand\\\"\u003e橘子蘋果課程活動報名系統\u003c/a\u003e\\n        \u003cbutton\\n          class=\\\"navbar-toggler\\\"\\n          type=\\\"button\\\"\\n          data-bs-toggle=\\\"collapse\\\"\\n          data-bs-target=\\\"#navbarNav\\\"\\n          aria-controls=\\\"navbarNav\\\"\\n          aria-expanded=\\\"false\\\"\\n          aria-label=\\\"切換導航\\\"\\n        \u003e\\n          \u003cspan class=\\\"navbar-toggler-icon\\\"\u003e\u003c/span\u003e\\n        \u003c/button\u003e\\n        \u003cdiv class=\\\"collapse navbar-collapse\\\" id=\\\"navbarNav\\\"\u003e\\n          \u003cul class=\\\"navbar-nav ms-auto\\\"\u003e\\n            \u003c!-- 原本的開放場次選項 --\u003e\\n            \u003cli class=\\\"nav-item\\\"\u003e\\n              \u003ca\\n                class=\\\"nav-link active\\\"\\n                aria-current=\\\"page\\\"\\n                href=\\\"#\\\"\\n                id=\\\"openingSessionsTab\\\"\\n                \u003e\u003ci class=\\\"bi bi-calendar-check me-2\\\"\u003e\u003c/i\u003e活動報名\u003c/a\\n              \u003e\\n            \u003c/li\u003e\\n            \u003c!-- 新增的查詢報名資料選項 --\u003e\\n            \u003cli class=\\\"nav-item\\\"\u003e\\n              \u003ca class=\\\"nav-link\\\" href=\\\"#\\\" id=\\\"registrationQueryTab\\\"\\n                \u003e\u003ci class=\\\"bi bi-search me-2\\\"\u003e\u003c/i\u003e報名查詢\u003c/a\\n              \u003e\\n            \u003c/li\u003e\\n          \u003c/ul\u003e\\n        \u003c/div\u003e\\n      \u003c/div\u003e\\n    \u003c/nav\u003e\\n\\n    \u003c!-- 主內容區域 --\u003e\\n    \u003cdiv class=\\\"container my-5 pt-2\\\"\u003e\\n      \u003c!-- 開放場次區域 --\u003e\\n      \u003cdiv class=\\\"row\\\" id=\\\"openingSessionsSection\\\"\u003e\\n        \u003cdiv\\n          class=\\\"alert alert-warning mt-4 mb-0\\\"\\n          role=\\\"alert\\\"\\n          id=\\\"notificationMessage\\\"\\n          style=\\\"display: none\\\"\\n        \u003e\u003c/div\u003e\\n        \u003ch3 class=\\\"my-5 text-center\\\"\u003e目前開放報名的活動\u003c/h3\u003e\\n        \u003c!-- 卡片容器 --\u003e\\n        \u003cdiv class=\\\"row\\\" id=\\\"openingSessionsCards\\\"\u003e\\n          \u003c!-- 卡片內容由 jQuery 動態生成 --\u003e\\n        \u003c/div\u003e\\n      \u003c/div\u003e\\n\\n      \u003c!-- 新增的查詢報名資料區域 --\u003e\\n      \u003cdiv class=\\\"row d-none\\\" id=\\\"registrationQuerySection\\\"\u003e\\n        \u003ch3 class=\\\"my-5 text-center\\\"\u003e查詢報名資料\u003c/h3\u003e\\n        \u003c!-- 輸入身分證字號的表單 --\u003e\\n        \u003cdiv class=\\\"col-md-6 offset-md-3\\\"\u003e\\n          \u003cform id=\\\"idNumberForm\\\"\u003e\\n            \u003cdiv class=\\\"mb-3\\\"\u003e\\n              \u003clabel for=\\\"queryIdNumber\\\" class=\\\"form-label\\\"\\n                \u003e請輸入您的身分證字號\u003c/label\\n              \u003e\\n              \u003cinput\\n                type=\\\"text\\\"\\n                class=\\\"form-control\\\"\\n                id=\\\"queryIdNumber\\\"\\n                name=\\\"idNumber\\\"\\n                required\\n              /\u003e\\n            \u003c/div\u003e\\n            \u003cbutton type=\\\"submit\\\" class=\\\"btn btn-primary w-100\\\"\u003e查詢\u003c/button\u003e\\n          \u003c/form\u003e\\n        \u003c/div\u003e\\n        \u003c!-- 顯示查詢結果的區域 --\u003e\\n        \u003cdiv class=\\\"row mt-5\\\" id=\\\"registrationResults\\\"\u003e\\n          \u003c!-- 卡片內容將由 jQuery 動態生成 --\u003e\\n        \u003c/div\u003e\\n      \u003c/div\u003e\\n    \u003c/div\u003e\\n\\n    \u003c!-- 場次詳細資訊模態視窗 --\u003e\\n    \u003cdiv\\n      class=\\\"modal fade\\\"\\n      id=\\\"sessionDetailModal\\\"\\n      tabindex=\\\"-1\\\"\\n      aria-labelledby=\\\"sessionDetailModalLabel\\\"\\n      aria-hidden=\\\"true\\\"\\n    \u003e\\n      \u003cdiv class=\\\"modal-dialog modal-lg\\\"\u003e\\n        \u003cdiv class=\\\"modal-content\\\"\u003e\\n          \u003cdiv class=\\\"modal-header\\\"\u003e\\n            \u003ch5 class=\\\"modal-title\\\" id=\\\"sessionDetailModalLabel\\\"\u003e\\n              活動詳細資訊\\n            \u003c/h5\u003e\\n            \u003cbutton\\n              type=\\\"button\\\"\\n              class=\\\"btn-close\\\"\\n              data-bs-dismiss=\\\"modal\\\"\\n              aria-label=\\\"關閉\\\"\\n            \u003e\u003c/button\u003e\\n          \u003c/div\u003e\\n          \u003cdiv class=\\\"modal-body p-4\\\"\u003e\\n            \u003cdiv class=\\\"table-container position-relative table-responsive\\\"\u003e\\n              \u003ctable class=\\\"table table-bordered\\\" id=\\\"sessionDetailTable\\\"\u003e\\n                \u003ctr class=\\\"d-none\\\"\u003e\\n                  \u003cth\u003e場次編號\u003c/th\u003e\\n                  \u003ctd id=\\\"detailSessionId\\\"\u003e\u003c/td\u003e\\n                \u003c/tr\u003e\\n                \u003c!-- \u003ctr class=\\\"d-none\\\"\u003e\\n                  \u003cth\u003e活動群組編號\u003c/th\u003e\\n                  \u003ctd id=\\\"detailSessionGroupId\\\"\u003e\u003c/td\u003e\\n                \u003c/tr\u003e --\u003e\\n                \u003ctr\u003e\\n                  \u003cth\u003e活動名稱\u003c/th\u003e\\n                  \u003ctd id=\\\"detailSessionName\\\"\u003e\u003c/td\u003e\\n                \u003c/tr\u003e\\n                \u003ctr\u003e\\n                  \u003cth\u003e活動地點\u003c/th\u003e\\n                  \u003ctd id=\\\"detailSessionLocation\\\"\u003e\u003c/td\u003e\\n                \u003c/tr\u003e\\n                \u003ctr\u003e\\n                  \u003cth\u003e活動開始\u003c/th\u003e\\n                  \u003ctd id=\\\"detailSessionStartDate\\\"\u003e\u003c/td\u003e\\n                \u003c/tr\u003e\\n                \u003ctr\u003e\\n                  \u003cth\u003e活動結束\u003c/th\u003e\\n                  \u003ctd id=\\\"detailSessionEndDate\\\"\u003e\u003c/td\u003e\\n                \u003c/tr\u003e\\n                \u003ctr class=\\\"d-none\\\"\u003e\\n                  \u003cth\u003e場次人數限制\u003c/th\u003e\\n                  \u003ctd id=\\\"detailSessionCapacityLimit\\\"\u003e\u003c/td\u003e\\n                \u003c/tr\u003e\\n                \u003ctr\u003e\\n                  \u003cth\u003e報名開始\u003c/th\u003e\\n                  \u003ctd id=\\\"detailRegistrationStartTime\\\"\u003e\u003c/td\u003e\\n                \u003c/tr\u003e\\n                \u003ctr\u003e\\n                  \u003cth\u003e報名截止\u003c/th\u003e\\n                  \u003ctd id=\\\"detailRegistrationEndTime\\\"\u003e\u003c/td\u003e\\n                \u003c/tr\u003e\\n                \u003ctr class=\\\"d-none\\\"\u003e\\n                  \u003cth\u003e是否需要邀請碼\u003c/th\u003e\\n                  \u003ctd id=\\\"detailRequiresInvitationCode\\\"\u003e\u003c/td\u003e\\n                \u003c/tr\u003e\\n                \u003ctr\u003e\\n                  \u003cth\u003e報名人數\u003c/th\u003e\\n                  \u003ctd id=\\\"detailCurrentRegistrations\\\"\u003e\u003c/td\u003e\\n                \u003c/tr\u003e\\n              \u003c/table\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"card\\\"\u003e\\n              \u003cdiv id=\\\"detailSessionDescription\\\" class=\\\"card-body\\\"\u003e\\n                \u003cpre\u003eThis is some text within a card body.\u003c/pre\u003e\\n              \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003c!-- 報名表單 --\u003e\\n            \u003cdiv id=\\\"registrationFormContainer\\\" class=\\\"mt-4\\\"\u003e\\n              \u003cdiv class=\\\"card\\\"\u003e\\n                \u003cdiv class=\\\"card-body p-4\\\"\u003e\\n                  \u003ch5 class=\\\"card-title mt-3 mb-4\\\"\u003e活動報名表\u003c/h5\u003e\\n                  \u003cform id=\\\"registrationForm\\\"\u003e\\n                    \u003cinput type=\\\"hidden\\\" id=\\\"sessionId\\\" name=\\\"sessionId\\\" /\u003e\\n                    \u003c!-- 邀請碼 --\u003e\\n                    \u003cdiv class=\\\"mb-3\\\" id=\\\"invitationCodeField\\\"\u003e\\n                      \u003clabel for=\\\"invitationCode\\\" class=\\\"form-label\\\"\\n                        \u003e邀請碼\u003c/label\\n                      \u003e\\n                      \u003cinput\\n                        type=\\\"text\\\"\\n                        class=\\\"form-control\\\"\\n                        id=\\\"invitationCode\\\"\\n                        name=\\\"invitationCode\\\"\\n                      /\u003e\\n                    \u003c/div\u003e\\n                    \u003c!-- 參與者的身分證字號 --\u003e\\n                    \u003cdiv class=\\\"mb-3\\\" id=\\\"idNumberField\\\"\u003e\\n                      \u003clabel for=\\\"idNumber\\\" class=\\\"form-label\\\"\\n                        \u003e身分證字號\u003c/label\\n                      \u003e\\n                      \u003cinput\\n                        type=\\\"text\\\"\\n                        class=\\\"form-control\\\"\\n                        id=\\\"idNumber\\\"\\n                        name=\\\"idNumber\\\"\\n                        required\\n                      /\u003e\\n                    \u003c/div\u003e\\n                    \u003c!-- 姓名 --\u003e\\n                    \u003cdiv class=\\\"mb-3\\\" id=\\\"nameField\\\"\u003e\\n                      \u003clabel for=\\\"name\\\" class=\\\"form-label\\\"\\n                        \u003e護照上的中文姓名\u003c/label\\n                      \u003e\\n                      \u003cinput\\n                        type=\\\"text\\\"\\n                        class=\\\"form-control\\\"\\n                        id=\\\"name\\\"\\n                        name=\\\"name\\\"\\n                        required\\n                      /\u003e\\n                    \u003c/div\u003e\\n                    \u003c!-- 護照上的英文姓名 --\u003e\\n                    \u003cdiv class=\\\"mb-3\\\" id=\\\"passportNameField\\\"\u003e\\n                      \u003clabel for=\\\"passportName\\\" class=\\\"form-label\\\"\\n                        \u003e護照上的英文姓名\u003c/label\\n                      \u003e\\n                      \u003cinput\\n                        type=\\\"text\\\"\\n                        class=\\\"form-control\\\"\\n                        id=\\\"passportName\\\"\\n                        name=\\\"passportName\\\"\\n                        required\\n                      /\u003e\\n                      \u003cdiv class=\\\"form-text\\\"\u003e\\n                        請務必與護照相同，以全部大寫英文字母，姓氏在前、名在後，姓之後加逗號（以利區分姓氏及名字）。另外文名字音節中間之短橫，係為便於名字斷音，易於辨識之用，倘外文名字之間不加短橫，橘子蘋果也尊重申請人意願。填寫範例：WANG,XIAO-MING、WANG,XIAO-MING、WANG,XIAO\\n                        MING、WANG,XIAO MING。\\n                      \u003c/div\u003e\\n                    \u003c/div\u003e\\n                    \u003c!-- 電子信箱 --\u003e\\n                    \u003cdiv class=\\\"mb-3\\\" id=\\\"emailField\\\"\u003e\\n                      \u003clabel for=\\\"email\\\" class=\\\"form-label\\\"\\n                        \u003e聯絡用的電子信箱\u003c/label\\n                      \u003e\\n                      \u003cinput\\n                        type=\\\"email\\\"\\n                        class=\\\"form-control\\\"\\n                        id=\\\"email\\\"\\n                        name=\\\"email\\\"\\n                        required\\n                      /\u003e\\n                      \u003cdiv class=\\\"form-text\\\"\u003e\\n                        填錯電子信箱或信箱已滿無法收信者，會因為無法收到報名確認信而報名失敗，屆時需透過\\n                        Line\\n                        聯繫橘子蘋果刪除該筆報名資料，管理員受理後將直接刪除該筆資料並釋出名額，屆時即可正常報名。\\n                      \u003c/div\u003e\\n                    \u003c/div\u003e\\n\\n                    \u003c!-- 電話號碼 --\u003e\\n                    \u003cdiv class=\\\"mb-3\\\" id=\\\"phoneField\\\"\u003e\\n                      \u003clabel for=\\\"phone\\\" class=\\\"form-label\\\"\\n                        \u003e聯絡用的電話號碼\u003c/label\\n                      \u003e\\n                      \u003cinput\\n                        type=\\\"tel\\\"\\n                        class=\\\"form-control\\\"\\n                        id=\\\"phone\\\"\\n                        name=\\\"phone\\\"\\n                        required\\n                      /\u003e\\n                    \u003c/div\u003e\\n                    \u003c!-- 出生日期 --\u003e\\n                    \u003cdiv class=\\\"mb-3\\\" id=\\\"birthDateField\\\"\u003e\\n                      \u003clabel for=\\\"birthDate\\\" class=\\\"form-label\\\"\u003e出生日期\u003c/label\u003e\\n                      \u003cinput\\n                        type=\\\"date\\\"\\n                        class=\\\"form-control\\\"\\n                        id=\\\"birthDate\\\"\\n                        name=\\\"birthDate\\\"\\n                        required\\n                      /\u003e\\n                    \u003c/div\u003e\\n                    \u003cbr /\u003e\\n                    \u003cdiv class=\\\"form-check mb-3\\\" id=\\\"confirmScoreField\\\"\u003e\\n                      \u003cinput\\n                        class=\\\"form-check-input\\\"\\n                        type=\\\"checkbox\\\"\\n                        id=\\\"confirmScore\\\"\\n                        name=\\\"confirmScore\\\"\\n                        required\\n                      /\u003e\\n                      \u003clabel class=\\\"form-check-label\\\" for=\\\"confirmScore\\\"\u003e\\n                        我已清楚了解，考生需於考前多加練習橘子蘋果程式檢定測驗平台提供的三張模擬測驗卷，讓三份模擬測驗卷都練習到平均\\n                        70\\n                        分以上。如果模擬考成績未達標，會加強練習並透過觀看教學影片了解錯誤原因。\\n                      \u003c/label\u003e\\n                      \u003cdiv class=\\\"invalid-feedback\\\"\u003e您必須確認此提醒。\u003c/div\u003e\\n                    \u003c/div\u003e\\n                    \u003cdiv class=\\\"form-check mb-3\\\" id=\\\"mustConfirmField1\\\"\u003e\\n                      \u003cinput\\n                        class=\\\"form-check-input\\\"\\n                        type=\\\"checkbox\\\"\\n                        id=\\\"mustConfirm1\\\"\\n                        name=\\\"mustConfirm1\\\"\\n                        required\\n                      /\u003e\\n                      \u003clabel class=\\\"form-check-label\\\" for=\\\"mustConfirm1\\\"\u003e\\n                        我已確認上述填寫資料無誤，且已清楚了解，因活動名額有限，為求公平，如果報名資料有誤，系統無法協助保留參與資格或修改報名場次與資料。\\n                      \u003c/label\u003e\\n                      \u003cdiv class=\\\"invalid-feedback\\\"\u003e您必須確認此提醒。\u003c/div\u003e\\n                    \u003c/div\u003e\\n                    \u003cdiv class=\\\"form-check mb-3\\\" id=\\\"mustConfirmField2\\\"\u003e\\n                      \u003cinput\\n                        class=\\\"form-check-input\\\"\\n                        type=\\\"checkbox\\\"\\n                        id=\\\"mustConfirm2\\\"\\n                        name=\\\"mustConfirm2\\\"\\n                        required\\n                      /\u003e\\n                      \u003clabel class=\\\"form-check-label\\\" for=\\\"mustConfirm2\\\"\u003e\\n                        我已清楚了解，\u003cb style=\\\"color: red\\\"\\n                          \u003e送出報名資料後會收到一封報名確認信，點擊信中的確認連結後才算是完成報名，確認取得參與資格\u003c/b\\n                        \u003e，因此我已確認報名資料中填寫的電子信箱能夠正常的收發信件。\\n                      \u003c/label\u003e\\n                      \u003cdiv class=\\\"invalid-feedback\\\"\u003e您必須確認此提醒。\u003c/div\u003e\\n                    \u003c/div\u003e\\n                    \u003c!-- 提交按鈕 --\u003e\\n                    \u003cbutton\\n                      type=\\\"submit\\\"\\n                      class=\\\"btn btn-primary mt-2 w-100\\\"\\n                      id=\\\"submitButton\\\"\\n                    \u003e\\n                      送出報名資料\\n                    \u003c/button\u003e\\n                  \u003c/form\u003e\\n                  \u003c!-- 載入動畫 --\u003e\\n                \u003c/div\u003e\\n              \u003c/div\u003e\\n\\n              \u003c!-- 錯誤訊息提示 --\u003e\\n              \u003cdiv\\n                id=\\\"alertMessage\\\"\\n                class=\\\"alert alert-danger mt-3\\\"\\n                style=\\\"display: none\\\"\\n              \u003e\u003c/div\u003e\\n            \u003c/div\u003e\\n          \u003c/div\u003e\\n          \u003cdiv class=\\\"modal-footer\\\"\u003e\\n            \u003cbutton\\n              type=\\\"button\\\"\\n              class=\\\"btn btn-secondary\\\"\\n              data-bs-dismiss=\\\"modal\\\"\\n            \u003e\\n              關閉\\n            \u003c/button\u003e\\n          \u003c/div\u003e\\n        \u003c/div\u003e\\n      \u003c/div\u003e\\n    \u003c/div\u003e\\n\\n    \u003c!-- 外部 JavaScript 檔案 --\u003e\\n    \u003cscript src=\\\"./main.js\\\"\u003e\u003c/script\u003e\\n  \u003c/body\u003e\\n\u003c/html\u003e\\n\",\"css\":\"* {\\n  font-family: \\\"Noto Sans Mono\\\", monospace, \\\"Noto Sans TC\\\", sans-serif;\\n}\\n\\nbody {\\n    position: relative;\\n}\\n\\nnav, h3 {\\n    letter-spacing: 0.2rem\\n}\\n\\n/* 自定義載入指示器樣式 */\\n.spinner-overlay {\\n    position: fixed;\\n    top: 0;\\n    left: 0;\\n    width: 100%;\\n    height: 100%;\\n    background: rgba(255, 255, 255, 0.7);\\n    display: flex;\\n    align-items: center;\\n    justify-content: center;\\n    z-index: 9998;\\n}\\n\\n.table-container {\\n    position: relative;\\n    min-height: 100px; /* 確保有足夠空間顯示載入指示器 */\\n}\\n\\n#openingSessionsCards {\\n    margin: 0 auto;\\n}\\n\\n.card-title {\\n    line-height: 1.5;\\n}\\n\",\"js\":\"$(document).ready(function () {\\n    const API_BASE_URL = 'https://script.google.com/macros/s/AKfycbyixezobqH3C7Ih6823yVpfCfpEQ6ooBnBAm08mOohSXhdJIPkXgf_ccBbYEv0nOKKw/exec';\\n\\n    let currentSessionId = null; // 當前選擇的場次ID\\n    let sessionData = null; // 當前場次的詳細資料\\n    let isRegistrationQueryMode = false; // 全局變量，判斷是否為查詢模式\\n\\n    // 初始化：載入開放場次\\n    loadOpeningSessions();\\n\\n    // 點擊導航欄的選項時切換內容\\n    $('#openingSessionsTab').click(function (e) {\\n        e.preventDefault();\\n        $(this).addClass('active');\\n        $('#registrationQueryTab').removeClass('active');\\n        $('#openingSessionsSection').removeClass('d-none');\\n        $('#registrationQuerySection').addClass('d-none');\\n        // 重新載入開放場次\\n        loadOpeningSessions();\\n    });\\n\\n    $('#registrationQueryTab').click(function (e) {\\n        e.preventDefault();\\n        $(this).addClass('active');\\n        $('#openingSessionsTab').removeClass('active');\\n        $('#registrationQuerySection').removeClass('d-none');\\n        $('#openingSessionsSection').addClass('d-none');\\n        // 清空之前的查詢結果\\n        $('#registrationResults').empty();\\n    });\\n\\n    // 載入開放場次的函數\\n    function loadOpeningSessions() {\\n        $('#loadingPage').removeClass('d-none'); // 顯示載入指示器\\n        var queryString = window.location.search;\\n        var urlParams = new URLSearchParams(queryString);\\n        var q = urlParams.get('q'); // Replace 'paramName' with your parameter name\\n        $.ajax({\\n            url: API_BASE_URL,\\n            method: 'GET',\\n            data: { \\n                api: `getOpeningSessions`,\\n                q: q \\n            },\\n            dataType: 'json',\\n            success: function (response) {\\n                if (response.openingSessions) {\\n                    const cardsContainer = $('#openingSessionsCards');\\n                    cardsContainer.empty();\\n                    response.openingSessions.forEach((session) =\u003e {\\n                        const requiresInvitation =\\n                            session.requiresInvitationCode === 'TRUE' ||\\n                            session.requiresInvitationCode === true;\\n                        cardsContainer.append(`\\n                            \u003cdiv class=\\\"col-md-4\\\"\u003e\\n                                \u003cdiv class=\\\"card mb-4\\\"\u003e\\n                                    \u003cdiv class=\\\"card-body p-4\\\"\u003e\\n                                        \u003ch5 class=\\\"card-title my-2 mb-3\\\"\u003e${session.sessionName}\u003c/h5\u003e\\n                                        \u003cp class=\\\"card-text\\\" style=\\\"line-height: 2\\\"\u003e\\n                                            \u003cstrong\u003e場次編號：\u003c/strong\u003e${session.sessionId.substring(0, 6)}\u003cbr\u003e\\n                                            \u003cstrong\u003e活動地點：\u003c/strong\u003e${session.sessionLocation}\u003cbr\u003e\\n                                            \u003cstrong\u003e活動開始：\u003c/strong\u003e${session.sessionStartDate.slice(0, -3)} UTC+8\u003cbr\u003e\\n                                            \u003cstrong\u003e活動結束：\u003c/strong\u003e${session.sessionEndDate.slice(0, -3)} UTC+8\u003cbr\u003e\\n                                            \u003cstrong\u003e報名開始：\u003c/strong\u003e${session.registrationStartTime.slice(0, -3)} UTC+8\u003cbr\u003e\\n                                            \u003cstrong\u003e報名截止：\u003c/strong\u003e${session.registrationEndTime.slice(0, -3)} UTC+8\u003cbr\u003e\\n                                            \u003cstrong\u003e報名人數：\u003c/strong\u003e${session.currentRegistrations} / ${session.sessionCapacityLimit}\u003cbr\u003e\\n                                            \u003cstrong\u003e報名限制：\u003c/strong\u003e${requiresInvitation ? '需要邀請碼' : '無'}\\n                                        \u003c/p\u003e\\n                                        \u003cbutton class=\\\"btn ${requiresInvitation ? 'btn-danger' : 'btn-primary'} view-details w-100\\\" data-session-id=\\\"${session.sessionId}\\\"\u003e\\n                                            前往報名\\n                                        \u003c/button\u003e\\n                                    \u003c/div\u003e\\n                                \u003c/div\u003e\\n                            \u003c/div\u003e\\n                        `);\\n                    });\\n                } else if (response.error) {\\n                    showAlert('錯誤: ' + response.error);\\n                }\\n            },\\n            error: function () {\\n                showAlert('無法載入開放場次資料。請稍後再試。');\\n            },\\n            complete: function () {\\n                $('#loadingPage').addClass('d-none'); // 隱藏載入指示器\\n            },\\n        });\\n    }\\n\\n    // 點擊詳細按鈕時處理\\n    $(document).on('click', '.view-details', function () {\\n        const sessionId = $(this).data('session-id');\\n        currentSessionId = sessionId; // 設定當前場次ID\\n        // 判斷是否為查詢模式\\n        isRegistrationQueryMode = $(this).data('query-mode') === true || $(this).data('query-mode') === 'true';\\n        let registrationData = null;\\n        if (isRegistrationQueryMode) {\\n            // 獲取報名資料\\n            registrationData = $(this).data('registration');\\n        }\\n        fetchSessionDetails(sessionId, registrationData);\\n    });\\n\\n    // 查詢報名資料的表單提交處理\\n    $('#idNumberForm').on('submit', function (event) {\\n        event.preventDefault();\\n        $('#loadingPage').removeClass('d-none'); // 顯示載入指示器\\n        const idNumber = $('#queryIdNumber').val().trim();\\n        if (!idNumber) {\\n            alert('請輸入身份證字號');\\n            return;\\n        }\\n        // 發送 AJAX 請求查詢報名資料\\n        $.ajax({\\n            url: API_BASE_URL,\\n            method: 'GET',\\n            data: { api: 'getRegistrationByIdNumber', idNumber: idNumber },\\n            dataType: 'json',\\n            success: function (response) {\\n                if (response.registrations \u0026\u0026 response.registrations.length \u003e 0) {\\n                    // 清空查詢結果區域\\n                    $('#registrationResults').empty();\\n                    // 收集所有活動詳細信息的 Promise\\n                    const promises = response.registrations.map(function (registration) {\\n                        return fetchSessionDetailsById(registration.sessionId, registration);\\n                    });\\n                    // 使用 Promise.all 來等待所有 Promise 完成\\n                    Promise.all(promises)\\n                        .then(function () {\\n                            $('#loadingPage').addClass('d-none'); // 隱藏載入指示器\\n                        })\\n                        .catch(function () {\\n                            $('#loadingPage').addClass('d-none');\\n                            $('#registrationResults').append('\u003cp\u003e部分活動詳細信息查詢失敗。\u003c/p\u003e');\\n                        });\\n                } else if (response.message) {\\n                    $('#registrationResults').html(`\u003cp\u003e${response.message}\u003c/p\u003e`);\\n                    $('#loadingPage').addClass('d-none');\\n                } else {\\n                    $('#registrationResults').html('\u003cp\u003e查詢失敗，請稍後再試。\u003c/p\u003e');\\n                    $('#loadingPage').addClass('d-none');\\n                }\\n            },\\n            error: function () {\\n                $('#loadingPage').addClass('d-none');\\n                $('#registrationResults').html('\u003cp\u003e查詢失敗，請稍後再試。\u003c/p\u003e');\\n            },\\n        });\\n    });\\n\\n    // 根據 sessionId 查詢活動詳細信息，並顯示卡片\\n    function fetchSessionDetailsById(sessionId, registration) {\\n        // $('#loadingPage').removeClass('d-none'); // 顯示載入指示器\\n        return $.ajax({\\n            url: API_BASE_URL,\\n            method: 'GET',\\n            data: { api: 'getSession', sessionId: sessionId },\\n            dataType: 'json',\\n            success: function (response) {\\n                if (response.session) {\\n                    const session = response.session;\\n                    const status = registration.status;\\n                    const confirmationTime =\\n                        registration.confirmationTime || '尚未確認';\\n                    // 使用與開放場次相同的卡片組件\\n                    const card = $(`\\n                        \u003cdiv class=\\\"col-md-4\\\"\u003e\\n                            \u003cdiv class=\\\"card mb-4\\\"\u003e\\n                                \u003cdiv class=\\\"card-body p-4\\\"\u003e\\n                                    \u003ch5 class=\\\"card-title my-2 mb-3\\\"\u003e${session.sessionName}\u003c/h5\u003e\\n                                    \u003cp class=\\\"card-text\\\" style=\\\"line-height: 2\\\"\u003e\\n                                        \u003cstrong\u003e場次編號：\u003c/strong\u003e${session.sessionId.substring(0, 6)}\u003cbr\u003e\\n                                        \u003cstrong\u003e活動地點：\u003c/strong\u003e${session.sessionLocation}\u003cbr\u003e\\n                                        \u003cstrong\u003e活動開始：\u003c/strong\u003e${session.sessionStartDate.slice(0, -3)} UTC+8\u003cbr\u003e\\n                                        \u003cstrong\u003e活動結束：\u003c/strong\u003e${session.sessionEndDate.slice(0, -3)} UTC+8\u003cbr\u003e\\n                                        \u003cstrong\u003e報名狀態：\u003c/strong\u003e${status}\u003cbr\u003e\\n                                        \u003cstrong\u003e確認時間：\u003c/strong\u003e${confirmationTime.slice(0, -3)} UTC+8\u003cbr\u003e\\n                                    \u003c/p\u003e\\n                                    \u003cbutton class=\\\"btn btn-primary view-details w-100\\\"\u003e\\n                                        查看詳細信息\\n                                    \u003c/button\u003e\\n                                \u003c/div\u003e\\n                            \u003c/div\u003e\\n                        \u003c/div\u003e\\n                    `);\\n                    // 附加數據到按鈕\\n                    card.find('.view-details').data('session-id', session.sessionId);\\n                    card.find('.view-details').data('registration', registration);\\n                    card.find('.view-details').data('query-mode', true);\\n                    $('#registrationResults').append(card);\\n                }\\n                $('#loadingPage').addClass('d-none');\\n            },\\n            error: function () {\\n                $('#loadingPage').addClass('d-none');\\n                console.error('無法取得活動詳細信息');\\n            },\\n        });\\n    }\\n\\n    // 載入指定場次的詳細信息\\n    function fetchSessionDetails(sessionId, registrationData) {\\n        $('#loadingPage').removeClass('d-none'); // 顯示載入指示器\\n        // 根據模式設置表單字段的必填屬性\\n        if (isRegistrationQueryMode) {\\n            $('#registrationForm').find('input, select, textarea').prop('required', false);\\n        } else {\\n            $('#registrationForm').find('input, select, textarea').prop('required', true);\\n        }\\n        $.ajax({\\n            url: API_BASE_URL,\\n            method: 'GET',\\n            data: { api: 'getSession', sessionId: sessionId },\\n            dataType: 'json',\\n            success: function (response) {\\n                if (response.session) {\\n                    sessionData = response.session; // 保存當前場次數據\\n                    const requiresInvitation =\\n                        sessionData.requiresInvitationCode === 'TRUE' ||\\n                        sessionData.requiresInvitationCode === true;\\n                    $('#invitationCodeField').toggleClass(\\n                        'd-none',\\n                        !requiresInvitation\\n                    );\\n                    if (!requiresInvitation) {\\n                        $('#invitationCode').prop('required', false);\\n                        $('#invitationCode').val(''); // 確保邀請碼為空\\n                    }\\n                    showSessionDetailModal(sessionData, registrationData);\\n                } else if (response.error) {\\n                    showAlert('錯誤: ' + response.error);\\n                }\\n            },\\n            error: function () {\\n                showAlert('無法載入場次詳細信息。請稍後再試。');\\n            },\\n            complete: function () {\\n                $('#loadingPage').addClass('d-none'); // 隱藏載入指示器\\n            },\\n        });\\n    }\\n\\n    // 顯示場次詳細信息和報名表單\\n    function showSessionDetailModal(sessionData, registrationData) {\\n        // 填充場次詳細信息\\n        const detailFields = {\\n            detailSessionId: sessionData.sessionId,\\n            detailSessionGroupId: sessionData.sessionGroupId,\\n            detailSessionName: sessionData.sessionName,\\n            detailSessionDescription: sessionData.sessionDescription,\\n            detailSessionLocation: sessionData.sessionLocation,\\n            detailCurrentRegistrations: `${sessionData.currentRegistrations} / ${sessionData.sessionCapacityLimit}`,\\n            detailSessionCapacityLimit: sessionData.sessionCapacityLimit,\\n            detailSessionStartDate: `${sessionData.sessionStartDate.slice(0, -3)} UTC+8`,\\n            detailSessionEndDate: `${sessionData.sessionEndDate.slice(0, -3)} UTC+8`,\\n            detailRegistrationStartTime: `${sessionData.registrationStartTime.slice(0, -3)} UTC+8`,\\n            detailRegistrationEndTime: `${sessionData.registrationEndTime.slice(0, -3)} UTC+8`,\\n            detailRequiresInvitationCode:\\n                sessionData.requiresInvitationCode === 'TRUE' ||\\n                sessionData.requiresInvitationCode === true\\n                    ? '是'\\n                    : '否',\\n        };\\n\\n        Object.keys(detailFields).forEach((id) =\u003e {\\n            detailFieldTxt = detailFields[id].toString()\\n            if (detailFieldTxt.includes('\\\\n')) {\\n                const formattedText = detailFieldTxt.replace(/\\\\n/g, '\u003cbr\u003e');\\n                $(`#${id}`).html(formattedText);\\n            } else {\\n                $(`#${id}`).text(detailFieldTxt);\\n            }\\n        });\\n\\n        // 設置報名表單中的場次ID\\n        $('#sessionId').val(sessionData.sessionId);\\n\\n        // 根據 registrationFormId 顯示或隱藏特定字段\\n        if (sessionData.registrationFormId === \\\"4f92d0ef-50f2-4208-83da-2382a05c05b4\\\") {\\n            $('#idNumberField').show();\\n            $('#nameField').show();\\n            $('#passportNameField').show();\\n            $('#emailField').show();\\n            $('#phoneField').show();\\n            $('#birthDateField').show();\\n            $('#confirmScoreField').show();\\n            $('#mustConfirmField1').show();\\n            $('#mustConfirmField2').show();\\n\\n            $('#confirmScoreField').hide();\\n            $('#confirmScoreField').find('input, select, textarea').prop('required', false);\\n        }\\n\\n        if (sessionData.registrationFormId === \\\"cb86fe27-68d9-41a3-b3ca-6b9fcc8146c6\\\") {\\n            $('#idNumberField').show();\\n            $('#nameField').show();\\n            $('#passportNameField').show();\\n            $('#emailField').show();\\n            $('#phoneField').show();\\n            $('#birthDateField').show();\\n            $('#mustConfirmField1').show();\\n            $('#mustConfirmField2').show();\\n\\n            $('#passportNameField').hide();\\n            $('#birthDateField').hide();\\n            $('#confirmScoreField').hide();\\n            $('#passportNameField').find('input, select, textarea').prop('required', false);\\n            $('#birthDateField').find('input, select, textarea').prop('required', false);\\n            $('#confirmScoreField').find('input, select, textarea').prop('required', false);\\n        }\\n\\n        if (isRegistrationQueryMode) {\\n            // 預填表單數據\\n            registrationData = JSON.parse(registrationData.otherRegistrationData);\\n            $('#invitationCode').val(registrationData.invitationCode || '');\\n            $('#idNumber').val(registrationData.idNumber || '');\\n            $('#name').val(registrationData.name || '');\\n            $('#passportName').val(registrationData.passportName || '');\\n            $('#email').val(registrationData.email || '');\\n            $('#phone').val(registrationData.phone || '');\\n            $('#birthDate').val(registrationData.birthDate || '');\\n            $('#registrationForm input:checkbox').prop('checked', true);\\n            $('#registrationForm').find('input, select, textarea').prop('disabled', true);\\n            $('#submitButton').hide();\\n        } else {\\n            // 清空表單\\n            $('#registrationForm')[0].reset();\\n            $('#registrationForm').find('input, select, textarea').prop('disabled', false);\\n            // 顯示提交按鈕\\n            $('#submitButton').show();\\n        }\\n\\n        // 顯示場次詳細信息模態窗口\\n        $('#sessionDetailModal').modal('show');\\n    }\\n\\n    // 當模態窗口關閉時，清空詳細信息和表單\\n    $('#sessionDetailModal').on('hidden.bs.modal', function () {\\n        $(this).find('table td').text('');\\n        $('#registrationForm')[0].reset();\\n        $('#sessionId').val('');\\n        $('#invitationCode').val('');\\n        $('#alertMessage').hide().text('');\\n        // 重置表單字段\\n        $('#registrationForm').find('input, select, textarea').prop('disabled', false);\\n        // 顯示提交按鈕\\n        $('#submitButton').show();\\n        // 重置查詢模式\\n        isRegistrationQueryMode = false;\\n    });\\n\\n    // 表單提交處理\\n    $('#registrationForm').on('submit', function (event) {\\n        event.preventDefault();\\n        // 禁用提交按鈕，顯示載入動畫\\n        $('#submitButton').prop('disabled', true);\\n        $('#loadingPage').removeClass('d-none'); // 顯示載入指示器\\n        // 清空錯誤信息\\n        $('#alertMessage').hide().text('');\\n        // 獲取表單數據\\n        var formData = $(this).serialize();\\n        // 發送 AJAX 請求到 GAS 網絡應用程序\\n        $.ajax({\\n            url: API_BASE_URL,\\n            method: 'POST',\\n            data: formData,\\n            dataType: 'json',\\n            success: function (response) {\\n                // 隱藏載入動畫\\n                $('#loadingPage').addClass('d-none');\\n                // 啟用提交按鈕\\n                $('#submitButton').prop('disabled', false);\\n\\n                if (response.status === 'success') {\\n                    // 處理成功響應\\n                    // 隱藏報名表單\\n                    $('#sessionDetailModal').modal('hide');\\n                    // 重新載入開放場次的數據以更新報名人數\\n                    loadOpeningSessions();\\n                    // 顯示提示信息\\n                    window.scrollTo(0, 0);\\n                    showNotification(\\n                        '已成功送出報名資料，但報名尚未完成！請檢查您的電子郵件，點擊報名確認信中的確認連結後才算是完成報名，確認取得參與資格。',\\n                        'danger'\\n                    );\\n                } else {\\n                    // 顯示錯誤信息\\n                    $('#alertMessage')\\n                        .removeClass('alert-success')\\n                        .addClass('alert-danger')\\n                        .show()\\n                        .text('報名失敗：' + response.message);\\n                }\\n            },\\n            error: function (xhr) {\\n                // 隱藏載入動畫\\n                $('#loadingPage').addClass('d-none');\\n                // 啟用提交按鈕\\n                $('#submitButton').prop('disabled', false);\\n                // 顯示錯誤信息\\n                $('#alertMessage')\\n                    .removeClass('alert-success')\\n                    .addClass('alert-danger')\\n                    .show()\\n                    .text('報名失敗：' + (xhr.responseText || '發生錯誤'));\\n            },\\n        });\\n    });\\n\\n    /**\\n     * 顯示提示信息\\n     * @param {string} message - 要顯示的信息\\n     * @param {string} type - 信息類型（success, danger, warning, info）\\n     */\\n    function showNotification(message, type = 'warning') {\\n        $('#notificationMessage')\\n            .removeClass(\\n                'alert-success alert-danger alert-warning alert-info'\\n            )\\n            .addClass('alert-' + type)\\n            .html(message)\\n            .fadeIn();\\n\\n        // 20 秒後自動隱藏提示信息\\n        setTimeout(function () {\\n            $('#notificationMessage').fadeOut();\\n        }, 20000);\\n    }\\n\\n    /**\\n     * 顯示錯誤信息（在模態窗口內）\\n     * @param {string} message - 要顯示的信息\\n     */\\n    function showAlert(message) {\\n        $('#alertMessage')\\n            .removeClass('alert-success')\\n            .addClass('alert-danger')\\n            .show()\\n            .text(message);\\n    }\\n});\\n\"}","created_at":"2024-09-25T11:41:50.482+08:00","updated_at":"2024-09-25T16:32:19.045+08:00","name":"橘子蘋果課程活動報名系統","language":"web","screenshot":{"url":null},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":19,"hashid":"6rpsr3z4z","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}