Tryag File Manager

/home/yanggyein/yanggyein/yang_ai/public/js/ai-map.js

/* 로딩 후 작업 */
$(function () {
    $('.material-tooltip-smaller').tooltip({
        template: '<div class="tooltip md-tooltip"><div class="tooltip-arrow md-arrow"></div><div class="tooltip-inner md-inner"></div></div>'
    })

$('.mdb-select').materialSelect()
    const selectDropdown = document.querySelector('.select-dropdown')
    selectDropdown.classList.add('mb-0');

/* 로드후 실행 */
    axiosShowSearchPreventionList()
})

//지도를 담을 영역의 DOM 레퍼런스
let centerPoint = new kakao.maps.LatLng(36.3009354, 127.332776)
let container = document.getElementById('map')
let options = { //지도를 생성할 때 필요한 기본 옵션
    center: centerPoint, //지도의 중심좌표.
    level: 12 //지도의 레벨(확대, 축소 정도)
}

//지도 생성 및 객체 리턴
let map = new kakao.maps.Map(container, options)
// 마커 리스트
let markers = []
let overlays = []
let infowindows = []

// 지도타입 컨트롤의 지도 또는 스카이뷰 버튼을 클릭하면 호출되어 지도타입을 바꾸는 함수입니다
function setMapType(maptype) {
    var roadmapControl = document.getElementById('btnRoadmap')
    var skyviewControl = document.getElementById('btnSkyview')
    if (maptype === 'roadmap') {
        map.setMapTypeId(kakao.maps.MapTypeId.ROADMAP)
        roadmapControl.className = 'selected_btn'
        skyviewControl.className = 'btn'
    } else {
        map.setMapTypeId(kakao.maps.MapTypeId.HYBRID)
        skyviewControl.className = 'selected_btn'
        roadmapControl.className = 'btn'
    }
}

