Project-Pro/moodo.pl_geocoding
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Save

Browse Source
This commit is contained in:
Roman Pyrih
2025-12-19 15:43:22 +01:00
parent 8b90b0a704
commit 2db1578d09
1 changed files with 144 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
salony/widget.js
View File

@@ -1,9 +1,9 @@
(function () {
const API_URL = 'https://serwer1852487.home.pl/Geo/api/salony/';
const root = document.getElementById('salony-widget');
if (!root) return;
;(function () {
const API_URL = 'https://serwer1852487.home.pl/Geo/api/salony/'
const root = document.getElementById('salony-widget')
if (!root) return
root.innerHTML = `
root.innerHTML = `
<div class="mapFull">
<div id="map"></div>
</div>
@@ -37,37 +37,36 @@
<h2 class="shopAddress"></h2>
<p>GODZINY OTWARCIA:</p>
<p class="shopHours"></p>
<a class="link" target="_blank">Wskazówki dojazdu</a>
<a class="link googleLink" target="_blank" rel="noopener noreferrer">Wskazówki dojazdu</a>
<a class="link moodoLink" target="_blank" rel="noopener noreferrer">Strona salonu</a>
</div>
</li>
</ul>
</div>
`;
`
injectStyles();
injectStyles()
let map;
let markers = [];
let places = [];
let map
let markers = []
let places = []
var iconB = 'https://moodo.pl/data/include/cms/salony-1/mark2.png'
var iconW = 'https://moodo.pl/data/include/cms/salony-1/markw2.png'
fetch(API_URL)
.then(r => r.json())
.then(data => {
places = data;
initMap();
buildSuggestList();
renderList(data);
renderMarkers(data);
});
fetch(API_URL)
.then((r) => r.json())
.then((data) => {
places = data
initMap()
buildSuggestList()
// renderList(data)
renderMarkers(data)
})
function prepareToCompare(str) {
return convertSpecialsCharacters(str.toString().toLowerCase().trim())
}
function convertSpecialsCharacters(str) {
function convertSpecialsCharacters(str) {
const conversions = {}
conversions.a = 'ą'
conversions.e = 'ę'
@@ -91,101 +90,132 @@
return str
}
// ---------------- MAP ----------------
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: { lat: 52.1, lng: 19.4 },
mapTypeId: 'roadmap'
});
}
function renderMarkers(data) {
data.forEach(place => {
place.shops.forEach(shop => {
if (!shop.lat || !shop.lng) return;
// ---------------- MAP ----------------
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: { lat: 52.1, lng: 19.4 },
mapTypeId: 'roadmap',
})
}
const marker = new google.maps.Marker({
map,
icon: iconB,
position: { lat: +shop.lat, lng: +shop.lng }
});
function renderMarkers(data) {
data.forEach((place) => {
place.shops.forEach((shop) => {
if (!shop.lat || !shop.lng) return
marker.addListener('click', () => {
map.setZoom(16);
map.panTo(marker.getPosition());
filterList(place.name);
});
const marker = new google.maps.Marker({
map,
icon: iconB,
position: { lat: +shop.lat, lng: +shop.lng },
})
markers.push(marker);
});
});
}
marker.shopLat = +shop.lat
marker.shopLng = +shop.lng
// ---------------- LIST ----------------
function renderList(data) {
const list = document.getElementById('shopList');
list.querySelectorAll('.place:not(.forCloning)').forEach(el => el.remove());
marker.addListener('click', () => {
map.setZoom(16)
map.panTo(marker.getPosition())
filterList(place.name)
highlightMarker(marker)
})
let count = 0;
markers.push(marker)
})
})
}
function highlightMarker(selectedMarker) {
markers.forEach((marker) => {
marker.setIcon(marker === selectedMarker ? iconW : iconB)
})
}
data.forEach(place => {
place.shops.forEach(shop => {
const clone = list.querySelector('.forCloning').cloneNode(true);
clone.classList.remove('forCloning');
// ---------------- LIST ----------------
function renderList(data) {
const list = document.getElementById('shopList')
list
.querySelectorAll('.place:not(.forCloning)')
.forEach((el) => el.remove())
clone.querySelector('.lat').textContent = shop.lat;
clone.querySelector('.lng').textContent = shop.lng;
clone.querySelector('.shopAddress').textContent =
`${place.name} - ${shop.address || ''}`;
clone.querySelector('.shopHours').textContent =
shop.open_hours || '—';
let count = 0
clone.querySelector('.link').href = shop.map_url || '#';
data.forEach((place) => {
place.shops.forEach((shop) => {
const clone = list.querySelector('.forCloning').cloneNode(true)
clone.classList.remove('forCloning')
clone.addEventListener('click', (e) => {
map.setZoom(16);
map.panTo({ lat: +shop.lat, lng: +shop.lng });
clone.querySelector('.lat').textContent = shop.lat
clone.querySelector('.lng').textContent = shop.lng
clone.querySelector('.shopAddress').textContent = `${place.name} - ${
shop.address || ''
}`
clone.querySelector('.shopHours').textContent = shop.open_hours || '—'
const ancestor = e.target.closest('.place')
ancestor.classList.add('active')
ancestor.getElementsByTagName('INPUT')[0].checked = true
});
// GOOGLE LINK
const googleLink = clone.querySelector('.googleLink')
if (shop.urlAddress) {
googleLink.href = shop.urlAddress
} else {
googleLink.remove()
}
list.appendChild(clone);
count++;
});
});
// MOODO LINK
const moodoLink = clone.querySelector('.moodoLink')
if (shop.shopUrl) {
moodoLink.href = shop.shopUrl
} else {
moodoLink.remove()
}
document.querySelector('.dynamic').textContent = count;
document.querySelector('.resultQ').classList.add('active');
}
clone.addEventListener('click', (e) => {
map.setZoom(16)
map.panTo({ lat: +shop.lat, lng: +shop.lng })
// ---------------- SEARCH ----------------
function buildSuggestList() {
const ul = document.querySelector('.suggestList');
document
.querySelectorAll('#shopList .place.active')
.forEach((el) => el.classList.remove('active'))
places.forEach(p => {
const li = document.createElement('li');
li.textContent = p.name;
li.onclick = () => {
document.getElementById('tinp').value = p.name;
filterList(p.name);
};
ul.appendChild(li);
});
}
const ancestor = e.target.closest('.place')
ancestor.classList.add('active')
ancestor.getElementsByTagName('INPUT')[0].checked = true
function filterList(val) {
renderList(
places.filter(p =>
p.name.toLowerCase().includes(val.toLowerCase())
)
);
}
const markerToHighlight = markers.find(
(m) => m.shopLat === +shop.lat && m.shopLng === +shop.lng
)
if (markerToHighlight) highlightMarker(markerToHighlight)
})
list.appendChild(clone)
count++
})
})
document.querySelector('.dynamic').textContent = count
document.querySelector('.resultQ').classList.add('active')
}
// ---------------- SEARCH ----------------
function buildSuggestList() {
const ul = document.querySelector('.suggestList')
places.forEach((p) => {
const li = document.createElement('li')
li.textContent = p.name
li.onclick = () => {
document.getElementById('tinp').value = p.name
filterList(p.name)
}
ul.appendChild(li)
})
}
function filterList(val) {
renderList(
places.filter((p) => p.name.toLowerCase().includes(val.toLowerCase()))
)
}
function filterAvailablePlaces(actualVal) {
let listElements = document.querySelectorAll('.suggestList li')
for (const element of listElements) {
@@ -201,7 +231,7 @@
}
}
const searchInp = document.getElementById('tinp')
const searchInp = document.getElementById('tinp')
searchInp.onfocus = function (e) {
e.target.closest('.searchCont').classList.add('active')
}
@@ -211,7 +241,7 @@
targ.closest('.searchCont').classList.remove('active')
}, 200)
})
searchInp.onkeyup = function (e) {
searchInp.onkeyup = function (e) {
if (e.keyCode == 13) {
document.getElementById('search').click()
} else {
@@ -219,15 +249,15 @@
}
}
document.getElementById('search').onclick = () => {
filterList(document.getElementById('tinp').value);
};
document.getElementById('search').onclick = () => {
filterList(document.getElementById('tinp').value)
}
// ---------------- STYLES ----------------
// ---------------- STYLES ----------------
function injectStyles() {
const style = document.createElement('style');
style.innerHTML = `
function injectStyles() {
const style = document.createElement('style')
style.innerHTML = `
#salony-widget *{
margin: 0;
padding: 0;
@@ -423,7 +453,7 @@
font-weight: 300;
font-size: 14px;
}
`;
document.head.appendChild(style);
}
})();
`
document.head.appendChild(style)
}
})()