mirror of https://github.com/espruino/BangleApps
contacts: Inital version of contacts app.
Pavel Machek
parent
d7756ee175
commit
2c64fb51ae
|
|
@ -0,0 +1 @@
|
|||
0.01: New App!
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
# Contacts
|
||||
|
||||
This app provides a common way to set up the `contacts.json` file.
|
||||
|
||||
## Contacts JSON file
|
||||
|
||||
When the app is loaded from the app loader, a file named
|
||||
`contacts.json` is loaded along with the javascript etc. The file
|
||||
has the following contents:
|
||||
|
||||
```
|
||||
[
|
||||
{
|
||||
"name":"NONE"
|
||||
},
|
||||
{
|
||||
"name":"First Last",
|
||||
"number":"123456789",
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## Contacts Editor
|
||||
|
||||
Clicking on the download icon of `Contents` in the app loader invokes
|
||||
the contact editor. The editor downloads and displays the current
|
||||
`contacts.json` file. Clicking the `Edit` button beside an entry
|
||||
causes the entry to be deleted from the list and displayed in the edit
|
||||
boxes. It can be restored - by clicking the `Add` button.
|
||||
|
|
@ -0,0 +1 @@
|
|||
require("heatshrink").decompress(atob("mEwwcBkmSpIC/AVsJCJ+AQaCZBCOeACKGQLKGQBA0ggARPJ4IRsYo0ggR9IoAIGiRiIpEECJsAiACBBYoRGpEAI4JBFI47CBLIRlDHYJrGYQIRCwQICL4MQOgx9GboUSeQ4RFwAFBiSGHCIo4CiVIWZyPICP4RaRIQROgARHdIwICoIIFkDpGBAKqHgGACI0AyVIggIDoEEMQ1ICINJCIj4CfwIREBwUgQYYOCfYoFDJQKDFCIopEO4RoDKAqJHRhAC/ATA="))
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1,189 @@
|
|||
/* contacts.js */
|
||||
|
||||
var Layout = require("Layout");
|
||||
|
||||
const W = g.getWidth();
|
||||
const H = g.getHeight();
|
||||
|
||||
var wp = require('Storage').readJSON("contacts.json", true) || [];
|
||||
// Use this with corrupted contacts
|
||||
//var wp = [];
|
||||
|
||||
var key; /* Shared between functions, typically wp name */
|
||||
|
||||
function writeContact() {
|
||||
require('Storage').writeJSON("contacts.json", wp);
|
||||
}
|
||||
|
||||
function mainMenu() {
|
||||
var menu = {
|
||||
"< Back" : Bangle.load
|
||||
};
|
||||
if (Object.keys(wp).length==0) Object.assign(menu, {"NO Contacts":""});
|
||||
else for (let id in wp) {
|
||||
let i = id;
|
||||
menu[wp[id]["name"]]=()=>{ decode(i); };
|
||||
}
|
||||
menu["Add"]=addCard;
|
||||
menu["Remove"]=removeCard;
|
||||
g.clear();
|
||||
E.showMenu(menu);
|
||||
}
|
||||
|
||||
function decode(pin) {
|
||||
var i = wp[pin];
|
||||
var l = i["name"] + "\n" + i["number"];
|
||||
var la = new Layout ({
|
||||
type:"v", c: [
|
||||
{type:"txt", font:"10%", pad:1, fillx:1, filly:1, label: l},
|
||||
{type:"btn", font:"10%", pad:1, fillx:1, filly:1, label:"OK", cb:l=>{mainMenu();}}
|
||||
], lazy:true});
|
||||
g.clear();
|
||||
la.render();
|
||||
}
|
||||
|
||||
function showNumpad(text, key_, callback) {
|
||||
key = key_;
|
||||
E.showMenu();
|
||||
function addDigit(digit) {
|
||||
key+=digit;
|
||||
if (1) {
|
||||
l = text[key.length];
|
||||
switch (l) {
|
||||
case '.': case ' ': case "'":
|
||||
key+=l;
|
||||
break;
|
||||
case 'd': case 'D': default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
Bangle.buzz(20);
|
||||
update();
|
||||
}
|
||||
function update() {
|
||||
g.reset();
|
||||
g.clearRect(0,0,g.getWidth(),23);
|
||||
s = key + text.substr(key.length, 999);
|
||||
g.setFont("Vector:24").setFontAlign(1,0).drawString(s,g.getWidth(),12);
|
||||
}
|
||||
ds="12%";
|
||||
var numPad = new Layout ({
|
||||
type:"v", c: [{
|
||||
type:"v", c: [
|
||||
{type:"", height:24},
|
||||
{type:"h",filly:1, c: [
|
||||
{type:"btn", font:ds, width:58, label:"7", cb:l=>{addDigit("7");}},
|
||||
{type:"btn", font:ds, width:58, label:"8", cb:l=>{addDigit("8");}},
|
||||
{type:"btn", font:ds, width:58, label:"9", cb:l=>{addDigit("9");}}
|
||||
]},
|
||||
{type:"h",filly:1, c: [
|
||||
{type:"btn", font:ds, width:58, label:"4", cb:l=>{addDigit("4");}},
|
||||
{type:"btn", font:ds, width:58, label:"5", cb:l=>{addDigit("5");}},
|
||||
{type:"btn", font:ds, width:58, label:"6", cb:l=>{addDigit("6");}}
|
||||
]},
|
||||
{type:"h",filly:1, c: [
|
||||
{type:"btn", font:ds, width:58, label:"1", cb:l=>{addDigit("1");}},
|
||||
{type:"btn", font:ds, width:58, label:"2", cb:l=>{addDigit("2");}},
|
||||
{type:"btn", font:ds, width:58, label:"3", cb:l=>{addDigit("3");}}
|
||||
]},
|
||||
{type:"h",filly:1, c: [
|
||||
{type:"btn", font:ds, width:58, label:"0", cb:l=>{addDigit("0");}},
|
||||
{type:"btn", font:ds, width:58, label:"C", cb:l=>{key=key.slice(0,-1); update();}},
|
||||
{type:"btn", font:ds, width:58, id:"OK", label:"OK", cb:callback}
|
||||
]}
|
||||
]}
|
||||
], lazy:true});
|
||||
g.clear();
|
||||
numPad.render();
|
||||
update();
|
||||
}
|
||||
|
||||
function removeCard() {
|
||||
var menu = {
|
||||
"" : {title : "Select Contact"},
|
||||
"< Back" : mainMenu
|
||||
};
|
||||
if (Object.keys(wp).length==0) Object.assign(menu, {"No Contacts":""});
|
||||
else {
|
||||
wp.forEach((val, card) => {
|
||||
const name = wp[card].name;
|
||||
menu[name]=()=>{
|
||||
E.showMenu();
|
||||
var confirmRemove = new Layout (
|
||||
{type:"v", c: [
|
||||
{type:"txt", font:"15%", pad:1, fillx:1, filly:1, label:"Delete"},
|
||||
{type:"txt", font:"15%", pad:1, fillx:1, filly:1, label:name},
|
||||
{type:"h", c: [
|
||||
{type:"btn", font:"15%", pad:1, fillx:1, filly:1, label: "YES", cb:l=>{
|
||||
wp.splice(card, 1);
|
||||
writeContact();
|
||||
mainMenu();
|
||||
}},
|
||||
{type:"btn", font:"15%", pad:1, fillx:1, filly:1, label: " NO", cb:l=>{mainMenu();}}
|
||||
]}
|
||||
], lazy:true});
|
||||
g.clear();
|
||||
confirmRemove.render();
|
||||
};
|
||||
});
|
||||
}
|
||||
E.showMenu(menu);
|
||||
}
|
||||
|
||||
function askPosition(callback) {
|
||||
let full = "";
|
||||
showNumpad("dddDDDddd", "", function() {
|
||||
callback(key, "");
|
||||
});
|
||||
}
|
||||
|
||||
function createContact(lat, name) {
|
||||
let n = {};
|
||||
n["name"] = name;
|
||||
n["number"] = lat;
|
||||
wp.push(n);
|
||||
print("add -- contacts", wp);
|
||||
writeContact();
|
||||
}
|
||||
|
||||
function addCardName2(key) {
|
||||
g.clear();
|
||||
askPosition(function(lat, lon) {
|
||||
print("position -- ", lat, lon);
|
||||
createContact(lat, result);
|
||||
mainMenu();
|
||||
});
|
||||
}
|
||||
|
||||
function addCardName(key) {
|
||||
result = key;
|
||||
if (wp[result]!=undefined) {
|
||||
E.showMenu();
|
||||
var alreadyExists = new Layout (
|
||||
{type:"v", c: [
|
||||
{type:"txt", font:Math.min(15,100/result.length)+"%", pad:1, fillx:1, filly:1, label:result},
|
||||
{type:"txt", font:"12%", pad:1, fillx:1, filly:1, label:"already exists."},
|
||||
{type:"h", c: [
|
||||
{type:"btn", font:"10%", pad:1, fillx:1, filly:1, label: "REPLACE", cb:l=>{ addCardName2(key); }},
|
||||
{type:"btn", font:"10%", pad:1, fillx:1, filly:1, label: "CANCEL", cb:l=>{mainMenu();}}
|
||||
]}
|
||||
], lazy:true});
|
||||
g.clear();
|
||||
alreadyExists.render();
|
||||
return;
|
||||
}
|
||||
addCardName2(key);
|
||||
}
|
||||
|
||||
function addCard() {
|
||||
require("textinput").input({text:""}).then(result => {
|
||||
if (result != "") {
|
||||
addCardName(result);
|
||||
} else
|
||||
mainMenu();
|
||||
});
|
||||
}
|
||||
|
||||
g.reset();
|
||||
Bangle.setUI();
|
||||
mainMenu();
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
[
|
||||
{
|
||||
"name":"EU emergency",
|
||||
"number":"112"
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,249 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../../css/spectre.min.css">
|
||||
<link rel="stylesheet" href="../../css/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../../css/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css">
|
||||
|
||||
<style type="text/css">
|
||||
html, body { height: 100% }
|
||||
.flex-col { display:flex; flex-direction:column; height:100% }
|
||||
#map { width:100%; height:100% }
|
||||
#tab-list { width:100%; height:100% }
|
||||
|
||||
/* https://stackoverflow.com/a/58686215 */
|
||||
.arrow-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.arrow-icon > div {
|
||||
margin-left: -1px;
|
||||
margin-top: -3px;
|
||||
transform-origin: center center;
|
||||
font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Contacts v.2</h1>
|
||||
<div class="flex-col">
|
||||
<div id="statusarea">
|
||||
<button id="download" class="btn btn-error">Reload</button> <button id="upload" class="btn btn-primary">Upload</button>
|
||||
<span id="status"></span>
|
||||
<span id="routestatus"></span>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="tab tab-block">
|
||||
<li class="tab-item active" id="tabitem-map">
|
||||
<a href="#">Map</a>
|
||||
</li>
|
||||
<li class="tab-item" id="tabitem-list">
|
||||
<a href="#">List</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<div id="tab-list">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Number</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="contacts">
|
||||
</tbody>
|
||||
</table>
|
||||
<br>
|
||||
<h4>Add a new contact</h4>
|
||||
<form id="add_contact_form">
|
||||
<div class="columns">
|
||||
<div class="column col-3 col-xs-8">
|
||||
<input class="form-input input-sm" type="text" id="add_contact_name" placeholder="Name">
|
||||
</div>
|
||||
<div class="column col-3 col-xs-8">
|
||||
<input class="form-input input-sm" value="123456789" type="text" id="add_number" placeholder="Number">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column col-3 col-xs-8">
|
||||
<button id="add_contact_button" class="btn btn-primary btn-sm">Add Contact</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
||||
<script src="../../core/lib/interface.js"></script>
|
||||
|
||||
<script>
|
||||
var contacts = [];
|
||||
|
||||
// ==========================================================================
|
||||
/*** status ***/
|
||||
|
||||
function clean() {
|
||||
$('#status').html('<i class="icon icon-check"></i> No pending changes.');
|
||||
}
|
||||
|
||||
function dirty() {
|
||||
$('#status').html('<b><i class="icon icon-edit"></i> Changes have not been sent to the watch.</b>');
|
||||
}
|
||||
|
||||
/*** contacts ***/
|
||||
|
||||
function addContact(arr, lat, lon, name) {
|
||||
arr.push({number:lat, name:name});
|
||||
renderAllContacts();
|
||||
dirty();
|
||||
}
|
||||
|
||||
function deleteContact(arr, i) {
|
||||
arr.splice(i, 1);
|
||||
renderAllContacts();
|
||||
dirty();
|
||||
}
|
||||
|
||||
function renameContact(arr, i) {
|
||||
var name = prompt("Enter new name for the contact:", arr[i].name);
|
||||
if (name == null || name == "" || name == arr[i].name)
|
||||
return;
|
||||
arr[i].name = name;
|
||||
renderAllContacts();
|
||||
dirty();
|
||||
}
|
||||
|
||||
/*** util ***/
|
||||
|
||||
// https://stackoverflow.com/a/22706073
|
||||
function escapeHTML(str){
|
||||
return new Option(str).innerHTML;
|
||||
}
|
||||
|
||||
/*** Bangle.js ***/
|
||||
|
||||
function gotStored(pts) {
|
||||
contacts = pts;
|
||||
renderAllContacts();
|
||||
}
|
||||
|
||||
// ========================================================================== LIST
|
||||
|
||||
var $name = document.getElementById('add_contact_name')
|
||||
var $form = document.getElementById('add_contact_form')
|
||||
var $button = document.getElementById('add_contact_button')
|
||||
var $number = document.getElementById('add_number')
|
||||
var $list = document.getElementById('contacts')
|
||||
|
||||
function compare(a, b){
|
||||
var x = a.name.toLowerCase();
|
||||
var y = b.name.toLowerCase();
|
||||
if (x=="none") {return -1};
|
||||
if (y=="none") {return 1};
|
||||
if (x < y) {return -1;}
|
||||
if (x > y) {return 1;}
|
||||
return 0;
|
||||
}
|
||||
|
||||
$button.addEventListener('click', event => {
|
||||
event.preventDefault()
|
||||
var name = $name.value.trim()
|
||||
if(!name) return;
|
||||
var number = $number.value.trim();
|
||||
|
||||
contacts.push({
|
||||
name, number,
|
||||
});
|
||||
|
||||
contacts.sort(compare);
|
||||
|
||||
renderAllContacts()
|
||||
$name.value = ''
|
||||
$number.value = (0);
|
||||
|
||||
dirty();
|
||||
});
|
||||
|
||||
function removeContact(index){
|
||||
$name.value = contacts[index].name
|
||||
$number.value = contacts[index].number
|
||||
contacts = contacts.filter((p,i) => i!==index)
|
||||
renderAllContacts()
|
||||
}
|
||||
|
||||
function renderContactsList(){
|
||||
$list.innerHTML = ''
|
||||
contacts.forEach((contact,index) => {
|
||||
var $contact = document.createElement('tr')
|
||||
if(contact.number==undefined){
|
||||
$contact.innerHTML = `<td>${contact.name}</td><td>(no number)</td>`;
|
||||
} else {
|
||||
$contact.innerHTML = `<td>${contact.name}</td><td><a href="tel:${contact.number}">${contact.number}</a></td>`;
|
||||
}
|
||||
$contact.innerHTML += `<td><button class="btn btn-action btn-primary" onclick="removeContact(${index})"><i class="icon icon-delete"></i></button></td>`;
|
||||
$list.appendChild($contact)
|
||||
})
|
||||
$name.focus()
|
||||
}
|
||||
|
||||
function renderContacts() {
|
||||
renderContactsList();
|
||||
}
|
||||
|
||||
function renderAllContacts() {
|
||||
renderContactsList();
|
||||
}
|
||||
|
||||
// ========================================================================== UPLOAD/DOWNLOAD
|
||||
|
||||
function downloadJSONfile(fileid, callback) {
|
||||
// TODO: use interface.js-provided stuff?
|
||||
Puck.write(`\x10(function() {
|
||||
var pts = require("Storage").readJSON("${fileid}")||[{name:"NONE"}];
|
||||
Bluetooth.print(JSON.stringify(pts));
|
||||
})()\n`, contents => {
|
||||
if (contents=='[{name:"NONE"}]') contents="[]";
|
||||
var storedpts = JSON.parse(contents);
|
||||
callback(storedpts);
|
||||
clean();
|
||||
});
|
||||
}
|
||||
|
||||
function uploadFile(fileid, contents) {
|
||||
// TODO: use interface.js-provided stuff?
|
||||
Puck.write(`\x10(function() {
|
||||
require("Storage").write("${fileid}",'${contents}');
|
||||
Bluetooth.print("OK");
|
||||
})()\n`, ret => {
|
||||
console.log("uploadFile", ret);
|
||||
if (ret == "OK")
|
||||
clean();
|
||||
});
|
||||
}
|
||||
|
||||
function onInit() {
|
||||
downloadJSONfile("contacts.json", gotStored);
|
||||
}
|
||||
|
||||
$('#download').on('click', function() {
|
||||
downloadJSONfile("contacts.json", gotStored);
|
||||
});
|
||||
|
||||
$('#upload').click(function() {
|
||||
var data = JSON.stringify(contacts);
|
||||
uploadFile("contacts.json",data);
|
||||
});
|
||||
|
||||
// ========================================================================== FINALLY...
|
||||
clean();
|
||||
renderAllContacts();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
{ "id": "contacts",
|
||||
"name": "contacts",
|
||||
"version":"0.01",
|
||||
"description": "Provides means of storing user contacts, viewing/editing them on device and from the App loader",
|
||||
"icon": "app.png",
|
||||
"tags": "tool",
|
||||
"supports" : ["BANGLEJS2"],
|
||||
"allow_emulator": true,
|
||||
"readme": "README.md",
|
||||
"interface": "interface.html",
|
||||
"storage": [
|
||||
{"name":"contacts.app.js","url":"contacts.app.js"},
|
||||
{"name":"contacts.img","url":"app-icon.js","evaluate":true}
|
||||
],
|
||||
"data": [
|
||||
{"name":"contacts.json","url":"contacts.json"}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue