mirrors/seafoam
1
0
Fork 0
mirror of https://github.com/DoomKitty87/seafoam.git synced 2025-02-06 18:25:09 +01:00
Code Issues Projects Releases Packages Wiki Activity

most frontend in place for saving

Browse source
This commit is contained in:
DoomKitty87 2023-08-21 22:56:48 -07:00
parent 47c3e522c8
commit 67779d47d9
3 changed files with 100 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web-app/seafoam/src-tauri/tauri.conf.json
View file

@ -20,7 +20,7 @@
"fs": {
"all":true,
"scope": [
"$RESOURCE/assets/*"
"$RESOURCE/assets/*", "$APP/*"
]
},
"path": {

54
web-app/seafoam/src/index.html
View file

@ -11,7 +11,7 @@
<img class="icon" src="assets/seafoamarmadillo.webp">
<h1 class="title">seafoam</h1>
<div class="menubutton" onclick="resetMenu()"><h2 class="buttontext">GENERATE</h2></div>
<div class="menubutton"><h2 class="buttontext">ROUTES</h2></div>
<div class="menubutton" onclick="routeMenu()""><h2 class="buttontext">ROUTES</h2></div>
</div>
<div class="main">
<div class="menua">
@ -134,12 +134,18 @@
</div>
<div class="menub">
<div class="menuscreen" id="menub1">
<div class="infobox">
<h1 class="infotitle">ROUTES</h1>
<h3 class="infodesc">Click on a saved route to view it.</h3>
<div class="routesinfo">
<div class="routeviewer">
<h2 id="routeviewerstats" class="routestats"></h2>
<div class="routebox"><p id="routeviewerpath" class="routeoutput"></p></div>
</div>
<h1 class="routestitle">ROUTES</h1>
<h3 class="routesdesc">Click on a saved route to view it.</h3>
</div>
<div class="routebox">
<p class="routeoutput">Route loading...</p>
<div class="routeviewbox">
<!--<div class="route">
<h3 class="routetitle">Route title</h3>
</div>-->
</div>
</div>
</div>
@ -413,14 +419,17 @@
var output = generateRoute(activeSquare, allowedOOB, priority, waypointNumber, angleEnable, angle22, angle33);
}
async function resetMenu() {
document.getElementById("menub1").style.opacity = 0;
document.getElementById("menua" + (currentStep)).style.opacity = 0;
document.getElementsByClassName("progressitem")[currentStep - 1].setAttribute("data-active", "false");
document.getElementsByClassName("dot")[currentStep - 1].setAttribute("data-active", "false");
await new Promise(r => setTimeout(r, 500));
document.getElementById("menub1").style.display = "none";
document.getElementById("menua" + (currentStep)).style.display = "none";
currentStep = 1;
document.getElementById(activeSquare).style.backgroundColor = "#0e141b";
if (activeSquare != -1) document.getElementById(activeSquare).style.backgroundColor = "#0e141b";
activeSquare = -1;
document.getElementsByClassName("progressbar")[0].style.opacity = 1;
document.getElementById("menua" + (currentStep)).style.display = "block";
document.getElementById("menua" + (currentStep)).style.opacity = 1;
document.getElementsByClassName("progressitem")[currentStep - 1].setAttribute("data-active", "true");
@ -438,6 +447,19 @@
document.getElementsByClassName("dot")[step - 1].setAttribute("data-active", "true");
if (step == 4) getRoute();
}
async function routeMenu() {
document.getElementsByClassName("progressbar")[0].style.opacity = 0;
document.getElementById("menua" + (currentStep)).style.opacity = 0;
document.getElementsByClassName("progressitem")[currentStep - 1].setAttribute("data-active", "false");
document.getElementsByClassName("dot")[currentStep - 1].setAttribute("data-active", "false");
await new Promise(r => setTimeout(r, 500));
document.getElementById("menua" + (currentStep)).style.display = "none";
currentStep = 1;
if (activeSquare != -1) document.getElementById(activeSquare).style.backgroundColor = "#0e141b";
activeSquare = -1;
document.getElementById("menub1").style.display = "block";
document.getElementById("menub1").style.opacity = 1;
}
function moveStep() {
if (currentStep == 1 && activeSquare == -1) return;
if (currentStep == 2) waypointNumber = document.getElementById("wpform").value;
@ -454,6 +476,24 @@
currentStep++;
updateMenu(currentStep);
}
function changeDisplayedRoute(route) {
document.getElementById("routeviewerpath").innerHTML = route.path;
document.getElementById("routeviewerstats").innerHTML = `Waypoints: ${route.waypoints}<br>Density: ${route.density}<br>Distance: ${route.distance}`;
}
function loadSavedRoutes() {
//Get list of saved routes from file
routes = [];
for (const route in routes) {
const routeBox = document.createElement("div");
routeBox.className = "route";
const routeTitle = document.createElement("h3");
routeTitle.className = "routetitle";
routeTitle.innerHTML = route.title;
routeBox.appendChild(routeTitle);
routeBox.parentElement = document.getElementById("routebox");
routeBox.onclick = changeDisplayedRoute(route);
}
}
</script>
</body>
</html>

52
web-app/seafoam/src/styles.css
View file

@ -63,6 +63,7 @@ body {
position: relative;
left: 40%;
width: 30rem;
transition: opacity 0.5s;
}
.progressitem {
@ -307,3 +308,54 @@ label.anglesettings {
font-weight: 300;
margin-top: 1rem;
}
.routesinfo {
position: relative;
left: 20rem;
width: 40rem;
margin-top: 5rem;
}
.routestitle {
font-size: 3rem;
font-weight: 500;
color: #ffffff;
margin-top: 1rem;
margin-bottom: 0;
}
.routesdesc {
font-size: 0.8rem;
font-weight: 300;
color: #ffffff;
}
.routeviewbox {
position: relative;
left: 20rem;
width: 50rem;
height: 40rem;
overflow: auto;
}
.routetitle {
font-size: 1.5rem;
font-weight: 500;
color: #ffffff;
margin-top: 1rem;
margin-bottom: 0;
}
.route {
width: 40rem;
padding: 1rem;
margin-top: 2rem;
background-color: #0e141b;
}
.routeviewer {
position: absolute;
left: 50rem;
width: 40rem;
height: 40rem;
}