1
0
Fork 0
BangleApps/apps/worldclock/custom.html

77 lines
2.5 KiB
HTML

<html>
<head>
<link rel="stylesheet" href="../../css/spectre.min.css">
</head>
<body>
<p>You can add up to 4 timezones. Please give a name and UTC offset in hours.
If you want less than 4, clear the checkbox to the left.</p>
<table id="worldclock-offsets">
<tr>
<th>Enabled?</th>
<th>Name</th>
<th>UTC Offset</th>
</tr>
</table>
<p>Click <button id="upload" class="btn btn-primary">Upload</button></p>
<script src="../../core/lib/customize.js"></script>
<script>
var offsets=[];
try{
var stored = localStorage.getItem('worldclock-offset-list')
if(stored) offsets = JSON.parse(stored);
if (!offsets || offsets.length!=4) {
throw "Offsets invalid";
}
} catch(e){
offsets=[
[true,"Tokyo",9],
[true,"Delhi",5.5],
[true, "London",0],
[true, "São Paulo",-3],
];
}
console.log(offsets);
var tbl=document.getElementById("worldclock-offsets");
for (var i=0; i<4; i++) {
var $offset = document.createElement('tr')
$offset.innerHTML = `
<td><input type="checkbox" id="enabled_${i}" ${offsets[i][0]? "checked" : ""}></td>
<td><input type="text" id="name_${i}" value="${offsets[i][1]}"></td>
<td><input type="number" id="offset_${i}" value="${offsets[i][2]}"></td>`
tbl.append($offset);
}
// When the 'upload' button is clicked...
document.getElementById("upload").addEventListener("click", function() {
var storage_offsets=[];
var app_offsets=[];
for (var i=0; i<4; i++) {
var checked=document.getElementById("enabled_"+i).checked;
var name=document.getElementById("name_"+i).value;
var offset=document.getElementById("offset_"+i).value;
if (checked) {
app_offsets.push([name,offset]);
}
storage_offsets.push([checked,name,offset]);
}
console.log(storage_offsets);
console.log(app_offsets);
localStorage.setItem('worldclock-offset-list',JSON.stringify(storage_offsets));
// send finished app (in addition to contents of app.json)
sendCustomizedApp({
storage:[
{name:"worldclock.settings.json", content:JSON.stringify(app_offsets)},
]
});
});
</script>
</body>
</html>