Merge pull request #153 from brainfart-be/master

App: Grocery
2020-03-30 08:48:56 +01:00 · 2020-03-30 08:48:56 +01:00 · e936aecf84
parent 04c35b1aa7 c76280a2d5
commit e936aecf84
3 changed files with 177 additions and 0 deletions
--- a/apps.json
+++ b/apps.json
@ -824,6 +824,20 @@
      {"name":"widid.wid.js","url":"widget.js"}
    ]
  },
+  { 
+    "id": "grocery",
+    "name": "Grocery",
+    "icon": "grocery.png",
+    "version":"0.01",
+    "description": "Simple grocery list - Display a list of product and track if you already put them in your cart.",
+    "tags": "tool,outdoors",
+    "type": "app",
+    "custom":"grocery.html",
+    "storage": [
+      {"name":"grocery"},
+      {"name":"grocery.app.js"}
+    ]
+  },
  { "id": "marioclock",
    "name": "Mario Clock",
    "icon": "marioclock.png",
--- a/apps/grocery/grocery.html
+++ b/apps/grocery/grocery.html
@ -0,0 +1,163 @@
+<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>
--- a/apps/grocery/grocery.png
+++ b/apps/grocery/grocery.png