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