kakao.maps.event.addListener(map, 'zoom_changed', function() {
    // 지도의 현재 레벨을 얻어옵니다

// 스카이뷰 설정
// map.setMapTypeId(kakao.maps.MapTypeId.HYBRID)
// map.setMapTypeId(kakao.maps.MapTypeId.SKYVIEW)
// 지도에 지형정보를 표시하도록 지도타입을 추가합니다
// map.addOverlayMapTypeId(kakao.maps.MapTypeId.TERRAIN);
// map.addOverlayMapTypeId(kakao.maps.MapTypeId.OVERLAY);
// map.removeOverlayMapTypeId(kakao.maps.MapTypeId.OVERLAY);
/* 마커 이미지 설정 */

/* 지역 선택에 따른 방역 이벤트 표기 */
const axiosShowSearchPreventionList = async () => {
    try {
        const searchLocationList = document.querySelector('#search-location-list')
        console.log(searchLocationList.value)
        // const test = await axios.get('http://api.vworld.kr/req/data?service=data&request=GetFeature&data=LT_C_ADSIGG_INFO&key=46D6CC43-A717-3B36-B321-50A5F13DD169&domain=http://localhost:3000/ai/map&attrFilter=sig_kor_nm:like:true')
        const response = await axios.get(`/api/prevention/ai/list/${searchLocationList.value}`)
        const researchList = document.querySelector('#research-list')
        researchList.innerHTML= "";

let centerPoint = new kakao.maps.LatLng(36.3009354, 127.332776)
        let container = document.getElementById('map')
        let options = { //지도를 생성할 때 필요한 기본 옵션
            center: centerPoint, //지도의 중심좌표.
            level: 12 //지도의 레벨(확대, 축소 정도)
        }

//지도 초기화
        map = new kakao.maps.Map(container, options)

for (let x = 0; x < markers.length; x++) {
            const marker = markers[x];
            marker.setMap(null)
        }
        for (let x = 0; x < overlays.length; x++) {
            const overlay = overlays[x];
            overlay.setMap(null)
        }
        for (let x = 0; x < infowindows.length; x++) {
            const infowindow = infowindows[x];
            infowindow.setMap(null)
        }
        markers = []
        overlays = []
        infowindows = []

if(response.data) {
            const mapDataList = response.data;
            console.log(mapDataList)
            mapDataList.map((mapData, idx) => {
                researchList.innerHTML += `
                    <tr data-toggle="modal" data-target="#modalPoll-${mapData.id}" onclick="gotoCenterOfMap('${mapData.location_latitude}', '${mapData.location_longitude}', '${idx}')";>
                        <td class="text-nowrap"><small>${mapData.start_time.substr(0,10)}</small></td>
                        <td class="text-nowrap sf-dump-ellipsis"><small>${mapData.address}</small></td>
                        <th scope="row"><small>${mapDataList.length - idx}</small></th>
                    </tr>
                `;

// let imageSrc = "/images/map/m_siren.png"
                let imageSrc = `https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png`
                let imageSize = new kakao.maps.Size(36, 37),  // 마커 이미지의 크기
                imageOptions =  {
                    spriteSize : new kakao.maps.Size(36, 691), // 스프라이트 이미지의 크기
                    spriteOrigin : new kakao.maps.Point(0, (idx*46)+10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
                    offset: new kakao.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
                }
                // let imageSize = new kakao.maps.Size(25, 25),
                //     imageOptions = {
                //     //  spriteOrigin: new kakao.maps.Point(10, 0),
                //     //  spriteSize: new kakao.maps.Size(50, 80)
                // }

// let modalBox = document.querySelector('#modal-box')
                // modalBox.innerHTML += `

// `;

/* 마커 설정 */
                let markerPosition = new kakao.maps.LatLng(mapData.location_latitude, mapData.location_longitude)

let markerInfo =
                [
                    {
                        latlng: markerPosition,
                        content:`<div class ="label" style="background: rgba(255,0,0,0.5);" data-toggle="modal" data-target="#modalPoll-${mapData.id}"><span class="left"></span><small><span class="center text-white px-1 pb-1">[ ${mapData.start_time} ] ${mapData.title}</span></small><span class="right"></span></div><i class="fas fa-mouse"> </i>`,
                        image: new kakao.maps.MarkerImage(imageSrc, imageSize, imageOptions),
                    },
                ]

const arrayDistance = [mapData.distance_a, mapData.distance_b, mapData.distance_c, mapData.distance_d, mapData.distance_e, mapData.distance_f];
                const arrayCorlor = [mapData.color_a, mapData.color_b, mapData.color_c, mapData.color_d, mapData.color_e, mapData.color_f];
                // 지도에 표시할 원을 생성합니다
                for (let index = 0; index < arrayDistance.length; index++) {
                    if(arrayDistance[index] === 0) {
                        break;
                    }
                    let circle = new kakao.maps.Circle({
                    center : new kakao.maps.LatLng(mapData.location_latitude, mapData.location_longitude),  // 원의 중심좌표 입니다
                    radius: arrayDistance[index], // 미터 단위의 원의 반지름입니다
                    strokeWeight: 0.5, // 선의 두께입니다
                    strokeColor: '#312f2f', // 선의 색깔입니다
                    strokeOpacity: 1, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
                    strokeStyle: 'solid', // 선의 스타일 dashed:점선, solid:실선
                    fillColor: arrayCorlor[index], // 채우기 색깔입니다
                    fillOpacity: 0.5  // 채우기 불투명도 입니다
                    });
                    // 지도에 원을 표시합니다
                    circle.setMap(map);

// this.circles.push(circle);
                    // new kakao.maps.CustomOverlay({
                    //     map:map,
                    //     position : new kakao.maps.LatLng(mapData.location_latitude, mapData.location_longitude+(index*0.02)),
                    //     content : '<div class ="label" style="background: rgba(255,0,0,0.5);"><span class="left"></span><small><span class="center text-white px-1 pb-1">'+Number(arrayDistance[index])/1000+' <small>km</small></span></small><span class="right"></span></div>',
                    // });
                }

/* 마커를 생성 */
                // for (let i = 0; i < markerInfo.length; i++) {
                    let marker = new kakao.maps.Marker({
                        position:markerInfo[0].latlng,
                        image:markerInfo[0].image,
                        clickable: true,
                    });
                    marker.setMap(map);
                    markers.push(marker)

// let customOverlay = new kakao.maps.CustomOverlay({
                    //     position : markerInfo[0].latlng,
                    //     content : markerInfo[0].content
                    // });
                    // customOverlay.setMap(map);
                    // overlays.push(customOverlay)

// 인포윈도우를 생성합니다
                    let iwContent = `<div class ="label text-nowrap pr-4" style="background: rgba(255,0,0,0.5);" data-toggle="modal" data-target="#modalPoll-${mapData.id}"><span class="left"></span><small><span class="center text-white px-1 pb-1">[ ${mapData.start_time.substr(0,10)} ] ${mapData.title} <i class="fas fa-mouse"></i>`, // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
                        iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다

let infowindow = new kakao.maps.InfoWindow({
                        content : iwContent,
                        removable : iwRemoveable
                    });
                    infowindows.push(infowindow)

kakao.maps.event.addListener(marker, 'click', function() {
                        // 제거
                        for (let i = 0; i < infowindows.length; i++) {
                            const infowindow = infowindows[i]
                            infowindow.close()
                        }
                        // 마커 위에 인포윈도우를 표시합니다
                        infowindow.open(map, marker);
                    })

kakao.maps.event.addListener(marker, 'mouseover', function() {
                        // 마커 위에 인포윈도우를 표시합니다
                        infowindow.close(map, marker);

infowindow.open(map, marker);
                    })

kakao.maps.event.addListener(marker, 'mouseout', function() {
                        // 마커 위에 인포윈도우를 표시합니다

})

}); // map
        }
    } catch (error) {
        return []
    }
}

/* 방역 리스트에 따른 맵이동 */
const gotoCenterOfMap = (latitude, longitude, key) => {
    const moveLatLon = new kakao.maps.LatLng(latitude, longitude)
    map.setCenter(moveLatLon)
    // map.setLevel(8)
    for (let i = 0; i < markers.length; i++) {
        const marker = markers[i]
        infowindows[i].close()
    }
    infowindows[key].open(map, markers[key])
}

/* AI 리스트 마우스 오버시 */
const overInfowindow = (key) => {
    // for (let i = 0; i < infowindows.length; i++) {
    //     const infowindow = infowindows[i]
    //     infowindow.close()
    // }
    // const infowindow = infowindows[key]
    // infowindow.open(map, markers[key])
}
/* AI 리스트 마우스 아웃시 */
const outInfowindow = (key) => {
    // setTimeout(() => {
    //     const infowindow = infowindows[key]
    //     infowindow.close()
    // }, 2000);
}

/* 방역 리스트 숨기기 */
const togglePreventionList = () => {
    const preventionListCardShow =  document.querySelector('#prevention-list-card-show')
    const preventionListCardHide =  document.querySelector('#prevention-list-card-hide')

if(preventionListCardShow.classList.contains('d-none')) {
        preventionListCardShow.classList.remove('d-none')
        preventionListCardHide.classList.add('d-none')
    }else {
        preventionListCardShow.classList.add('d-none')
        preventionListCardHide.classList.remove('d-none')
    }
}

// 우편번호 찾기 찾기 화면을 넣을 element
var element_wrap = document.getElementById('wrap');

function foldDaumPostcode() {
    // iframe을 넣은 element를 안보이게 한다.
    element_wrap.style.display = 'none';
}

/* 등록시 위치 저장 */
function sample3_execDaumPostcode() {
    // 현재 scroll 위치를 저장해놓는다.
    var currentScroll = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
    new daum.Postcode({
        oncomplete: function(data) {
            // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

// 각 주소의 노출 규칙에 따라 주소를 조합한다.
            // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
            var addr = ''; // 주소 변수
            var extraAddr = ''; // 참고항목 변수

//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
            if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                addr = data.roadAddress;
            } else { // 사용자가 지번 주소를 선택했을 경우(J)
                addr = data.jibunAddress;
            }

// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
            if(data.userSelectedType === 'R'){
                // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                    extraAddr += data.bname;
                }
                // 건물명이 있고, 공동주택일 경우 추가한다.
                if(data.buildingName !== '' && data.apartment === 'Y'){
                    extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                }
                // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                if(extraAddr !== ''){
                    extraAddr = ' (' + extraAddr + ')';
                }
                // 조합된 참고항목을 해당 필드에 넣는다.
                // document.getElementById("sample3_extraAddress").value = extraAddr;

} else {
                // document.getElementById("sample3_extraAddress").value = '';
            }

// 우편번호와 주소 정보를 해당 필드에 넣는다.
            document.getElementById('sample3_postcode').value = data.zonecode;
            document.getElementById("add-prevention-sido").value = data.sido;
            document.getElementById("add-prevention-sigungu").value = data.sigungu;
            document.getElementById("add-prevention-address").value = addr;
            // 커서를 상세주소 필드로 이동한다.
            document.getElementById("add-prevention-detail").focus();

// iframe을 넣은 element를 안보이게 한다.
            // (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
            element_wrap.style.display = 'none';

// 우편번호 찾기 화면이 보이기 이전으로 scroll 위치를 되돌린다.
            document.body.scrollTop = currentScroll;

},
        // 우편번호 찾기 화면 크기가 조정되었을때 실행할 코드를 작성하는 부분. iframe을 넣은 element의 높이값을 조정한다.
        onresize : function(size) {
            element_wrap.style.height = size.height+'px';
        },
        width : '100%',
        height : '100%'
    }).embed(element_wrap);

// iframe을 넣은 element를 보이게 한다.
    element_wrap.style.display = 'block';
}

