Browse Source

Error and caching messages

master
Skyweb 2 months ago
parent
commit
9cd3dcf37f
  1. 9
      css/styles.css
  2. 1
      index.html
  3. 54
      js/scripts.js

9
css/styles.css

@ -63,6 +63,15 @@ span {
opacity: 0;
}
#message {
position: fixed;
border: 1px solid white;
top: 0;
left: 0;
opacity: 0;
padding: 5px;
}
.img-zoom-lens {
position: absolute;
width: 80px;

1
index.html

@ -33,6 +33,7 @@
</div>
</div>
<div id="zoom"></div>
<div id="message"></div>
<script src="js/scripts.js"></script>
</body>

54
js/scripts.js

@ -16,6 +16,8 @@ var playpause = document.getElementById("playpause");
var previous = document.getElementById("previous");
var next = document.getElementById("next");
var zoom = document.getElementById("zoom");
var message = document.getElementById("message");
var beginDate = new Date(2007, 7, 09); // lmao august is the 7th month of the year
var endDate = new Date();
endDate.setDate(endDate.getDate() - 1);
@ -27,6 +29,8 @@ var lens = document.createElement("DIV");
map.parentElement.insertBefore(lens, map);
lens.setAttribute("class", "img-zoom-lens");
getMap(slider.value);
var messageOpacityTimer;
var messageLoadingTimer;
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
@ -79,38 +83,68 @@ next.onclick = function() {
};
function getMap(index) {
var currentDate = new Date(beginDate.addDays(1 + parseInt(index)));
dateLabel.innerHTML = currentDate.getFullYear() + "-" + String(currentDate.getMonth() + 1).padStart(2, '0') + "-" + String(currentDate.getDate()).padStart(2, '0');
if (indexArray[index] === undefined) {
document.body.style.cursor = 'progress';
message.style.opacity = 1;
var countThing = 0;
var messageLoadingTimer = setInterval(function() {
switch (countThing) {
case 0:
message.innerHTML = "Caching new map.";
break;
case 1:
message.innerHTML = "Caching new map..";
break;
case 2:
message.innerHTML = "Caching new map..";
countThing = 0;
break;
}
}, 300);
var xhr = new XMLHttpRequest();
xhr.open("POST", "getMap.php");
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function(e) {
if (xhr.readyState === 4) {
document.body.style.cursor = 'default';
if (xhr.status === 200) {
map.src = xhr.responseText;
zoom.style.backgroundImage = "url('" + xhr.responseText + "')";
indexArray[index] = xhr.responseText;
getMapSuccess(index);
} else {
console.error(xhr.statusText);
indexArray[index] = "404";
getmapError(index)
}
}
};
xhr.onerror = function(e) {
indexArray[index] = "404";
console.error(xhr.statusText);
getmapError(index)
};
xhr.send("index=" + index);
} else {
if (indexArray[index] !== "404") {
map.src = indexArray[index];
zoom.style.backgroundImage = "url('" + indexArray[index] + "')";
getMapSuccess(index);
}
}
}
var currentDate = new Date(beginDate.addDays(1 + parseInt(index)));
dateLabel.innerHTML = currentDate.getFullYear() + "-" + String(currentDate.getMonth() + 1).padStart(2, '0') + "-" + String(currentDate.getDate()).padStart(2, '0');
function getMapSuccess(index) {
clearInterval(messageLoadingTimer);
map.src = indexArray[index];
zoom.style.backgroundImage = "url('" + indexArray[index] + "')";
}
function getmapError(index) {
clearInterval(messageLoadingTimer);
indexArray[index] = "404";
document.body.style.cursor = 'default';
message.innerHTML = "Error getting the map for " + dateLabel.innerHTML + ", might not exist";
if (messageOpacityTimer) {
clearTimeout(messageOpacityTimer);
}
messageOpacityTimer = setTimeout(function() { message.style.opacity = 0; }, 7000);
}
slider.oninput = function() {

Loading…
Cancel
Save