https://www.autostrada-a2.pl/wp-content/themes/theme/js/map-prompt.js

1const stationInfo = document.querySelector('.station-info');
2
3const berlinPoints = document.querySelectorAll('g.direction-berlin');
4const warsawPoints = document.querySelectorAll('g.direction-warszawa');
5
6
7
8async function FetchData(url, domElem, mopName) {
9  const response = await fetch(url);
10  var data = await response.json();
11  const mopData = data.locations.filter(
12    (item) => item.name.toLowerCase() === mopName.toLowerCase()
13  );
14
15  const hasData = mopData.length > 0;
16
17  prepareMarkup(mopData, domElem);
18}
19
20// const appendMOPdata = (container, jsonKey) => {
21//   const FetchDataURL = `${document.location.origin}/wp-content/plugins/a2-locations/example-json.json`;
22
23//   FetchData(FetchDataURL, container, jsonKey);
24// };
25
26const activateMop = (mopName, jsonKey) => {
27  const activeMop = document.querySelector(`.prompt[data-mop="${mopName}"]`);
28  const posJSONdataInner = activeMop.querySelector('.pos-json-data--inner');
29  const mopCloseBtn = activeMop.querySelector('.prompt__header__close');
30  stationInfo.classList.add('active');
31  activeMop.classList.add('active');
32  container = document.querySelector(
33    `div[data-mop='${mopName}'] #locations-info .location-info--content`
34  );
35
36  const FetchDataURL =
37    'https://autostrada-a2.pl/api/api/awsa_service_areas.json';
38  FetchData(FetchDataURL, container, jsonKey);
39
40  //   appendMOPdata(posJSONdataInner, jsonKey);
41
42  mopCloseBtn.addEventListener('click', () => {
43    stationInfo.classList.remove('active');
44    activeMop.classList.remove('active');
45  });
46};
47
48[...berlinPoints, ...warsawPoints].forEach((point) => {
49  point.addEventListener('click', () => {
50    if (point.classList.contains('visible')) {
51      const prepareKey = point.dataset.mop.split(' ').join('-');
52      const keyName = _.deburr(prepareKey);
53      activateMop(point.dataset.mop, keyName);
54    }
55  });
56});
57
58// procenty
59
60function addPercentageToContainer(elementID) {
61  // this function are in loop / map already so are iterable after load page
62  const jsonKey = elementID.slice(5);
63
64  //   jsonKey => 'targowa-gorka'
65  //   elementID => '#tir-targowa-gorka'
66
67  const FetchDataURL =
68    'https://autostrada-a2.pl/api/api/awsa_service_areas.json';
69  const response = fetch(FetchDataURL);
70  var data = response.json();
71
72  const element = data.locations.filter((item) => item.name === jsonKey);
73
74  const domElement = document.querySelector(elementID);
75  domElement.innerHTML = `${element.truckOccupancyPercentege}`;
76}
77
78async function initPercentages() {
79  //   console.log('showPercentages');
80
81  //   1 fetch data
82  const FetchDataURL =
83    'https://autostrada-a2.pl/api/api/awsa_service_areas.json';
84  const response = await fetch(FetchDataURL);
85  var data = await response.json();
86
87  //   2 prepare arr with names
88  const ids = [];
89
90  data.locations.map((item) => {
91    const name = item.name.toLowerCase();
92    const id = `#tir-${name}`;
93    ids.push(id);
94    return ids;
95  });
96
97  //   3 add data to ids
98  ids.map((elementID) => {
99    // id = '#tir-ladek'
100    const jsonKey = elementID.slice(5);
101    console.log(jsonKey.toLowerCase());
102    const element = data.locations.filter(
103      (item) => item.name.toLowerCase() === jsonKey.toLowerCase()
104    );
105    const domElement = document.querySelector(elementID);
106
107    if (domElement) {
108      domElement.classList.add('visible');
109      domElement.innerHTML = `${element[0].truckOccupancyPercentege}%`;
110    }
111  });
112}
113
114window.addEventListener('DOMContentLoaded', () => {
115  initPercentages();
116});