/* 방역 추가 */
function addPrevention() {
    const preventionTitle = document.querySelector('#add-prevention-title').value;
    const preventionNote = document.querySelector('#add-prevention-note').value;
    const preventionAddress = document.querySelector('#add-prevention-address').value;
    const preventionAddressDetail = document.querySelector('#add-prevention-detail').value;
    const preventionSido = document.querySelector('#add-prevention-sido').value;
    const preventionSigungu = document.querySelector('#add-prevention-sigungu').value;
    const preventionStartDate = document.querySelector('#add-prevention-start-date').value;
    let preventionLocationLatitude =0.0;
    let preventionLocationLongitude =0.0;

var geocoder = new daum.maps.services.Geocoder();
    geocoder.addressSearch(preventionAddress, async function(results, status) {
    // 정상적으로 검색이 완료됐으면
        if (status === daum.maps.services.Status.OK) {
            var result = results[0]; //첫번째 결과의 값을 활용
            preventionLocationLatitude = result.y;
            preventionLocationLongitude = result.x;
            const preventionData = {
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                'location': preventionSido+','+preventionSigungu,
                'location_latitude' : preventionLocationLatitude,
                'location_longitude' : preventionLocationLongitude,
                'start_time' : preventionStartDate,
                'title' : preventionTitle,
                'note' : preventionNote,
                'address' : preventionAddress+' '+preventionAddressDetail,
            }

try {
                const response = await axios.post('/prevention/ai/store', preventionData);
                if(response.data) {
                    location.reload();
                }
            } catch (error) {

}

}
    });
}

