Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature#269 마커 토글 이미지 변경 및 리팩토링 #269

Merged
merged 4 commits into from
Feb 22, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added frontEnd/public/img/marker_HG_sel.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
59 changes: 59 additions & 0 deletions frontEnd/public/js/mapView/DetailTab.js
Original file line number Diff line number Diff line change
@@ -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}
191 changes: 191 additions & 0 deletions frontEnd/public/js/mapView/ExtraFunctions.js
Original file line number Diff line number Diff line change
@@ -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};
37 changes: 37 additions & 0 deletions frontEnd/public/js/mapView/SearchFunction.js
Original file line number Diff line number Diff line change
@@ -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};
Loading