実現したいこと
GASのwebアプリを利用して、出退勤の記録をつけられるタイムカードを作成しています。
おおまかな仕組みとしては、
【部署】をリストから選択すると【従業員名】のリストが出現、
従業員リストから自身の名前のボタンを選択するとモーダルエリアが出現し、
「出勤」「退勤」「休憩」「再開」のボタンを選択して打刻する仕組み
（モーダルエリア内には過去の打刻履歴も表示している）
発生している問題・分からないこと
「出勤」「退勤」「休憩」「再開」のそれぞれのボタンを不要なタイミングでは選択ができない無効状態にしたいのですが、実際にテストをするとうまく動作してくれません。
例えば当日の最初の打刻は必ず出勤になるので、出勤のみ有効、
休憩の後は必ず再開となるので再開のみ有効という感じです。
該当のソースコード
function showModal(department, employee) { google.script.run.withSuccessHandler(function(response) { var records = response.groupedRecords; var monthlyTotals = response.monthlyTotals; var modal = document.getElementById('modal'); var modalContent = document.getElementById('modalContent'); var recordsHtml = '<h3>打刻履歴</h3>'; recordsHtml += '<table class="attendance-table"><tr><th>日付</th><th>出勤</th><th>退勤</th><th>休憩</th><th>再開</th><th>通常</th><th>時間外</th></tr>'; // 日付をソートして表示する var sortedDates = Object.keys(records).sort(); var currentMonth = ""; var today = new Date().toISOString().slice(0, 10); // 今日の日付を取得 var todayStatus = ''; sortedDates.forEach(function(date, index) { var month = date.slice(0, 7); // yyyy/MM形式で月を抽出 if (currentMonth && currentMonth !== month) { // 月が変わったらその月の合計を表示 recordsHtml += '<tr class="monthly-total"><td colspan="5">' + currentMonth + ' 出勤日数' + monthlyTotals[currentMonth].日数 + '日</td>'; recordsHtml += '<td>' + monthlyTotals[currentMonth].通常 + '</td>'; recordsHtml += '<td>' + monthlyTotals[currentMonth].時間外 + '</td></tr>'; } recordsHtml += '<tr><td>' + date + '</td>'; recordsHtml += '<td>' + records[date].出勤 + '</td>'; recordsHtml += '<td>' + records[date].退勤 + '</td>'; recordsHtml += '<td>' + records[date].休憩 + '</td>'; recordsHtml += '<td>' + records[date].再開 + '</td>'; recordsHtml += '<td>' + records[date].通常 + '</td>'; recordsHtml += '<td>' + records[date].時間外 + '</td></tr>'; currentMonth = month; if (date === today) { todayStatus = records[date].退勤 ? '退勤' : records[date].再開 ? '再開' : records[date].休憩 ? '休憩' : records[date].出勤 ? '出勤' : ''; } if (index === sortedDates.length - 1) { // 最後の日付の次にその月の合計を表示 recordsHtml += '<tr class="monthly-total"><td colspan="5">' + currentMonth + ' 出勤日数' + monthlyTotals[currentMonth].日数 + '日</td>'; recordsHtml += '<td>' + monthlyTotals[currentMonth].通常 + '</td>'; recordsHtml += '<td>' + monthlyTotals[currentMonth].時間外 + '</td></tr>'; } }); recordsHtml += '</table>'; modalContent.innerHTML = ` <button class="close-button" onclick="closeModal()">×</button> <h2>${employee}さん</h2> <div class="centered-button-group"> <button id="startButton" class="large-button blue-button" onclick="recordAttendance('${department}', '${employee}', '出勤')">出勤</button> <button id="endButton" class="large-button blue-button" onclick="recordAttendance('${department}', '${employee}', '退勤')">退勤</button> </div> <div class="centered-button-group"> <button id="breakButton" class="small-button yellow-button" onclick="recordAttendance('${department}', '${employee}', '休憩')">休憩</button> <button id="resumeButton" class="small-button yellow-button" onclick="recordAttendance('${department}', '${employee}', '再開')">再開</button> </div> <div id="monthlyRecords">${recordsHtml}</div> `; modal.style.display = 'block'; // ボタンの有効/無効を設定 var startButton = document.getElementById('startButton'); var endButton = document.getElementById('endButton'); var breakButton = document.getElementById('breakButton'); var resumeButton = document.getElementById('resumeButton'); if (!todayStatus) { // 何も打刻されていない場合 startButton.disabled = false; endButton.disabled = true; breakButton.disabled = true; resumeButton.disabled = true; } else if (todayStatus === '出勤') { // 出勤のみ打刻されている場合 startButton.disabled = true; endButton.disabled = false; breakButton.disabled = false; resumeButton.disabled = true; } else if (todayStatus === '休憩') { // 休憩中の場合 startButton.disabled = true; endButton.disabled = true; breakButton.disabled = true; resumeButton.disabled = false; } else if (todayStatus === '再開') { // 再開中の場合 startButton.disabled = true; endButton.disabled = false; breakButton.disabled = false; resumeButton.disabled = true; } else if (todayStatus === '退勤') { // 退勤済みの場合 startButton.disabled = true; endButton.disabled = true; breakButton.disabled = true; resumeButton.disabled = true; } }).getAttendanceRecords(department, employee); }
試したこと・調べたこと
上記の詳細・結果
色々検索したりしましたが解決できませんでした。
補足
特になし
0 コメント