플래너 동시동작 구현 / 점검

... 생략 <!-- 계획 박스 --> <div class="container__kanban"> <div class="wrapper__planner__list" th:id="wrapperPlannerList"> <div th:each="todolist, status : ${planner.todolistResponses}" th:id="|f${todolist.tlIdx}|" class="wrapper__date__box"> <div class="date"> <!-- 제목 생성되는 부분 --> <div class="planner__list__title" th:onclick="showSettingPlannerList([[${todolist.tlIdx}]])" th:text="${todolist.title}" style="margin: 12px 10px 12px 10px" th:id="|tl${todolist.tlIdx}|"></div> <!-- 수정 / 삭제 란 --> <div style="display: none" th:id="'plannerListSetting' + ${todolist.tlIdx}"> <div> <input type="text" style="display: none" readonly th:value="${todolist.tlIdx}" th:id="|tlidx${todolist.tlIdx}|"/> <input type="text" th:value="${todolist.title}" th:id="|tltitle${todolist.tlIdx}|"/> </div> <div style="margin: 15px 7px 40px 57px" th:id="'tlBtnBox' + ${todolist.tlIdx}"> <button th:attr="data-tlidx=|${todolist.tlIdx}|" class="todolistmod">수정</button> <button th:attr="data-tlidx=|${todolist.tlIdx}|" class="todolistdel">삭제</button> <button th:onclick="hidePlannerListSetting([[${todolist.tlIdx}]])" class="todolistclose">닫기</button> </div> </div> </div> <!-- 실시간 으로 입력하는게 아닌 DB 에 저장되어 있던 todo 카드 불러오는 코드 --> <div th:id= "|plannerTodo${todolist.tlIdx}|"> <div th:each="todo : ${todolist.todoResponses}" th:switch="${#strings.toString(todo.todoType)}" th:id="|d${todo.tdIdx}|" class="card"> <!-- 숙박 --> <div th:case="Accomodation"> <div th:onclick="showAccommSetting([[${todo.tdIdx}]])" style="margin: 20px 10px 30px 10px"> <div class="planner__todo__title" th:text="${todo.title}" th:id="|actitle${todo.tdIdx}|"></div> <div class="todo__txt"> <div style="margin-bottom: 5px" th:text="'공개여부 : ' + ${todo.isPrivate}" th:id="|acisPrivate${todo.tdIdx}|"></div> <div style="margin-bottom: 5px" th:text="${todo.todoDate}" th:id="|actododate${todo.tdIdx}|"></div> <div style="margin-bottom: 5px" th:text="${todo.acAddress}" th:id="|acaddress${todo.tdIdx}|"></div> <div style="margin-bottom: 5px" th:text="${todo.contents}" th:id="|accontents${todo.tdIdx}|"></div> </div> </div> <!-- 수정 / 삭제 란 --> <div style="display: none" th:id="'accommSetting' + ${todo.tdIdx}"> <div> <input type="checkbox" class="check__box" th:checked="${todo.isPrivate}" th:id="|actodopvmod${todo.tdIdx}|"/> <label th:for="|actodopvmod${todo.tdIdx}|">비공개를 원하면 클릭해주세요</label> </div> <input type="hidden" readonly th:value="${todo.tdIdx}" th:id="|tdidx${todo.tdIdx}|"/> <input type="text" th:value="${todo.title}" th:id="|actodotitlemod${todo.tdIdx}|"/> <input type="datetime-local" th:value="${todo.todoDate}" th:id="|actododatemod${todo.tdIdx}|"/> <input type="text" th:value="${todo.acAddress}" th:id="|actodoaddressmod${todo.tdIdx}|"/> <input type="text" th:value="${todo.contents}" th:id="|actodocontentmod${todo.tdIdx}|"/> <div style="margin: 15px 7px 40px 57px"> <button th:attr="data-tdidx=|${todo.tdIdx}|" class="actodomod">수정</button> <button th:attr="data-tdidx=|${todo.tdIdx}|, data-tlidx=|${todolist.tlIdx}|" class="actododel">삭제</button> <button th:onclick="hideAccommSetting([[${todo.tdIdx}]])">닫기</button> </div> </div> </div> <div th:case="Attractions"> <div th:onclick="showAttSetting([[${todo.tdIdx}]])" style="margin: 20px 10px 30px 10px"> <div class="planner__todo__title" th:text="${todo.title}" th:id="|attitle${todo.tdIdx}|"></div> <div class="todo__txt"> <div style="margin-bottom: 5px" th:text="'공개여부 : ' + ${todo.isPrivate}" th:id="|atisPrivate${todo.tdIdx}|"></div> <div style="margin-bottom: 5px" th:text="${todo.todoDate}" th:id="|attododate${todo.tdIdx}|"></div> <div style="margin-bottom: 5px" th:text="${todo.attractions}" th:id="|atattractions${todo.tdIdx}|"></div> <div style="margin-bottom: 5px" th:text="${todo.contents}" th:id="|atcontents${todo.tdIdx}|"></div> </div> </div> <!-- 수정 삭제 란 --> <div style="display: none" th:id="'attSetting' + ${todo.tdIdx}"> <div> <input type="checkbox" class="check__box" th:checked="${todo.isPrivate}" th:id="|attodopvmod${todo.tdIdx}|"/> <label th:for="|attodopvmod${todo.tdIdx}|">비공개를 원하면 클릭해주세요</label> </div> <input type="hidden" readonly th:value="${todo.tdIdx}" th:id="|tdidx${todo.tdIdx}|"/> <input type="text" th:value="${todo.title}" th:id="|attodotitlemod${todo.tdIdx}|"/> <input type="datetime-local" th:value="${todo.todoDate}" th:id="|attododatemod${todo.tdIdx}|"/> <input type="text" th:value="${todo.attractions}" th:id="|attodoinfomod${todo.tdIdx}|"/> <input type="text" th:value="${todo.contents}" th:id="|attodocontentmod${todo.tdIdx}|"/> <div style="margin: 15px 7px 40px 57px"> <button th:attr="data-tdidx=|${todo.tdIdx}|" class="attodomod">수정</button> <button th:attr="data-tdidx=|${todo.tdIdx}|, data-tlidx=|${todolist.tlIdx}|" class="attododel">삭제</button> <button th:onclick="hideAttSetting([[${todo.tdIdx}]])">닫기</button> </div> </div> </div> <div th:case="Budget"> <div style="margin: 20px 10px 30px 10px" th:onclick="showBudgetSetting([[${todo.tdIdx}]])"> <div class="planner__todo__title" th:text="${todo.title}" th:id="|bgtitle${todo.tdIdx}|"></div> <div class="todo__txt"> <div style="margin-bottom: 5px" th:text="'공개여부 : ' + ${todo.isPrivate}" th:id="|bgisPrivate${todo.tdIdx}|"></div> <div style="margin-bottom: 5px" th:text="${todo.todoDate}" th:id="|bgtododate${todo.tdIdx}|"></div> <div style="margin-bottom: 5px" th:text="${todo.budgetType}" th:id="|bgbudgetType${todo.tdIdx}|"></div> <div style="margin-bottom: 5px" th:text="${todo.budget}" th:id="|bgbudget${todo.tdIdx}|"></div> <div style="margin-bottom: 5px" th:text="${todo.contents}" th:id="|bgcontents${todo.tdIdx}|"></div> </div> </div> <div style="display: none" th:id="'budgetSetting' + ${todo.tdIdx}"> <div> <input type="checkbox" class="check__box" th:checked="${todo.isPrivate}" th:id="|bgtodopvmod${todo.tdIdx}|"/> <label th:for="|bgtodopvmod${todo.tdIdx}|">비공개를 원하면 클릭해주세요</label> </div> <input type="hidden" readonly th:value="${todo.tdIdx}" th:id="|tdidx${todo.tdIdx}|"/> <input type="text" th:value="${todo.title}" th:id="|bgtodotitlemod${todo.tdIdx}|"/> <input type="datetime-local" th:value="${todo.todoDate}" th:id="|bgtododatemod${todo.tdIdx}|"/> <select th:id="|bgtodotypemod${todo.tdIdx}|"> <option value="FOOD">식비</option> <option value="SHOPPING">쇼핑</option> <option value="ACCOMODATION">숙박비</option> <option value="TRANSPORTATION">교통비</option> <option value="ETC" selected>기타</option> </select> <input type="number" th:value="${todo.budget}" th:id="|bgtodomoneymod${todo.tdIdx}|"/> <input type="text" th:value="${todo.contents}" th:id="|bgtodocontentmod${todo.tdIdx}|"/> <div style="margin: 15px 7px 40px 57px"> <button th:attr="data-tdidx=|${todo.tdIdx}|" class="bgtodomod">수정</button> <button th:attr="data-tdidx=|${todo.tdIdx}|, data-tlidx=|${todolist.tlIdx}|" class="bgtododel">삭제</button> <button th:onclick="hideBudgetSetting([[${todo.tdIdx}]])">닫기</button> </div> </div> </div> <div th:case="General"> <div style="margin: 20px 10px 30px 10px" th:onclick="showTodoSetting([[${todo.tdIdx}]])"> <div class="planner__todo__title" th:text="${todo.title}" th:id="|gntitle${todo.tdIdx}|"></div> <div class="todo__txt"> <div style="margin-bottom: 5px" th:text="'공개여부 : ' + ${todo.isPrivate}" th:id="|gnisPrivate${todo.tdIdx}|"></div> <div style="margin-bottom: 5px" th:text="${todo.todoDate}" th:id="|gntododate${todo.tdIdx}|"></div> <div style="margin-bottom: 5px" th:text="${todo.gnAddress}" th:id="|gnaddress${todo.tdIdx}|"></div> <div style="margin-bottom: 5px" th:text="${todo.contents}" th:id="|gncontents${todo.tdIdx}|"></div> </div> </div> <div style="display: none" th:id="'todoSetting' + ${todo.tdIdx}"> <div> <div> <input type="checkbox" class="check__box" th:checked="${todo.isPrivate}" th:id="|gntodopvmod${todo.tdIdx}|"/> <label th:for="|gntodopvmod${todo.tdIdx}|">비공개를 원하면 클릭해주세요</label> </div> <input type="hidden" readonly th:value="${todo.tdIdx}" th:id="|tdidx${todo.tdIdx}|"/> <input type="text" th:value="${todo.title}" th:id="|gntodotitlemod${todo.tdIdx}|"/> <input type="datetime-local" th:value="${todo.todoDate}" th:id="|gntododatemod${todo.tdIdx}|"/> <input type="text" th:value="${todo.gnAddress}" th:id="|gntodoaddressmod${todo.tdIdx}|"/> <input type="text" th:value="${todo.contents}" th:id="|gntodocontentmod${todo.tdIdx}|"/> </div> <div style="margin: 15px 7px 40px 57px"> <button th:attr="data-tdidx=|${todo.tdIdx}|" class="gntodomod">수정</button> <button th:attr="data-tdidx=|${todo.tdIdx}|, data-tlidx=|${todolist.tlIdx}|" class="gntododel">삭제</button> <button th:onclick="hideTodoSetting([[${todo.tdIdx}]])">닫기</button> </div> </div> </div> <div th:case="Transport"> <div style="margin: 20px 10px 30px 10px" th:onclick="showTransSetting([[${todo.tdIdx}]])"> <div class="planner__todo__title" th:text="${todo.title}" th:id="|trtitle${todo.tdIdx}|"></div> <div class="todo__txt"> <div style="margin-bottom: 5px" th:text="'공개여부 : ' + ${todo.isPrivate}" th:id="|trisPrivate${todo.tdIdx}|"></div> <div style="margin-bottom: 5px" th:text="${todo.todoDate}" th:id="|trtododate${todo.tdIdx}|"></div> <div style="margin-bottom: 5px" th:text="${todo.transportType}" th:id="|trtransportType${todo.tdIdx}|"></div> <div style="margin-bottom: 5px" th:text="${todo.contents}" th:id="|trcontents${todo.tdIdx}|"></div> </div> </div> <div style="display: none" th:id="'transSetting' + ${todo.tdIdx}"> <div> <input type="checkbox" class="check__box" th:checked="${todo.isPrivate}" th:id="|trtodopvmod${todo.tdIdx}|"/> <label th:for="|trtodopvmod${todo.tdIdx}|">비공개를 원하면 클릭해주세요</label> </div> <input type="hidden" readonly th:value="${todo.tdIdx}" th:id="|tdidx${todo.tdIdx}|"/> <input type="text" th:value="${todo.title}" th:id="|trtodotitlemod${todo.tdIdx}|"/> <input type="datetime-local" th:value="${todo.todoDate}" th:id="|trtododatemod${todo.tdIdx}|"/> <select th:id="|trtodotypemod${todo.tdIdx}|"> <option value="AIRPLANE">비행기</option> <option value="KTX">KTX</option> <option value="SRT">SRT</option> <option value="BUS">버스</option> <option value="SUBWAY">지하철</option> <option value="ETC" selected>기타</option> </select> <input type="text" th:value="${todo.contents}" th:id="|trtodocontentmod${todo.tdIdx}|"/> <div style="margin: 15px 7px 40px 57px"> <button th:attr="data-tdidx=|${todo.tdIdx}|" class="trtodomod">수정</button> <button th:attr="data-tdidx=|${todo.tdIdx}|, data-tlidx=|${todolist.tlIdx}|" class="trtododel">삭제</button> <button th:onclick="hideTransSetting([[${todo.tdIdx}]])">닫기</button> </div> </div> </div> </div> </div> <!-- 실시간 동작으로 생긴 투두 카드 생성 위치 --> <div th:id="'response' + ${todolist.tlIdx}"></div> <!-- 카드 생성하는 버튼 --> <div class="open" th:onclick="addCard([[${todolist.tlIdx}]])" th:id="'addCardBtn' + ${todolist.tlIdx}"> <div style="width: 100%; height: 52px"></div> </div> <!-- 카드 생성하는 버튼 눌렀을 시 나오는 부분 --> <div style="display: none; background-color: white" class="add__card" th:id="'addCard' + ${todolist.tlIdx}"> <!-- 독바 --> <div class="wrapper__bar" th:id="'addWhat' + ${todolist.tlIdx}"> <div th:onclick="showAddTodo([[${todolist.tlIdx}]])"> <img src="/img/btn_todo.png"> </div> <div th:onclick="showAddTransport([[${todolist.tlIdx}]])"> <img src="/img/btn_transport.png"> </div> <div th:onclick="showAddAccommodation([[${todolist.tlIdx}]])"> <img src="/img/btn_accommodation.png"> </div> <div th:onclick="showAddMap([[${todolist.tlIdx}]])"> <img src="/img/img_maps.png"> </div> <div style="margin-right: 2px" th:onclick="showAddBudget([[${todolist.tlIdx}]])"> <img src="/img/btn_calculator.png"> </div> </div> <div th:id="'addAccommodation' + ${todolist.tlIdx}"> <div> <diV> <input type="checkbox" class="check__box" th:id="|actodopvadd${todolist.tlIdx}|"/> <label th:for="|actodopvadd${todolist.tlIdx}|">비공개를 원하면 클릭해주세요</label> </div> <input type="text" th:value="숙박제목1" th:id="|actodotitleadd${todolist.tlIdx}|"/> <input type="datetime-local" th:id="|actododateadd${todolist.tlIdx}|"/> <input type="text" th:value="숙박주소1" th:id="|actodoaddressadd${todolist.tlIdx}|"/> <input type="text" th:value="숙박내용1" th:id="|actodocontentadd${todolist.tlIdx}|"/> </div> <div style="margin: 20px 7px 40px 134px"> <button th:attr="data-tlidx=|${todolist.tlIdx}|" class="actodoadd">등록</button> <button th:onclick="closeAddCard([[${todolist.tlIdx}]])">닫기</button> </div> </div> <div th:id="'addAttraction' + ${todolist.tlIdx}"> <div> <div> <input type="checkbox" class="check__box" th:id="|attodopvadd${todolist.tlIdx}|"/> <label th:for="|attodopvadd${todolist.tlIdx}|">비공개를 원하면 클릭해주세요</label> </div> <input type="text" th:value="관광지제목1" th:id="|attodotitleadd${todolist.tlIdx}|"/> <input type="datetime-local" th:id="|attododateadd${todolist.tlIdx}|"/> <input type="text" th:value="관광지정보1" th:id="|attodoinfoadd${todolist.tlIdx}|"/> <input type="text" th:value="관광지내용1" th:id="|attodocontentadd${todolist.tlIdx}|"/> </div> <div style="margin: 20px 7px 40px 134px"> <button th:attr="data-tlidx=|${todolist.tlIdx}|" class="attodoadd">등록</button> <button th:onclick="closeAddCard([[${todolist.tlIdx}]])">닫기</button> </div> </div> <div th:id="'addBudget' + ${todolist.tlIdx}"> <div> <div> <input type="checkbox" class="check__box" th:id="|bgtodopvadd${todolist.tlIdx}|"/> <label th:for="|bgtodopvadd${todolist.tlIdx}|">비공개를 원하면 클릭해주세요</label> </div> <input type="text" th:value="예산제목1" th:id="|bgtodotitleadd${todolist.tlIdx}|"/> <input type="datetime-local" th:id="|bgtododateadd${todolist.tlIdx}|"/> <select th:id="|bgtodotypeadd${todolist.tlIdx}|"> <option value="FOOD">식비</option> <option value="SHOPPING">쇼핑</option> <option value="ACCOMODATION">숙박비</option> <option value="TRANSPORTATION">교통비</option> <option value="ETC" selected>기타</option> </select> <input type="number" th:value=10000 th:id="|bgtodomoneyadd${todolist.tlIdx}|"/> <input type="text" th:value="예산내용1" th:id="|bgtodocontentadd${todolist.tlIdx}|"/> </div> <div style="margin: 20px 7px 40px 134px"> <button th:attr="data-tlidx=|${todolist.tlIdx}|" class="bgtodoadd">등록</button> <button th:onclick="closeAddCard([[${todolist.tlIdx}]])">닫기</button> </div> </div> <div th:id="'addGeneral' + ${todolist.tlIdx}"> <div> <div> <input type="checkbox" class="check__box" th:id="|gntodopvadd${todolist.tlIdx}|"/> <label th:for="|gntodopvadd${todolist.tlIdx}|">비공개를 원하면 클릭해주세요</label> </div> <input type="text" th:value="일반제목1" th:id="|gntodotitleadd${todolist.tlIdx}|"/> <input type="datetime-local" th:id="|gntododateadd${todolist.tlIdx}|"/> <input type="text" th:value="일반주소1" th:id="|gntodoaddressadd${todolist.tlIdx}|"/> <input type="text" th:value="일반내용1" th:id="|gntodocontentadd${todolist.tlIdx}|"/> </div> <div style="margin: 20px 7px 40px 134px"> <button th:attr="data-tlidx=|${todolist.tlIdx}|" class="gntodoadd">등록</button> <button th:onclick="closeAddCard([[${todolist.tlIdx}]])">닫기</button> </div> </div> <div th:id="'addTrans' + ${todolist.tlIdx}"> <div> <div> <input type="checkbox" class="check__box" th:id="|trtodopvadd${todolist.tlIdx}|"/> <label th:for="|trtodopvadd${todolist.tlIdx}|">비공개를 원하면 클릭해주세요</label> </div> <input type="text" th:value="교통제목1" th:id="|trtodotitleadd${todolist.tlIdx}|"/> <input type="datetime-local" th:id="|trtododateadd${todolist.tlIdx}|"/> <select th:id="|trtodotypeadd${todolist.tlIdx}|"> <option value="AIRPLANE">비행기</option> <option value="KTX">KTX</option> <option value="SRT">SRT</option> <option value="BUS">버스</option> <option value="SUBWAY">지하철</option> <option value="ETC" selected>기타</option> </select> <input type="text" th:value="교통내용1" th:id="|trtodocontentadd${todolist.tlIdx}|"/> </div> <div style="margin: 20px 7px 40px 134px"> <button th:attr="data-tlidx=|${todolist.tlIdx}|" class="trtodoadd">등록</button> <button th:onclick="closeAddCard([[${todolist.tlIdx}]])">닫기</button> </div> </div> </div> <!-- 하루 총 예산 블록 --> <div th:id="'costPerDay' + ${todolist.tlIdx}" class="costPerDay"> <div style="width: 100%; height: 52px" th:id="'cpd' + ${todolist.tlIdx}"></div> </div> </div> <!-- 큰 날짜 박스가 생성되는 곳 --> <div id="addDateResponse"></div> <!-- 날짜 박스 만드는 버튼 --> <div id="addDate" style="margin-top: 26px"> <div> <input type="text" style="width: 195px; margin: 14px 0 7px 13px;" th:value="제목없음" name="todolistTitleAdd" id="todolistTitleAdd"/> </div> <div style="margin: 14px 0 0 8px"> <button onclick="addTodoList()">등록</button> </div> </div>

