본문 바로가기
프로젝트 개발기/Status 200 ( Team Project )

11. TEAM 프로젝트: 캘린더 기능 구현 - TO DO List

JayHyun 2021. 11. 15. 16:30

상세한 개발 내역을 작성할려고 했으나, 여러 번의 디버그가 있었고 개발 단계에서 변경되는 점 또한 많았다. 

때문에 완성된 캘린더를 기능 별로 정리하고, 개선점을 작성하려고 한다. 

(TimeLine에 작성해 봤으나 글이 한눈에 들어오지 않는다는 단점이 있어서 방법을 바꿨다.)

 

 

1. TO DO LIST 

 

TO DO LIST 에 필요한 기본 요소는 '중요도' 그리고 '완료 여부' 이다.

세부 정보 또한 있으나 완료된 상태와 중요도에 따라 데이터를 표현할 수 있어야 한다.

기본적으로 체크와 체크되지 않은 상태는 DB에서도 관리가 가능하도록 변경시 AJAX를 이용해 DB와 통신이 진행되어야 한다. 

 

한번에 삭제는 현재 삭제해야할 (완료된) 상태의 데이터를 배열로 전달하여, 해당 넘버를 Delete 하면 된다. 

 

2. DTO 

package DTO;

public class TodoDTO {

	private String num;
	private String id;
	private String title;
	private String content;
	private int importance;
	private String checked;
	private String date;
	private String time;
	
	
	public String getNum() {
		return num;
	}
	public void setNum(String num) {
		this.num = num;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}
	public String getChecked() {
		return checked;
	}
	public void setChecked(String checked) {
		this.checked = checked;
	}
	public int getImportance() {
		return importance;
	}
	public void setImportance(int importance) {
		this.importance = importance;
	}
	public String getDate() {
		return date;
	}
	public void setDate(String date) {
		this.date = date;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getTime() {
		return time;
	}
	public void setTime(String time) {
		this.time = time;
	}
	
	
}

 

3. DAO

package DAO;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import DTO.TodoDTO;

public class TodolistDAO {
	private TodolistDAO(){
		// getInstance로 호출해서 생성자 new를 막음
	}
	
	private static TodolistDAO instance = new TodolistDAO();
	
	public static TodolistDAO getInstance(){
		return instance;
	}
	
	public Connection getConnection(){
		Connection conn=null;
		String url="jdbc:mysql://127.0.0.1:3306/status200";
		String db_id="root";
		String db_pw="iotiot";
		
		try {
			Class.forName("com.mysql.cj.jdbc.Driver");
			conn=DriverManager.getConnection(url, db_id, db_pw);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			System.out.println("Schedule DAO Error **********"+e);	
		}

		return conn;
	}
	public static void close(Connection conn, Statement stmt, ResultSet rs){
		try{
			if(rs!=null){
				rs.close();
			}
			if(stmt!=null){
				stmt.close();
			}
			if(conn!=null){
				conn.close();
			}
		}
		catch(Exception e){
			System.out.println("Close Error(val ==3) : "+ e);
		}
	}
	public static void close(Connection conn, Statement stmt){
		try{
			if(stmt!=null){
				stmt.close();
			}
			if(conn!=null){
				conn.close();
			}
		}
		catch(Exception e){
			System.out.println("Close Error(val == 2) : "+ e);
		}
	}
	
	// TodoList 데이터를 가져옴
	public List<TodoDTO> TodoLists(TodoDTO todoDTO){
		List<TodoDTO> list= new ArrayList<TodoDTO>();
		
		String sql="select * from todolist where id=? order by importance desc";
		
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		
		try
		{
			conn = getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, todoDTO.getId());
			
			rs = pstmt.executeQuery();
			
			while(rs.next())
			{
				TodoDTO tDTO = new TodoDTO();
				
				tDTO.setNum(rs.getString("num"));
				tDTO.setTitle(rs.getString("title"));
				tDTO.setContent(rs.getString("content"));
				tDTO.setId(rs.getString("id"));
				tDTO.setDate(rs.getString("date"));
				tDTO.setTime(rs.getString("time"));
				tDTO.setImportance(rs.getInt("importance"));
				tDTO.setChecked(rs.getString("checked"));
				
				list.add(tDTO);
				// ID 로 조회후 일치하는 데이터를 가져옴, 임폴턴스에 따라 중요도가 다르며, 높은 숫자부터 정렬됨 
			}
		}
		catch(Exception e){
			System.out.println("Todolist DAO> Select Error(val == 1) : "+ e);
		}
		finally{
			close(conn, pstmt, rs);
		}
		
