Skip to content

Phase 0-3: 旧UIのシフト申請モーダル（デッドコード）を削除 #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
champierre merged 1 commit into from
Jun 11, 2026
Merged

Phase 0-3: 旧UIのシフト申請モーダル（デッドコード）を削除 #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 0 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2874,24 +2874,6 @@ <h3 style="text-align: left;">プロフィール設定</h3>
</div>
</div>

<!-- シフト申請モーダル -->
<div id="shiftRequestModal" class="modal" style="display: none;">
<div class="modal-content">
<div class="modal-header">
<h3 id="modalTitle">シフト申請</h3>
<span class="modal-close" onclick="closeShiftRequestModal()">&times;</span>
</div>
<div class="modal-body">
<div id="timeSlotContainer">
<!-- 時間枠が動的に生成されます -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="submit-btn" onclick="submitShiftRequest()">申請する</button>
</div>
</div>
</div>

<!-- 日付詳細表示モーダル -->
<div id="dateDetailModal" class="modal" style="display: none;">
<div class="modal-content">
Expand Down
190 changes: 0 additions & 190 deletions js/modules/shiftRequest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,196 +170,6 @@ function displayCapacityWithCountsOnCalendar(capacityData, shiftCounts = {}) {
});
}

/**
* シフト申請モーダルを開く（旧UI用）
* @param {string} dateKey - 日付キー（YYYY-MM-DD形式）
*/
function openShiftRequestModal(dateKey) {
const modal = document.getElementById('shiftRequestModal');
const modalTitle = document.getElementById('modalTitle');
const timeSlotContainer = document.getElementById('timeSlotContainer');

// タイトルを設定
const dateFormatted = new Date(dateKey).toLocaleDateString('ja-JP', {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'short'
});
modalTitle.textContent = `${dateFormatted} のシフト申請`;

// 時間枠を生成
generateTimeSlots(timeSlotContainer);

// 時間枠の残り枠数を更新
updateTimeSlotCapacity(dateKey);

// モーダルを表示
modal.style.display = 'flex';
}

/**
* 時間枠の残り容量を更新する関数（旧UI用）
* @param {string} dateKey - 日付キー（YYYY-MM-DD形式）
*/
function updateTimeSlotCapacity(dateKey) {
// 13:00から18:00まで、30分単位で時間枠を生成
const startHour = 13;
const endHour = 18;
const slots = [];

for (let hour = startHour; hour < endHour; hour++) {
slots.push(`${hour}:00-${hour}:30`);
slots.push(`${hour}:30-${hour + 1}:00`);
}

const currentShiftCounts = getCurrentShiftCounts();

slots.forEach(slot => {
const capacityElement = document.getElementById(`capacity-${slot.replace(/[:\s-]/g, '')}`);
const checkboxElement = document.getElementById(`slot-${slot.replace(/[:\s-]/g, '')}`);

if (capacityElement && checkboxElement) {
// その日付・時間枠の現在の申請数を取得
const currentCount = (currentShiftCounts[dateKey] && currentShiftCounts[dateKey][slot]) || 0;
const maxCapacity = 1; // 30分枠は1人まで
const remainingCount = Math.max(0, maxCapacity - currentCount);

// 表示を更新
capacityElement.textContent = `(${remainingCount}/${maxCapacity}人)`;

// 満員の場合はチェックボックスを無効化
if (remainingCount === 0) {
checkboxElement.disabled = true;
capacityElement.style.color = '#dc3545'; // 赤色
checkboxElement.parentElement.style.opacity = '0.6';
} else if (remainingCount === 1) {
checkboxElement.disabled = false;
capacityElement.style.color = '#ffc107'; // 黄色
checkboxElement.parentElement.style.opacity = '1';
} else {
checkboxElement.disabled = false;
capacityElement.style.color = '#28a745'; // 緑色
checkboxElement.parentElement.style.opacity = '1';
}
}
});
}

