mirror of https://github.com/espruino/BangleApps
164 lines
4.6 KiB
HTML
164 lines
4.6 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<link rel="stylesheet" href="../../css/spectre.min.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h4>List of products</h4>
|
||
|
|
<table class="table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>name</th>
|
||
|
|
<th>quantity</th>
|
||
|
|
<th>actions</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="products">
|
||
|
|
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<br><br>
|
||
|
|
<h4>Add a new product</h4>
|
||
|
|
<form id="add_product_form">
|
||
|
|
<div class="columns">
|
||
|
|
<div class="column col-4 col-xs-12">
|
||
|
|
<input class="form-input input-sm" type="text" id="add_product_name" placeholder="Name">
|
||
|
|
</div>
|
||
|
|
<div class="column col-4 col-xs-12">
|
||
|
|
<input class="form-input input-sm" value="1" type="number" id="add_product_quantity" placeholder="Quantity">
|
||
|
|
</div>
|
||
|
|
<div class="column col-4 col-xs-12">
|
||
|
|
<button id="add_product_button" class="btn btn-primary btn-sm">Add</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
<br><br>
|
||
|
|
<button id="reset" class="btn btn-error">Reset</button> <button id="upload" class="btn btn-primary">Upload</button>
|
||
|
|
|
||
|
|
<script src="../../lib/customize.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var products = []
|
||
|
|
try{
|
||
|
|
var stored = localStorage.getItem('grocery-product-list')
|
||
|
|
if(stored) products = JSON.parse(stored);
|
||
|
|
}catch(e){}
|
||
|
|
|
||
|
|
var $name = document.getElementById('add_product_name')
|
||
|
|
var $form = document.getElementById('add_product_form')
|
||
|
|
var $button = document.getElementById('add_product_button')
|
||
|
|
var $quantity = document.getElementById('add_product_quantity')
|
||
|
|
var $list = document.getElementById('products')
|
||
|
|
var $reset = document.getElementById('reset')
|
||
|
|
|
||
|
|
renderProducts()
|
||
|
|
|
||
|
|
$reset.addEventListener('click', reset)
|
||
|
|
|
||
|
|
$form.addEventListener('submit', event => {
|
||
|
|
event.preventDefault()
|
||
|
|
|
||
|
|
var name = $name.value.trim()
|
||
|
|
if(!name) return;
|
||
|
|
|
||
|
|
var quantity = parseInt($quantity.value)
|
||
|
|
|
||
|
|
products.push({
|
||
|
|
name, quantity,
|
||
|
|
ok: false
|
||
|
|
})
|
||
|
|
|
||
|
|
renderProducts()
|
||
|
|
$name.value = ''
|
||
|
|
$quantity.value = 1
|
||
|
|
save()
|
||
|
|
})
|
||
|
|
|
||
|
|
function save(){
|
||
|
|
localStorage.setItem('grocery-product-list',JSON.stringify(products));
|
||
|
|
}
|
||
|
|
|
||
|
|
function reset(){
|
||
|
|
products = []
|
||
|
|
save()
|
||
|
|
renderProducts()
|
||
|
|
}
|
||
|
|
|
||
|
|
function removeProduct(index){
|
||
|
|
products = products.filter((p,i) => i!==index)
|
||
|
|
save()
|
||
|
|
renderProducts()
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderProducts(){
|
||
|
|
$list.innerHTML = ''
|
||
|
|
products.forEach((product,index) => {
|
||
|
|
var $product = document.createElement('tr')
|
||
|
|
|
||
|
|
$product.innerHTML = `<td>${product.name}</td><td>${product.quantity}</td><td><button class="btn btn-error" onclick="removeProduct(${index})">remove</button></td>`
|
||
|
|
$list.appendChild($product)
|
||
|
|
})
|
||
|
|
|
||
|
|
$name.focus()
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById("upload").addEventListener("click", function() {
|
||
|
|
|
||
|
|
|
||
|
|
var app = `
|
||
|
|
var newTime = ${Date.now()}
|
||
|
|
var products = ${JSON.stringify(products)}
|
||
|
|
var newTime = newTime;
|
||
|
|
var filename = 'grocery';
|
||
|
|
var settings = require("Storage").readJSON(filename,1)|| null;
|
||
|
|
function getSettings(){
|
||
|
|
return {
|
||
|
|
products : products,
|
||
|
|
date: newTime
|
||
|
|
};
|
||
|
|
}
|
||
|
|
if(!settings || !settings.date || settings.date < newTime){
|
||
|
|
settings = getSettings();
|
||
|
|
Bangle.buzz(500);
|
||
|
|
}
|
||
|
|
function updateSettings() {
|
||
|
|
require("Storage").writeJSON(filename, settings);
|
||
|
|
Bangle.buzz();
|
||
|
|
}
|
||
|
|
function twoChat(n){
|
||
|
|
if(n<10) return '0'+n;
|
||
|
|
return ''+n;
|
||
|
|
}
|
||
|
|
const mainMenu = settings.products.reduce(function(m, p, i){
|
||
|
|
const name = twoChat(p.quantity)+' '+p.name;
|
||
|
|
m[name] = {
|
||
|
|
value: p.ok,
|
||
|
|
format: v => v?'[x]':'[ ]',
|
||
|
|
onchange: v => {
|
||
|
|
settings.products[i].ok = v;
|
||
|
|
updateSettings();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return m;
|
||
|
|
}, {
|
||
|
|
'': { 'title': 'Grocery list' }
|
||
|
|
});
|
||
|
|
mainMenu['< Back'] = ()=>{load();};
|
||
|
|
E.showMenu(mainMenu);
|
||
|
|
`;
|
||
|
|
|
||
|
|
var icon = `require("heatshrink").decompress(atob("mEwxH+AH4A/AH4AQ0QACF1nGAAIxpFoYwqFwwwnRggwGB4eFAggACLzwHCMAeF1WGAgOGw2x2IGCLzYGEF4YpBwotCFwJfWFwo1GSAYtBAIIABRq4vFMhAwBzoAFdzIuKAAOc4IAGGC4qEMZOiF44wXFxovleBYvIGCwmB0WjE4V/AgfG1IvCzujFQOjwoECF6WFwovBDYOFEwN/AgIwCAgOFBwYrBBAQEBzodCF6AAHww1CBpIODAAYvRDAWG2IEBAYYJFBxICCF6Ox1WxAAQfBAYQlCAAIOJAQIvUADQvn1WGR4RfbP4gAFBwgFCF7a5EdwQADF46/cL9wAQF94AGF85bB1TvmF47vdJ4bvFF8qPRFgLv/L7jPCaQq/fYYrvgJgoAGd/7v/F/4v/F5oAdF54weFyAA/AH4A3A="))`;
|
||
|
|
sendCustomizedApp({
|
||
|
|
storage:[
|
||
|
|
{name:"grocery.app.js", content:app},
|
||
|
|
{name:"grocery.img", content:icon, evaluate:true},
|
||
|
|
{name:"grocery"}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|