마커 토클 이미지 변경, 코드 리팩토링

softeerbootcamp · Feb 22, 2023 · 30a1621 · 30a1621
1 parent 02b26f6
commit 30a1621
Show file tree

Hide file tree

Showing 13 changed files with 719 additions and 597 deletions.
diff --git a/frontEnd/public/img/marker_HG_sel.png b/frontEnd/public/img/marker_HG_sel.png
diff --git a/frontEnd/public/js/mapView/DetailTab.js b/frontEnd/public/js/mapView/DetailTab.js
@@ -0,0 +1,59 @@
+let DetailTabDisplay = false;
+let SideBarDisplay = true;
+function ShowDetailTab(){
+    const GSTDetailTab = document.getElementsByClassName("main__GSTDetailTab");
+    GSTDetailTab[0].style.marginLeft = "0vw";
+    const SideSearchBar = document.getElementsByClassName("main__SideSearchBar");
+    SideSearchBar[0].style.borderRadius = "0";
+    DetailTabDisplay = true;
+}
+
+function appendNewChart(){
+    document.getElementById('myChart').remove();
+    const newChart = document.createElement('canvas');
+    newChart.id= 'myChart'; 
+
+    document.getElementsByClassName('main__GSTdetail__Contents__Chart')[0].append(newChart);
+}
+
+function closeDetailTab() {
+    const GSTDetailTab = document.getElementsByClassName("main__GSTDetailTab");
+    GSTDetailTab[0].style.marginLeft = "-22vw";
+    const SideSearchBar = document.getElementsByClassName("main__SideSearchBar");
+    SideSearchBar[0].style.borderRadius = "0 5px 5px 0";
+    DetailTabDisplay = false;
+}
+
+function MoveSideBar(e){
+    if(SideBarDisplay){
+        HideSideBar();
+    }
+    else {
+        ShowSideBar();
+    }
+}
+
+function ShowSideBar(){
+    const SideBar = document.getElementsByClassName("main__SearchBarnDetailTab");
+    const HideSideBarButton = document.getElementsByClassName("main__SearchBarHideButton");
+
+    SideBar[0].style.marginLeft = "0vw";
+    SideBarDisplay = true;
+    HideSideBarButton.innerHTML = "<img src='img/🦆 icon _chevron left_.svg'>";
+}
+
+function HideSideBar(){
+    const SideBar = document.getElementsByClassName("main__SearchBarnDetailTab");
+    const HideSideBarButton = document.getElementsByClassName("main__SearchBarHideButton");
+    if(DetailTabDisplay){
+        SideBar[0].style.marginLeft = "-44vw";
+    }
+    else {
+        SideBar[0].style.marginLeft = "-22vw";
+    }
+    SideBarDisplay = false;
+    HideSideBarButton.innerHTML = "<img src='img/🦆 icon _chevron right_.svg'>";
+
+}
+
+export {ShowDetailTab, appendNewChart, closeDetailTab, DetailTabDisplay, MoveSideBar, ShowSideBar, HideSideBar, SideBarDisplay}
diff --git a/frontEnd/public/js/mapView/ExtraFunctions.js b/frontEnd/public/js/mapView/ExtraFunctions.js
@@ -0,0 +1,191 @@
+const brandLogoMapper = (brandName) => {
+    switch(brandName) {
+        case "알뜰":
+            return "https://team6-public-image.s3.ap-northeast-2.amazonaws.com/주유소+로고_0213/알뜰.png";
+        case "오일뱅크":
+            return "https://team6-public-image.s3.ap-northeast-2.amazonaws.com/주유소+로고_0213/오일뱅크.png";
+        case "E1":
+            return "https://team6-public-image.s3.ap-northeast-2.amazonaws.com/주유소+로고_0213/E1.png";
+        case "ex-OIL":
+            return "https://team6-public-image.s3.ap-northeast-2.amazonaws.com/주유소+로고_0213/ex.png";
+        case "ex":
+            return "https://team6-public-image.s3.ap-northeast-2.amazonaws.com/주유소+로고_0213/ex.png";
+        case "GS":
+            return "https://team6-public-image.s3.ap-northeast-2.amazonaws.com/주유소+로고_0213/GS.png";
+        case "S-Oil":
+            return "https://team6-public-image.s3.ap-northeast-2.amazonaws.com/주유소+로고_0213/S-Oil.png";
+        case "SK":
+            return "https://team6-public-image.s3.ap-northeast-2.amazonaws.com/주유소+로고_0213/SK_Gas.png";
+        case "NH-OIL":
+            return "https://team6-public-image.s3.ap-northeast-2.amazonaws.com/주유소+로고_0213/NH-OIL.png";
+    }
+    return "./img/GasStation_Image/custom.png";
+}
+
+function ResetOptionButton(){
+    $("#sort_GG").css("opacity", "0.5");
+    $("#sort_HH").css("opacity", "0.5");
+    $("#sort_LL").css("opacity", "0.5");
+}
+
+function transStId(stId){
+    switch(stId){
+        case 'S-Oil': return 'S-OIL';
+        case '오일뱅크' : return '현대오일뱅크';
+        case '알뜰' : return '알뜰주유소';
+        case 'ex-OIL' : return '알뜰(ex)';
+        case 'NH-OIL' : return 'NH-OIL';
+        case 'SK' : return 'SK'; 
+        case 'GS' : return 'GS칼텍스';
+        case '자가상표' : return '자가상표';
+        case 'E1' : return 'E1';
+    }
+    return '자가상표';
+}
+
+function SelectStIdLogo(stId, name, radius){
+    return `
+        <div class='main__ResultList'> 
+            <img class='main__ResultList__Title_Logo' src = ${brandLogoMapper(stId)}>
+            <div class='main__ResultList_TitlenContents'>
+                <div class='main__ResultList__Title'>  
+                    <div id="stName">${name}</div>
+                    <div id="stRadius">${Math.round(radius*10)/10}km</div>
+                </div>
+                
+    `;
+}
+
+function highhHsaleInfo(Resultelem) {
+    return `<div class='main__ResultList__Contents'>
+            휘발유: <span> ${Resultelem.hhPrice == 0 ? '-' : Resultelem.hhPrice} </span>
+            <i class="fa-solid fa-circle-check"></i>&nbsp;
+            경유: <span> ${Resultelem.ggPrice == 0 ? '-' : Resultelem.ggPrice} </span>&nbsp;&nbsp;
+            LPG: <span> ${Resultelem.llPrice == 0 ? '-' : Resultelem.llPrice} </span></div></div></div>`;
+}
+
+function nohHsaleInfo(Resultelem) {
+    return `<div class='main__ResultList__Contents'>
+            휘발유: <span> ${Resultelem.hhPrice == 0 ? '-' : Resultelem.hhPrice} </span>&nbsp;&nbsp;
+            경유: <span> ${Resultelem.ggPrice == 0 ? '-' : Resultelem.ggPrice} </span>&nbsp;&nbsp;
+            LPG: <span> ${Resultelem.llPrice == 0 ? '-' : Resultelem.llPrice} </span></div></div></div>`;
+}
+
+
+function FillSTDetail(ResultArrayElem){
+    const ST_name = document.getElementById("GSTdetail__Name");
+    ST_name.innerHTML = ResultArrayElem.name;
+
+    const ST_Price = document.getElementsByClassName("main__GSTdetail__Contents__Oilprice");
+    var PriceinnerHtml = "";
+    PriceinnerHtml += "<i class='fa-solid fa-gas-pump'></i>";
+    if(ResultArrayElem.hhPrice != 0){
+        PriceinnerHtml += "휘발유 : " + ResultArrayElem.hhPrice + "&nbsp&nbsp";
+    }
+    if(ResultArrayElem.ggPrice != 0) {
+        PriceinnerHtml += "경유 : " + ResultArrayElem.ggPrice; + "&nbsp&nbsp";
+    }
+    if(ResultArrayElem.llPrice != 0) {
+        PriceinnerHtml += "LPG : " + ResultArrayElem.llPrice;
+    }
+    ST_Price[0].innerHTML = PriceinnerHtml;
+
+    const ST_addr = document.getElementById("GSTdetail_addr");
+    ST_addr.innerHTML = `${ResultArrayElem.upperAddrName} ${ResultArrayElem.middleAddrName} ${ResultArrayElem.lowerAddrName}
+                        ${ResultArrayElem.detailAddrName} ${ResultArrayElem.firstNo}
+                        ( ${ResultArrayElem.roadName} ${ResultArrayElem.buildingNo1} )`
+
+    const ST_phone = document.getElementById("GSTdetail_phone");
+    var telNolen = ResultArrayElem.telNo.length;
+    if(ResultArrayElem.telNo.includes('02')) {
+        var psTelNo = ResultArrayElem.telNo.slice(0, 2) + '-' + ResultArrayElem.telNo.slice(2, telNolen-4) + '-' + ResultArrayElem.telNo.slice(telNolen-4, telNolen);
+    }
+    else {
+        var psTelNo = ResultArrayElem.telNo.slice(0, 3) + '-' + ResultArrayElem.telNo.slice(3, telNolen-4) + '-' + ResultArrayElem.telNo.slice(telNolen-4, telNolen);
+    }
+
+    ST_phone.innerHTML = psTelNo;
+
+    const ST_url = document.getElementById("GSTdetail_url");
+    ST_url.innerHTML = `https://www.${ResultArrayElem.stId}.com`;
+
+    const ST_PriceTable = document.getElementsByClassName("main__GSTdetail__Contents__OilPriceTable__Contents");
+    ST_PriceTable[0].innerHTML = "";
+    if(ResultArrayElem.hhPrice != 0){
+        const ST_OilPrice = document.createElement("div");
+        ST_OilPrice.classList.add("main__GSTdetail__Contents__OilPriceTable__Contents__Row");
+        ST_OilPrice.innerHTML = addHpriceTotable(ResultArrayElem);
+        ST_PriceTable[0].append(ST_OilPrice);
+    }
+
+    if(ResultArrayElem.ggPrice != 0) {
+        const ST_OilPrice = document.createElement("div");
+        ST_OilPrice.classList.add("main__GSTdetail__Contents__OilPriceTable__Contents__Row");
+        ST_OilPrice.innerHTML = addGpriceTotable(ResultArrayElem);
+        ST_PriceTable[0].append(ST_OilPrice);
+    }
+
+    if(ResultArrayElem.highHhPrice != 0) {
+        const ST_OilPrice = document.createElement("div");
+        ST_OilPrice.classList.add("main__GSTdetail__Contents__OilPriceTable__Contents__Row");
+        ST_OilPrice.innerHTML = addHHpriceTotable(ResultArrayElem);
+        ST_PriceTable[0].append(ST_OilPrice);
+    }
+
+    if(ResultArrayElem.llPrice != 0) {
+        const ST_OilPrice = document.createElement("div");
+        ST_OilPrice.classList.add("main__GSTdetail__Contents__OilPriceTable__Contents__Row");
+        ST_OilPrice.innerHTML = addLPGpriceTotable(ResultArrayElem);
+        ST_PriceTable[0].append(ST_OilPrice);
+    }
+}
+
+function addHpriceTotable(ResultArrayElem){
+    return `<div class="main__GSTdetail__Contents__OilPriceTable__Contents__Oil">
+            휘발유
+            </div>
+            <div class="main__GSTdetail__Contents__OilPriceTable__Contents__Price">
+                <span id="Contents_HH">${ResultArrayElem.hhPrice}</span>
+            </div>`
+}
+
+function addGpriceTotable(ResultArrayElem){
+    return `<div class="main__GSTdetail__Contents__OilPriceTable__Contents__Oil">
+            경유
+            </div>
+            <div class="main__GSTdetail__Contents__OilPriceTable__Contents__Price">
+                <span id="Contents_HH">${ResultArrayElem.ggPrice}</span>
+            </div>`
+}
+
+function addHHpriceTotable(ResultArrayElem){
+    return `<div class="main__GSTdetail__Contents__OilPriceTable__Contents__Oil">
+            고급 휘발유
+            </div>
+            <div class="main__GSTdetail__Contents__OilPriceTable__Contents__Price">
+                <span id="Contents_HH">${ResultArrayElem.highHhPrice}</span>
+            </div>`
+}
+
+function addLPGpriceTotable(ResultArrayElem){
+    return `<div class="main__GSTdetail__Contents__OilPriceTable__Contents__Oil">
+            LPG
+            </div>
+            <div class="main__GSTdetail__Contents__OilPriceTable__Contents__Price">
+                <span id="Contents_HH">${ResultArrayElem.llPrice}</span>
+            </div>`
+}
+
+function hnHhPrice(Resultelem){
+    return `<div class='main__ResultList__Contents'>
+            휘발유: <span>${Resultelem.hhPrice == 0 ? '-' : Resultelem.hhPrice}</span>
+            <i class="fa-solid fa-circle-check"></i>
+            </div></div></div>`;
+}
+
+function onlyhPrice(Resultelem){
+    return `<div class='main__ResultList__Contents'>
+            휘발유: <span>${Resultelem.hhPrice == 0 ? '-' : Resultelem.hhPrice}</span>
+            </div></div></div>`;
+}
+export {brandLogoMapper, ResetOptionButton, transStId, SelectStIdLogo, highhHsaleInfo, nohHsaleInfo, FillSTDetail, hnHhPrice, onlyhPrice};
diff --git a/frontEnd/public/js/mapView/SearchFunction.js b/frontEnd/public/js/mapView/SearchFunction.js
@@ -0,0 +1,37 @@
+function AdjustLocationToCurLocation(lon, lat){
+    $.ajax({
+        method : "GET",
+        url : "https://apis.openapi.sk.com/tmap/geo/reversegeocoding?version=1&format=json&callback=result&appKey=l7xx7250af6176574c63a12302edf09d020c",
+        async : false,
+        data : {
+            "coordType" : "WGS84GEO",
+            "addressType" : "A10",
+            "lon" : lon,
+            "lat" : lat
+        },
+        success : function(response) {
+            var arrResult = response.addressInfo;
+
+            var lastLegal = arrResult.legalDong.charAt(arrResult.legalDong.length - 1);
+
+            var newRoadAddr = arrResult.city_do + ' ' + arrResult.gu_gun + ' ';
+
+            if (arrResult.eup_myun == '' && (lastLegal == "읍" || lastLegal == "면")) {
+                newRoadAddr += arrResult.legalDong;
+            } 
+            else {
+                newRoadAddr += arrResult.eup_myun;
+            }
+            newRoadAddr += ' ' + arrResult.roadName + ' ' + arrResult.buildingIndex;
+
+            var result = "<div>" + newRoadAddr + "</div>";
+            const curAddr = document.getElementsByClassName("main__CurrentLocationAddress");
+            curAddr[0].innerHTML = result;
+        },
+        error : function(request, error) {
+            console.log("code:" + request.status + ", message:" + request.responseText + ", error:" + error);
+        }
+    });
+}
+
+export {AdjustLocationToCurLocation};