/**
* 時間枠のチェックボックスを生成する関数（旧UI用）
* @param {HTMLElement} container - コンテナ要素
*/
function generateTimeSlots(container) {
container.innerHTML = '';

// 13:00から18:00まで、30分単位で時間枠を生成
const startHour = 13;
const endHour = 18;
const slots = [];

for (let hour = startHour; hour < endHour; hour++) {
slots.push(`${hour}:00-${hour}:30`);
slots.push(`${hour}:30-${hour + 1}:00`);
}

// 時間枠のチェックボックスを生成
slots.forEach(slot => {
const slotDiv = document.createElement('div');
slotDiv.className = 'time-slot';

const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.id = `slot-${slot.replace(/[:\s-]/g, '')}`;
checkbox.value = slot;
checkbox.className = 'time-slot-checkbox';

const labelContainer = document.createElement('div');
labelContainer.className = 'time-slot-label-container';

const label = document.createElement('label');
label.htmlFor = checkbox.id;
label.textContent = slot;
label.className = 'time-slot-label';

const capacityInfo = document.createElement('span');
capacityInfo.className = 'time-slot-capacity';
capacityInfo.id = `capacity-${slot.replace(/[:\s-]/g, '')}`;
capacityInfo.textContent = '(0/1人)'; // デフォルト値

labelContainer.appendChild(label);
labelContainer.appendChild(capacityInfo);

slotDiv.appendChild(checkbox);
slotDiv.appendChild(labelContainer);
container.appendChild(slotDiv);
});
}

/**
* シフト申請モーダルを閉じる関数（旧UI用）
*/
function closeShiftRequestModal() {
const modal = document.getElementById('shiftRequestModal');
modal.style.display = 'none';

// 選択をクリア
const checkboxes = document.querySelectorAll('.time-slot-checkbox');
checkboxes.forEach(cb => cb.checked = false);

// 備考欄をクリア
document.getElementById('shiftRemarks').value = '';
}

/**
* シフト申請を送信する関数（旧UI用）
*/
async function submitShiftRequest() {
const selectedSlots = [];
const checkboxes = document.querySelectorAll('.time-slot-checkbox:checked');

checkboxes.forEach(cb => {
selectedSlots.push(cb.value);
});

if (selectedSlots.length === 0) {
alert('時間枠を選択してください。');
return;
}

const remarks = document.getElementById('shiftRemarks').value.trim();
const currentUser = getCurrentUser();
const currentShiftRequestDate = getCurrentShiftRequestDate();

// ボタンを無効化
const submitBtn = document.querySelector('#shiftRequestModal .submit-btn');
submitBtn.disabled = true;
submitBtn.textContent = '申請中...';

try {
// 複数時間枠の一括申請
const response = await API.createMultipleShifts({
user_id: currentUser.sub,
user_name: currentUser.name,
date: currentShiftRequestDate,
time_slots: selectedSlots
});

if (!response.success) {
throw new Error(response.error || 'シフト申請に失敗しました');
}

closeShiftRequestModal();

} catch (error) {
console.error('シフト申請の保存に失敗しました:', error);
alert('シフト申請の保存に失敗しました。再度お試しください。');
} finally {
submitBtn.disabled = false;
submitBtn.textContent = '申請する';
}
}

/**
* 日付詳細モーダルを開く関数
* @param {string} dateKey - 日付キー（YYYY-MM-DD形式）
Expand Down
10 changes: 0 additions & 10 deletions js/modules/state.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ const AppState = {
scrollToShiftAfterLoad: null,

// シフト申請関連
currentShiftRequestDate: null,
currentShiftCapacity: 0,
currentShiftCounts: {},

Expand Down Expand Up @@ -70,14 +69,6 @@ function setScrollToShiftAfterLoad(scrollInfo) {
AppState.scrollToShiftAfterLoad = scrollInfo;
}

function getCurrentShiftRequestDate() {
return AppState.currentShiftRequestDate;
}

function setCurrentShiftRequestDate(date) {
AppState.currentShiftRequestDate = date;
}

function getCurrentShiftCapacity() {
return AppState.currentShiftCapacity;
}
Expand Down Expand Up @@ -142,7 +133,6 @@ function resetState() {
AppState.isAdminUser = false;
AppState.currentUserShifts = [];
AppState.scrollToShiftAfterLoad = null;
AppState.currentShiftRequestDate = null;
AppState.currentShiftCapacity = 0;
AppState.currentShiftCounts = {};
AppState.currentDetailDateKey = null;
Expand Down
1 change: 0 additions & 1 deletion test/setup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ global.currentUser = {
// Mock global variables
global.isAdminUser = false;
global.currentShiftCounts = {};
global.currentShiftRequestDate = null;
global.currentDetailDateKey = null;
global.selectedTimeSlots = [];

Expand Down
Loading