		return list;
	}
	// 투두리스트 인설트 
	public void todolistInsert(TodoDTO tDTO){
		
		String sql="insert into todolist(title, content, id, date, time, importance, checked) values(?,?,?,?,?,?,?)";
		Connection conn=null;
		PreparedStatement pstmt=null;
		
		try{
			conn=getConnection();
			pstmt=conn.prepareStatement(sql);
			pstmt.setString(1, tDTO.getTitle());
			pstmt.setString(2, tDTO.getContent());
			pstmt.setString(3, tDTO.getId());
			pstmt.setString(4, tDTO.getDate());
			pstmt.setString(5, tDTO.getTime());
			pstmt.setInt(6, tDTO.getImportance());
			pstmt.setString(7, tDTO.getChecked());

			System.out.println(pstmt);
			pstmt.executeUpdate();

		}
		catch(Exception e)
		{
			System.out.println("todolistDAO> Insert Error: "+e);
		}
		finally
		{
			close(conn, pstmt);
		}
	}
	
	// 투두리스트 딜리트 
	public void todolistDelete(TodoDTO tDTO)
	{
		String sql ="delete from todolist where num = ?";
		
		Connection conn = null;
		PreparedStatement pstmt = null;
		
		try
		{
			conn = getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setInt(1, Integer.parseInt(tDTO.getNum()));
			pstmt.executeUpdate();
			System.out.println(pstmt);
		}
		catch(Exception e){
			System.out.println("todolistDAO> Delete Error : "+ e);
		}
		finally{
			close(conn, pstmt);
		}
	}
	
	// 투두리스트 업데이트 
	public void todolistUpdate(TodoDTO tDTO){
		String sql="update todolist set title=?, content=?, date=?, time=?, importance=?, checked=? where num=?";
		
		Connection conn = null;
		PreparedStatement pstmt = null;
		
		try{
			conn = getConnection();
			pstmt = conn.prepareStatement(sql);
			
			pstmt.setString(1, tDTO.getTitle());
			pstmt.setString(2, tDTO.getContent());
			pstmt.setString(3, tDTO.getDate());
			pstmt.setString(4, tDTO.getTime());
			pstmt.setInt(5, tDTO.getImportance());
			pstmt.setString(6, tDTO.getChecked());
			pstmt.setString(7, tDTO.getNum());
			
			pstmt.executeUpdate();
		}
		catch(Exception e){
			System.out.println("ScheduleDAO > UPDATE Error : "+ e);
		}
		finally{
			close(conn, pstmt);
		}
	}
}

/* 
 * create table todolist(num int primary key auto_increment, title text, content text, id text, date text, time text, importance text, checked text);
 * 
 * */

 

4. Servlet

1) TO DO LIST 추가 

package ServletCalendar;

import java.io.BufferedReader;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.simple.JSONObject;
import org.json.simple.parser.JSONParser;

import DAO.TodolistDAO;
import DTO.TodoDTO;


