kodamarisa
commented
1 week ago app/javascript/packs/schedule.js
document.addEventListener("DOMContentLoaded", () => {
const scheduleModalEl = document.getElementById("scheduleModal");
const editModalEl = document.getElementById("editModal");
const scheduleForm = document.getElementById("schedule-form");
// モーダルのインスタンスを作成
const scheduleModal = scheduleModalEl ? new bootstrap.Modal(scheduleModalEl) : null;
const editModal = editModalEl ? new bootstrap.Modal(editModalEl) : null;
// モーダルを開いてスケジュールを表示する関数
function openScheduleModal(date, calendarId) {
fetch(`/calendars/${calendarId}/schedules?date=${date}`, {
headers: { "X-Requested-With": "XMLHttpRequest" },
})
.then((response) => {
if (!response.ok) throw new Error("スケジュールの取得に失敗しました。");
return response.text();
})
.then((html) => {
document.getElementById("schedule-details").innerHTML = html;
scheduleModal.show(); // スケジュールモーダルを表示
registerEditButtonListeners(); // 編集ボタンのリスナーを登録
})
.catch((error) => {
console.error(error);
alert("スケジュールの読み込みに失敗しました。");
});
}
// 編集ボタンのリスナーを登録する関数
function registerEditButtonListeners() {
document.querySelectorAll(".edit-schedule-btn").forEach((button) => {
button.addEventListener("click", () => {
const scheduleId = button.dataset.scheduleId;
const exerciseName = button.dataset.exerciseName;
const reps = button.dataset.reps;
const sets = button.dataset.sets;
const date = button.dataset.date;
// モーダルのタイトルにエクササイズ名を表示
document.getElementById("exercise_name_display").textContent = exerciseName;
// フォームに値を設定
document.getElementById("exercise_id").value = scheduleId;
document.getElementById("schedule_date").value = date;
document.getElementById("reps").value = reps;
document.getElementById("sets").value = sets;
scheduleModal.hide(); // スケジュールモーダルを隠す
editModal.show(); // 編集モーダルを表示
});
});
}
// カレンダーの日付クリック処理
document.querySelectorAll(".calendar-date").forEach((element) => {
element.addEventListener("click", (event) => {
event.preventDefault();
const date = element.dataset.date;
const calendarId = element.dataset.calendarId;
openScheduleModal(date, calendarId); // モーダルを開く
});
});
// フォームの送信処理
if (scheduleForm) {
scheduleForm.addEventListener("submit", (event) => {
event.preventDefault();
const formData = new FormData(scheduleForm);
fetch(scheduleForm.action, {
method: scheduleForm.method,
body: formData,
headers: { 'X-Requested-With': 'XMLHttpRequest' }
})
.then((response) => {
if (!response.ok) throw new Error("保存に失敗しました。");
return response.json();
})
.then(() => {
editModal.hide(); // 編集モーダルを隠す
alert("スケジュールが保存されました。");
// カレンダー更新処理をここに追加
})
.catch((error) => console.error(error));
});
}
});こうしたところ、編集ボタンでの切り替えができるようになりましたが、追加ボタンでの筋トレ一覧へのリダレクトができなくなってしまいました。 もう少し、前のコードと見比べながら、修正できそうか試してみます。
kenchasonakai
質問内容・実現したいこと 編集ボタンをクリックしたら、モーダルが切り替わり、日付や回数、セット数が変更できる。 その変更内容がカレンダーに反映される。
現状発生している問題・エラーメッセージ 編集ボタンをクリックしても、モーダルが切り替わらない。
該当のソースコード app/views/calendars/show.html.erb
スケジュール
<%= date %>
<% if schedules.any? %> <% schedules.each do |schedule| %>
<%= schedule.exercise.name %> <%= schedule.repetitions %> 回 × <%= schedule.sets %> セット
<% end %> <% else %>
この日にスケジュールはありません。
<% end %>
<% if schedules.count < 3 %>
<% else %>
これ以上スケジュールを追加できません。
<% end %>
Edit Schedule:
document.addEventListener("DOMContentLoaded", () => { const scheduleModalEl = document.getElementById("scheduleModal");
if (scheduleModalEl) { const scheduleModal = new bootstrap.Modal(scheduleModalEl); } else { console.error("Schedule modal element not found."); }
const scheduleModal = new bootstrap.Modal(scheduleModalEl); const scheduleForm = document.getElementById("schedule-form");
// 編集ボタンがクリックされたときの処理 const editButtons = document.querySelectorAll('.btn-outline-primary[data-bs-toggle="modal"]');
editButtons.forEach(button => { button.addEventListener('click', function () { const scheduleId = this.getAttribute('data-schedule-id'); const exerciseName = this.getAttribute('data-exercise-name'); const reps = this.getAttribute('data-reps'); const sets = this.getAttribute('data-sets'); const date = this.getAttribute('data-date');
});
// 初期化関数 function initializeModal() { scheduleModalEl.addEventListener("hidden.bs.modal", cleanupModal); }
// モーダルを開いてスケジュールを表示する関数 function openScheduleModal(date, calendarId) { fetch(
/calendars/${calendarId}/schedules?date=${date}) .then((response) => { if (!response.ok) throw new Error("Failed to load schedule details."); return response.text(); }) .then((html) => { document.getElementById("schedule-details").innerHTML = html; scheduleModal.show(); registerAddButtonListener(); }) .catch((error) => console.error("Error loading schedule details:", error)); }// 追加ボタンのイベントを登録 function registerAddButtonListener() { const addScheduleBtn = document.getElementById("add-schedule-btn"); if (addScheduleBtn) { addScheduleBtn.addEventListener("click", () => { scheduleModal.hide(); window.location.href = "/exercises"; }); } }
// カレンダーの日付クリック処理 function registerCalendarClickListeners() { document.querySelectorAll(".calendar-date").forEach((element) => { element.addEventListener("click", (event) => { event.preventDefault(); const date = event.currentTarget.dataset.date; const calendarId = event.currentTarget.dataset.calendarId; openScheduleModal(date, calendarId); }); }); }
// フォームの送信処理 function handleFormSubmit(event) { event.preventDefault(); const formData = new FormData(scheduleForm);
}
// モーダル閉じるときの後処理 function cleanupModal() { if (scheduleForm) { scheduleForm.reset(); // フォームのリセット } else { console.warn("Schedule form not found."); }
}
// イベント登録 function registerEventListeners() { registerCalendarClickListeners(); if (scheduleForm) { scheduleForm.addEventListener("submit", handleFormSubmit); } }
// 初期化とイベント登録の実行 initializeModal(); registerEventListeners(); });
const scheduleModalEl = document.getElementById("scheduleModal"); console.log("scheduleModalEl:", scheduleModalEl); // デバッグ: モーダル取得確認 const editModalEl = document.getElementById("editModal");
if (scheduleModalEl) { const scheduleModal = new bootstrap.Modal(scheduleModalEl); console.log("Schedule modal initialized:", scheduleModal); // モーダルの初期化確認 } else { console.error("Schedule modal element not found."); }
const scheduleModal = new bootstrap.Modal(scheduleModalEl); const editModal = new bootstrap.Modal(editModalEl); const scheduleForm = document.getElementById("schedule-form"); console.log("scheduleForm:", scheduleForm); // フォーム取得確認