/* 방역 수정 */

// 우편번호 찾기 찾기 화면을 넣을 element
var edit_element_wrap = document.getElementById('edit-wrap');

function foldDaumPostcode() {
    // iframe을 넣은 element를 안보이게 한다.
    edit_element_wrap.style.display = 'none';
}

function edit_execDaumPostcode() {
    // 현재 scroll 위치를 저장해놓는다.
    var currentScroll = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
    new daum.Postcode({
        oncomplete: function(data) {
            // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

} else {
                // document.getElementById("sample3_extraAddress").value = '';
            }

// 우편번호와 주소 정보를 해당 필드에 넣는다.
            document.getElementById('edit-sample3_postcode').value = data.zonecode;
            document.getElementById("edit-prevention-sido").value = data.sido;
            document.getElementById("edit-prevention-sigungu").value = data.sigungu;
            document.getElementById("edit-prevention-address").value = addr;
            // 커서를 상세주소 필드로 이동한다.
            document.getElementById("edit-prevention-detail").focus();

// iframe을 넣은 element를 안보이게 한다.
            // (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
            edit_element_wrap.style.display = 'none';

// 우편번호 찾기 화면이 보이기 이전으로 scroll 위치를 되돌린다.
            document.body.scrollTop = currentScroll;

},
        // 우편번호 찾기 화면 크기가 조정되었을때 실행할 코드를 작성하는 부분. iframe을 넣은 element의 높이값을 조정한다.
        onresize : function(size) {
            edit_element_wrap.style.height = size.height+'px';
        },
        width : '100%',
        height : '100%'
    }).embed(edit_element_wrap);