@WebServlet("/todolistInsert")
public class todolistInsert extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		
		String json = readJSON(request);
		System.out.println(json);
		JSONObject data = objJSON(json);
		
		String num = String.valueOf(data.get("num"));
		String title=String.valueOf(data.get("title"));
		String content=String.valueOf(data.get("content"));
		String id=String.valueOf(data.get("id"));
		String date=String.valueOf(data.get("date"));
		String time=String.valueOf(data.get("time"));
		int importance= Integer.valueOf(String.valueOf(data.get("importance")));
		String checked=String.valueOf(data.get("checked"));
		
		TodoDTO tDTO = new TodoDTO();
		tDTO.setNum(num);
		tDTO.setTitle(title);
		tDTO.setContent(content);
		tDTO.setId(id);
		tDTO.setDate(date);
		tDTO.setTime(time);
		tDTO.setImportance(importance);
		tDTO.setChecked(checked);
		
		if(tDTO.getNum().equals("")){
			System.out.println("인설트");
		}
		else {
			System.out.print("업뎃");
		}
		
		TodolistDAO tDAO = TodolistDAO.getInstance();
		
		if(tDTO.getNum().equals("")) {
			tDAO.todolistInsert(tDTO);	
		}
		else {
			tDAO.todolistUpdate(tDTO);
		}
	}
	
	protected String readJSON(HttpServletRequest request) { 
		StringBuffer json = new StringBuffer(); 
		String line = null;
		
		try { 
			BufferedReader reader=request.getReader();

			while((line=reader.readLine())!=null){ 
				json.append(line); 
			}
		}
		catch(Exception e) {
			System.out.println("JSON 파일을 읽어오던 중 오류 발생");
		}
		return json.toString(); 
	}
	
	protected JSONObject objJSON(String str) {
		Object obj=null;
		JSONObject json=null;
		System.out.println(str);
		try {
			JSONParser parser = new JSONParser();
			obj=parser.parse(str);
			json=(JSONObject)obj;
		}
		catch(Exception e) {
			System.out.println("JSON 변환 중 오류 발생: "+e);
		}
		return json;
	}
}

 

2) TO DO LIST 삭제

package ServletCalendar;

import java.io.BufferedReader;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.simple.JSONObject;
import org.json.simple.parser.JSONParser;

import DAO.TodolistDAO;
import DTO.TodoDTO;

@WebServlet("/todolistDelete")
public class todolistDelete extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
			
		String json = readJSON(request);
		JSONObject data = objJSON(json);
		TodolistDAO tDAO = TodolistDAO.getInstance();
		TodoDTO tDTO = new TodoDTO();
		String temp = String.valueOf(data.get("key"));
		temp=temp.replace("[", "");
		temp=temp.replace("]", "");
		temp=temp.replace("\"", "");
		String[] nums =  temp.split(",");
		
		for(int i = 0; i<nums.length; i++) {
			tDTO.setNum(nums[i]);
			System.out.println(tDTO.getNum());
			tDAO.todolistDelete(tDTO);
		}
	}
	
	protected String readJSON(HttpServletRequest request) { 
		StringBuffer json = new StringBuffer(); 
		String line = null;
		
		try { 
			BufferedReader reader=request.getReader();

			while((line=reader.readLine())!=null){ 
				json.append(line); 
			}
		}
		catch(Exception e) {
			System.out.println("JSON 파일을 읽어오던 중 오류 발생");
		}
		return json.toString(); 
	}
	
	protected JSONObject objJSON(String str) {
		Object obj=null;
		JSONObject json=null;
		System.out.println(str);
		
		try {
			JSONParser parser = new JSONParser();
			obj=parser.parse(str);
			json=(JSONObject)obj;
		}
		catch(Exception e) {
			System.out.println("JSON 변환 중 오류 발생: "+e);
		}
		
		return json;
	}

}

 

3) TO DO LIST 보기

package ServletCalendar;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.*;

import DAO.TodolistDAO;
import DTO.TodoDTO;

@WebServlet("/todolistSelect")
public class todolistSelect extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	@SuppressWarnings("unchecked")
	// JSON PUT 시 라이브러리 및 데이터 체크에 문제가 없으나 주의가 나와서 @SuppressWarnings("unchecked")를 지정함
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		
		String userKey = request.getParameter("userKey");
		
		TodoDTO todoDTO = new TodoDTO();
		todoDTO.setId(userKey);
		
		TodolistDAO tDAO = TodolistDAO.getInstance();
		
		List<TodoDTO> list= tDAO.TodoLists(todoDTO);
		List<JSONObject> jsons = new ArrayList<JSONObject>();

		for(int i = 0; i<list.size(); i++) {
			JSONObject json = new JSONObject();
			json.put("num", list.get(i).getNum());
			json.put("title", list.get(i).getTitle());
			json.put("content", list.get(i).getContent());
			json.put("id", list.get(i).getId());
			json.put("date", list.get(i).getDate());
			json.put("time", list.get(i).getTime());
			json.put("importance", list.get(i).getImportance());
			json.put("checked", list.get(i).getChecked());
			
			jsons.add(i, json);
		}
		System.out.println(jsons);
		response.setContentType("application/json");
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		out.print(jsons.toString());
		out.flush();// 버퍼 청소 	
	}

}

 

 

