<%
/**
 * <pre>
 * @Class Name : insertQnAForm.jsp
 * 
 * @Description : 묻고답하기 등록화면을 표출한다. 
 * 
 * 
 * @프로젝트명: 지방문화원 통합자료관리시스템 구축사업 (2021)
 *
 * </pre>
 *
 * @ ------------    --------    ---------------------------
 * @ 수정일                     수정자             수정내용
 * @ ------------    --------    ---------------------------
 * @ 2021. 7. 13.    KNKIM       최초 생성
 *
 * 
 * @author 이씨플라자 * DIGITALSHIP KNKIM
 * @since 2021. 7. 13.
 * @version 1.0
 *
 */
 %>
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>

<c:set var="pageTitle">묻고답하기 - 등록</c:set>

<!DOCTYPE html>
<html>
<head>
<title>${pageTitle}</title>

<!-- File Upload : 시작 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/fileupload/dropzone.css" /> 
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/fileupload/style.css" />
<script                 src="${pageContext.request.contextPath}/js/fileupload/dropzone.js"></script>
<!-- File Upload : 종료 -->

<script type="text/javaScript">
var myDropzone = null;      <% // 파일드롭다운 객체 %>
var fileList = new Array(); <% // 업로드된 파일 정보 %>
var IN_PROC = false;        <% // 현재 상태가 업로드처리중에 있는지 여부 %>

$(document).ready(function() {

    // 파일업로드 객체 생성 
    myDropzone = new Dropzone("form#myDropzone", { url: "${pageContext.request.contextPath}/fileupload/uploadFilesAjax.do?subPathKey=fileupload.bbs.qna.subpath"});
    
    // 각 파일별 업로드 성공시 호출됨 (1th called)
    myDropzone.on("success", function(file, responseText) {
    	var jobj = JSON.parse(responseText);
    	console.log("file upload success : responseText = " + responseText);
    	console.log("fileUpDone count : " + fileList.length);
    	var idx = fileList.length;
    	fileList[idx] = {
    			"orignlFileNm" : jobj[0].orignlFileNm,
    			"streFileNm" : jobj[0].streFileNm,
    			"fileMg" : jobj[0].fileMg,
    	};
        console.log("success : " + file.name + " -> " + "data > " + jobj[0].streFileNm);
        //alert("file : status " + file.status);
      });

    // 각 파일별 업로드 처리 완료 시 호출됨 (2th called)
    myDropzone.on("complete", function(file) {
         console.log("개별 파일 처리 완료 > file = " + JSON.stringify(file));
    });
	
    // 모든 업로드 처리 완료 시 호출됨 
    myDropzone.on("queuecomplete", function() {
        var targetCnt = this.getAcceptedFiles().length;
        var uploadCnt = fileList.length;

        if(uploadCnt > 0) {
        	$("#fileList").val(JSON.stringify(JSON.stringify(fileList)));	
        }
        if(IN_PROC) {
            if(targetCnt > 0 && targetCnt != uploadCnt) {
                alert("총 " + targetCnt + "건의 첨부파일 중 " + uploadCnt + "건이 정상적으로 업로드 되었습니다. 게시물 등록을 계속 진행합니다.");
            }
            
            fn_insertSubmit();
        }
    });
	
});

// 목록으로 이동 
function fn_list() {
    $('#articleForm').removeAttr('onsubmit');

    $("#articleForm").attr("action", "${pageContext.request.contextPath}/board/listQnAs.do");
    $("#articleForm").submit();
}

// 등록 처리 
function fn_insert() {
    if(!validEmail($("#email").val())) {
    	alert("이메일 형식에 맞지 않습니다. 다시 확인하여 주시기 바랍니다.");
    	$("#email").focus();
    	return false;
    }
    
    $("#articleForm").attr("action", "${pageContext.request.contextPath}/board/insertQnA.do");
    if(!confirm("저장하시겠습니까?")) return false;
    
    IN_PROC = true;
    
    // 파일 업로드 처리
    if(myDropzone.getAcceptedFiles().length > 0) {
        myDropzone.processQueue();
        return false;
    }
    
    return true;
}

//등록 처리 
function fn_insertSubmit() {
	$('#articleForm').removeAttr('onsubmit');
    $("#articleForm").attr("action", "${pageContext.request.contextPath}/board/insertQnA.do");
    $("#articleForm").submit();
}

</script>
</head>

<body>

<h1>${pageTitle }</h1>

메시지 : <span style="color:red;">${message }</span>
<br />

<form name="articleForm" id="articleForm"  
      action="${pageContext.request.contextPath}/board/insertQnA.do" 
      method="post"
      onsubmit="return fn_insert();"> 
    
    <!-- HIDDEN 영역 : 시작 -->
    <input type="text" name="pageIndex"       id="pageIndex"       title="페이지번호"        value="${pageIndex}"       readonly />
    <input type="text" name="pageSize"        id="pageSize"        title="목록에 보여줄 글 개수" value="${pageSize}"       readonly />
    <input type="text" name="searchKeyword"   id="searchKeyword"   title="검색어"           value="${searchKeyword}"   readonly />
    
    <input type="text" name="fileList"   id="fileList"   title="업로드파일목록"           value=""   readonly />

	&nbsp;<br/>
	&nbsp;<br/>

    <table class="table_content" style="width:100% !important;">
        <tr>
            <th>제목</th>
            <td><input type="text" name="title" id="title" title="제목" value="${title}" size="100" maxlength="200" required /></td>
        </tr>
        <tr>
            <th>작성자</th>
            <td><input type="text" name="regUserName" id="regUserName" title="작성자" value="${regUserName}" size="100" maxlength="200" required /></td>
        </tr>
        <tr>
            <th>비밀번호</th>
            <td><input type="text" name="articlePassword" id="articlePassword" title="비밀번호" value="${articlePassword}" size="100" maxlength="200" required /><br/>
                * 비밀번호 : SHA-256 암호화 처리 후, DB에 저장되며, 웹 화면에 표출될 때는 Aria로 AuthKey를 Salt값으로 하여 재암호화처리하고 BASE64로 다시한번 인코딩하여 표출함 
            </td>
        </tr>
        <tr>
            <th>이메일</th>
            <td><input type="email" name="email" id="email" title="이메일" value="${email}" size="100" maxlength="200" required /></td>
        </tr>
        <tr>
            <th>질문내용</th>
            <td><textarea name="contentQeust" id="contentQeust" cols="80" rows="10" required >${contentQeust}</textarea></td>
        </tr>
    </table>        
    
    <br/>
    
    <input type="button" name="btnCancel" id="btnCancel" title="취소버튼" class="float" value="취소"
        onclick="fn_list()" />
    <input type="submit" name="btnSave" id="btnSave" title="저장버튼" class="float" value="저장"  />

</form>

&nbsp;<br/>
&nbsp;<br/>
&nbsp;<br/>

<div id="dropzone">
    <form id="myDropzone" name="myDropzone" 
        action="${pageContext.request.contextPath}/fileupload/uploadFile.do" 
        class="dropzone needsclick" >
      <div class="dz-message needsclick">
        <button type="button" class="dz-button">Drop files here or click to select files.</button><br />
        <span class="note needsclick">이곳에 파일을 끌어다 놓거나, 클릭하여 올릴 파일을 선택하세요.</span>
      </div>
    </form>
</div>

</body>
</html>
