<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Save: Read</title>
<script>
var currentFname=null;
function populateList(arr){
var ul=document.getElementById("ul");
ul.innerHTML="";
if(arr.length==0){
document.getElementById("nosaves").classList.remove("invisible");
return;
}
document.getElementById("nosaves").classList.add("invisible");
for(var i=0;i<arr.length;i++){
var li=document.createElement("li");
var a=document.createElement("a");
a.appendChild(document.createTextNode(arr[i]));
a.href="javascript:void 0";
a.addEventListener("click",(function(fname,li){return function(){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status!=200){
alert("Error reading save '"+fname+"'\n"+xhr.responseText);
} else {
var l=ul.getElementsByClassName("selected");
for(var i=0;i<l.length;i++)l[i].classList.remove("selected");
li.classList.add("selected");
displaySave(fname,xhr.responseText);
}
}
};
xhr.open("GET","/save/read/file/"+encodeURIComponent(fname));
xhr.send();
};})(arr[i],li));
li.appendChild(a);
ul.appendChild(li);
}
}
function displaySave(fname,text){
var e;
e=document.getElementById("filename");
e.innerHTML=""; e.appendChild(document.createTextNode(fname));
e=document.getElementById("contents");
e.innerHTML=""; e.appendChild(document.createTextNode(text));
document.getElementById("container").classList.remove("invisible");
currentFname=fname;
}
function deleteCurrent(){
if(!currentFname){
alert("No save selected");
return;
}
if(!confirm("Really delete this save?"))return;
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status!=200){
alert("Error deleting saves\n"+xhr.responseText);
} else {
currentFname=null;
document.getElementById("container").classList.add("invisible");
loadSaves();
}
}
};
xhr.open("DELETE","/save/read/file/"+encodeURIComponent(currentFname));
xhr.send();
}
function loadSaves(){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status!=200){
alert("Error listing saves\n"+xhr.responseText);
} else {
populateList(JSON.parse(xhr.responseText));
}
}
};
xhr.open("GET","/save/read/files");
xhr.send();
}
window.addEventListener("load",function(){
loadSaves();
});
</script>
<style>
body {
font-family: sans-serif;
font-size: 16px;
}
#contents {
border: 1px gray solid;
padding: 5px;
display: inline-block;
}
li.selected {
font-weight: bold;
}
.invisible {
display: none;
}
</style>
</head>
<body>
<h2>Save: Read</h2>
<div id="nosaves"><i>No saves found!</i></div>
<ul id="ul"></ul>
<br>
<div id="container" class="invisible">
<b id="filename"></b><br>
<a href="javascript:void 0" onclick="deleteCurrent()">Delete</a><br>
<pre id="contents"></pre>
</div>
</body>
</html>