5. AJAX 

1) TO DO LIST 기본 설정 

var XHRTodolist;
function createXHRTodolist(){
    if(window.ActiveXObject){ 
        XHRTodolist=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest){
        XHRTodolist=new XMLHttpRequest();
    }
}
// JSON To Do List객체 데이터 생성 
function createJsonTodolist(num, title, content, id, date, time, importance, checked){
    let json = {
        num: num,
        title: title,
        content: content,
        id: id,
        date: date,
        time: time,
        importance: importance,
        checked: checked
    }
    return json;
}

 

2) TO DO LIST 모양 생성

// 투두리스트 모양을 그려줌 
function toDoList(){
    createXHRTodolist();

    XHRTodolist.onreadystatechange=function(){
        if(XHRTodolist.readyState==4){
            if(XHRTodolist.status==200){
                let jsons = JSON.parse(XHRTodolist.responseText, "text/json");
                createToDoList(jsons);
            }
        }
    }
    XHRTodolist.open("POST", "todolistSelect", true);
    XHRTodolist.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
    XHRTodolist.send("userKey="+userKey);
}
더보기 
// 투두리스트를 JSON 데이터에 따라 그림
function createToDoList(jsons){

    let v;
    let c;
    let cc;
    let ccc;
    let cccc;

    v = document.getElementsByClassName("toDoListMain")[0];

    while(v.hasChildNodes()){
        v.removeChild(v.firstChild);
    }

    // 매개변수 객체 가져와서 데이터 정제 > 정제한 데이터로 폼 모양 그림
    // 정제는 DB에서 값 던질때 함 
    for(let i = 0; i<jsons.length; i++){
        c = document.createElement("div");
        c.classList.add("toDoLists");

        cc = document.createElement("span");
        cc.classList.add("toDoListCheckBox");
        cc.addEventListener("click", todolistCheckedBtn);
        c.appendChild(cc);

        cc = document.createElement("input");
        cc.setAttribute("type", "text");
        cc.setAttribute("value", jsons[i].title);
        cc.setAttribute("readonly", "true");
        cc.classList.add("toDoListTitle");
        cc.classList.add("toDolistTitleSecond");

        if(jsons[i].checked=="true"){
            cc.classList.add("checkedTodoStmt");
        }
        cc.setAttribute("placeholder", "일정 제목을 입력하세요.");
        cc.setAttribute("style", "width: calc(100% - 62px);");
        c.appendChild(cc);

        cc = document.createElement("div");
        cc.classList.add("toDoListFixBtn");
        cc.addEventListener("click", todolistFixBtn);

        ccc = document.createElement("input");
        ccc.classList.add("toDoListFixBtnFlag");
        ccc.setAttribute("type", "hidden");
        ccc.setAttribute("value", "false");
        cc.appendChild(ccc);
        c.appendChild(cc);

        let vi = document.createElement("div");
        vi.classList.add("toDoListView")

        cc = document.createElement("input");
        cc.setAttribute("type", "text");
        cc.setAttribute("value", jsons[i].content);
        cc.classList.add("toDoListContent");
        vi.appendChild(cc);

        cc = document.createElement("input");
        cc.setAttribute("type", "date");
        cc.setAttribute("value", jsons[i].date);
        cc.classList.add("toDoListDate");

        vi.appendChild(cc);

        cc = document.createElement("div");
        cc.classList.add("toDoListTimeTitle");
        cc.innerHTML = "시간 설정";
        vi.appendChild(cc);

        cc = document.createElement("select");
        cc.classList.add("toDoListTime");

        for(let i = 0; i < 24; i++){
            for(let j = 0; j < 4; j++){
                let time = ""; 
                if(i<10){
                    time = "0"+i+":";
                    if(j==0){
                        time += "00";
                    }
                    else {
                        time += (j*15);
                    }
                }
                else{
                    time = i+":";
                    if(j==0){
                        time += "00";
                    }
                    else {
                        time += (j*15);
                    }
                }
                ccc = document.createElement("option");
                ccc.setAttribute("value", time);
                ccc.innerHTML=time;
                cc.appendChild(ccc);
            }
        }
        cc.setAttribute("value", jsons[i].time);

        vi.appendChild(cc);

        cc = document.createElement("div");
        cc.classList.add("toDoListImportanceTitle");
        cc.innerHTML = "중요도";
        vi.appendChild(cc);

        cc = document.createElement("select");
        cc.classList.add("toDoListImportance");

        for(let j = 1; j < 5; j++){
            ccc = document.createElement("option");
            ccc.classList.add("toDoListImportanceOption");
            ccc.setAttribute("value", j);

            if(j==1){
                ccc.innerHTML = "하면 좋음"
            }
            else if(j==2){
                ccc.innerHTML = "보통";
            }
            else if(j==3){
                ccc.innerHTML = "중요";
            }
            else if(j==4){
                ccc.innerHTML = "매우 중요";
            }
            cc.appendChild(ccc);

            if(ccc.value==jsons[i].importance){
                ccc.setAttribute("selected", "true");
            }


        }
        vi.appendChild(cc);

        cc = document.createElement("input");
        cc.setAttribute("type", "hidden");
        cc.setAttribute("value", jsons[i].num);
        cc.classList.add("toDoListNum");
        vi.appendChild(cc);

        cc = document.createElement("input");
        cc.setAttribute("type", "hidden");
        cc.setAttribute("value", jsons[i].id);
        cc.classList.add("toDoListId");
        vi.appendChild(cc);

        cc = document.createElement("input");
        cc.setAttribute("type", "hidden");
        cc.setAttribute("value", jsons[i].checked);
        cc.classList.add("toDoListChecked");
        vi.appendChild(cc);

        cc = document.createElement("div");
        cc.classList.add("toDoListDelBtn");
        cc.addEventListener("click", todolistDelBtn);
        // 아이콘 만들어지면 지울거
        cc.innerHTML = "삭제";
        vi.appendChild(cc);

        cc = document.createElement("div");
        cc.classList.add("toDoListAddBtn");
        cc.addEventListener("click", todolistAddBtn);
        // 아이콘 만들어지면 지울거
        cc.innerHTML = "저장하기";
        vi.appendChild(cc);
        c.appendChild(vi);
        v.appendChild(c);
    }
    checkBtnState();
}​

 

