ch/Caps-Server
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add load, save, and reset functionality

Browse Source
This commit is contained in:
Christoph Hagen 2022-12-20 12:52:31 +01:00
parent 64094faa27
commit 9f22e804ef
3 changed files with 91 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Public/grid.css
View File

@ -38,7 +38,7 @@ body {
display: none; display: none;
} }
#show-color-button { .top-button {
height: 20px; height: 20px;
font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif; font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -47,8 +47,9 @@ body {
padding: 5px 10px; padding: 5px 10px;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
margin-left: 10px;
} }
#show-color-button:hover { .top-button:hover {
background-color: rgb(255, 174, 26); background-color: rgb(255, 174, 26);
} }

6
Public/grid.html
View File

@ -20,7 +20,11 @@
</head> </head>
<body> <body>
<div id="top-bar"> <div id="top-bar">
<div id="show-color-button" onclick="toggleColors()">Toggle colors</div> <div class="top-button" onclick="toggleColors()">Toggle colors</div>
<div class="top-button" onclick="exportCapArrangement()">Save</div>
<label class="top-button" for="caps-upload">Load</label>
<input type="file" id="caps-upload" style="display:none"/>
<div class="top-button" onclick="resetCaps()">Reset</div>
</div> </div>
<div id="image-canvas"> <div id="image-canvas">
<div id="selected-cap-circle"></div> <div id="selected-cap-circle"></div>

83
Public/grid.js
View File

@ -188,3 +188,86 @@ function toggleColors() {
elements[i].style.paddingLeft = padding; elements[i].style.paddingLeft = padding;
} }
} }
function exportCapArrangement() {
const a = document.createElement("a");
a.href = URL.createObjectURL(new Blob([JSON.stringify(capPositions)], {
type: "application/json"
}));
a.setAttribute("download", "caps.json");
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(a.href)
}
function resetCaps() {
// Set each cap in the data
for (let i = 0; i < capPositions.length; i++) {
setCapImageAtPosition(i+1, i);
}
}
function isInt(value) {
if (isNaN(value)) {
return false;
}
var x = parseFloat(value);
return (x | 0) === x;
}
function decodeCapFile(content) {
var caps = JSON.parse(content);
if (!Array.isArray(caps)) {
alert("Invalid file (not a JSON array)");
return;
}
const capCount = capPositions.length;
if (caps.length > capPositions.length) {
alert("Invalid file (Too many entries)");
return;
}
for (let i = 0; i < caps.length; i++) {
const cap = caps[i];
if (!Number.isInteger(cap)) {
alert("Invalid file (Not all integers)");
return;
}
if (cap < 1 || cap > capCount) {
alert("Invalid file (Not all valid cap counts)");
return;
}
// TODO: Check if each id is used once
}
// Set each cap in the data
for (let i = 0; i < caps.length; i++) {
const cap = caps[i];
setCapImageAtPosition(cap, i);
}
// Reset the remaining caps which may be missing from the loaded file
// since they are newer
for (let i = caps.length; i < capCount; i++) {
setCapImageAtPosition(i+1, i);
}
console.log("Cap image loaded")
}
function loadCapArrangementFile(e) {
console.log("File loaded")
var file = e.target.files[0];
if (!file) {
return;
}
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
document.getElementById('caps-upload').value = null;
decodeCapFile(contents);
};
reader.readAsText(file);
}
// Register when user selects a file
document.getElementById('caps-upload')
.addEventListener('change', loadCapArrangementFile, false);