/* [start] 웹소켓 ============================================================================================== */ var stompClient = null; //모듈화 function connect() { var socket = new SockJS('/gs-guide-websocket'); stompClient= Stomp.over(socket); stompClient.connect({}, function (frame) { console.log('Connected: ' + frame); stompClient.subscribe('/topic/planner-message/' + [[${planner.tpIdx}]], function (recommand) { res = JSON.parse(recommand.body); console.log('res: ' + res); // 그룹추가 if (res.type === 'add-group') { //response.innerHTML += '<span style="background:yellow">' + res.msg.userId + '<br>' + '</span>'; let memberResponse = document.getElementById('memberResponse'); let memberGroup = document.getElementById('memberGroup'); let newMember = document.createElement('div') newMember.className = "profile"; //newMember.innerHTML = '<p>'+ res.msg.userId + '</p>'; memberGroup.insertBefore(newMember, memberResponse); let memberImg = document.createElement("img"); memberImg.src = "'/profile/other-download(otherId=${res.msg.userId})'"; memberImg.onerror="this.src='/img/user.png'" memberImg.dataset.userId = res.msg.userId; newMember.appendChild(memberImg); memberImg.addEventListener('click', ev => { let str = ev.target.dataset.userId; let f = document.createElement('form'); f.setAttribute('method', 'get'); f.setAttribute('action', "/profile/other-profile"); memberResponse.appendChild(f); let profileId = document.createElement("input"); profileId.setAttribute("type", "hidden"); profileId.setAttribute('name', "otherId"); profileId.setAttribute("value", str); f.appendChild(profileId); f.submit(); }) } else if (res.type === 'upload-todolist') { // 투두리스트 감싸는 박스 let dateResponse = document.getElementById('addDateResponse'); let wpl = document.getElementById('wrapperPlannerList'); let todoList = document.createElement('div'); todoList.id = 'f' + res.msg.tlIdx; todoList.className = "wrapper__date__box"; wpl.insertBefore(todoList, dateResponse); // 제목 박스 let date = document.createElement('div'); date.id = "date" + res.msg.tlIdx; date.className = "date"; todoList.appendChild(date); // 제목 let tl = document.createElement("div"); tl.innerText = res.msg.title; tl.id = 'tl' + res.msg.tlIdx; tl.className = "planner__list__title"; tl.style = "margin: 12px 10px 12px 10px" document.querySelector('#date' + res.msg.tlIdx).appendChild(tl);; let settingBox = addSettingBox(); tl.addEventListener('click', ev => { settingBox.style.display = 'block'; }) function addSettingBox() { // 수정 / 삭제란 박스 let settingBox = document.createElement('div'); settingBox.id = 'plannerListSetting' + res.msg.tlIdx; settingBox.style.display = 'none'; document.querySelector('#date' + res.msg.tlIdx).appendChild(settingBox); // 수정 인풋 let todoModInput = document.createElement("input"); todoModInput.id = "tltitle" + res.msg.tlIdx; todoModInput.value = res.msg.title; settingBox.appendChild(todoModInput); // 버튼 박스 let todoListBtnBox = document.createElement('div'); todoListBtnBox.id = 'tlBtnBox' + res.msg.tlIdx; todoListBtnBox.style = "margin: 15px 7px 40px 57px"; settingBox.appendChild(todoListBtnBox); // 버튼 ========================================================================================================// // 수정 let todolistmod = document.createElement('button'); todolistmod.id = "todolistmod" + res.msg.tlIdx; todolistmod.className = "todolistmod"; todolistmod.dataset.tlidx = res.msg.tlIdx; todolistmod.innerHTML = "수정"; todoListBtnBox.appendChild(todolistmod); todolistmod.addEventListener('click', ev => { let tlIdx = ev.target.dataset.tlidx; console.log('tlIdx: ' + tlIdx); let todolistIdx = tlIdx; let todolistTitle = document.getElementById('tltitle' + tlIdx).value; console.log('todolistIdx: ' + todolistIdx); console.log('todolistTitle: ' + todolistTitle); stompClient.send("/app/modify-todolist/" + [[${planner.tpIdx}]], {}, JSON.stringify({ 'title': todolistTitle, 'tlIdx': todolistIdx })); }); // 삭제 let todolistdel = document.createElement('button'); todolistdel.id = "todolistdel" + res.msg.tlIdx; todolistdel.className = "todolistdel"; todolistdel.dataset.tlidx = res.msg.tlIdx; todolistdel.innerHTML = "삭제"; todolistdel.style = "margin: 0 6px 0 6px"; todoListBtnBox.appendChild(todolistdel); todolistdel.addEventListener('click', ev => { let tlIdx = ev.target.dataset.tlidx; console.log('tlIdx: ' + tlIdx); let todolistIdx = tlIdx; console.log('todolistIdx: ' + todolistIdx); stompClient.send("/app/remove-todolist/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tlIdx': todolistIdx})); }); // 투두 닫기 let closeBtn = document.createElement('button'); closeBtn.id = 'todolistclose' + res.msg.tlIdx; closeBtn.innerHTML = "닫기"; todoListBtnBox.appendChild(closeBtn); closeBtn.addEventListener("click", () => { settingBox.style.display = "none"; }) return settingBox; // [end] 버튼 ========================================================================================================// } let plannerTodo = document.createElement('div'); plannerTodo.id = 'plannerTodo' + res.msg.tlIdx; todoList.appendChild(plannerTodo); // 투두 새로만들기 버튼 =================================== let addCardBtn = document.createElement('div'); addCardBtn.id = 'addCardBtn' + res.msg.tlIdx; addCardBtn.className = "open" todoList.appendChild(addCardBtn); // 버튼 안의 공백 let addCardVoid = document.createElement('div'); addCardVoid.id = 'addCardVoid' + res.msg.tlIdx; addCardVoid.style = "width: 100%; height: 52px" addCardBtn.appendChild(addCardVoid); addCardVoid.addEventListener('click', ev => { addCard.style.display = 'block'; addCardVoid.style.display = 'none'; addCardBtn.style.display = 'none'; }) // [end] 투두 새로만들기 버튼 ============================== // 투두 새로 만들기 창 ==================================== let addCard = document.createElement("div"); addCard.id = "addCard" + res.msg.tlIdx; addCard.className = "add__card"; addCard.style.display = 'none'; addCard.style.backgroundColor = "white"; todoList.appendChild(addCard); // 독바 ================================================ let addWhat = document.createElement('div'); addWhat.id = 'addWhat' + res.msg.tlIdx; addWhat.className = "wrapper__bar"; addCard.appendChild(addWhat); // 독바 내용 // 일반 투두 let showAddTodo = document.createElement('div'); showAddTodo.id = 'showAddTodo' + res.msg.tlIdx; addWhat.appendChild(showAddTodo); let todoImg = document.createElement("img"); todoImg.src = "/img/btn_todo.png" todoImg.dataset.tlidx = res.msg.tlIdx; showAddTodo.appendChild(todoImg); todoImg.addEventListener('click', ev => { addCardBtn.style.display = 'none'; addTodo.style.display = 'block'; addTr.style.display = 'none'; addAc.style.display = 'none'; addAt.style.display = 'none'; addBg.style.display = 'none'; }) // 교통 투두 let showAddTr = document.createElement('div'); showAddTr.id = 'showAddTransport' + res.msg.tlIdx; addWhat.appendChild(showAddTr); let trImg = document.createElement("img"); trImg.src = "/img/btn_transport.png" trImg.dataset.tlidx = res.msg.tlIdx; showAddTr.appendChild(trImg); trImg.addEventListener('click', ev => { addCardBtn.style.display = 'none'; addTodo.style.display = 'none'; addTr.style.display = 'block'; addAc.style.display = 'none'; addAt.style.display = 'none'; addBg.style.display = 'none'; }) // 숙박 투두 let showAddAc = document.createElement("div"); showAddAc.id = "showAddAccommodation" + res.msg.tlIdx; addWhat.appendChild(showAddAc); let acImg = document.createElement("img"); acImg.src = "/img/btn_accommodation.png" acImg.dataset.tlidx = res.msg.tlIdx; showAddAc.appendChild(acImg); acImg.addEventListener('click', ev => { addCardBtn.style.display = 'none'; addTodo.style.display = 'none'; addTr.style.display = 'none'; addAc.style.display = 'block'; addAt.style.display = 'none'; addBg.style.display = 'none'; }) // 관광지 투두 let showAddAt = document.createElement("div") showAddAt.id = "showAddAttractions" + res.msg.tlIdx; addWhat.appendChild(showAddAt); let atImg = document.createElement("img"); atImg.src = "/img/img_maps.png" atImg.dataset.tlidx = res.msg.tlIdx; showAddAt.appendChild(atImg); atImg.addEventListener('click', ev => { addCardBtn.style.display = 'none'; addTodo.style.display = 'none'; addTr.style.display = 'none'; addAc.style.display = 'none'; addAt.style.display = 'block'; addBg.style.display = 'none'; }) // 예산 투두 let showAddBg = document.createElement("div"); showAddBg.id = "showAddBudget" + res.msg.tlIdx; addWhat.appendChild(showAddBg); let bgImg = document.createElement("img"); bgImg.src = "/img/btn_calculator.png" bgImg.dataset.tlidx = res.msg.tlIdx; showAddBg.appendChild(bgImg); bgImg.addEventListener('click', ev => { addCardBtn.style.display = 'none'; addTodo.style.display = 'none'; addTr.style.display = 'none'; addAc.style.display = 'none'; addAt.style.display = 'none'; addBg.style.display = 'block'; }) // [end] 독바 =========================================== // 추가 ================================================ // 일반 투두 let addTodo = document.createElement('div'); addTodo.id = 'addGeneral' + res.msg.tlIdx; addTodo.style.display = 'none'; addCard.appendChild(addTodo); let inputTodo = document.createElement('div'); inputTodo.id = 'inputTodo' + res.msg.tlIdx; addTodo.appendChild(inputTodo); let wrapperTodoCheck = document.createElement('div'); wrapperTodoCheck.id = 'wrapperTodoCheck' + res.msg.tlIdx; inputTodo.appendChild(wrapperTodoCheck); // 체크박스 let addGnPv = document.createElement("input"); addGnPv.id = "gntodopvadd" + res.msg.tlIdx; addGnPv.className = "check__box"; addGnPv.setAttribute("type", "checkbox"); wrapperTodoCheck.appendChild(addGnPv); // 체크박스 라벨 let todoCheckLabel = document.createElement('label'); todoCheckLabel.htmlFor = 'gntodopvadd' + res.msg.tlIdx; todoCheckLabel.innerText = '비공개를 원하면 클릭해주세요'; wrapperTodoCheck.appendChild(todoCheckLabel); // 일반 타이틀 let addGnTitle = document.createElement("input"); addGnTitle.id = "gntodotitleadd" + res.msg.tlIdx; addGnTitle.nodeType = "text"; addGnTitle.value = "일반제목"; inputTodo.appendChild(addGnTitle); // 일반 시간 let addGnDate = document.createElement("input"); addGnDate.id = "gntododateadd" + res.msg.tlIdx; addGnDate.setAttribute("type", "datetime-local"); inputTodo.appendChild(addGnDate); // 일반 주소 let addGnAddress = document.createElement("input"); addGnAddress.id = "gntodoaddressadd" + res.msg.tlIdx; addGnAddress.nodeType = "text"; addGnAddress.value = "일반주소"; inputTodo.appendChild(addGnAddress); // 일반 내용 let addGnContent = document.createElement("input"); addGnContent.id = "gntodocontentadd" + res.msg.tlIdx; addGnContent.nodeType = "text"; addGnContent.value = "일반내용"; inputTodo.appendChild(addGnContent); let btnTodo = document.createElement('div'); btnTodo.id = 'btnTodo' + res.msg.tlIdx; btnTodo.style = "margin: 20px 7px 40px 134px" addTodo.appendChild(btnTodo); // 등록 버튼 let addGnButton = document.createElement("button"); addGnButton.id = "gntodoadd" + res.msg.tlIdx; addGnButton.className = "gntodoadd"; addGnButton.dataset.tlidx = res.msg.tlIdx; addGnButton.innerHTML = "등록"; btnTodo.appendChild(addGnButton); addGnButton.addEventListener('click', ev => { let tlIdx = ev.target.dataset.tlidx; console.log('클릭'); console.log('tlIdx: ' + tlIdx); // let todolistIdx = document.getElementById('tlidx'+tlIdx).value; let gntodotitle = document.getElementById('gntodotitleadd'+tlIdx).value; let gntodocontent = document.getElementById('gntodocontentadd'+tlIdx).value; let gntododate = document.getElementById('gntododateadd'+tlIdx).value; let gntodoaddress = document.getElementById('gntodoaddressadd'+tlIdx).value; let gntodoprivate = document.getElementById('gntodopvadd'+tlIdx).checked; // console.log('todolistIdx: '+todolistIdx); console.log('gntodotitle: '+gntodotitle); console.log('gntodocontent: '+gntodocontent); console.log('gntododate: '+gntododate); console.log('gntodoaddress: '+gntodoaddress); console.log('gntodoprivate: '+gntodoprivate); stompClient.send("/app/upload-general/" + [[${planner.tpIdx}]]+"/"+tlIdx, {}, JSON.stringify({'title':gntodotitle, 'contents':gntodocontent, 'todoDate':gntododate, 'address':gntodoaddress, 'isPrivate':gntodoprivate})); }); // 닫기 버튼 let addTodoClose = document.createElement('button'); addTodoClose.id = 'addTodoClose' + res.msg.tlIdx; addTodoClose.style = "margin-left: 5px"; addTodoClose.innerHTML = "닫기"; btnTodo.appendChild(addTodoClose); addTodoClose.addEventListener('click', ev => { addCardBtn.style.display = 'block'; addCard.style.display = 'none'; addTodo.style.display = 'none'; addTr.style.display = 'none'; addAc.style.display = 'none'; addAt.style.display = 'none'; addBg.style.display = 'none'; }) // 교통 투두 let addTr = document.createElement("div"); addTr.id = "addTrans" + res.msg.tlIdx; addTr.style.display = 'none'; addCard.appendChild(addTr); let inputTrans = document.createElement('div'); inputTrans.id = 'inputTrans' + res.msg.tlIdx; addTr.appendChild(inputTrans); let wrapperTransCheck = document.createElement('div'); wrapperTransCheck.id = 'wrapperTransCheck' + res.msg.tlIdx; inputTrans.appendChild(wrapperTransCheck); // 체크박스 let addTrPv = document.createElement("input"); addTrPv.id = "trtodopvadd" + res.msg.tlIdx; addTrPv.setAttribute("type", "checkbox"); addTrPv.className = "check__box"; wrapperTransCheck.appendChild(addTrPv); // 라벨 let transCheckLabel = document.createElement('label'); transCheckLabel.htmlFor = 'trtodopvadd' + res.msg.tlIdx; transCheckLabel.innerText = '비공개를 원하면 클릭해주세요'; wrapperTransCheck.appendChild(transCheckLabel); // 타이틀 let addTrTitle = document.createElement("input"); addTrTitle.id = "trtodotitleadd" + res.msg.tlIdx; addTrTitle.nodeType = "text"; addTrTitle.value = "교통제목"; inputTrans.appendChild(addTrTitle); // 시간 let addTrDate = document.createElement("input"); addTrDate.id = "trtododateadd" + res.msg.tlIdx; addTrDate.setAttribute("type", "datetime-local"); inputTrans.appendChild(addTrDate); // 교통 타입 //let addTrType = document.createElement("input"); //addTrType.id = "trtodotypeadd" + res.msg.tlIdx; //addTrType.nodeType = "text"; //addTrType.value = "AIRPLANE"; //inputTrans.appendChild(addTrType); // 교통 타입 let addTrType = document.createElement("select"); addTrType.id = "trtodotypeadd" + res.msg.tlIdx; let addTropt1 = document.createElement("option"); let addTropt2 = document.createElement("option"); let addTropt3 = document.createElement("option"); let addTropt4 = document.createElement("option"); let addTropt5 = document.createElement("option"); let addTropt6 = document.createElement("option"); addTropt1.value ="AIRPLANE"; addTropt1.text="비행기"; addTropt2.value ="KTX"; addTropt2.text="KTX"; addTropt3.value ="SRT"; addTropt3.text="SRT"; addTropt4.value ="BUS"; addTropt4.text="버스"; addTropt5.value ="SUBWAY"; addTropt5.text="지하철"; addTropt6.value ="ETC"; addTropt6.text="기타"; addTropt6.selected=true; addTrType.add(addTropt1,null); addTrType.add(addTropt2,null); addTrType.add(addTropt3,null); addTrType.add(addTropt4,null); addTrType.add(addTropt5,null); addTrType.add(addTropt6,null); inputTrans.appendChild(addTrType); // 교통 내용 let addTrContent = document.createElement("input"); addTrContent.id = "trtodocontentadd" + res.msg.tlIdx; addTrContent.nodeType = "text"; addTrContent.value = "교통내용"; inputTrans.appendChild(addTrContent); let btnTrans = document.createElement('div'); btnTrans.id = 'btnTrans' + res.msg.tlIdx; btnTrans.style = "margin: 20px 7px 40px 134px" addTr.appendChild(btnTrans); // 등록 버튼 let addTrButton = document.createElement("button"); addTrButton.id = "trtodoadd" + res.msg.tlIdx; addTrButton.className = "trtodoadd"; addTrButton.dataset.tlidx = res.msg.tlIdx; addTrButton.innerHTML = "등록"; btnTrans.appendChild(addTrButton); addTrButton.addEventListener('click', ev => { let tlIdx = ev.target.dataset.tlidx; console.log('tlIdx: '+tlIdx); console.log('클릭'); // let todolistIdx = document.getElementById('tlidx'+tlIdx).value; let trtodotitle = document.getElementById('trtodotitleadd'+tlIdx).value; let trtodocontent = document.getElementById('trtodocontentadd'+tlIdx).value; let trtododate = document.getElementById('trtododateadd'+tlIdx).value; let trtodotype = document.getElementById('trtodotypeadd'+tlIdx).value; let trtodoprivate = document.getElementById('trtodopvadd'+tlIdx).checked; // console.log('todolistIdx: '+todolistIdx); console.log('trtodotitle: '+trtodotitle); console.log('trtodocontent: '+trtodocontent); console.log('trtododate: '+trtododate); console.log('trtodotype: '+trtodotype); console.log('trtodoprivate: '+trtodoprivate); stompClient.send("/app/upload-transport/" + [[${planner.tpIdx}]]+"/"+tlIdx, {}, JSON.stringify({'title':trtodotitle, 'contents':trtodocontent, 'todoDate':trtododate, 'transportType':trtodotype, 'isPrivate':trtodoprivate})); }); // 닫기 버튼 let addTransClose = document.createElement('button'); addTransClose.id = 'addTransClose' + res.msg.tlIdx; addTransClose.style = "margin-left: 5px"; addTransClose.innerHTML = "닫기"; btnTrans.appendChild(addTransClose); addTransClose.addEventListener('click', ev => { addCard.style.display = 'block'; addTodo.style.display = 'none'; addTr.style.display = 'none'; addAc.style.display = 'none'; addAt.style.display = 'none'; addBg.style.display = 'none'; }) // 숙박 투두 let addAc = document.createElement("div"); addAc.id = "addAccommodation" + res.msg.tlIdx; addAc.style.display = 'none'; addCard.appendChild(addAc); let inputAc = document.createElement('div'); inputAc.id = 'inputAc' + res.msg.tlIdx; addAc.appendChild(inputAc); let wrapperAcCheck = document.createElement('div'); wrapperAcCheck.id = 'wrapperAcCheck' + res.msg.tlIdx; inputAc.appendChild(wrapperAcCheck); // 체크박스 let addAcPv = document.createElement("input"); addAcPv.id = "actodopvadd" + res.msg.tlIdx; addAcPv.setAttribute("type", "checkbox"); addAcPv.className = "check__box"; wrapperAcCheck.appendChild(addAcPv); // 라벨 let acCheckLabel = document.createElement('label'); acCheckLabel.htmlFor = 'actodopvadd' + res.msg.tlIdx; acCheckLabel.innerText = '비공개를 원하면 클릭해주세요'; wrapperAcCheck.appendChild(acCheckLabel); // 타이틀 let addAcTitle = document.createElement("input"); addAcTitle.id = "actodotitleadd" + res.msg.tlIdx; addAcTitle.nodeType = "text"; addAcTitle.value = "숙박제목"; inputAc.appendChild(addAcTitle); // 숙박 시간 let addAcDate = document.createElement("input"); addAcDate.id = "actododateadd" + res.msg.tlIdx; addAcDate.setAttribute("type", "datetime-local"); inputAc.appendChild(addAcDate); // 숙박 주소 let addAcAddress = document.createElement("input"); addAcAddress.id = "actodoaddressadd" + res.msg.tlIdx; addAcAddress.nodeType = "text"; addAcAddress.value = "숙박주소"; inputAc.appendChild(addAcAddress); // 숙박 내용 let addAcContent = document.createElement("input"); addAcContent.id = "actodocontentadd" + res.msg.tlIdx; addAcContent.nodeType = "text"; addAcContent.value = "숙박내용"; inputAc.appendChild(addAcContent); let btnAc = document.createElement('div'); btnAc.id = 'btnAc' + res.msg.tlIdx; btnAc.style = "margin: 20px 7px 40px 134px" addAc.appendChild(btnAc); // 등록 버튼 let addAcButton = document.createElement("button"); addAcButton.id = "actodoadd" + res.msg.tlIdx; addAcButton.className = "actodoadd"; addAcButton.dataset.tlidx = res.msg.tlIdx; addAcButton.innerHTML = "등록"; btnAc.appendChild(addAcButton); addAcButton.addEventListener('click', ev => { let tlIdx = ev.target.dataset.tlidx; console.log('tlIdx: '+tlIdx); let todolistIdx = tlIdx; let actodotitle = document.getElementById('actodotitleadd'+tlIdx).value; let actodocontent = document.getElementById('actodocontentadd'+tlIdx).value; let actododate = document.getElementById('actododateadd'+tlIdx).value; let actodoaddress = document.getElementById('actodoaddressadd'+tlIdx).value; let actodoprivate = document.getElementById('actodopvadd'+tlIdx).checked; console.log('todolistIdx: '+todolistIdx); console.log('actodotitle: '+actodotitle); console.log('actodocontent: '+actodocontent); console.log('actododate: '+actododate); console.log('actodoaddress: '+actodoaddress); console.log('actodoprivate: '+actodoprivate); stompClient.send("/app/upload-accomodation/" + [[${planner.tpIdx}]]+"/"+tlIdx, {}, JSON.stringify({'title':actodotitle, 'contents':actodocontent, 'todoDate':actododate, 'address':actodoaddress, 'isPrivate':actodoprivate})); }); // 닫기 버튼 let addAcClose = document.createElement("button"); addAcClose.id = 'addAcClose' + res.msg.tlIdx; addAcClose.style = "margin-left: 5px"; addAcClose.innerHTML = "닫기"; btnAc.appendChild(addAcClose); addAcClose.addEventListener('click', ev => { addCard.style.display = 'block'; addTodo.style.display = 'none'; addTr.style.display = 'none'; addAc.style.display = 'none'; addAt.style.display = 'none'; addBg.style.display = 'none'; }) // 관광 투두 let addAt = document.createElement('div'); addAt.id = 'addAttraction' + res.msg.tlIdx; addAt.style.display = 'none'; addCard.appendChild(addAt); let inputAt = document.createElement('div'); inputAt.id = 'inputAt' + res.msg.tlIdx; addAt.appendChild(inputAt); let wrapperAtCheck = document.createElement('div'); wrapperAtCheck.id = 'wrapperAtCheck' + res.msg.tlIdx; inputAt.appendChild(wrapperAtCheck); // 관광 체크 let addAtPv = document.createElement("input"); addAtPv.id = "attodopvadd" + res.msg.tlIdx; addAtPv.setAttribute("type", "checkbox"); addAtPv.className = "check__box"; wrapperAtCheck.appendChild(addAtPv); // 라벨 let atCheckLabel = document.createElement('label'); atCheckLabel.htmlFor = 'attodopvadd' + res.msg.tlIdx; atCheckLabel.innerText = '비공개를 원하면 클릭해주세요' wrapperAtCheck.appendChild(atCheckLabel) // 관광 제목 let addAtTitle = document.createElement("input"); addAtTitle.id = "attodotitleadd" + res.msg.tlIdx; addAtTitle.nodeType = "text"; addAtTitle.value = "관광지제목"; inputAt.appendChild(addAtTitle); // 관광 시간 let addAtDate = document.createElement("input"); addAtDate.id = "attododateadd" + res.msg.tlIdx; addAtDate.setAttribute("type", "datetime-local"); inputAt.appendChild(addAtDate); // 관광 정보 let addAtInfo = document.createElement("input"); addAtInfo.id = "attodoinfoadd" + res.msg.tlIdx; addAtInfo.nodeType = "text"; addAtInfo.value = "관광지정보"; inputAt.appendChild(addAtInfo); // 관광 내용 let addAtContent = document.createElement("input"); addAtContent.id = "attodocontentadd" + res.msg.tlIdx; addAtContent.nodeType = "text"; addAtContent.value = "관광지내용"; inputAt.appendChild(addAtContent); let btnAt = document.createElement('div'); btnAt.id = 'btnAt' + res.msg.tlIdx; btnAt.style = "margin: 20px 7px 40px 134px" addAt.appendChild(btnAt); // 등록 버튼 let addAtButton = document.createElement("button"); addAtButton.id = "attodoadd" + res.msg.tlIdx; addAtButton.className = "attodoadd"; addAtButton.dataset.tlidx = res.msg.tlIdx; addAtButton.innerHTML = "등록"; btnAt.appendChild(addAtButton); addAtButton.addEventListener('click', ev => { let tlIdx = ev.target.dataset.tlidx; console.log('tlIdx: '+tlIdx); //let todolistIdx = document.getElementById('tlidx'+tlIdx).value; let attodotitle = document.getElementById('attodotitleadd'+tlIdx).value; let attodocontent = document.getElementById('attodocontentadd'+tlIdx).value; let attododate = document.getElementById('attododateadd'+tlIdx).value; let attodoinfo = document.getElementById('attodoinfoadd'+tlIdx).value; let attodoprivate = document.getElementById('attodopvadd'+tlIdx).checked; //console.log('todolistIdx: '+todolistIdx); console.log('attodotitle: '+attodotitle); console.log('attodocontent: '+attodocontent); console.log('attododate: '+attododate); console.log('attodoinfo: '+attodoinfo); console.log('attodoprivate: '+attodoprivate); stompClient.send("/app/upload-attractions/" + [[${planner.tpIdx}]]+"/"+tlIdx, {}, JSON.stringify({'title':attodotitle, 'contents':attodocontent, 'todoDate':attododate, 'attractions':attodoinfo, 'isPrivate':attodoprivate})); }); // 닫기 버튼 let addAtClose = document.createElement('button'); addAtClose.id = 'addAtClose' + res.msg.tlIdx; addAtClose.style = "margin-left: 5px"; addAtClose.innerHTML = "닫기"; btnAt.appendChild(addAtClose); addAtClose.addEventListener('click', ev => { addCard.style.display = 'block'; addTodo.style.display = 'none'; addTr.style.display = 'none'; addAc.style.display = 'none'; addAt.style.display = 'none'; addBg.style.display = 'none'; }) // 예산 투두 let addBg = document.createElement("div"); addBg.id = "addBudget" + res.msg.tlIdx; addBg.style.display = 'none'; addCard.appendChild(addBg); let inputBg = document.createElement('div'); inputBg.id = 'inputBg' + res.msg.tlIdx; addBg.appendChild(inputBg); let wrapperBgCheck = document.createElement('div'); wrapperBgCheck.id = 'wrapperBgCheck' + res.msg.div; inputBg.appendChild(wrapperBgCheck); // 예산 체크 let addBgPv = document.createElement("input"); addBgPv.id = "bgtodopvadd" + res.msg.tlIdx; addBgPv.setAttribute("type", "checkbox"); addBgPv.className = "check__box"; wrapperBgCheck.appendChild(addBgPv); // 예산 라벨 let bgCheckLabel = document.createElement('label'); bgCheckLabel.htmlFor = 'bgtodopvadd' + res.msg.tlIdx; bgCheckLabel.innerText = '비공개를 원하면 클릭해주세요'; wrapperBgCheck.appendChild(bgCheckLabel); // 예산 제목 let addBgTitle = document.createElement("input"); addBgTitle.id = "bgtodotitleadd" + res.msg.tlIdx; addBgTitle.nodeType = "text"; addBgTitle.value = "예산제목"; inputBg.appendChild(addBgTitle); // 예산 카테고리 //let addBgType = document.createElement("input"); //addBgType.id = "bgtodotypeadd" + res.msg.tlIdx; //addBgType.nodeType = "text"; //addBgType.value = "FOOD";//나중에 콤보박스나 라디오 버튼으로 //inputBg.appendChild(addBgType); // 예산 카테고리 let addBgType = document.createElement("select"); addBgType.id = "bgtodotypeadd" + res.msg.tlIdx; let addBgopt1 = document.createElement("option"); let addBgopt2 = document.createElement("option"); let addBgopt3 = document.createElement("option"); let addBgopt4 = document.createElement("option"); let addBgopt5 = document.createElement("option"); addBgopt1.value ="FOOD"; addBgopt1.text="식비"; addBgopt2.value ="SHOPPING"; addBgopt2.text="쇼핑"; addBgopt3.value ="ACCOMODATION"; addBgopt3.text="숙박비"; addBgopt4.value ="TRANSPORTATION"; addBgopt4.text="교통비"; addBgopt5.value ="ETC"; addBgopt5.text="기타"; addBgopt5.selected=true; addBgType.add(addBgopt1,null); addBgType.add(addBgopt2,null); addBgType.add(addBgopt3,null); addBgType.add(addBgopt4,null); addBgType.add(addBgopt5,null); inputBg.appendChild(addBgType); // 예산 let addBgBudget = document.createElement("input"); addBgBudget.id = "bgtodomoneyadd" + res.msg.tlIdx; addBgBudget.nodeType = "number"; addBgBudget.value = "10000";//나중에 숫자만 들어가게 inputBg.appendChild(addBgBudget); // 예산 시간 let addBgDate = document.createElement("input"); addBgDate.id = "bgtododateadd" + res.msg.tlIdx; addBgDate.setAttribute("type", "datetime-local"); inputBg.appendChild(addBgDate); // 예산 내용 let addBgContent = document.createElement("input"); addBgContent.id = "bgtodocontentadd" + res.msg.tlIdx; addBgContent.nodeType = "text"; addBgContent.value = "예산내용"; inputBg.appendChild(addBgContent); let btnBudget = document.createElement('div'); btnBudget.id = 'btnBudget' + res.msg.tlIdx; btnBudget.style = "margin: 20px 7px 40px 134px" addBg.appendChild(btnBudget); // 등록 버튼 let addBgButton = document.createElement("button"); addBgButton.id = "bgtodoadd" + res.msg.tlIdx; addBgButton.className = "bgtodoadd"; addBgButton.dataset.tlidx = res.msg.tlIdx; addBgButton.innerHTML = "등록"; btnBudget.appendChild(addBgButton); addBgButton.addEventListener('click', ev => { let tlIdx = ev.target.dataset.tlidx; console.log('tlIdx: '+tlIdx); //let todolistIdx = document.getElementById('tlidx'+tlIdx).value; let bgtodotitle = document.getElementById('bgtodotitleadd'+tlIdx).value; let bgtodocontent = document.getElementById('bgtodocontentadd'+tlIdx).value; let bgtododate = document.getElementById('bgtododateadd'+tlIdx).value; let bgtodomoney = document.getElementById('bgtodomoneyadd'+tlIdx).value; let bgtodotype = document.getElementById('bgtodotypeadd'+tlIdx).value; let bgtodoprivate = document.getElementById('bgtodopvadd'+tlIdx).checked; //console.log('todolistIdx: '+todolistIdx); console.log('bgtodotitle: '+bgtodotitle); console.log('bgtodocontent: '+bgtodocontent); console.log('bgtododate: '+bgtododate); console.log('bgtodomoney: '+bgtodomoney); console.log('bgtodotype: '+bgtodotype); console.log('bgtodoprivate: '+bgtodoprivate); stompClient.send("/app/upload-budget/" + [[${planner.tpIdx}]]+"/"+tlIdx, {}, JSON.stringify({'title':bgtodotitle, 'contents':bgtodocontent, 'todoDate':bgtododate, 'budget':bgtodomoney, 'budgetType':bgtodotype, 'isPrivate':bgtodoprivate})); }); // 닫기 버튼 let addBudgetClose = document.createElement('button'); addBudgetClose.id = 'addBudgetClose' + res.msg.tlIdx; addBudgetClose.style = "margin-left: 5px"; addBudgetClose.innerHTML = "닫기"; btnBudget.appendChild(addBudgetClose); addBudgetClose.addEventListener('click', ev => { addCardBtn.style.display = 'block'; addCard.style.display = 'none'; addTodo.style.display = 'none'; addTr.style.display = 'none'; addAc.style.display = 'none'; addAt.style.display = 'none'; addBg.style.display = 'none'; }) //하루 총 예산 let costperday = document.createElement('div'); costperday.id = "costPerDay" + res.msg.tlIdx; costperday.className = "costPerDay"; todoList.appendChild(costperday); let cpd = document.createElement('div'); cpd.id = "cpd" + res.msg.tlIdx; cpd.style ="width: 100%; height: 52px" } else if (res.type === 'modify-todolist') { // 날짜 수정 console.log('res.msg.tlIdx: ' + res.msg.tlIdx); console.log('res.msg.title: ' + res.msg.title); document.getElementById('tl' + res.msg.tlIdx).innerHTML = res.msg.title; } else if (res.type === 'remove-todolist') { // 날짜 삭제 console.log('res.msg: ' + res.msg); document.querySelector('#f' + res.msg).style.display = 'none'; } else if (res.type === 'upload-general') { // 일반 투두 추가 console.log('res.msg.title: '+res.msg.title); console.log('res.msg.contents: '+res.msg.contents); console.log('res.msg.todoDate: '+res.msg.todoDate); console.log('res.msg.address: '+res.msg.address); console.log('res.msg.isPrivate: '+res.msg.isPrivate); // 투두 카드 생기는 곳 let todoResponse = document.getElementById("response"+res.msg.tlIdx); console.log('존재하니?', res.tlidx) let plannerTodo = document.getElementById("plannerTodo"+res.tlIdx); // 제일 상위 노드 let todoCard = document.createElement("div"); todoCard.id='d'+res.msg.tdIdx; todoCard.className = "card"; plannerTodo.insertBefore(todoCard, todoResponse); let todoContents = document.createElement("div"); todoContents.id = 'todoContents' + res.msg.tdIdx; todoContents.style = "margin: 20px 10px 30px 10px"; todoCard.appendChild(todoContents); todoContents.addEventListener('click', ev => { modTodo.style.display = 'block'; }) let title = document.createElement("div"); title.id = "gntitle"+res.msg.tdIdx; title.innerHTML = res.msg.title; title.className = "planner__todo__title"; todoContents.appendChild(title); let todoTxt = document.createElement("div"); todoTxt.id = 'todoTxt' + res.msg.tdIdx; todoTxt.className = "todo__txt"; todoContents.appendChild(todoTxt); let isPrivate = document.createElement("div"); isPrivate.id = "gnisPrivate"+ res.msg.tdIdx; isPrivate.innerHTML = res.msg.isPrivate; isPrivate.className = "todo__txt"; todoContents.appendChild(isPrivate); let todoDate = document.createElement("div"); todoDate.id = "gntododate" + res.msg.tdIdx; todoDate.innerHTML = res.msg.todoDate; todoDate.style = "margin-bottom: 5px"; todoDate.className = "todo__txt"; todoContents.appendChild(todoDate); let address = document.createElement("div"); address.id = "gnaddress" + res.msg.tdIdx; address.innerHTML = res.msg.address; address.style = "margin-bottom: 5px"; address.className = "todo__txt"; todoContents.appendChild(address); let contents = document.createElement("div"); contents.id = "gncontents" + res.msg.tdIdx; contents.innerHTML = res.msg.contents; contents.style = "margin-bottom: 5px"; contents.className = "todo__txt"; todoContents.appendChild(contents); // 수정 let modTodo = document.createElement("div"); modTodo.id = 'todoSetting' + res.msg.tdIdx; modTodo.style.display = 'none'; todoCard.appendChild(modTodo); let inputTodo = document.createElement("div"); inputTodo.id = 'inputTodo' + res.msg.tdIdx; modTodo.appendChild(inputTodo); let wrapperTodoCheck = document.createElement('div'); wrapperTodoCheck.id = 'wrapperTodoCheck' + res.msg.tdIdx; inputTodo.appendChild(wrapperTodoCheck); let isPrivatemod = document.createElement("input"); isPrivatemod.id = "gntodopvmod"+ res.msg.tdIdx; isPrivatemod.setAttribute("type", "checkbox"); if(res.msg.isPrivate){ isPrivatemod.checked =true; }else{ isPrivatemod.checked =false; } isPrivatemod.className = "check__box"; wrapperTodoCheck.appendChild(isPrivatemod); let todoCheckLabel = document.createElement('label'); todoCheckLabel.htmlFor = 'gntodopvmod' + res.msg.tlIdx; todoCheckLabel.innerText = '비공개를 원하면 클릭해주세요'; wrapperTodoCheck.appendChild(todoCheckLabel); let td = document.createElement("input"); td.id = "tdidx"+ res.msg.tdIdx; td.nodeType = "text"; td.style.display = 'none'; td.value = res.msg.tdIdx; inputTodo.appendChild(td); let titlemod = document.createElement("input"); titlemod.id = "gntodotitlemod"+ res.msg.tdIdx; titlemod.nodeType = "text"; titlemod.value = res.msg.title; inputTodo.appendChild(titlemod); let todoDatemod = document.createElement("input"); todoDatemod.id = "gntododatemod"+ res.msg.tdIdx; todoDatemod.setAttribute("type", "datetime-local"); inputTodo.appendChild(todoDatemod); let addressmod = document.createElement("input"); addressmod.id = "gntodoaddressmod"+ res.msg.tdIdx; addressmod.nodeType = "text"; addressmod.value = res.msg.address; inputTodo.appendChild(addressmod); let contentsmod = document.createElement("input"); contentsmod.id = "gntodocontentmod"+ res.msg.tdIdx; contentsmod.nodeType = "text"; contentsmod.value = res.msg.contents; inputTodo.appendChild(contentsmod); let btnTodo = document.createElement("div"); btnTodo.id = 'btnTodo' + res.msg.tdIdx; btnTodo.style = "margin: 15px 7px 40px 57px" modTodo.appendChild(btnTodo); let modbutton = document.createElement("button"); modbutton.id = "gntodomod"+res.msg.tdIdx; modbutton.className = "gntodomod"; modbutton.dataset.tdidx = res.msg.tdIdx; modbutton.innerHTML= "수정"; btnTodo.appendChild(modbutton); modbutton.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: ' + tdIdx); console.log('클릭'); let gntodoIdx = document.getElementById('tdidx'+tdIdx).value; let gntodotitle = document.getElementById('gntodotitlemod'+tdIdx).value; let gntodocontent = document.getElementById('gntodocontentmod'+tdIdx).value; let gntododate = document.getElementById('gntododatemod'+tdIdx).value; let gntodoaddress = document.getElementById('gntodoaddressmod'+tdIdx).value; let gntodoprivate = document.getElementById('gntodopvmod'+tdIdx).checked; console.log('gntodoIdx: '+gntodoIdx); console.log('gntodotitle: '+gntodotitle); console.log('gntodocontent: '+gntodocontent); console.log('gntododate: '+gntododate); console.log('gntodoaddress: '+gntodoaddress); console.log('gntodoprivate: '+gntodoprivate); stompClient.send("/app/modify-general/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tdIdx':gntodoIdx, 'title':gntodotitle, 'contents':gntodocontent, 'todoDate':gntododate, 'address':gntodoaddress, 'isPrivate':gntodoprivate})); }); let delbutton = document.createElement("button"); delbutton.id = "gntododel"+res.msg.tdIdx; delbutton.className = "gntododel"; delbutton.dataset.tdidx = res.msg.tdIdx; delbutton.innerHTML= "삭제"; delbutton.style = "margin: 0 6px 0 6px"; btnTodo.appendChild(delbutton); delbutton.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: '+tdIdx); console.log('클릭') let gntodoIdx = document.getElementById('tdidx'+tdIdx).value; console.log('gntodoIdx: '+gntodoIdx); stompClient.send("/app/remove-general/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tdIdx':gntodoIdx })); }); let closeBtn = document.createElement('button'); closeBtn.id = 'todoClose' + res.msg.tdIdx; closeBtn.innerHTML = "닫기"; btnTodo.appendChild(closeBtn); closeBtn.addEventListener("click", () => { modTodo.style.display = "none"; }) } else if(res.type === 'modify-general'){ // 일반 투두 수정 console.log('res.msg.title: '+res.msg.title); console.log('res.msg.contents: '+res.msg.contents); console.log('res.msg.todoDate: '+res.msg.todoDate); console.log('res.msg.address: '+res.msg.address); console.log('res.msg.isPrivate: '+res.msg.isPrivate); document.getElementById("gntitle"+res.msg.tdIdx).innerHTML = res.msg.title; document.getElementById("gncontents" + res.msg.tdIdx).innerHTML = res.msg.contents; document.getElementById("gntododate"+res.msg.tdIdx).innerHTML = res.msg.todoDate; document.getElementById("gnaddress"+res.msg.tdIdx).innerHTML = res.msg.address; if(res.msg.isPrivate){ document.getElementById("gnisPrivate"+res.msg.tdIdx).checked =true; }else{ document.getElementById("gnisPrivate"+res.msg.tdIdx).checked =false; } document.getElementById("tdidx"+res.msg.tdIdx).value = res.msg.tdIdx; document.getElementById("gntodotitlemod"+res.msg.tdIdx).value = res.msg.title; document.getElementById("gntodocontentmod"+res.msg.tdIdx).value = res.msg.contents; document.getElementById("gntodoaddressmod"+res.msg.tdIdx).value = res.msg.address; if(res.msg.isPrivate){ document.getElementById("gntodopvmod"+res.msg.tdIdx).checked =true; }else{ document.getElementById("gntodopvmod"+res.msg.tdIdx).checked =false; } } else if(res.type === 'remove-general') { // 일반 투두 제거 console.log('res.msg: ' + res.msg); document.querySelector('#d'+res.msg).style.display='none'; } else if (res.type === 'upload-transport') { // 교통 추가 console.log('res.msg.title: '+res.msg.title); console.log('res.msg.contents: '+res.msg.contents); console.log('res.msg.todoDate: '+res.msg.todoDate); console.log('res.msg.transportType: '+res.msg.transportType); console.log('res.msg.isPrivate: '+res.msg.isPrivate); // 투두 카드 생기는 곳 let todoResponse = document.getElementById("response" + res.msg.tlIdx); console.log('존재하니?', res.tlidx) let plannerTodo = document.getElementById("plannerTodo" + res.tlIdx); // 제일 상위 노드 let todoCard = document.createElement("div"); todoCard.id = 'd' + res.msg.tdIdx; todoCard.className = "card"; plannerTodo.insertBefore(todoCard, todoResponse); let todoContents = document.createElement("div"); todoContents.id = 'todoContents' + res.msg.tdIdx; todoContents.style = "margin: 20px 10px 30px 10px"; todoCard.appendChild(todoContents); todoContents.addEventListener('click', ev => { modTodo.style.display = 'block'; }) let title = document.createElement("div"); title.id = "trtitle"+res.msg.tdIdx; title.innerHTML = res.msg.title; title.className = "planner__todo__title"; todoContents.appendChild(title); let todoTxt = document.createElement("div"); todoTxt.id = 'todoTxt' + res.msg.tdIdx; todoTxt.className = "todo__txt"; todoContents.appendChild(todoTxt); let isPrivate = document.createElement("div"); isPrivate.id = "trisPrivate"+ res.msg.tdIdx; isPrivate.innerHTML = res.msg.isPrivate; isPrivate.className = "todo__txt"; todoContents.appendChild(isPrivate); let todoDate = document.createElement("div"); todoDate.id = "trtododate" + res.msg.tdIdx; todoDate.innerHTML = res.msg.todoDate; todoDate.style = "margin-bottom: 5px"; todoDate.className = "todo__txt"; todoContents.appendChild(todoDate); let type = document.createElement("div"); type.id = "trtransportType" + res.msg.tdIdx; type.innerHTML = res.msg.transportType; type.style = "margin-bottom: 5px"; type.className = "todo__txt"; todoContents.appendChild(type); let contents = document.createElement("div"); contents.id = "trcontents" + res.msg.tdIdx; contents.innerHTML = res.msg.contents; contents.style = "margin-bottom: 5px"; contents.className = "todo__txt"; todoContents.appendChild(contents); // 수정 let modTodo = document.createElement("div"); modTodo.id = 'todoSetting' + res.msg.tdIdx; modTodo.style.display = 'none'; todoCard.appendChild(modTodo); let inputTodo = document.createElement("div"); inputTodo.id = 'inputTodo' + res.msg.tdIdx; modTodo.appendChild(inputTodo); let wrapperTransCheck = document.createElement('div'); wrapperTransCheck.id = 'wrapperTransCheck' + res.msg.tdIdx; inputTodo.appendChild(wrapperTransCheck); let isPrivatemod = document.createElement("input"); isPrivatemod.id = "trtodopvmod"+ res.msg.tdIdx; isPrivatemod.setAttribute("type", "checkbox"); if (res.msg.isPrivate) { isPrivatemod.checked = true; } else { isPrivatemod.checked = false; } isPrivatemod.className = "check__box"; wrapperTransCheck.appendChild(isPrivatemod); let todoCheckLabel = document.createElement('label'); todoCheckLabel.htmlFor = 'trtodopvmod' + res.msg.tlIdx; todoCheckLabel.innerText = '비공개를 원하면 클릭해주세요'; wrapperTransCheck.appendChild(todoCheckLabel); let td = document.createElement("input"); td.id = "tdidx"+ res.msg.tdIdx; td.nodeType = "text"; td.style.display = 'none'; td.value = res.msg.tdIdx; inputTodo.appendChild(td); let titlemod = document.createElement("input"); titlemod.id = "trtodotitlemod"+ res.msg.tdIdx; titlemod.nodeType = "text"; titlemod.value = res.msg.title; inputTodo.appendChild(titlemod); let todoDatemod = document.createElement("input"); todoDatemod.id = "trtododatemod"+ res.msg.tdIdx; todoDatemod.setAttribute("type", "datetime-local"); inputTodo.appendChild(todoDatemod); let typemod = document.createElement("select"); typemod.id = "trtodotypemod"+ res.msg.tdIdx; let addTropt1 = document.createElement("option"); let addTropt2 = document.createElement("option"); let addTropt3 = document.createElement("option"); let addTropt4 = document.createElement("option"); let addTropt5 = document.createElement("option"); let addTropt6 = document.createElement("option"); addTropt1.value ="AIRPLANE"; addTropt1.text="비행기"; addTropt2.value ="KTX"; addTropt2.text="KTX"; addTropt3.value ="SRT"; addTropt3.text="SRT"; addTropt4.value ="BUS"; addTropt4.text="버스"; addTropt5.value ="SUBWAY"; addTropt5.text="지하철"; addTropt6.value ="ETC"; addTropt6.text="기타"; addTropt6.selected=true; typemod.add(addTropt1,null); typemod.add(addTropt2,null); typemod.add(addTropt3,null); typemod.add(addTropt4,null); typemod.add(addTropt5,null); typemod.add(addTropt6,null); inputTodo.appendChild(typemod); let contentsmod = document.createElement("input"); contentsmod.id = "trtodocontentmod"+ res.msg.tdIdx; contentsmod.nodeType = "text"; contentsmod.value = res.msg.contents; inputTodo.appendChild(contentsmod); let btnTodo = document.createElement("div"); btnTodo.id = 'btnTodo' + res.msg.tdIdx; btnTodo.style = "margin: 15px 7px 40px 57px" modTodo.appendChild(btnTodo); let modbutton = document.createElement("button"); modbutton.id = "trtodomod"+res.msg.tdIdx; modbutton.className = "trtodomod"; modbutton.dataset.tdidx = res.msg.tdIdx; modbutton.innerHTML = "수정"; btnTodo.appendChild(modbutton); modbutton.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: ' + tdIdx); console.log('클릭'); let trtodoIdx = document.getElementById('tdidx'+tdIdx).value; let trtodotitle = document.getElementById('trtodotitlemod'+tdIdx).value; let trtodocontent = document.getElementById('trtodocontentmod'+tdIdx).value; let trtododate = document.getElementById('trtododatemod'+tdIdx).value; let trtodotype = document.getElementById('trtodotypemod'+tdIdx).value; let trtodoprivate = document.getElementById('trtodopvmod'+tdIdx).checked; console.log('trtodoIdx: '+trtodoIdx); console.log('trtodotitle: '+trtodotitle); console.log('trtodocontent: '+trtodocontent); console.log('trtododate: '+trtododate); console.log('trtodotype: '+trtodotype); console.log('trtodoprivate: '+trtodoprivate); stompClient.send("/app/modify-transport/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tdIdx':trtodoIdx, 'title':trtodotitle, 'contents':trtodocontent, 'todoDate':trtododate, 'transportType':trtodotype, 'isPrivate':trtodoprivate})); }); let delbutton = document.createElement("button"); delbutton.id = "trtododel"+res.msg.tdIdx; delbutton.className = "trtododel"; delbutton.dataset.tdidx = res.msg.tdIdx; delbutton.innerHTML = "삭제"; delbutton.style = "margin: 0 6px 0 6px"; btnTodo.appendChild(delbutton); delbutton.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: ' + tdIdx); console.log('클릭') let trtodoIdx = document.getElementById('tdidx'+tdIdx).value; console.log('trtodoIdx: '+trtodoIdx); stompClient.send("/app/remove-transport/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tdIdx':trtodoIdx })); }); let closeBtn = document.createElement('button'); closeBtn.id = 'todoClose' + res.msg.tdIdx; closeBtn.innerHTML = "닫기"; btnTodo.appendChild(closeBtn); closeBtn.addEventListener("click", () => { modTodo.style.display = "none"; }) } else if(res.type === 'modify-transport'){ // 교통 수정 console.log('res.msg.title: '+res.msg.title); console.log('res.msg.contents: '+res.msg.contents); console.log('res.msg.todoDate: '+res.msg.todoDate); console.log('res.msg.transportType: '+res.msg.transportType); console.log('res.msg.isPrivate: '+res.msg.isPrivate); document.getElementById("trtitle"+res.msg.tdIdx).innerHTML = res.msg.title; document.getElementById("trcontents" + res.msg.tdIdx).innerHTML = res.msg.contents; document.getElementById("trtododate"+res.msg.tdIdx).innerHTML = res.msg.todoDate; document.getElementById("trtransportType"+res.msg.tdIdx).innerHTML = res.msg.transportType; if(res.msg.isPrivate){ document.getElementById("trisPrivate"+res.msg.tdIdx).checked =true; }else{ document.getElementById("trisPrivate"+res.msg.tdIdx).checked =false; } document.getElementById("tdidx"+res.msg.tdIdx).value = res.msg.tdIdx; document.getElementById("trtodotitlemod"+res.msg.tdIdx).value = res.msg.title; document.getElementById("trtodocontentmod"+res.msg.tdIdx).value = res.msg.contents; document.getElementById("trtodotypemod"+res.msg.tdIdx).value = res.msg.transportType; if(res.msg.isPrivate){ document.getElementById("trtodopvmod"+res.msg.tdIdx).checked =true; }else{ document.getElementById("trtodopvmod"+res.msg.tdIdx).checked =false; } }else if(res.type === 'remove-transport'){ // 교통 삭제 console.log('res.msg: '+res.msg); document.querySelector('#d'+res.msg).style.display='none'; } else if (res.type === 'upload-accomodation') { // 숙박 추가 console.log('res.tlIdx: ' + res.tlIdx); console.log('res.msg.tdIdx: ' + res.msg.tdIdx); console.log('res.msg.title: '+res.msg.title); console.log('res.msg.contents: '+res.msg.contents); console.log('res.msg.todoDate: '+res.msg.todoDate); console.log('res.msg.address: '+res.msg.address); console.log('res.msg.isPrivate: '+res.msg.isPrivate); // 투두 카드 생기는 곳 let todoResponse = document.getElementById("response"+res.msg.tlIdx); console.log('존재하니?', res.tlidx) let plannerTodo = document.getElementById("plannerTodo"+res.tlIdx); // 제일 상위 노드 let todoCard = document.createElement("div"); todoCard.id='d'+res.msg.tdIdx; todoCard.className = "card"; plannerTodo.insertBefore(todoCard, todoResponse); let todoContents = document.createElement("div"); todoContents.id = 'todoContents' + res.msg.tdIdx; todoContents.style = "margin: 20px 10px 30px 10px"; todoCard.appendChild(todoContents); todoContents.addEventListener('click', ev => { console.log("클릭") modTodo.style.display = 'block'; }) let title = document.createElement("div"); title.id = "actitle"+res.msg.tdIdx; title.innerHTML = res.msg.title; title.className = "planner__todo__title"; todoContents.appendChild(title); let todoTxt = document.createElement("div"); todoTxt.id = 'todoTxt' + res.msg.tdIdx; todoTxt.className = "todo__txt"; todoContents.appendChild(todoTxt); let isPrivate = document.createElement("div"); isPrivate.id = "acisPrivate"+ res.msg.tdIdx; isPrivate.innerHTML = res.msg.isPrivate; isPrivate.className = "todo__txt"; todoContents.appendChild(isPrivate); let todoDate = document.createElement("div"); todoDate.id = "actododate" + res.msg.tdIdx; todoDate.innerHTML = res.msg.todoDate; todoDate.style = "margin-bottom: 5px"; todoDate.className = "todo__txt"; todoContents.appendChild(todoDate); let address = document.createElement("div"); address.id = "acaddress" + res.msg.tdIdx; address.innerHTML = res.msg.address; address.style = "margin-bottom: 5px"; address.className = "todo__txt"; todoContents.appendChild(address); let contents = document.createElement("div"); contents.id = "accontents" + res.msg.tdIdx; contents.innerHTML = res.msg.contents; contents.style = "margin-bottom: 5px"; contents.className = "todo__txt"; todoContents.appendChild(contents); // 수정 let modTodo = document.createElement("div"); modTodo.id = 'todoSetting' + res.msg.tdIdx; modTodo.style.display = 'none'; todoCard.appendChild(modTodo); let inputTodo = document.createElement("div"); inputTodo.id = 'inputTodo' + res.msg.tdIdx; modTodo.appendChild(inputTodo); let wrapperAcCheck = document.createElement('div'); wrapperAcCheck.id = 'wrapperAcCheck' + res.msg.tdIdx; inputTodo.appendChild(wrapperAcCheck); let isPrivatemod = document.createElement("input"); isPrivatemod.id = "actodopvmod"+ res.msg.tdIdx; isPrivatemod.setAttribute("type", "checkbox"); if(res.msg.isPrivate){ isPrivatemod.checked =true; }else{ isPrivatemod.checked =false; } isPrivatemod.className = "check__box"; wrapperAcCheck.appendChild(isPrivatemod); let todoCheckLabel = document.createElement('label'); todoCheckLabel.htmlFor = 'actodopvmod' + res.msg.tlIdx; todoCheckLabel.innerText = '비공개를 원하면 클릭해주세요'; wrapperAcCheck.appendChild(todoCheckLabel); let td = document.createElement("input"); td.id = "tdidx"+ res.msg.tdIdx; td.nodeType = "text"; td.style.display = 'none'; td.value = res.msg.tdIdx; inputTodo.appendChild(td); let titlemod = document.createElement("input"); titlemod.id = "actodotitlemod"+ res.msg.tdIdx; titlemod.nodeType = "text"; titlemod.value = res.msg.title; inputTodo.appendChild(titlemod); let todoDatemod = document.createElement("input"); todoDatemod.id = "actododatemod"+ res.msg.tdIdx; todoDatemod.setAttribute("type", "datetime-local"); inputTodo.appendChild(todoDatemod); let addressmod = document.createElement("input"); addressmod.id = "actodoaddressmod"+ res.msg.tdIdx; addressmod.nodeType = "text"; addressmod.value = res.msg.address; inputTodo.appendChild(addressmod); let contentsmod = document.createElement("input"); contentsmod.id = "actodocontentmod"+ res.msg.tdIdx; contentsmod.nodeType = "text"; contentsmod.value = res.msg.contents; inputTodo.appendChild(contentsmod); let btnTodo = document.createElement("div"); btnTodo.id = 'btnTodo' + res.msg.tdIdx; btnTodo.style = "margin: 15px 7px 40px 57px" modTodo.appendChild(btnTodo); let modbutton = document.createElement("button"); modbutton.id = "acmodbutton"+res.msg.tdIdx; modbutton.className = "acmodbutton"; modbutton.dataset.tdidx = res.msg.tdIdx; modbutton.innerHTML= "수정"; btnTodo.appendChild(modbutton); modbutton.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: ' + tdIdx); console.log('클릭'); let actodoIdx = tdIdx; let actodotitle = document.getElementById('actodotitlemod'+tdIdx).value; let actodocontent = document.getElementById('actodocontentmod'+tdIdx).value; let actododate = document.getElementById('actododatemod'+tdIdx).value; let actodoaddress = document.getElementById('actodoaddressmod'+tdIdx).value; let actodoprivate = document.getElementById('actodopvmod'+tdIdx).checked; console.log('actodoIdx: '+actodoIdx); console.log('actodotitle: '+actodotitle); console.log('actodocontent: '+actodocontent); console.log('actododate: '+actododate); console.log('actodoaddress: '+actodoaddress); console.log('actodoprivate: '+actodoprivate); stompClient.send("/app/modify-accomodation/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tdIdx':actodoIdx, 'title':actodotitle, 'contents':actodocontent, 'todoDate':actododate, 'address':actodoaddress, 'isPrivate':actodoprivate})); }); let delbutton = document.createElement("button"); delbutton.id = "acdelbutton"+res.msg.tdIdx; delbutton.className = "actododel"; delbutton.dataset.tdidx = res.msg.tdIdx; delbutton.innerHTML= "삭제"; delbutton.style = "margin: 0 6px 0 6px"; btnTodo.appendChild(delbutton); delbutton.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: '+tdIdx); console.log('클릭') let actodoIdx = document.getElementById('tdidx'+tdIdx).value; console.log('actodoIdx: '+actodoIdx); stompClient.send("/app/remove-accomodation/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tdIdx':actodoIdx })); }); let closeBtn = document.createElement('button'); closeBtn.id = 'todoClose' + res.msg.tdIdx; closeBtn.innerHTML = "닫기"; btnTodo.appendChild(closeBtn); closeBtn.addEventListener("click", () => { modTodo.style.display = "none"; }) } else if(res.type === 'modify-accomodation') { // 숙박 수정 console.log('res.msg.title: ' + res.msg.title); console.log('res.msg.contents: ' + res.msg.contents); console.log('res.msg.todoDate: ' + res.msg.todoDate); console.log('res.msg.address: ' + res.msg.address); console.log('res.msg.isPrivate: ' + res.msg.isPrivate); document.getElementById("actitle" + res.msg.tdIdx).innerHTML = res.msg.title; document.getElementById("accontents" + res.msg.tdIdx).innerHTML = res.msg.contents; document.getElementById("actododate" + res.msg.tdIdx).innerHTML = res.msg.todoDate; document.getElementById("acaddress" + res.msg.tdIdx).innerHTML = res.msg.address; if (res.msg.isPrivate) { document.getElementById("acisPrivate" + res.msg.tdIdx).checked = true; } else { document.getElementById("acisPrivate" + res.msg.tdIdx).checked = false; } document.getElementById("tdidx" + res.msg.tdIdx).value = res.msg.tdIdx; document.getElementById("actodotitlemod" + res.msg.tdIdx).value = res.msg.title; document.getElementById("actodocontentmod" + res.msg.tdIdx).value = res.msg.contents; document.getElementById("actodoaddressmod" + res.msg.tdIdx).value = res.msg.address; if (res.msg.isPrivate) { document.getElementById("actodopvmod" + res.msg.tdIdx).checked = true; } else { document.getElementById("actodopvmod" + res.msg.tdIdx).checked = false; } } else if(res.type === 'remove-accomodation') { //숙박 삭제 console.log('res.msg: ' + res.msg); document.querySelector('#d' + res.msg).style.display = 'none'; }else if(res.type === 'upload-attractions') { // 관광지 추가 console.log('res.msg.title: ' + res.msg.title); console.log('res.msg.contents: ' + res.msg.contents); console.log('res.msg.todoDate: ' + res.msg.todoDate); console.log('res.msg.attractions: ' + res.msg.attractions); console.log('res.msg.isPrivate: ' + res.msg.isPrivate); // 투두 카드 생기는 곳 let todoResponse = document.getElementById("response" + res.msg.tlIdx); console.log('존재하니?', res.tlidx) let plannerTodo = document.getElementById("plannerTodo" + res.tlIdx); // 제일 상위 노드 let todoCard = document.createElement("div"); todoCard.id = 'd' + res.msg.tdIdx; todoCard.className = "card"; plannerTodo.insertBefore(todoCard, todoResponse); let todoContents = document.createElement("div"); todoContents.id = 'todoContents' + res.msg.tdIdx; todoContents.style = "margin: 20px 10px 30px 10px"; todoCard.appendChild(todoContents); todoContents.addEventListener('click', ev => { console.log("클릭") modTodo.style.display = 'block'; }) let title = document.createElement("div"); title.id = "attitle" + res.msg.tdIdx; title.innerHTML = res.msg.title; title.className = "planner__todo__title"; todoContents.appendChild(title); let todoTxt = document.createElement("div"); todoTxt.id = 'todoTxt' + res.msg.tdIdx; todoTxt.className = "todo__txt"; todoContents.appendChild(todoTxt); let isPrivate = document.createElement("div"); isPrivate.id = "atisPrivate" + res.msg.tdIdx; isPrivate.innerHTML = res.msg.isPrivate; isPrivate.className = "todo__txt"; todoContents.appendChild(isPrivate); let todoDate = document.createElement("div"); todoDate.id = "attododate" + res.msg.tdIdx; todoDate.innerHTML = res.msg.todoDate; todoDate.style = "margin-bottom: 5px"; todoDate.className = "todo__txt"; todoContents.appendChild(todoDate); let info = document.createElement("div"); info.id = "atattractions" + res.msg.tdIdx; info.innerHTML = res.msg.attractions; info.style = "margin-bottom: 5px"; info.className = "todo__txt"; todoContents.appendChild(info); let contents = document.createElement("div"); contents.id = "atcontents" + res.msg.tdIdx; contents.innerHTML = res.msg.contents; contents.style = "margin-bottom: 5px"; contents.className = "todo__txt"; todoContents.appendChild(contents); // 수정 let modTodo = document.createElement("div"); modTodo.id = 'todoSetting' + res.msg.tdIdx; modTodo.style.display = 'none'; todoCard.appendChild(modTodo); let inputTodo = document.createElement("div"); inputTodo.id = 'inputTodo' + res.msg.tdIdx; modTodo.appendChild(inputTodo); let wrapperAtCheck = document.createElement('div'); wrapperAtCheck.id = 'wrapperAtCheck' + res.msg.tdIdx; inputTodo.appendChild(wrapperAtCheck); let isPrivatemod = document.createElement("input"); isPrivatemod.id = "attodopvmod" + res.msg.tdIdx; isPrivatemod.setAttribute("type", "checkbox"); if (res.msg.isPrivate) { isPrivatemod.checked = true; } else { isPrivatemod.checked = false; } isPrivatemod.className = "check__box"; wrapperAtCheck.appendChild(isPrivatemod); let todoCheckLabel = document.createElement('label'); todoCheckLabel.htmlFor = 'attodopvmod' + res.msg.tlIdx; todoCheckLabel.innerText = '비공개를 원하면 클릭해주세요'; wrapperAtCheck.appendChild(todoCheckLabel); let td = document.createElement("input"); td.id = "tdidx" + res.msg.tdIdx; td.nodeType = "text"; td.style.display = 'none'; td.value = res.msg.tdIdx; inputTodo.appendChild(td); let titlemod = document.createElement("input"); titlemod.id = "attodotitlemod" + res.msg.tdIdx; titlemod.nodeType = "text"; titlemod.value = res.msg.title; inputTodo.appendChild(titlemod); let todoDatemod = document.createElement("input"); todoDatemod.id = "attododatemod" + res.msg.tdIdx; todoDatemod.setAttribute("type", "datetime-local"); inputTodo.appendChild(todoDatemod); let infomod = document.createElement("input"); infomod.id = "attodoinfomod" + res.msg.tdIdx; infomod.nodeType = "text"; infomod.value = res.msg.attractions; inputTodo.appendChild(infomod); let contentsmod = document.createElement("input"); contentsmod.id = "attodocontentmod" + res.msg.tdIdx; contentsmod.nodeType = "text"; contentsmod.value = res.msg.contents; inputTodo.appendChild(contentsmod); let btnTodo = document.createElement("div"); btnTodo.id = 'btnTodo' + res.msg.tdIdx; btnTodo.style = "margin: 15px 7px 40px 57px" modTodo.appendChild(btnTodo); let modbutton = document.createElement("button"); modbutton.id = "attodomod" + res.msg.tdIdx; modbutton.className = "attodomod"; modbutton.dataset.tdidx = res.msg.tdIdx; modbutton.innerHTML = "수정"; btnTodo.appendChild(modbutton); modbutton.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: ' + tdIdx); let attodoIdx = document.getElementById('tdidx' + tdIdx).value; let attodotitle = document.getElementById('attodotitlemod' + tdIdx).value; let attodocontent = document.getElementById('attodocontentmod' + tdIdx).value; let attododate = document.getElementById('attododatemod' + tdIdx).value; let attodoinfo = document.getElementById('attodoinfomod' + tdIdx).value; let attodoprivate = document.getElementById('attodopvmod' + tdIdx).checked; console.log('attodoIdx: ' + attodoIdx); console.log('attodotitle: ' + attodotitle); console.log('attodocontent: ' + attodocontent); console.log('attododate: ' + attododate); console.log('attodoinfo: ' + attodoinfo); console.log('attodoprivate: ' + attodoprivate); stompClient.send("/app/modify-attractions/" + [[${planner.tpIdx}]], {}, JSON.stringify({ 'tdIdx': attodoIdx, 'title': attodotitle, 'contents': attodocontent, 'todoDate': attododate, 'attractions': attodoinfo, 'isPrivate': attodoprivate })); }); let delbutton = document.createElement("button"); delbutton.id = "acdelbutton" + res.msg.tdIdx; delbutton.className = "actododel"; delbutton.dataset.tdidx = res.msg.tdIdx; delbutton.innerHTML = "삭제"; delbutton.style = "margin: 0 6px 0 6px"; btnTodo.appendChild(delbutton); delbutton.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: ' + tdIdx); let attodoIdx = document.getElementById('tdidx' + tdIdx).value; console.log('attodoIdx: ' + attodoIdx); stompClient.send("/app/remove-attractions/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tdIdx': attodoIdx})); }); let closeBtn = document.createElement('button'); closeBtn.id = 'todoClose' + res.msg.tdIdx; closeBtn.innerHTML = "닫기"; btnTodo.appendChild(closeBtn); closeBtn.addEventListener("click", () => { modTodo.style.display = "none"; }) }else if(res.type === 'modify-attractions'){ // 관광지 수정 console.log('res.msg.title: '+res.msg.title); console.log('res.msg.contents: '+res.msg.contents); console.log('res.msg.todoDate: '+res.msg.todoDate); console.log('res.msg.attractions: '+res.msg.attractions); console.log('res.msg.isPrivate: '+res.msg.isPrivate); document.getElementById("attitle"+res.msg.tdIdx).innerHTML = res.msg.title; document.getElementById("atcontents" + res.msg.tdIdx).innerHTML = res.msg.contents; document.getElementById("attododate"+res.msg.tdIdx).innerHTML = res.msg.todoDate; document.getElementById("atattractions"+res.msg.tdIdx).innerHTML = res.msg.attractions; if(res.msg.isPrivate){ document.getElementById("acisPrivate"+res.msg.tdIdx).checked =true; }else{ document.getElementById("acisPrivate"+res.msg.tdIdx).checked =false; } document.getElementById("tdidx"+res.msg.tdIdx).value = res.msg.tdIdx; document.getElementById("attodotitlemod"+res.msg.tdIdx).value = res.msg.title; document.getElementById("attodocontentmod"+res.msg.tdIdx).value = res.msg.contents; document.getElementById("attodoinfomod"+res.msg.tdIdx).value = res.msg.attractions; if(res.msg.isPrivate){ document.getElementById("attodopvmod"+res.msg.tdIdx).checked =true; }else{ document.getElementById("attodopvmod"+res.msg.tdIdx).checked =false; } }else if(res.type === 'remove-attractions'){ // 관광지 삭제 console.log('res.msg: '+res.msg); document.querySelector('#d'+res.msg).style.display='none'; } else if(res.type === 'upload-budget'){ // 예산 추가 console.log('res.msg.title:', res.msg.title); console.log('res.msg.contents: '+res.msg.contents); console.log('res.msg.todoDate: '+res.msg.todoDate); console.log('res.msg.budget: '+res.msg.budget); console.log('res.msg.budgetType: '+res.msg.budgetType); console.log('res.msg.isPrivate: '+res.msg.isPrivate); // 투두 카드 생기는 곳 let todoResponse = document.getElementById("response"+res.msg.tlIdx); console.log('존재하니?', res.tlIdx) let plannerTodo = document.getElementById("plannerTodo"+res.tlIdx); // 제일 상위 노드 let todoCard = document.createElement("div"); todoCard.id='d'+res.msg.tdIdx; todoCard.className = "card"; plannerTodo.insertBefore(todoCard, todoResponse); let todoContents = document.createElement("div"); todoContents.id = 'todoContents' + res.msg.tdIdx; todoContents.style = "margin: 20px 10px 30px 10px"; todoCard.appendChild(todoContents); todoContents.addEventListener('click', ev => { console.log("클릭") modTodo.style.display = 'block'; }) let title = document.createElement("div"); title.id = "bgtitle"+res.msg.tdIdx; title.innerHTML = res.msg.title; title.className = "planner__todo__title"; todoContents.appendChild(title); let todoTxt = document.createElement("div"); todoTxt.id = 'todoTxt' + res.msg.tdIdx; todoTxt.className = "todo__txt"; todoContents.appendChild(todoTxt); let isPrivate = document.createElement("div"); isPrivate.id = "bgisPrivate"+ res.msg.tdIdx; isPrivate.innerHTML = res.msg.isPrivate; isPrivate.className = "todo__txt"; todoContents.appendChild(isPrivate); let budgetType = document.createElement("div"); budgetType.id = "bgbudgetType" + res.msg.tdIdx; budgetType.innerHTML = res.msg.budgetType; budgetType.style = "margin-bottom: 5px"; budgetType.className = "todo__txt"; todoContents.appendChild(budgetType); let budget = document.createElement("div"); budget.id = "bgbudget" + res.msg.tdIdx; budget.innerHTML = res.msg.budget; budget.style = "margin-bottom: 5px"; budget.className = "todo__txt"; todoContents.appendChild(budget); let todoDate = document.createElement("div"); todoDate.id = "bgtododate" + res.msg.tdIdx; todoDate.innerHTML = res.msg.todoDate; todoDate.style = "margin-bottom: 5px"; todoDate.className = "todo__txt"; todoContents.appendChild(todoDate); let contents = document.createElement("div"); contents.id = "bgcontents" + res.msg.tdIdx; contents.innerHTML = res.msg.contents; contents.style = "margin-bottom: 5px"; contents.className = "todo__txt"; todoContents.appendChild(contents); // 수정 let modTodo = document.createElement("div"); modTodo.id = 'todoSetting' + res.msg.tdIdx; modTodo.style.display = 'none'; todoCard.appendChild(modTodo); let inputTodo = document.createElement("div"); inputTodo.id = 'inputTodo' + res.msg.tdIdx; modTodo.appendChild(inputTodo); let wrapperBgCheck = document.createElement('div'); wrapperBgCheck.id = 'wrapperBgCheck' + res.msg.tdIdx; inputTodo.appendChild(wrapperBgCheck); let isPrivatemod = document.createElement("input"); isPrivatemod.id = "bgtodopvmod"+ res.msg.tdIdx; isPrivatemod.setAttribute("type", "checkbox"); if(res.msg.isPrivate){ isPrivatemod.checked =true; }else{ isPrivatemod.checked =false; } isPrivatemod.className = "check__box"; wrapperBgCheck.appendChild(isPrivatemod); let todoCheckLabel = document.createElement('label'); todoCheckLabel.htmlFor = 'bgtodopvmod' + res.msg.tlIdx; todoCheckLabel.innerText = '비공개를 원하면 클릭해주세요'; wrapperBgCheck.appendChild(todoCheckLabel); let td = document.createElement("input"); td.id = "tdidx"+ res.msg.tdIdx; td.nodeType = "text"; td.style.display = 'none'; td.value = res.msg.tdIdx; inputTodo.appendChild(td); let titlemod = document.createElement("input"); titlemod.id = "bgtodotitlemod"+ res.msg.tdIdx; titlemod.nodeType = "text"; titlemod.value = res.msg.title; inputTodo.appendChild(titlemod); let todoDatemod = document.createElement("input"); todoDatemod.id = "bgtododatemod"+ res.msg.tdIdx; todoDatemod.setAttribute("type", "datetime-local"); inputTodo.appendChild(todoDatemod); let typemod = document.createElement("select"); typemod.id = "bgtodotypemod"+ res.msg.tdIdx; let addBgopt1 = document.createElement("option"); let addBgopt2 = document.createElement("option"); let addBgopt3 = document.createElement("option"); let addBgopt4 = document.createElement("option"); let addBgopt5 = document.createElement("option"); addBgopt1.value ="FOOD"; addBgopt1.text="식비"; addBgopt2.value ="SHOPPING"; addBgopt2.text="쇼핑"; addBgopt3.value ="ACCOMODATION"; addBgopt3.text="숙박비"; addBgopt4.value ="TRANSPORTATION"; addBgopt4.text="교통비"; addBgopt5.value ="ETC"; addBgopt5.text="기타"; addBgopt5.selected=true; typemod.add(addBgopt1,null); typemod.add(addBgopt2,null); typemod.add(addBgopt3,null); typemod.add(addBgopt4,null); typemod.add(addBgopt5,null); inputTodo.appendChild(typemod); let moneymod = document.createElement("input"); moneymod.id = "bgtodomoneymod"+ res.msg.tdIdx; moneymod.nodeType = "number"; moneymod.value = res.msg.budget; inputTodo.appendChild(moneymod); let contentsmod = document.createElement("input"); contentsmod.id = "bgtodocontentmod"+ res.msg.tdIdx; contentsmod.nodeType = "text"; contentsmod.value = res.msg.contents; inputTodo.appendChild(contentsmod); let btnTodo = document.createElement("div"); btnTodo.id = 'btnTodo' + res.msg.tdIdx; btnTodo.style = "margin: 15px 7px 40px 57px" modTodo.appendChild(btnTodo); let modbutton = document.createElement("button"); modbutton.id = "bgtodomod"+res.msg.tdIdx; modbutton.className = "bgtodomod"; modbutton.dataset.tdidx = res.msg.tdIdx; modbutton.innerHTML= "수정"; btnTodo.appendChild(modbutton); modbutton.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: '+tdIdx); let bgtodoIdx = document.getElementById('tdidx'+tdIdx).value; let bgtodotitle = document.getElementById('bgtodotitlemod'+tdIdx).value; let bgtodocontent = document.getElementById('bgtodocontentmod'+tdIdx).value; let bgtododate = document.getElementById('bgtododatemod'+tdIdx).value; let bgtodomoney = document.getElementById('bgtodomoneymod'+tdIdx).value; let bgtodotype = document.getElementById('bgtodotypemod'+tdIdx).value; let bgtodoprivate = document.getElementById('bgtodopvmod'+tdIdx).checked; console.log('bgtodoIdx: '+bgtodoIdx); console.log('bgtodotitle: '+bgtodotitle); console.log('bgtodocontent: '+bgtodocontent); console.log('bgtododate: '+bgtododate); console.log('bgtodomoney: '+bgtodomoney); console.log('bgtodotype: '+bgtodotype); console.log('bgtodoprivate: '+bgtodoprivate); stompClient.send("/app/modify-budget/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tdIdx':bgtodoIdx, 'title':bgtodotitle, 'contents':bgtodocontent, 'todoDate':bgtododate, 'budget':bgtodomoney, 'budgetType':bgtodotype, 'isPrivate':bgtodoprivate})); }); let delbutton = document.createElement("button"); delbutton.id = "bgtododel"+res.msg.tdIdx; delbutton.className = "bgtododel"; delbutton.dataset.tdidx = res.msg.tdIdx; delbutton.innerHTML= "삭제"; delbutton.style = "margin: 0 6px 0 6px"; btnTodo.appendChild(delbutton); delbutton.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: '+tdIdx); let bgtodoIdx = document.getElementById('tdidx'+tdIdx).value; console.log('bgtodoIdx: '+bgtodoIdx); stompClient.send("/app/remove-budget/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tdIdx':bgtodoIdx })); }); let closeBtn = document.createElement('button'); closeBtn.id = 'todoClose' + res.msg.tdIdx; closeBtn.innerHTML = "닫기"; btnTodo.appendChild(closeBtn); closeBtn.addEventListener("click", () => { modTodo.style.display = "none"; }) } else if(res.type === 'modify-budget'){ // 예산 수정 console.log('res.msg.title: '+res.msg.title); console.log('res.msg.contents: '+res.msg.contents); console.log('res.msg.todoDate: '+res.msg.todoDate); console.log('res.msg.address: '+res.msg.address); console.log('res.msg.isPrivate: '+res.msg.isPrivate); document.getElementById("bgtitle"+res.msg.tdIdx).innerHTML = res.msg.title; document.getElementById("bgcontents" + res.msg.tdIdx).innerHTML = res.msg.contents; document.getElementById("bgtododate"+res.msg.tdIdx).innerHTML = res.msg.todoDate; document.getElementById("bgbudgetType"+res.msg.tdIdx).innerHTML = res.msg.budgetType; document.getElementById("bgbudget"+res.msg.tdIdx).innerHTML = res.msg.budget; if(res.msg.isPrivate){ document.getElementById("bgisPrivate"+res.msg.tdIdx).checked =true; }else{ document.getElementById("bgisPrivate"+res.msg.tdIdx).checked =false; } document.getElementById("tdidx"+res.msg.tdIdx).value = res.msg.tdIdx; document.getElementById("bgtodotitlemod"+res.msg.tdIdx).value = res.msg.title; document.getElementById("bgtodocontentmod"+res.msg.tdIdx).value = res.msg.contents; document.getElementById("bgtodotypemod"+res.msg.tdIdx).value = res.msg.budgetType; document.getElementById("bgtodomoneymod"+res.msg.tdIdx).value = res.msg.budget; if(res.msg.isPrivate){ document.getElementById("bgtodopvmod"+res.msg.tdIdx).checked =true; }else{ document.getElementById("bgtodopvmod"+res.msg.tdIdx).checked =false; } }else if(res.type === 'remove-budget'){ // 예산 삭제 console.log('res.msg: '+res.msg); document.querySelector('#d'+res.msg).style.display='none'; }else if(res.type === 'chat-plan'){ //채팅 if([[${#authentication.name}]] === res.msg.userId){ chatResponse.innerHTML += '<div>' + '<div class="me__id">' + res.msg.userId + '</div>' +'<div class="wrapper__chat__me">' + '<div class="chat__me">' +res.msg.message + '</div>' + '<div class="chat__me__tail">' + '<img style="width: 16.42px; height: 20.32px" src="/img/chatMeTail.png">' + '</div> ' + '</div>' + '</div>'; }else{ chatResponse.innerHTML += '<div>' + '<div class="other__id">' + res.msg.userId + '</div>' +'<div class="wrapper__chat__other">' + '<div class="chat__other">' +res.msg.message + '</div>' + '<div class="chat__other__tail">' + '<img style="width: 16.42px; height: 20.32px" src="/img/chatOtherTail.png">' + '</div> ' + '</div>' + '</div>'; } }else if(res.type === 'search-group'){ //멤버 검색 let travelGroup = [[${planner.travelGroup.participants}]] groupsearchResponse.innerHTML = ""; for(let i=0; i<res.msg.length; i++){ //groupsearchResponse.innerHTML += '<span>' +res.msg[i].userId + '<br>'+'</span>'; if(res.msg[i].userId === [[${#authentication.name}]]){ continue; } let groupsearchResponse = document.getElementById("groupsearchResponse"); let user = document.createElement("div"); user.id = "user"+i; user.className = "user__list"; user.dataset.userId = res.msg[i].userId; user.innerHTML= res.msg[i].userId; groupsearchResponse.appendChild(user); user.addEventListener('click', ev => { let newUserId = ev.target.dataset.userId; console.log('newUserId: '+newUserId); let flag =0; for(let j=0; j<travelGroup.length; j++){ if(newUserId === travelGroup[j].member.userId){ flag =1; } } if(flag){ alert('이미 그룹에 포함되어 있는 유저입니다.'); }else{ stompClient.send("/app/add-group/" + [[${planner.tpIdx}]], {}, JSON.stringify({'newUserId':newUserId})); } }); } } }) } ) } function modTodoListDisconnect() { if (stompClient !== null) { stompClient.disconnect(); } console.log("Disconnected"); } //공유 인원 추가 function addGroup() { let newUserId = newUser.value; stompClient.send("/app/add-group/" + [[${planner.tpIdx}]], {}, JSON.stringify({'newUserId':newUserId})); } //투두리스트 추가 function addTodoList() { let title = todolistTitleAdd.value; console.dir(title); stompClient.send("/app/upload-todolist/" + [[${planner.tpIdx}]], {}, JSON.stringify({'title':title})); } //투두리스트 수정 document.querySelectorAll('.todolistmod').forEach(e => { e.addEventListener('click', ev => { let tlIdx = ev.target.dataset.tlidx; console.log('tlIdx: '+tlIdx); let todolistIdx = document.getElementById('tlidx'+tlIdx).value; let todolistTitle = document.getElementById('tltitle'+tlIdx).value; console.log('todolistIdx: '+todolistIdx); console.log('todolistTitle: '+todolistTitle); stompClient.send("/app/modify-todolist/" + [[${planner.tpIdx}]], {}, JSON.stringify({'title':todolistTitle, 'tlIdx':todolistIdx})); }); }) //투두리스트 삭제 document.querySelectorAll('.todolistdel').forEach(e => { e.addEventListener('click', ev => { let tlIdx = ev.target.dataset.tlidx; console.log('tlIdx: '+tlIdx); let todolistIdx = document.getElementById('tlidx'+tlIdx).value; console.log('todolistIdx: '+todolistIdx); stompClient.send("/app/remove-todolist/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tlIdx':todolistIdx})); }); }) //일반투두카드 추가 document.querySelectorAll('.gntodoadd').forEach(e => { e.addEventListener('click', ev => { let tlIdx = ev.target.dataset.tlidx; console.log('tlIdx: '+tlIdx); let todolistIdx = document.getElementById('tlidx'+tlIdx).value; let gntodotitle = document.getElementById('gntodotitleadd'+tlIdx).value; let gntodocontent = document.getElementById('gntodocontentadd'+tlIdx).value; let gntododate = document.getElementById('gntododateadd'+tlIdx).value; let gntodoaddress = document.getElementById('gntodoaddressadd'+tlIdx).value; let gntodoprivate = document.getElementById('gntodopvadd'+tlIdx).checked; console.log('todolistIdx: '+todolistIdx); console.log('gntodotitle: '+gntodotitle); console.log('gntodocontent: '+gntodocontent); console.log('gntododate: '+gntododate); console.log('gntodoaddress: '+gntodoaddress); console.log('gntodoprivate: '+gntodoprivate); stompClient.send("/app/upload-general/" + [[${planner.tpIdx}]]+"/"+tlIdx, {}, JSON.stringify({'title':gntodotitle, 'contents':gntodocontent, 'todoDate':gntododate, 'address':gntodoaddress, 'isPrivate':gntodoprivate})); }); }) //일반투두카드 수정 document.querySelectorAll('.gntodomod').forEach(e => { e.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: '+tdIdx); let gntodoIdx = document.getElementById('tdidx'+tdIdx).value; let gntodotitle = document.getElementById('gntodotitlemod'+tdIdx).value; let gntodocontent = document.getElementById('gntodocontentmod'+tdIdx).value; let gntododate = document.getElementById('gntododatemod'+tdIdx).value; let gntodoaddress = document.getElementById('gntodoaddressmod'+tdIdx).value; let gntodoprivate = document.getElementById('gntodopvmod'+tdIdx).checked; console.log('gntodoIdx: '+gntodoIdx); console.log('gntodotitle: '+gntodotitle); console.log('gntodocontent: '+gntodocontent); console.log('gntododate: '+gntododate); console.log('gntodoaddress: '+gntodoaddress); console.log('gntodoprivate: '+gntodoprivate); stompClient.send("/app/modify-general/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tdIdx':gntodoIdx, 'title':gntodotitle, 'contents':gntodocontent, 'todoDate':gntododate, 'address':gntodoaddress, 'isPrivate':gntodoprivate})); }); }) //일반투두카드 삭제 document.querySelectorAll('.gntododel').forEach(e => { e.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: '+tdIdx); let gntodoIdx = document.getElementById('tdidx'+tdIdx).value; console.log('gntodoIdx: '+gntodoIdx); stompClient.send("/app/remove-general/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tdIdx':gntodoIdx })); }); }) //교통투두카드 추가 document.querySelectorAll('.trtodoadd').forEach(e => { e.addEventListener('click', ev => { let tlIdx = ev.target.dataset.tlidx; console.log('tlIdx: '+tlIdx); console.log('교통추가 클릭') let todolistIdx = document.getElementById('tlidx'+tlIdx).value; let trtodotitle = document.getElementById('trtodotitleadd'+tlIdx).value; let trtodocontent = document.getElementById('trtodocontentadd'+tlIdx).value; let trtododate = document.getElementById('trtododateadd'+tlIdx).value; let trtodotype = document.getElementById('trtodotypeadd'+tlIdx).value; let trtodoprivate = document.getElementById('trtodopvadd'+tlIdx).checked; console.log('todolistIdx: '+todolistIdx); console.log('trtodotitle: '+trtodotitle); console.log('trtodocontent: '+trtodocontent); console.log('trtododate: '+trtododate); console.log('trtodotype: '+trtodotype); console.log('trtodoprivate: '+trtodoprivate); stompClient.send("/app/upload-transport/" + [[${planner.tpIdx}]]+"/"+tlIdx, {}, JSON.stringify({'title':trtodotitle, 'contents':trtodocontent, 'todoDate':trtododate, 'transportType':trtodotype, 'isPrivate':trtodoprivate})); }); }) //교통투두카드 수정 document.querySelectorAll('.trtodomod').forEach(e => { e.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: '+tdIdx); let trtodoIdx = document.getElementById('tdidx'+tdIdx).value; let trtodotitle = document.getElementById('trtodotitlemod'+tdIdx).value; let trtodocontent = document.getElementById('trtodocontentmod'+tdIdx).value; let trtododate = document.getElementById('trtododatemod'+tdIdx).value; let trtodotype = document.getElementById('trtodotypemod'+tdIdx).value; let trtodoprivate = document.getElementById('trtodopvmod'+tdIdx).checked; console.log('trtodoIdx: '+trtodoIdx); console.log('trtodotitle: '+trtodotitle); console.log('trtodocontent: '+trtodocontent); console.log('trtododate: '+trtododate); console.log('trtodotype: '+trtodotype); console.log('trtodoprivate: '+trtodoprivate); stompClient.send("/app/modify-transport/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tdIdx':trtodoIdx, 'title':trtodotitle, 'contents':trtodocontent, 'todoDate':trtododate, 'transportType':trtodotype, 'isPrivate':trtodoprivate})); }); }) //교통투두카드 삭제 document.querySelectorAll('.trtododel').forEach(e => { e.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: '+tdIdx); let trtodoIdx = document.getElementById('tdidx'+tdIdx).value; console.log('trtodoIdx: '+trtodoIdx); stompClient.send("/app/remove-transport/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tdIdx':trtodoIdx })); }); }) //숙박투두카드 추가 document.querySelectorAll('.actodoadd').forEach(e => { e.addEventListener('click', ev => { let tlIdx = ev.target.dataset.tlidx; console.log('tlIdx: '+tlIdx); let todolistIdx = document.getElementById('tlidx'+tlIdx).value; let actodotitle = document.getElementById('actodotitleadd'+tlIdx).value; let actodocontent = document.getElementById('actodocontentadd'+tlIdx).value; let actododate = document.getElementById('actododateadd'+tlIdx).value; let actodoaddress = document.getElementById('actodoaddressadd'+tlIdx).value; let actodoprivate = document.getElementById('actodopvadd'+tlIdx).checked; console.log('todolistIdx: '+todolistIdx); console.log('actodotitle: '+actodotitle); console.log('actodocontent: '+actodocontent); console.log('actododate: '+actododate); console.log('actodoaddress: '+actodoaddress); console.log('actodoprivate: '+actodoprivate); stompClient.send("/app/upload-accomodation/" + [[${planner.tpIdx}]]+"/"+tlIdx, {}, JSON.stringify({'title':actodotitle, 'contents':actodocontent, 'todoDate':actododate, 'address':actodoaddress, 'isPrivate':actodoprivate})); }); }) //숙박투두카드 수정 document.querySelectorAll('.actodomod').forEach(e => { e.addEventListener('click', ev => { //let tlIdx = ev.target.dataset.tlidx; //console.log('tlIdx: '+tlIdx); let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: '+tdIdx); let actodoIdx = document.getElementById('tdidx'+tdIdx).value; let actodotitle = document.getElementById('actodotitlemod'+tdIdx).value; let actodocontent = document.getElementById('actodocontentmod'+tdIdx).value; let actododate = document.getElementById('actododatemod'+tdIdx).value; let actodoaddress = document.getElementById('actodoaddressmod'+tdIdx).value; let actodoprivate = document.getElementById('actodopvmod'+tdIdx).checked; console.log('actodoIdx: '+actodoIdx); console.log('actodotitle: '+actodotitle); console.log('actodocontent: '+actodocontent); console.log('actododate: '+actododate); console.log('actodoaddress: '+actodoaddress); console.log('actodoprivate: '+actodoprivate); stompClient.send("/app/modify-accomodation/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tdIdx':actodoIdx, 'title':actodotitle, 'contents':actodocontent, 'todoDate':actododate, 'address':actodoaddress, 'isPrivate':actodoprivate})); }); }) //숙박투두카드 삭제 document.querySelectorAll('.actododel').forEach(e => { e.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: ' + tdIdx); let actodoIdx = document.getElementById('tdidx' + tdIdx).value; console.log('actodoIdx: ' + actodoIdx); stompClient.send("/app/remove-accomodation/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tdIdx': actodoIdx})); }); }); //관광지투두카드 추가 document.querySelectorAll('.attodoadd').forEach(e => { e.addEventListener('click', ev => { let tlIdx = ev.target.dataset.tlidx; console.log('tlIdx: ' + tlIdx); let todolistIdx = document.getElementById('tlidx' + tlIdx).value; let attodotitle = document.getElementById('attodotitleadd' + tlIdx).value; let attodocontent = document.getElementById('attodocontentadd' + tlIdx).value; let attododate = document.getElementById('attododateadd' + tlIdx).value; let attodoinfo = document.getElementById('attodoinfoadd' + tlIdx).value; let attodoprivate = document.getElementById('attodopvadd' + tlIdx).checked; console.log('todolistIdx: ' + todolistIdx); console.log('attodotitle: ' + attodotitle); console.log('attodocontent: ' + attodocontent); console.log('attododate: ' + attododate); console.log('attodoinfo: ' + attodoinfo); console.log('attodoprivate: ' + attodoprivate); stompClient.send("/app/upload-attractions/" + [[${planner.tpIdx}]] + "/" + tlIdx, {}, JSON.stringify({ 'title': attodotitle, 'contents': attodocontent, 'todoDate': attododate, 'attractions': attodoinfo, 'isPrivate': attodoprivate })); }); }) //관광지투두카드 수정 document.querySelectorAll('.attodomod').forEach(e => { e.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: ' + tdIdx); let attodoIdx = document.getElementById('tdidx' + tdIdx).value; let attodotitle = document.getElementById('attodotitlemod' + tdIdx).value; let attodocontent = document.getElementById('attodocontentmod' + tdIdx).value; let attododate = document.getElementById('attododatemod' + tdIdx).value; let attodoinfo = document.getElementById('attodoinfomod' + tdIdx).value; let attodoprivate = document.getElementById('attodopvmod' + tdIdx).checked; console.log('attodoIdx: ' + attodoIdx); console.log('attodotitle: ' + attodotitle); console.log('attodocontent: ' + attodocontent); console.log('attododate: ' + attododate); console.log('attodoinfo: ' + attodoinfo); console.log('attodoprivate: ' + attodoprivate); stompClient.send("/app/modify-attractions/" + [[${planner.tpIdx}]], {}, JSON.stringify({ 'tdIdx': attodoIdx, 'title': attodotitle, 'contents': attodocontent, 'todoDate': attododate, 'attractions': attodoinfo, 'isPrivate': attodoprivate })); }); }) //관광지투두카드 삭제 document.querySelectorAll('.attododel').forEach(e => { e.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: ' + tdIdx); let attodoIdx = document.getElementById('tdidx' + tdIdx).value; console.log('attodoIdx: ' + attodoIdx); stompClient.send("/app/remove-attractions/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tdIdx': attodoIdx})); }); }) //예산투두카드 추가 document.querySelectorAll('.bgtodoadd').forEach(e => { e.addEventListener('click', ev => { let tlIdx = ev.target.dataset.tlidx; console.log('tlIdx: '+tlIdx); let todolistIdx = document.getElementById('tlidx'+tlIdx).value; let bgtodotitle = document.getElementById('bgtodotitleadd'+tlIdx).value; let bgtodocontent = document.getElementById('bgtodocontentadd'+tlIdx).value; let bgtododate = document.getElementById('bgtododateadd'+tlIdx).value; let bgtodomoney = document.getElementById('bgtodomoneyadd'+tlIdx).value; let bgtodotype = document.getElementById('bgtodotypeadd'+tlIdx).value; let bgtodoprivate = document.getElementById('bgtodopvadd'+tlIdx).checked; console.log('todolistIdx: '+todolistIdx); console.log('bgtodotitle: '+bgtodotitle); console.log('bgtodocontent: '+bgtodocontent); console.log('bgtododate: '+bgtododate); console.log('bgtodomoney: '+bgtodomoney); console.log('bgtodotype: '+bgtodotype); console.log('bgtodoprivate: '+bgtodoprivate); stompClient.send("/app/upload-budget/" + [[${planner.tpIdx}]]+"/"+tlIdx, {}, JSON.stringify({'title':bgtodotitle, 'contents':bgtodocontent, 'todoDate':bgtododate, 'budget':bgtodomoney, 'budgetType':bgtodotype, 'isPrivate':bgtodoprivate})); }); }) //예산투두카드 수정 document.querySelectorAll('.bgtodomod').forEach(e => { e.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: '+tdIdx); let bgtodoIdx = document.getElementById('tdidx'+tdIdx).value; let bgtodotitle = document.getElementById('bgtodotitlemod'+tdIdx).value; let bgtodocontent = document.getElementById('bgtodocontentmod'+tdIdx).value; let bgtododate = document.getElementById('bgtododatemod'+tdIdx).value; let bgtodomoney = document.getElementById('bgtodomoneymod'+tdIdx).value; let bgtodotype = document.getElementById('bgtodotypemod'+tdIdx).value; let bgtodoprivate = document.getElementById('bgtodopvmod'+tdIdx).checked; console.log('bgtodoIdx: '+bgtodoIdx); console.log('bgtodotitle: '+bgtodotitle); console.log('bgtodocontent: '+bgtodocontent); console.log('bgtododate: '+bgtododate); console.log('bgtodomoney: '+bgtodomoney); console.log('bgtodotype: '+bgtodotype); console.log('bgtodoprivate: '+bgtodoprivate); stompClient.send("/app/modify-budget/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tdIdx':bgtodoIdx, 'title':bgtodotitle, 'contents':bgtodocontent, 'todoDate':bgtododate, 'budget':bgtodomoney, 'budgetType':bgtodotype, 'isPrivate':bgtodoprivate})); }); }) //예산투두카드 삭제 document.querySelectorAll('.bgtododel').forEach(e => { e.addEventListener('click', ev => { let tdIdx = ev.target.dataset.tdidx; console.log('tdIdx: '+tdIdx); let bgtodoIdx = document.getElementById('tdidx'+tdIdx).value; console.log('bgtodoIdx: '+bgtodoIdx); stompClient.send("/app/remove-budget/" + [[${planner.tpIdx}]], {}, JSON.stringify({'tdIdx':bgtodoIdx })); }); }) //채팅 보내기 function sendChat() { let message = con.value; let userId = user.value; stompClient.send("/app/chat-plan/" + [[${planner.tpIdx}]]+"/"+[[${planner.travelGroup.tgIdx}]], {}, JSON.stringify({'message':message, 'userId':userId})); } //멤버 검색 function sendKeyword() { let keyword = searchUserId.value; stompClient.send("/app/search-group/" + [[${planner.tpIdx}]], {}, JSON.stringify({'keyword':keyword})); } /* [end] 웹소켓 ============================================================================================== */ connect();