2020-03-26 17:03:53 +00:00
< 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 >
2020-08-24 10:59:52 +00:00
< script src = "../../core/lib/customize.js" > < / script >
2020-03-26 17:03:53 +00:00
< 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)
2020-03-26 19:35:17 +00:00
save()
2020-03-26 17:03:53 +00:00
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;
2020-03-27 20:00:37 +00:00
var filename = 'grocery';
2020-03-26 17:03:53 +00:00
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();
}
2020-03-26 17:20:23 +00:00
function twoChat(n){
if(n< 10 ) return ' 0 ' + n ;
return ''+n;
}
2020-03-26 17:03:53 +00:00
const mainMenu = settings.products.reduce(function(m, p, i){
2020-03-26 17:20:23 +00:00
const name = twoChat(p.quantity)+' '+p.name;
2020-03-26 17:03:53 +00:00
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:[
2020-03-27 20:00:37 +00:00
{name:"grocery.app.js", content:app},
{name:"grocery.img", content:icon, evaluate:true},
{name:"grocery"}
2020-03-26 17:03:53 +00:00
]
});
});
< / script >
< / body >
< / html >
