Here is the full app.js code with the routes. The code i inherited is a version 1.6
var SERVER_URL = “http://localhost:65534”;
var myApp = new Framework7({
template7Pages: true,
precompileTemplates: true, //
domCache: true,
template7Data: {
context: {“title”:“Pizza”,“description”:“description data-context-name”},
},
preprocess: function (content, url, next) {
next(content);
}
});
// Export selectors engine
var $$ = Dom7;
// Add main view
var mainView = myApp.addView(’.view-main’);
var curSelPage = “”;
var curContactID;
var curConvArray;
// Just just do reload on app load
// mainView.router.load({reload: true, url: ‘index.html’});
$(’.login-screen #btn_signin’).on(‘click’, function () {
var f_data = {
email: $(’#txt_email’).val(),
password: $(’#txt_password’).val()
}
$.ajax({
url: SERVER_URL+'/sessions',
data: f_data,
cache: false,
dataType: 'json',
type: 'POST',
crossDomain : true,
xhrFields: {
withCredentials: false
},
success: function(r_data){
if(r_data['success']==true) {
console.log(r_data['user']['email']);
curContactID = r_data['user']['id'];
myApp.closeModal('.login-screen');
}
else {
alert("Login info incorrect!")
}
},
error: function(error){
console.log(error);
alert("Error. Login failed.");
}
});
});
$(’#mnu_call’).on(‘click’, function () {
curSelPage = “cur_call”;
// Get current call
$.get( SERVER_URL+’/current_call.json’, function(r_data) {
var call;
if(r_data==null)
call = null;
else if (r_data[‘statuses’].last[‘status’] == ‘in-progress’)
call = r_data;
mainView.router.load({
url: ‘pages/cur_call.html’,
context: {
callinfo: call
}
})
});
$('#nav_title').text('Current Call');
});
$(’#mnu_conv’).on(‘click’, function () {
curSelPage = “conversations”;
$(’#nav_title’).text(‘Conversations’);
showMainMenu(false);
//show conversation list
$.get( SERVER_URL+’/conversations.json’, function(r_data) {
var convs = r_data;
curConvArray = convs;
for (i in convs) {
$(’#ul_sub_menu’).append(’
’+convs[i][‘item_type’]+’
’);
}
});
});
//contacts
$(’#mnu_contact’).on(‘click’, function () {
curSelPage = “contacts”;
$(’#nav_title’).text(‘Contacts’);
showMainMenu(false);
$.get( SERVER_URL+’/contacts.json’, function(r_data) {
var contacts = r_data;
console.log(contacts);
for (i in contacts) {
$(’#ul_sub_menu’).append(’
‘+contacts[i][‘name_full’]+’
');
}
});
});
$(’#mnu_setting’).on(‘click’, function () {
curSelPage = “settings”;
$(’#nav_title’).text(‘Settings’);
mainView.router.load({
url: ‘pages/settings.html’,
context: {
}
})
});
function selContact(contact_id) {
$.get( SERVER_URL+’/contacts/’+contact_id+’.json’, function(r_data) {
var contact = r_data;
mainView.router.load({
reload: true,
reloadPrevious: false,
url: 'pages/contacts.html',
context: {"contact":contact},
});
});
}
function selConversation(conv_id, sel_i) {
//Get conversation info;
var convinfo = curConvArray[sel_i];
mainView.router.load({
reload: true,
reloadPrevious: false,
url: ‘pages/conversations.html’,
context: {“convinfo”:convinfo},
});
}
function showMainMenu(main_flag) {
if(main_flag) {
$(’#div_sub_menu’).hide();
$(’#ul_sub_menu’).empty();
$(’#main_menu’).show();
}
else {
$(’#div_sub_menu’).show();
$(’#ul_sub_menu’).empty();
$(’#main_menu’).hide();
}
}
function onClickAdd() {
if(curSelPage==“contacts”) {
mainView.router.load({
url: ‘pages/’+curSelPage+’_edit.html’,
context: {contact:[]}
})
}
}
function onClickContactEdit(contact_id) {
$.get( SERVER_URL+’/contacts/’+contact_id+’.json’, function(r_data) {
var contact = r_data;
mainView.router.load({
reload: true,
reloadPrevious: false,
url: 'pages/contacts_edit.html',
context: {"contact":contact},
});
});
}
function onUpdateContact(contact_id) {
var f_data = {
name: $(’#txt_contact_name’).val(),
company: $(’#txt_contact_company’).val(),
customer: ‘t’
}
var url = "/contacts";
//update contact
if(contact_id) {
url = "/contacts/"+contact_id;
}
$.ajax({
url: SERVER_URL + url,
data: f_data,
cache: false,
dataType: 'json',
type: 'POST',
crossDomain : true,
success: function(r_data){
console.log(r_data);
if(r_data['success']==true) {
mainView.router.load({
reload: true,
reloadPrevious: false,
url: 'pages/contacts.html',
context: {"contact":r_data['contact']},
});
}
else {
alert("Update info failed!")
}
},
error: function(error){
console.log(error);
alert("Error. Update failed.");
}
});
}
function onDeleteContact(contact_id) {
if (confirm(‘Are you sure you want to delete this?’)) {
$.ajax({
url: SERVER_URL + ‘/contacts/’+contact_id,
cache: false,
dataType: ‘json’,
type: ‘DELETE’,
crossDomain : true,
success: function(r_data){
console.log(r_data);
if(r_data['success']==true) {
mainView.router.load({
reload: true,
reloadPrevious: false,
url: 'pages/profile.html',
context: {},
});
}
else {
alert("Delete info failed!")
}
},
error: function(error){
console.log(error);
alert("Error. Delete failed.");
}
});
}
}
mainView.router.load({
url: ‘pages/profile.html’,
context: {
}
})
showMainMenu(true);
// Login
// var ls = myApp.loginScreen(’.login-screen’);
// myApp.closeModal(’.login-screen’);
Here is the html
<div class="page" data-page="page-contact">
<div class="page-content">
<div style="text-align: right;padding:20px;">
<a href="#" onclick="onClickContactEdit({{contact['id']}})">Edit</a>
<a href="#" onclick="onDeleteContact({{contact['id']}})">Delete</a>
</div>
<div id='mnu_contact'>
<div id="ul_sub_menu">
</div>
</div>
and for illustration, a sample of the json
[{"id":6,"address_pretty":"100 Kian Villages, Wisozkton, NY 52960"}]},{"id":223,"name_full":"Abel Mueller","name_preferred":null,"name_pretty":"Abel Mueller","company":null,"notes":null,"phones":[],"emails":[],"addresses":[]},{"id":296,"name_full":"Adalberto Cremin","name_preferred":null,"name_pretty":"Adalberto Cremin","company":null,"notes":null,"phones":[],"emails": ... ]