3) TO DO LIST 추가 

// 투두리스트를 추가함
function toDoListInsert(data){
    createXHRTodolist();

    XHRTodolist.onreadystatechange=function(){
        if(XHRTodolist.readyState==4){
            if(XHRTodolist.status==200){
                // 통신이 완료된 뒤 실행해야 변경상항 확인가능
                toDoList();
            }
        }
    }
    XHRTodolist.open("POST", "todolistInsert", true);
    XHRTodolist.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
    XHRTodolist.send(data);
}
더보기 
// 투두리스트를 추가하기 위한 폼 생성
function todolistAdd (){
    let button = document.getElementsByClassName("toDoListAdd")[0];
    let flag = document.getElementsByClassName("toDoListAddFlag")[0];

    if(flag.value=="false"){
        flag.setAttribute("value", "true");
        button.classList.add("Xbutton");
    }
    else{
        let p = document.getElementsByClassName("toDoListMain")[0];
        flag.setAttribute("value", "false");
        p.removeChild(p.firstChild);
        button.classList.remove("Xbutton");
        return;
    }

    v = document.getElementsByClassName("toDoListMain")[0];

    c = document.createElement("div");
    c.classList.add("toDoLists");

    cc = document.createElement("input");
    cc.setAttribute("type", "hidden");

    cc.classList.add("toDoListNum");
    c.appendChild(cc);

    cc = document.createElement("input");
    let temp = cc;
    cc.setAttribute("type", "text");
    cc.classList.add("toDoListTitle");
    cc.setAttribute("placeholder", "일정 제목을 입력하세요.");
    c.appendChild(cc);

    cc = document.createElement("input");
    cc.setAttribute("type", "text");
    cc.classList.add("toDoListContent");
    c.appendChild(cc);

    cc = document.createElement("input");
    cc.setAttribute("type", "date");
    cc.setAttribute("value", getTodayDateString());
    console.log(getTodayDateString());
    //cc.innerHTML = getTodayDateString();
    console.log(cc);
    cc.classList.add("toDoListDate");
    c.appendChild(cc);

    cc = document.createElement("div");
    cc.classList.add("toDoListTimeTitle");
    cc.innerHTML = "시간 설정";
    c.appendChild(cc);

    cc = document.createElement("select");

    cc.classList.add("toDoListTime");
    for(let i = 0; i < 24; i++){
        for(let j = 0; j < 4; j++){
            let time = ""; 
            if(i<10){
                time = "0"+i+":";
                if(j==0){
                    time += "00";
                }
                else {
                    time += (j*15);
                }
            }
            else{
                time = i+":";
                if(j==0){
                    time += "00";
                }
                else {
                    time += (j*15);
                }
            }
            ccc = document.createElement("option");
            ccc.setAttribute("value", time);
            ccc.innerHTML=time;
            cc.appendChild(ccc);
        }
    }
    c.appendChild(cc);

    cc = document.createElement("div");
    cc.classList.add("toDoListImportanceTitle");
    cc.innerHTML = "중요도";
    c.appendChild(cc);

    cc = document.createElement("select");
    cc.classList.add("toDoListImportance");

    for(let j = 1; j < 5; j++){
        ccc = document.createElement("option");
        ccc.classList.add("toDoListImportanceOption");
        ccc.setAttribute("value", j);
        if(j==1){
            ccc.innerHTML = "하면 좋음"
        }
        else if(j==2){
            ccc.innerHTML = "보통";
        }
        else if(j==3){
            ccc.innerHTML = "중요";
        }
        else if(j==4){
            ccc.innerHTML = "매우 중요";
        }
        cc.appendChild(ccc);
    }
    c.appendChild(cc);

    ccc = document.createElement("input");
    ccc.setAttribute("type", "hidden");
    ccc.classList.add("toDoListNum");
    cc.appendChild(ccc);

    cc = document.createElement("input");
    cc.setAttribute("type", "hidden");
    cc.setAttribute("value", userKey);
    cc.classList.add("toDoListId");
    c.appendChild(cc);

    cc = document.createElement("input");
    cc.setAttribute("type", "hidden");
    cc.setAttribute("value", "false");
    cc.classList.add("toDoListChecked");
    c.appendChild(cc);

    cc = document.createElement("div");
    cc.classList.add("toDoListDelBtn");
    cc.addEventListener("click", todolistOffBtn);
    cc.innerHTML = "끄기";
    c.appendChild(cc);

    cc = document.createElement("div");
    cc.classList.add("toDoListAddBtn");
    cc.addEventListener("click", todolistAddBtn);
    cc.innerHTML = "저장하기";
    c.appendChild(cc);

    v.insertBefore(c, v.firstChild);
    temp.focus();
}
function todolistOffBtn(){
    let target = event.target;
    let p = target.parentNode.parentNode; 
    let flag = document.getElementsByClassName("toDoListAddFlag")[0];
    let button = document.getElementsByClassName("toDoListAdd")[0];
    button.classList.remove("Xbutton");
    flag.setAttribute("value", "false");
    p.removeChild(p.firstChild);
}
function todolistAddBtn(){
    let target = event.target;
    let v = target.parentNode.parentNode;

    let title = v.getElementsByClassName("toDoListTitle")[0].value; 
    let content = v.getElementsByClassName("toDoListContent")[0].value; 
    let date = v.getElementsByClassName("toDoListDate")[0].value; 
    let time = v.getElementsByClassName("toDoListTime")[0].value; 
    let importance = v.getElementsByClassName("toDoListImportance")[0].value; 
    let num = v.getElementsByClassName("toDoListNum")[0].value; 
    let id = v.getElementsByClassName("toDoListId")[0].value; 
    let checked = v.getElementsByClassName("toDoListChecked")[0].value; 

    let data = createJsonTodolist(num, title, content, id, date, time, importance, checked);
    let json = JSON.stringify(data);
    toDoListInsert(json);
    todolistOffBtn();
}

