스케줄러 만들기 5 - index 바꾸기

현재 진행상황

위는 현재의 진행상황이다. 아래의 기능을 모두 구현했다.

 

1. 일정 추가

2. 일정 추가에 따른 X 버튼 처리

3. X 버튼을 누르면 나오는 Save와 delete 버튼에 대한 처리

4. Drag and Drop 방식을 이용하여 일정 옮기기

5. 현재 버튼이 속한 인덱스의 날짜를 출력

6. 원하는 날짜를 선택하여 일정 옮기기

 

 

<시나리오 화면>

 

1. 일정 추가 및 변경 modal창 

위의 사진은 과제제출 일정의 span 태그를 눌렀을 때 나오는 결과화면이다.

일정 날짜 변경 칸에는 그 칸에 써있는 날짜에 맞게 나온다. 이것은 td 객체 안에 있는 text를 받아 숫자만 분리시킨 후 그것을 날짜 변환 함수에 넣고 날짜형으로 변환시켜 저 달력 칸의 value에 대입시킨 것이다.

 

 

2. 일정 변경 창에서 날짜를 변경했을 때

날짜를 변경하려고 한다면 index는 수정하지 못한다. 

날짜를 변경하려고 할 경우에는 index 수정을 하지 못한다. 그냥 옮겨지는 동작만을 수행한다.

index 부분에 있어서 구현을 해야하는데, 아직 이 부분은 미완성이다. 이 index 동작만 완벽히 구현한다면 

웹 프로그래밍의 과제1 부분을 모두 구현한 것이다.

 

위의 동작을 수행하여 27일에 일정이 잘 옮겨진 모습을 볼 수 있다.

 

3. 커스텀 버튼

본래 버튼은 전 글에서 볼 수 있듯이 일반 버튼이었다. 그러나 아래의 코드로 한번에 커스텀 버튼을 만들 수 있었다. 

우선 코드를 먼저 첨부한 후 이에 대한 설명은 아래에 하겠다.

function createBtns(info, ids) {
var divBtn = document.createElement('div');
divBtn.id = ids;
 
var setTexts = document.createElement("input");
setTexts.setAttribute("type","text");
setTexts.setAttribute("style","width:69px;");
setTexts.setAttribute("value",info); //예시
setTexts.setAttribute("onkeydown", "enterkey();");
setTexts.disabled = false;
setTexts.className="InputStyle";
 
 //여러개의 span을 생성하기 위해
 function createSpan() {
    span = document.createElement('span');
    span.innerHTML = "&times";
    span.getElementsByClassName("close")[0];
    span.id = "span"+index; 
    return span;
}
var newSpan = createSpan(); //스피너 생성
 
var btn = document.createElement('button'); //버튼 생성
btn.className = "schBtn";
 
btn.appendChild(setTexts);
btn.appendChild(newSpan);
divBtn.appendChild(btn);
 
return btn;
}
 
var btn1 = createBtns();
var btn2 = createBtns();
 
document.body.appendChild(btn1);
document.body.appendChild(btn2);
 
$('span').click(function(){
    var thisIs = $(this).parent();
    $(thisIs).remove();
});

우선, 버튼을 만들어 한번에 선언하기 위해서는 어떠한 큰 틀의 태그로 쌓여있어 하나의 객체를 이루어야한다.

그렇기 때문에 'div'태그의 elemet를 만들어주었다.

생성된 div 태그 안에 이제 객체들을 잘 조합하여 하나의 버튼을 만들어야 한다.

그 다음, 밑바탕이 될 버튼을 만들어주었다. 버튼은 미리 만들어준 schBtn 클래스의 css로 지정해주어 버튼을 예쁘게 바꿔준다. 그리고 나서 이제 버튼에 추가할 요소들이 있어야 한다.

 

클릭 시에 상자 안의 내용을 바꿀 수 있어야 하므로 일반 Btn의 value로 지정하여 수정할 수 있도록 하는 것은 번거롭고, 가능할 수 있을지도 몰랐었다. 그래서 기존의 일반 버튼 방식에서 안에 textbox를 넣는 방식으로 버튼 만드는 방식을 바꾸었다. 그리고 나서 X표시의 역할을 하는 span을 추가해주었다.

 

추가는 appendChild로 버튼 태그 안에 text와 span 태그들을 추가해주었다. 이렇게해서, 이 버튼을 또 div 태그 안에 추가해주었다. 이 버튼을 만들면서 비로소 DOM 구조가 무엇인지 알게 되었다. 코드에서 알 수 있듯이, 변수를 선언하여 함수들만 실행하면, 버튼이 만들어지는 것을 볼 수 있다.

 

 

이제 인덱스 처리만 남았는데, 인덱스 처리 방식이 조금 복잡해서 너무 헷갈리는 바람에, 그냥 선택한 버튼들의 정보를 바꾸는 식으로 처리했다. 외관적으로는 성공했지만, 바뀐 버튼에서는 span이 먹히지 않는 불상사가 일어났다..

이 부분에 대해서는 조금 더 고민해 보아야 할 듯 하다.