// iframe을 넣은 element를 보이게 한다.
    edit_element_wrap.style.display = 'block';
}

async function editPrevention(preventionID) {

/* 정보입력 */
    const response = await axios.get(`/api/prevention/ai/show/${preventionID}`)
    const dataList = response.data
    dataList.map((data, idx)=> {
        document.querySelector('#edit-prevention-title').value = data.title
        document.querySelector('#edit-prevention-title').focus()
        document.querySelector('#edit-prevention-note').value = data.note
        document.querySelector('#edit-prevention-note').focus()
        document.querySelector('#edit-prevention-start-date').value = data.start_time.substr(0,10)
        document.querySelector('#edit-prevention-start-date').focus()
        document.querySelector('#edit-prevention-address').value = data.address
        document.querySelector('#edit-prevention-location').value = data.location
        document.querySelector('#edit-prevention-latitude').value = data.location_latitude
        document.querySelector('#edit-prevention-longitude').value = data.location_longitude
        document.querySelector('#edit-prevention-key').value = preventionID
    })
}

function updatePrevention(preventionID) {
    const preventionTitle = document.querySelector('#edit-prevention-title').value
    const preventionNote = document.querySelector('#edit-prevention-note').value
    const preventionAddress = document.querySelector('#edit-prevention-address').value
    const preventionAddressDetail = document.querySelector('#edit-prevention-detail').value
    const preventionSido = document.querySelector('#edit-prevention-sido').value
    const preventionSigungu = document.querySelector('#edit-prevention-sigungu').value
    const preventionStartDate = document.querySelector('#edit-prevention-start-date').value
    const preventionKey = document.querySelector('#edit-prevention-key').value
    let preventionLocation = document.querySelector('#edit-prevention-location').value
    let preventionLocationLatitude = document.querySelector('#edit-prevention-latitude').value
    let preventionLocationLongitude = document.querySelector('#edit-prevention-longitude').value
    preventionLocation = preventionSido === '' ? preventionLocation : (preventionSido+','+preventionSigungu)
    var geocoder = new daum.maps.services.Geocoder();
    geocoder.addressSearch(preventionAddress, async function(results, status) {
    // 정상적으로 검색이 완료됐으면
        if (status === daum.maps.services.Status.OK) {
            var result = results[0]; //첫번째 결과의 값을 활용
            preventionLocationLatitude = result.y;
            preventionLocationLongitude = result.x;
            const preventionData = {
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                'location': preventionLocation,
                'location_latitude' : preventionLocationLatitude,
                'location_longitude' : preventionLocationLongitude,
                'start_time' : preventionStartDate,
                'title' : preventionTitle,
                'note' : preventionNote,
                'address' : preventionAddress+' '+preventionAddressDetail,
            }

try {
                const response = await axios.patch(`/api/prevention/ai/update/${preventionKey}`, preventionData);
                if(response.data) {
                    location.reload();
                }
            } catch (error) {
                alert('주소 검색을 다시해주세요.')
            }

}
    });
}
/* 방역 삭제 */
function deletePrevention(preventionID) {
    let isDel = confirm('삭제를 진행 하시겠습니까?')
    if(isDel) {
        const response = axios.get(`/api/prevention/ai/destroy/${preventionID}`)
        location.reload()
    }else {
        return 0;
    }

}

/* esc 창닫기 */
window.document.onkeydown = function (e) {
    if(e.keyCode === 27 ) {
        const preventionListCardShow =  document.querySelector('#prevention-list-card-show')
        const preventionListCardHide =  document.querySelector('#prevention-list-card-hide')
        preventionListCardShow.classList.add('d-none')
        preventionListCardHide.classList.remove('d-none')

/* 윈도우 윈포 닫기 */
        for (let i = 0; i < infowindows.length; i++) {
            const infowindow = infowindows[i]
            infowindow.close()
        }
    }
}