// 수정을 누를 경우 수정을 위한 폼이 보이도록 해야함 
// CSS 넢으면서 추가 
function todolistFixBtn(){
    let target = event.target;
    let v = target.parentNode;
    let title = v.getElementsByClassName("toDolistTitleSecond")[0];
    let area = v.getElementsByClassName("toDoListView")[0];
    let flag = target.getElementsByClassName("toDoListFixBtnFlag")[0];

    if(flag.value=="false"){
        flag.setAttribute("value", "true");
        area.setAttribute("style", "display:block;");
        title.removeAttribute("readonly");
    }
    else{
        flag.setAttribute("value", "false");
        area.removeAttribute("style");
        title.setAttribute("readonly", "true");
    }
}

 

 

4) TO DO LIST 완료

// 투두리스트를 완료함
// 완료한 투두리스트는 안보이거나 흐리게 보이게 CSS 수정해야함
// 한번에 삭제 필요 
function todolistCheckedBtn(){
    let target = event.target;
    let v = target.parentNode;
    let checked = v.getElementsByClassName("toDoListChecked")[0]; 

    if(checked.value=='true'){
        checked.setAttribute("value", "false");
    }
    else{
        checked.setAttribute("value", "true");
    }
    checkBtnState();
    checked = v.getElementsByClassName("toDoListChecked")[0].value;

    let title = v.getElementsByClassName("toDoListTitle")[0].value; 
    let content = v.getElementsByClassName("toDoListContent")[0].value; 
    let date = v.getElementsByClassName("toDoListDate")[0].value; 
    let time = v.getElementsByClassName("toDoListTime")[0].value; 
    let importance = v.getElementsByClassName("toDoListImportance")[0].value; 
    let num = v.getElementsByClassName("toDoListNum")[0].value; 
    let id = v.getElementsByClassName("toDoListId")[0].value; 

    let data = createJsonTodolist(num, title, content, id, date, time, importance, checked);
    let json = JSON.stringify(data);

    toDoListInsert(json);
}
function checkBtnState(){
    let box = document.getElementsByClassName("toDoListCheckBox");
    let checked = document.getElementsByClassName("toDoListChecked");

    for(let i = 0; i<box.length; i++){
        if(checked[i].value=="true"){
            box[i].setAttribute("style", "background-image: url(./imgSource/checkafter.png);")
        }
        else{
            box[i].removeAttribute("style");
        }	
    }
}

 

