POHANG
/
its-web-server


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325
							<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta name="description" content="포항시 교통정보센터입니다"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>포항시 교통정보센터</title>
    <th:block th:include="include/head.html"></th:block>
    <link rel="stylesheet" th:href="@{/css/notice.css}">
    <script th:src="@{/js/naverEditor/js/HuskyEZCreator.js}" charset="UTF-8"></script>
</head>
<body id="body">
<th:block th:include="include/admin-header.html"></th:block>
<div class="noticeWrap">
    <div class="container view">
        <h2 class="admin-header">공지사항</h2>
        <div class="content admin-view">
            <div class="button-box">
                <div class="bl-button" onclick="movePath('/phits/notice-list')">목록</div>
                <div style="display: flex;">
                    <div class="bl-button edit-btn" onclick="edit()">편집</div>
                    <div class="bl-button off save-btn" onclick="save()">저장</div>
                    <div class="wt-button del-btn" onclick="delEvent()">삭제</div>
                    <div class="wt-button off x-btn" onclick="cancel()">취소</div>
                </div>
            </div>
            <div class="view-box">
                <div>
                    <input class="title" name="b_subject" placeholder="제목" th:value="${notice.getBSubject()}" readonly>
                    <div id="b_content" class="b_content"></div>
                    <textarea id="content" placeholder="내용" style="display: none;" class="b_content" rows="16" name="b_content" readonly></textarea>
                    <div class="attach-box admin">
                        <div class="attach">
                            <div th:if="${notice.getAttachFile() == '||' or #strings.isEmpty(notice.getAttachFile())}">첨부파일 없음</div>
                            <div class="attach-file" th:if="${notice.getAttachFile() != '||' and not #strings.isEmpty(notice.getAttachFile())}"
                                 th:each="item, i : ${#strings.arraySplit(notice.getAttachFile(), '|')}"
                                 th:text="${item}" th:title="${item + ' 다운로드'}"
                                 th:onclick="attachFileDownload([[${i.index}]], [[${notice.getBoardNo()}]], [[${notice.getAttachFileId()}]],[[${item}]])"
                            ></div>
                        </div>
                        <input type="file" name="attachFile" id="attach-file">
                        <div class="bl-button off attach-btn" onclick="attachFile()">파일첨부</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include/footer.html"></th:block>
<div class="modal loading">
    <img class="loading-img" width="150" height="150" src="/images/background/loading.png" alt="로딩 이미지">
</div>

