Bram
/
BangleApps
forked from FOSS/BangleApps
1
0
Fork 0
Code Pull Requests Activity

Update interface.html

master
Ronin0000 2021-09-12 15:38:22 -07:00 committed by GitHub
parent 8c424c4cab
commit 3743a2ce63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 41 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
apps/schoolCalender/interface.html
View File

@ -1,91 +1,49 @@
<html>
<head>
<link rel="stylesheet" href="../../css/spectre.min.css">
<meta charset='utf-8' />
<link href='fullcalendar/main.css' rel='stylesheet' />
<script src='fullcalendar/main.js'></script>
</head>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
#map { z-index: 1; }
#controls {
padding: 10px;
margin: 10px;
border: 1px solid black;
position:absolute;
right:0px;top:0px;
background-color: rgb(255, 255, 255);
z-index: 100;
}
</style>
</head>
<body>
<div id="records"></div>
<script src="../../core/lib/interface.js"></script>
<script>
var domRecords = document.getElementById("records");
function getLapTimes() {
Util.showModal("Loading Lap Times...");
domRecords.innerHTML = "";
Puck.eval('require("Storage").list(/^swatch.*\.json/).map(fn=>({n:fn,d:require("Storage").readJSON(fn,1)}))',lapData=>{
var html = `<div class="container">
<div class="columns">\n`;
lapData.forEach((lap,lapIndex) => {
lap.date = lap.n.substr(7,16).replace("_"," ");
lap.elapsed = lap.d.shift(); // remove first item
html += `
<div class="column col-12">
<div class="card-header">
<div class="card-title h5">${lap.date}</div>
<div class="card-subtitle text-gray">${lap.d.length} Laps, total time ${lap.elapsed}</div>
</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>lap</th>
<th>time</th>
</tr>
</thead>
<tbody>
${ lap.d.map((d,n)=>`<tr><td>${n+1}</td><td>${d}</td></tr>`).join("\n") }
</tbody>
</table>
</div>
<div class="card-footer">
<button class="btn btn-primary" idx="${lapIndex}" task="download">Download</button>
<button class="btn btn-default" idx="${lapIndex}" task="delete">Delete</button>
</div>
</div>
`;
});
if (lapData.length==0) {
html += `
<div class="column col-12">
<div class="card-header">
<div class="card-title h5">No record</div>
<div class="card-subtitle text-gray">No laps recorded</div>
</div>
</div>
`;
}
html += `
<div id="map">
</div>
</div>`;
domRecords.innerHTML = html;
Util.hideModal();
var buttons = domRecords.querySelectorAll("button");
for (var i=0;i<buttons.length;i++) {
buttons[i].addEventListener("click",event => {
var button = event.currentTarget;
var lapIndex = parseInt(button.getAttribute("idx"));
var lap = lapData[lapIndex];
if (!lap) throw new Error("Invalid index!");
var task = button.getAttribute("task");
if (task=="delete") {
Util.showModal("Deleting lap time...");
Util.eraseStorage(lap.n,()=>{
Util.hideModal();
getLapTimes();
});
}
if (task=="download") {
Util.saveCSV(lap.n.slice(0,-5)+".csv", lap.d.map((d,n)=>[n+1,d].join(",")).join("\n"));
}
<div id="controls">
<p>Find the area of interest</p>
<p>If ok, Click <button id="upload" class="btn btn-primary">Upload</button></p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
});
}
})
}
function onInit() {
getLapTimes();
}
</script>
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>