5) TO DO LIST 삭제 

// 투두리스트를 삭제함 
function toDoListDelete(data){
    if(data.length==null){
        return;
    }

    createXHRTodolist();

    XHRTodolist.onreadystatechange=function(){
        if(XHRTodolist.readyState==4){
            if(XHRTodolist.status==200){
                // 통신이 완료된 뒤 실행해야 변경상항 확인가능
                toDoList();
            }
        }
    }
    XHRTodolist.open("POST", "todolistDelete", true);
    XHRTodolist.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
    XHRTodolist.send(data);
}

// 투두리스트 한번에 삭제 
function todolistCom(){
    let tdl = document.getElementsByClassName("toDoLists");
    let data;
    let temp=[];
    for(let i = 0; i < tdl.length; i++){
        let checked = tdl[i].getElementsByClassName("toDoListChecked")[0].value;
        // 체크된 상태를 확인하여 이를 배열로 만들고 삭제 데이터를 전달함 
        if(checked=="true"&&checked!='undefined'){
            let num = tdl[i].getElementsByClassName("toDoListNum")[0].value;
            temp.push(num);
        }
    }
    data = {
        key: temp	
    }
    let json = JSON.stringify(data);
    toDoListDelete(json);
};

'프로젝트 개발기 > Status 200 ( Team Project )' 카테고리의 다른 글

13. TEAM 프로젝트: 헤더 디자인 및 캘린더 디자인  (0) 2021.11.16
12. TEAM 프로젝트: 캘린더 기능 구현 - 실시간 알림  (0) 2021.11.15
10. TEAM 프로젝트: 캘린더 기능 구현 - 그룹 (2)  (0) 2021.11.15
9. TEAM 프로젝트: 캘린더 기능 구현 - 그룹 (1)  (0) 2021.11.11
8. TEAM 프로젝트: 캘린더 기능 구현 - 스케줄 (2)  (0) 2021.11.11

'프로젝트 개발기/Status 200 ( Team Project )' Related Articles

티스토리툴바