</body>
</html>
<script th:inline="javascript">
    const $delete     = $('.del-btn');
    const $save       = $('.save-btn');
    const $edit       = $('.edit-btn');
    const $cancel     = $('.x-btn');
    const $title      = $('.title');
    const $content    = $('#content');
    const $bContent   = $('#b_content');
    const $attach     = $('.attach');
    const $attachBtn  = $('.attach-btn');
    const $attachFile = $('#attach-file');
    const notice      = [[${notice}]];

    let object = [];

    $bContent.html(notice.b_content);
    let boardAArr = $('.b_content a');
    if (boardAArr.length > 0) {
        boardAArr.attr({target : '_blank', rel : 'noreferrer noopener'});
    }

    let isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

    if (isMobile) {
        $content.attr('rows', 10);
    }

    function attachFileDownload(index, id, attachFileId, fileName) {
        if (attachFileId && attachFileId.split('|').length > 0) {
            attachFileId = attachFileId.split('|')[index];
        }
        const param = {
            boardNo : id,
            fileId  : attachFileId,
        }
        getDataAsync('/api/notice/attach', 'POST', param, null, (jsonData)=>{
            const attachFile = jsonData.attach_file;
            const ext = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length);
            if (attachFile && attachFile.length > 0) {
                if (!ext) {
                    // return alert("파일 확장자명이 잘못 되었습니다.");
                    return alertError('파일 확장자명이 잘못 되었습니다.', '공지사항', null);
                }
                const file = b64ToBlob(attachFile);
                const link = document.createElement('a');
                link.href = file;
                link.download = fileName;
                link.click();
            }
            else {
                alertError(jsonData.message, '공지사항', null);
                // alert(jsonData.message);
            }

        }, null);
    }

    const b64ToBlob = (byteData) => {
        const byteCharacters = atob(byteData);
        const byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        const blob = new Blob([byteArray]);
        const blobUrl = window.URL.createObjectURL(blob);

        return blobUrl;
    };

    function attachFile() {
        $attachFile.click();
    }

    $attachFile.on("change", function() {
        const changeFile = $(this)[0].files[0];
        if (changeFile) {
            const fileName = changeFile.name;
            $attach.html('<div><span class="attach-delete" title="첨부파일 제거" onclick="deleteAttach()"></span>' + fileName + '</div>');
        }
    })

    function edit() {

        $bContent.css({display: 'none'});
        $content.css({display : 'block'});
        initEditEditor();
        $delete.addClass('off');
        $edit.addClass('off');
        $save.removeClass('off');
        $cancel.removeClass('off');
        $title.addClass('modify');
        $content.addClass('modify');
        $attach.addClass('modify');
        $attachBtn.removeClass('off');

        $title.attr('readonly', false);
        $content.attr('readonly', false);

        const fileName = $attach.children().eq(0).text();
        if (fileName !== '첨부파일 없음') {
            $attach.html('<div><span class="attach-delete" title="첨부파일 제거" onclick="deleteAttach()"></span>' + fileName + '</div>')
        }


    }

    function deleteAttach() {
        $attachFile.val("");
        $attach.html("<div>첨부파일 없음</div>");
    }

    function delEvent() {
        const boardNo    = [[${notice.getBoardNo()}]];
        const bSubject   = [[${notice.getBSubject()}]];
        const message = '번호 : ' + boardNo + '<br>제목 : ' + bSubject + '<br>게시물을 삭제하시겠습니까?';
        alertMessage('red', message, '공지사항', null, ()=>{
            getDataAsync('/api/notice/deleteNotice', 'DELETE', {boardNo : boardNo}, null, (jsonData)=>{
                if (jsonData) {
                    alertMessage('blue', jsonData.message, '공지사항', null, ()=>{
                        if (jsonData.success === "S") {
                            window.location.href = '/phits/notice-list';
                        }
                    }, true)
                }
            }, null);
        });
    }

    function save() {
        object.getById["content"].exec("UPDATE_CONTENTS_FIELD", []);
        const file     = $attachFile[0].files[0];
        const title    = $title.val();
        const attachNm = notice.attach_file.split("|")[0];
        let content    = $content.val();

        if (content && content.length >= 13) {
            let trimContent = content.replaceAll("<p>&nbsp;</p>", "");
            if (trimContent === "") {
                content = "";
            }
            else {
                let spaceGap = content.length - 13;
                let spaceEl = content.substring(spaceGap);
                if (spaceEl === '<p>&nbsp;</p>') {
                    content = content.substring(0, spaceGap);
                }
            }
        }

        if (notice.b_subject === title && notice.b_content === content) {
            if (file) {
               if (file.name === attachNm) {
                   return alertError('수정하신 내용이 없습니다. 내용을 확인해주세요.', '공지사항');
               }
            }
            else {
                const attachFileName = $attach.children().eq(0).text();
                if ( (attachFileName === "첨부파일 없음" && attachNm === "") || attachFileName === attachNm) {
                    return alertError('수정하신 내용이 없습니다. 내용을 확인해주세요.', '공지사항');
                }
            }
        }
        if (isNull(title)) {
            return alertError('공지사항 제목을 입력해주세요', '공지사항', $title);
        }

        if (isNull(content)) {
            return alertError('공지사항 내용을 입력해주세요', '공지사항', $content);
        }

        const formData = new FormData();
        formData.append("boardNo", notice.board_no);
        formData.append("bSubject", title);
        formData.append("bContent", content);

        if (file && file.name) {
            formData.append("attachFileNames", file.name + "|" + file.name + "|" + file.name);
            formData.append("attachFile", file);
            formData.append("attachFile", file);
            formData.append("attachFile", file);
        }
        else {
            formData.append("attachFile", null);
            formData.append("attachFileNames", "||");
        }
        $.ajax({
            url: '/api/notice/modifyNotice',
            processData : false,
            contentType: false,
            data: formData,
            type: 'POST',
            success: function(jsonData) {
                if (jsonData) {
                    alertMessage('blue', jsonData.message, '공지사항', null, ()=>{
                        if (jsonData.success === "S") {
                            window.location.href = "/phits/notice-view/" + notice.board_no;
                        }
                    }, true);
                }
            },
            error: function(error) {
                sendErrorMsg(error);
            }
        });

    }

    function cancel() {
        $content.css('display', 'none');
        $bContent.css('display', 'block');
        $('iframe').remove();
        $delete.removeClass('off');
        $edit.removeClass('off');
        $save.addClass('off');
        $cancel.addClass('off');
        $title.removeClass('modify');
        $content.removeClass('modify');
        $attach.removeClass('modify');
        $attachBtn.addClass('off');
        $title.attr('readonly', true);
        $content.attr('readonly', true);

        const attachFileNames = notice.attach_file;

        if (attachFileNames) {
            const attachFileName = attachFileNames.split("|")[0];
            let attachText = "<div>첨부파일 없음</div>";
            if (attachFileName) {
                attachText = `<div class="attach-file" title="${attachFileName} 다운로드"
                                onclick="attachFileDownload(0, ${notice.board_no}, '${notice.attach_file_id}','${attachFileName}')">
                                ${attachFileName}
                             </div>`;
            }
            $attach.html(attachText);
        }
    }

    function initEditEditor() {
        object = [];
        nhn.husky.EZCreator.createInIFrame({
            oAppRef: object,
            elPlaceHolder: "content",
            sSkinURI: "/js/naverEditor/SmartEditor2Skin.html",
            fCreator: "createSEditor2",
            htParams: {
                // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
                bUseToolbar: true,
                // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
                bUseVerticalResizer: true,
                // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
                bUseModeChanger: true
            },
            fOnAppLoad: function () {
                //기존 저장된 내용의 text 내용을 에디터상에 뿌려주고자 할때 사용
                object.getById["content"].exec("PASTE_HTML", [notice.b_content]);
            }
        });
        //SE2M_Configuration.js
        //nhn.husky.SE2M_Configuration.SE2M_Hyperlink -> bAutolink : true // 자동링크 생성 여부
    }

    $(window).ajaxStart(function () {
        $('.modal.loading').css('display', 'flex');
    })
    .ajaxStop(function () {
        $('.modal.loading').css('display', 'none');
    });
</script>