Skip to content

Commit

Permalink
Merge pull request #8 from vekejsn/misc
Browse files Browse the repository at this point in the history 
Insert title here
  • Loading branch information
@vekejsn
vekejsn authored Jun 3, 2024
2 parents 43ebc02 + 10798f7 commit cfcb165
Show file tree
Hide file tree
Showing 8 changed files with 624 additions and 612 deletions.
17 changes: 14 additions & 3 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,20 +164,31 @@
margin: 0 !important;
}

span.delayText {
.delayText {
font-weight: bold;
color: red;
}

.sidebar {
[sidebarjs-container] {
overflow-y: auto;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}

.sidebar::-webkit-scrollbar {
display: none;
}
}

.sidebar-body, .sidebar-header {
padding: .6rem .6rem;
}

.sidebar-header {
display:flex;
flex-direction:column;
background-color:#004B87;
color:white;
}

.overlay {
width: 100vw;
Expand Down
366 changes: 187 additions & 179 deletions js/hz.js
View file

Large diffs are not rendered by default.

221 changes: 99 additions & 122 deletions js/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,7 @@ var TRAIN_UIC_IMAGES = [];
window.onload = async () => {
let height = await $(document).height();
await $('#map').height(height);
let keys = [
'M00lVs5nAPWxVFr6mbWo'
]
// check if we have a cookie for maptiler key
let map_cookie = document.cookie.split(';').find(row => row.trim().startsWith('mapper_maptiler_key='));
if (map_cookie) {
let key = map_cookie.split('=')[1];
keys = key;
} else {
// pick a random key
keys = keys[Math.floor(Math.random() * keys.length)];
// set cookie
document.cookie = `mapper_maptiler_key=${keys}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
}

map = new maplibregl.Map({
container: 'map',
style: 'https://tiles.derp.si/maps/streets-v2/style.json',
Expand All @@ -41,13 +28,6 @@ window.onload = async () => {
trackResize: true,
});

/*for (let provider in PROVIDERS) {
map.loadImage(`assets/marker/optimized/${provider}.png`, function (error, image) {
if (error) throw error;
if (!map.hasImage(provider)) map.addImage(provider, image);
});
}*/

map.addControl(new maplibregl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
Expand All @@ -58,59 +38,6 @@ window.onload = async () => {
map.addControl(new maplibregl.NavigationControl());

map.on('load', function () {
//
// 3D buildings
//

// Insert the layer beneath any symbol layer.
var layers = map.getStyle().layers;

var labelLayerId;
for (var i = 0; i < layers.length; i++) {
if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
labelLayerId = layers[i].id;
break;
}
}


map.addLayer(
{
'id': '3d-buildings',
'source': 'openmaptiles',
'source-layer': 'building',
'filter': ['==', 'extrude', 'true'],
'type': 'fill-extrusion',
'minzoom': 15,
'paint': {
'fill-extrusion-color': '#aaa',

// use an 'interpolate' expression to add a smooth transition effect to the
// buildings as the user zooms in
'fill-extrusion-height': [
'interpolate',
['linear'],
['zoom'],
15,
0,
15.05,
['get', 'height']
],
'fill-extrusion-base': [
'interpolate',
['linear'],
['zoom'],
15,
0,
15.05,
['get', 'min_height']
],
'fill-extrusion-opacity': 0.6
}
},
labelLayerId
);

// custom rail styling:
for (var i = 0; i < layers.length; i++) {
if (layers[i].type === 'line' && layers[i].id.endsWith('major_rail')) {
Expand All @@ -120,11 +47,13 @@ window.onload = async () => {
}

}); // end: load

// get vocabulary
VOCABULARY = await fetch('json/vocabulary.json').then(response => response.json());
ACTIVE_VOCABULARY = VOCABULARY.hr;
TRAIN_COMPOSITIONS = await fetch('json/trains.json').then(response => response.json());
TRAIN_UIC_IMAGES = await fetch('https://api.map.vlak.si/tools/units/units').then(response => response.json()).then(data => data.data);

SIDEBAR = new SidebarJS.SidebarElement({
position: 'left',
open: true,
Expand All @@ -137,6 +66,7 @@ window.onload = async () => {
document.querySelector('[sidebarjs-container]').innerHTML = '';
}
});

// check if we have a cookie called 'new_mapper_language_preference'
let cookie = document.cookie.split(';').find(row => row.trim().startsWith('new_mapper_language_preference='));
if (cookie) {
Expand All @@ -156,65 +86,80 @@ window.onload = async () => {
document.cookie = `new_mapper_language_preference=en`;
}
}

SIDEBAR.open();

// check if we have a cookie named 'new_mapper_disclaimer_shown'
cookie = document.cookie.split(';').find(row => row.trim().startsWith('new_mapper_disclaimer_shown='));
if (!cookie) {
// show disclaimer
document.cookie = `new_mapper_disclaimer_shown=${true}`;
showDisclaimers();
}

// iterate over the VOCABULARY and create buttons for language selection, as div cards
let language_divs = [];
for (let language in VOCABULARY) {
if (language == 'bs') continue; // skip english
let div = document.createElement('button');
div.classList.add('btn', 'btn-outline-primary');
div.style = 'cursor: pointer; text-align:center; width: 100%; margin:.2rem;';
div.innerHTML = `<img src="${VOCABULARY[language].language_image}"/> ${VOCABULARY[language].language_name}`;
div.addEventListener('click', () => {
const $btn = document.createElement('button');
$btn.classList.add('btn', 'btn-outline-primary', 'w-100');
$btn.style = 'margin: 0.2rem';
$btn.innerHTML = `<img src="${VOCABULARY[language].language_image}"/> ${VOCABULARY[language].language_name}`;
$btn.addEventListener('click', () => {
document.cookie = `new_mapper_language_preference=${language}`;
ACTIVE_VOCABULARY = VOCABULARY[language];
// refresh the sidebar
SIDEBAR.close();
});
language_divs.push(div);
language_divs.push($btn);
}

let sidebar = document.querySelector('[sidebarjs-container]');

let card = document.createElement('div');
card.style = "border-radius: 0; border: 0;";
card.classList.add('card');

let card_header = document.createElement('div');
card_header.classList.add('card-header', 'text-center', 'font-weight-bold', 'bg-primary', 'text-white');
card_header.style = "border-radius: 0; border: 0;";
card_header.innerHTML = `<h5>Mapper</h5>`;

let card_body = document.createElement('div');
card_body.classList.add('card-body');
card_body.innerHTML = `<p>${ACTIVE_VOCABULARY.hello_and_welcome}</p>
<hr>
<h6>${ACTIVE_VOCABULARY.select_language}</h6>`;
card_body.innerHTML = /*html*/`
<p>${ACTIVE_VOCABULARY.hello_and_welcome}</p>
<hr>
<h6>${ACTIVE_VOCABULARY.select_language}</h6>
`;

for (let div of language_divs) {
card_body.appendChild(div);
}

let text_div = document.createElement('div');
text_div.innerHTML += `<hr>
<h6>${ACTIVE_VOCABULARY.other_services}</h6>
<button class="btn btn-outline-primary" style="cursor: pointer; text-align: center; width: 100%; margin: 0.2rem;" onclick="window.location.href = './hzArchive.html'">
HŽ Archive
</button>
<hr>
<h6>${ACTIVE_VOCABULARY.disclaimer}</h6>
<button class="btn btn-outline-primary" style="cursor: pointer; text-align: center; width: 100%; margin: 0.2rem;" onclick="showDisclaimers()">
${ACTIVE_VOCABULARY.read_more}
</button>
<hr>
<button class="btn btn-outline-primary" style="cursor: pointer; text-align: center; width: 100%; margin: 0.2rem;" onclick='window.location.href="mailto:[email protected]"'>
${ACTIVE_VOCABULARY.contact_us}
</button>
<hr>
<h6>${ACTIVE_VOCABULARY.changelog}</h6>
<code>${VOCABULARY['en'].changelog_details}</code>`;
text_div.innerHTML += /*html*/`<hr>
<h6>${ACTIVE_VOCABULARY.other_services}</h6>
<button class="btn btn-outline-primary w-100" style="margin: 0.2rem;" onclick="window.location.href = './hzArchive.html'">
HŽ Archive
</button>
<hr>
<h6>${ACTIVE_VOCABULARY.disclaimer}</h6>
<button class="btn btn-outline-primary w-100" style="margin: 0.2rem;" onclick="showDisclaimers()">
${ACTIVE_VOCABULARY.read_more}
</button>
<hr>
<button class="btn btn-outline-primary w-100" style="margin: 0.2rem;" onclick='window.location.href="mailto:[email protected]"'>
${ACTIVE_VOCABULARY.contact_us}
</button>
<hr>
<h6>${ACTIVE_VOCABULARY.changelog}</h6>
<code>${VOCABULARY['en'].changelog_details}</code>
`;

card_body.appendChild(text_div);

card.appendChild(card_header);
Expand All @@ -234,28 +179,30 @@ async function showDisclaimers() {
SIDEBAR.close();
// generate a modal, which will be shown immediately to the user
let modal = document.createElement('div');
modal.innerHTML = `<div class="modal fade" id="disclaimerModal" tabindex="100" role="dialog" aria-labelledby="disclaimerModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="disclaimerModalLabel">${ACTIVE_VOCABULARY.disclaimer}</h5>
<button type="button" class="close btn" data-dismiss="modal" aria-label="Close" onclick="SIDEBAR.open()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>${ACTIVE_VOCABULARY.disclaimers.explanation}</p>
<hr>
<p>${ACTIVE_VOCABULARY.disclaimers.not_accurate_contact}</p>
<hr>
<p>${ACTIVE_VOCABULARY.disclaimers.cookies}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="SIDEBAR.open()">${ACTIVE_VOCABULARY.close}</button>
</div>
</div>
</div>
</div>`;
modal.innerHTML = /*html*/`
<div class="modal fade" id="disclaimerModal" tabindex="100" role="dialog" aria-labelledby="disclaimerModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="disclaimerModalLabel">${ACTIVE_VOCABULARY.disclaimer}</h5>
<button type="button" class="close btn" data-dismiss="modal" aria-label="Close" onclick="SIDEBAR.open()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>${ACTIVE_VOCABULARY.disclaimers.explanation}</p>
<hr>
<p>${ACTIVE_VOCABULARY.disclaimers.not_accurate_contact}</p>
<hr>
<p>${ACTIVE_VOCABULARY.disclaimers.cookies}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="SIDEBAR.open()">${ACTIVE_VOCABULARY.close}</button>
</div>
</div>
</div>
</div>
`;
document.body.appendChild(modal);

$('#disclaimerModal').modal('show');
Expand All @@ -270,3 +217,33 @@ $(window).resize(function () {
let height = $(document).height();
$('#map').height(height);
});


function vagonweb_proxy(url) {
return url.replace("https://www.vagonweb.cz/", "https://api.map.vlak.si/");
}

function showSidebar(options) {
let sidebar = document.querySelector('[sidebarjs-container]');
sidebar.innerHTML = options.content;

// add exit button
let exitButton = document.createElement('span');
exitButton.style = "position: absolute; top: 0; right: 0; padding: 0.5rem; cursor: pointer; color:white;";
exitButton.innerHTML = `<i class="bi bi-x"></i>`;
exitButton.addEventListener('click', () => {
SIDEBAR.close();
});
sidebar.appendChild(exitButton);
sidebar.style.width = '100%';
SIDEBAR.open();

return options;
}

// Common functions

function formatUICNumber(uic) {
if (uic.length < 12) return uic;
return `${uic.substr(0, 2)} ${uic.substr(2, 2)} <u>${uic.substr(0, 2) > 90 ? uic.substr(4, 4) : `${uic.substr(4, 2)}-${uic.substr(6, 2)}`}-${uic.substr(8, 3)}</u> ${uic.substr(11, 1)}`;
}
Loading

0 comments on commit cfcb165

Please sign in to comment.