플래너 작성폼(with mustache,,,) ② 여행일수만큼 공간 만들어주기.../경유지최적화

이전 게시물에서 사용했던 사진으로 이어서 보자면,

header에 있는 <일정만들기> 를 클릭하면 나오는 모달창에서 선택한 '여행시작일 ~ 여행마지막일' 의 일수만큼의 

추가한 장소를 놓을 수 있는 공간과 지도가 만들어진다.

 

✔ 12/20 ~ 12/26 선택했을 때,

 

 

지도는 어차피 js 코드 작업이 필요했던 거라 상관없었지만,

추가한 장소를 띄워주는 공간 같은 경우에는...........앞의 모달창에서 선택한 (마지막일-시작일+1) 만큼 반복문 돌면서 생성해주면

편하게 끝나는 거 였는데,,!!!!!!!,,,,,,,,,,,,,,mustache에서 할 수가 없어서 javascipt로 생성해주느라 힘뺐다 ㅠ,ㅠ

 

이미 html에서 만들어놓은 <form> 안에 day마다 <div>를 만들어서 그 안에다가 장소들 넣어주는 방식으로 js코드를 작성.

 

 

✔  옆에 관광지 목록 혹은 지도 검색을 통해서 나온 장소들을 (+) 버튼을 눌러 장소를 추가하면 해당 장소가 아래 사진처럼  목록에 뜬다.

     장소VO가 가지고 있어야 하는 각각 가지고 있어야 하는 정보는 (DB에 넣어줘야 하는 정보는)

     장소 이름, 메모(사용자가 추가한 메모), 위도, 경도,

     사진경로(tour api에 있는 사진 주소), 일수(며칠 째 가는 장소인지), 순서(경유지 순서) 이다.

 

form 을 제출해주기 위해 아래와 같이 하나의 선택한 장소에 여러 값들을 저장해뒀다,,,,!

현재 선택해놓은 여행일이 12/20 ~ 12/26일까지 총 7일이므로, 

옆에 코드를 보면 form 은 하나지만 form 안에  <div id='form1'> <div id='form2'> 이런 식으로 day 수 만큼 만들어졌다.

거기에 각 날짜마다 선택한 장소들이 주루르르르륵 들어가서 여행 일정 작성을 완료하고 <저장> 을 누르면

하나의 form을 제출할 예정!!

 

 

 

✔  지도도 그냥 원래 있던걸로 공간만 만들어서 띄워주면 되겠지,,,했는데 

     id가 겹쳐서 띄워지지도 않았고, 검색마커 생성, 경유지까지 하려면 다ㅏㅏㅏ 따로따로 만들어줘야 했다.

    이거 때문에 진짜 어떻게 해야할까 생각하느라 ㅎvㅎ....

 

여행일수만큼 반복문 돌면서 다른 id들의 지도를 생성해줬고,

검색 결과로 띄워주기 위한 마커들의 배열도, 경로최적화를 위한 배열도 다 따로따로 생성하게 js 코드 작성했다.

 

지도 API랑 아주 씨름을 했다 ,ㅎㅋ,,ㅋㅋ,,,,,

 

현재 선택해놓은 여행일이 12/20 ~ 12/26일까지 총 7일이므로,

옆에 코드를 보면 지도를 띄워주는 <div>도 7개가 만들어졌다. 

 

 

 

✔  DAY의 장소를 모두 선택하고 위의 <장소선택 완료 [경로최적화]> 버튼을 누르면, 최적화된 경로를 보여준다.

 

 

최적화를 하면서 경유 순서가 결정되기 때문에, 이 때 아까 만들었던 form 의 <input type='hidden' name='order'>의 value에 값을 집어넣는다.

2번째 전에 올린 사진의 코드를 보면 name='order'의 value가 비어있다.
이런 식으로 order가 경유 순서대로 0부터 채워지게 했다.