I have the following code in my visual studio and it works perfectly well au a UWP app on my desktop win10, albeit it does not work on my windows phone as a UWP app. I also tried running my simple webapp as from a webserver and loading it in the Edge and it works perfectly.
What should be the problem?
My code looks like this. I omitted some parts:
var model = {
db: {},
goalsobj: {},
goals: [],
init: function() {
var openReq = window.indexedDB.open("GoalsDB");
openReq.onupgradeneeded = function (event) {
model.db = event.target.result;
var objectStore = model.db.createObjectStore("Goals", { keyPath: "id" });
objectStore.createIndex("id","id", {unique:true});
};
openReq.onsuccess = function (event) {
model.db = event.target.result
model.db.transaction("Goals", "readonly").objectStore("Goals").count().onsuccess = function (event) {
if (event.target.result == 0) {
console.log("indexeddb empty");
var goalstemplate = {
id: "idee",
goals: [{ "name": "Task1" }, { "name": "Task2" }, { "name": "Task3" }]
}
var addReq = model.db.transaction("Goals", "readwrite").objectStore("Goals").add(goalstemplate);
} else {
model.db.transaction("Goals", "readonly").objectStore("Goals").get("idee").onsuccess = function (e) {
model.goalsobj = e.target.result;
//console.log(e.target.result);
model.goals = model.goalsobj.goals;
goalfunc.makeList(); //model should not talk to view, but this case it is amust, because if I remove this, it does not render at boot.
}
}
}
openReq.onerror = function (event) {
console.log("Operation failed");
}
}
},
add: function(goalname) {
model.goals.push(
{
"name": goalname
});
model.savedb();
},
move: function (id,updown) {
if (updown == "up") {
model.goals.splice((id-1), 0, model.goals.splice(id, 1)[0]);
};
if (updown == "down") {
model.goals.splice((id+1), 0, model.goals.splice(id, 1)[0]);
};
},
savedb: function(){
//console.log(goals);
var update = model.db.transaction("Goals", "readwrite").objectStore("Goals").put(model.goalsobj);
update.onerror = function (event) {
console.log(event);
};
},
};
Now When I rund this cond on my device it sais:
Unhandled exception at line 28, column 25 in ms-appx-web://1318f74a-397e-4958-aa6b-c8d11b7c5dce/js/main.js
0x800a138f - JavaScript runtime error: Unable to get property 'goals' of undefined or null reference
I have tested your code in my device (Device: Microsoft RM-1118 OSVersion:WindowsMobile 14393). It is working fine. As you can see I placed a button on the html page. The action of button click will execute model.init(), and then I set a break-point at model.goals = model.goalsobj.goals;. When click button the second time and model.goals will be set right value.
So I think the issue may happen in your target device or your GoalsDB was destroyed. Because the cause of Unable to get property 'goals' of undefined or null reference is that model.goalsobj was not set right value. Please check whether those operations have changed your database structure, such as moving operation. You can show more detail about your target device, and I will help you.
(function () {
document.getElementById("createDatabase").addEventListener("click", createDB, false);
function createDB() {
model.init();
}
})();
var model = {
db: {},
goalsobj: {},
goals: [],
init: function () {
var openReq = window.indexedDB.open("GoalsDB");
openReq.onupgradeneeded = function (event) {
model.db = event.target.result;
var objectStore = model.db.createObjectStore("Goals", { keyPath: "id" });
objectStore.createIndex("id", "id", { unique: true });
};
openReq.onsuccess = function (event) {
model.db = event.target.result
model.db.transaction("Goals", "readonly").objectStore("Goals").count().onsuccess = function (event) {
if (event.target.result == 0) {
console.log("indexeddb empty");
var goalstemplate = {
id: "idee",
goals: [{ "name": "Task1" }, { "name": "Task2" }, { "name": "Task3" }]
}
model.db.transaction("Goals", "readwrite").objectStore("Goals").add(goalstemplate);
} else {
model.db.transaction("Goals", "readonly").objectStore("Goals").get("idee").onsuccess = function (e) {
model.goalsobj = e.target.result;
//console.log(e.target.result);
if (model.goalsobj.goals != undefined) {
model.goals = model.goalsobj.goals;
} else {
console.log(e.target.result);
}
//goalfunc.makeList(); //model should not talk to view, but this case it is amust, because if I remove this, it does not render at
}
}
}
openReq.onerror = function (event) {
console.log("Operation failed");
}
}
},
add: function (goalname) {
model.goals.push(
{
"name": goalname
});
model.savedb();
},
move: function (id, updown) {
if (updown == "up") {
model.goals.splice((id - 1), 0, model.goals.splice(id, 1)[0]);
};
if (updown == "down") {
model.goals.splice((id + 1), 0, model.goals.splice(id, 1)[0]);
};
},
savedb: function () {
//console.log(goals);
var update = model.db.transaction("Goals", "readwrite").objectStore("Goals").put(model.goalsobj);
update.onerror = function (event) {
console.log(event);
};
}
};
Related
I am working on a small scale app that displays videos in multiple ways using a video-player component.
Currently I am implementing a stack-list, which is a container that holds video-stack components, and each stack contains one or more video-player components.
While the correct videos are loaded from the DOM, there is a noticeable multi-second lag (in terms of keyboard response) which seems to be related to the ending of the currently played video and the fetching of the next video in the stack.
How can I get rid of this lag? Videos are able to be toggled/selected via mouse hovers or WASD keyboard commands (A: previous, D: next), and the lag can cause a delay in keyboard inputs being registered.
video-stack.hbs
{{video-player highlightedStyle=(string-append stackStyle borderStyle)
looping=(is-single-video videos) videoPos=selectedVidPos
isMuted=(if (video-selected key selectedStackIndex) isMuted true)
url=(if curVideo.teaser.isUrl curVideo.teaser.fileIdentifier
(make-local-url modelIdentifier curVideo.teaser.fileIdentifier))
onClickCallback=(action 'stackClicked')
onHoverCallback=(action 'stackHovered')
onEndedCallback=(action 'getNextVid')}}
video-stack.js
import Ember from 'ember';
export default Ember.Component.extend({
selectedVidPos: 0,
selectedStackIndex: 0,
stackStyle: '',
playerSize: '',
isMuted: true,
init() {
this._super(...arguments);
switch(this.get('videos').length){
case 1:
break;
case 2:
this.set('stackStyle', 'vid-shadows--2');
break;
case 3:
this.set('stackStyle', 'vid-shadows--3');
break;
case 4:
this.set('stackStyle', 'vid-shadows--4');
break;
default:
this.set('stackStyle', 'vid-shadows--4');
break;
}
},
curVideo: Ember.computed('videos', 'selectedVidPos', function () {
return this.get('videos')[this.get('selectedVidPos')];
}),
actions: {
stackClicked() {
this.get('onClickCallback') (this.get('videos'), this.get('selectedVidPos'));
},
getNextVid() {
let arrayLength = this.get('videos').length;
//check if there is only 1 video in the stack
if (arrayLength === 1) {
return;
}
let curArrayPos = parseInt(this.get('selectedVidPos'));
this.set('selectedVidPos', (curArrayPos + 1) % arrayLength);
},
stackHovered() {
this.get('onHoverCallback') (this.get('videos'), this.get('selectedStackIndex'));
}
}
});
video-player.hbs
<video oncanplay={{action 'play'}} looping=true
onended={{action 'ended'}} src={{url}}
class="video-player__video {{highlightedStyle}} {{if playing '' 'video-
player__darken'}}" muted={{muted}} />
video-player.js
import Ember from 'ember';
export default Ember.Component.extend({
url: null,
looping: false,
playing: true,
muted: true,
highlightedStyle: '',
click(event) {
this.get('onClickCallback') (this.get('videoPos'));
event.stopPropagation();
},
mouseEnter() {
this.get('onHoverCallback') (this.get('videoPos'));
},
willClearRender() {
this.set('playingObserver', null);
this.set('urlObserver', null);
},
playingObserver: Ember.observer('playing', function() {
if (this) {
var p = this.get("playing");
var videoElement = this.$().find("video").get(0);
if (videoElement) {
if (p) {
videoElement.play();
}
else {
videoElement.pause();
}
}
else {
console.log("No video element found!");
}
}
}),
urlObserver: Ember.observer('url', function() {
if (this) {
var videoElement = this.$().find("video").get(0);
if (videoElement) {
videoElement.load();
}
else {
console.log("No video element found");
}
}
}),
actions: {
ended() {
if (this.get('looping')) {
this.$().find("video").get(0).play();
console.log("video-player ended");
}
else {
console.log(this.get('videoPos'));
this.get('onEndedCallback') (this.get('videoPos'));
}
},
play() {
if (this.get('playing')) {
this.$().find("video").get(0).play();
}
}
}
});
I can post more code if it would help shed light on the culprit, thanks!
I found the culprit of the lag. The issue was in the parent container, content-area.js, which had a resetTimeout action that was being called incorrectly, which caused the focus to cycle needlessly, resulting in the lag.
Also implemented a switch off in terms of rendering videos to ensure smooth loading from one video to the next in video-stack.js, there are now 2 video objects, A & B, which are fetched and preloaded from the blob object, showing one while the other is hidden. Once the displayed video ends, they swap out, and the next video in the stack is loaded.
video-stack.js
export default Ember.Component.extend({
selectedVidAPos: 0,
selectedVidBPos: 0,
selectedStackIndex: 0,
stackStyle: '',
playerSize: '',
isMuted: true,
showVidA: true,
init() {
...
}
},
videoA: Ember.computed('videos', 'selectedVidAPos', function () {
return this.get('videos')[this.get('selectedVidAPos')];
}),
videoB: Ember.computed('videos', 'selectedVidBPos', function () {
return this.get('videos')[this.get('selectedVidBPos')];
}),
actions: {
stackClicked() {
this.get('onClickCallback') (this.get('videos'), (this.get('showVidA') ? this.get('selectedVidAPos') : this.get('selectedVidBPos')));
},
getNextVideoA() {
let arrayLength = this.get('videos').length;
if (arrayLength === 1) {
return;
}
let curArrayPos = parseInt(this.get('selectedVidAPos'));
this.set('selectedVidAPos', (curArrayPos + 2) % arrayLength);
this.set('showVidA', false);
},
getNextVideoB(){
let arrayLength = this.get('videos').length;
if (arrayLength === 1) {
return;
}
let curArrayPos = parseInt(this.get('selectedVidBPos'));
this.set('selectedVidBPos', (curArrayPos + 2) % arrayLength);
this.set('showVidA', true);
},
stackHovered() {
this.get('onHoverCallback') (this.get('videos'), this.get('selectedStackIndex'));
}
}
});
content-area.js
import Ember from 'ember';
import KeyboardControls from '../mixins/keyboard-controls';
export default Ember.Component.extend(KeyboardControls, {
displayVideoSelect: false,
displayVideoSelectTimeout: null,
displayVideo: false,
video: null,
videoPlaying: false,
keyboard: null,
backgroundVideoPos: 0,
backgroundVideoUrl: null,
backgroundVideoKeys: null,
selectionVideos: [],
stackListData: null,
showVideoSelect: function() {
this.set('displayVideoSelect', true);
this.send('resetTimeout');
},
hideVideoSelect: function() {
this.set('displayVideoSelect', false);
clearTimeout(this.get('displayVideoSelectTimeout'));
},
pauseVideo: function() {
this.set('videoPlaying', !this.get('videoPlaying'));
this.set('displayVideoSelect', !this.get('videoPlaying'));
this.set('focus', this.get('videoPlaying'));
},
select: function() {
this.set('videoPlaying', false);
this.set('focus', false);
this.showVideoSelect();
this.send('resetTimeout');
},
cancel: function() {
this.pauseVideo();
this.send('resetTimeout');
},
goNext: function() {
this.pauseVideo();
this.send('resetTimeout');
},
goPrevious: function() {
this.pauseVideo();
this.send('resetTimeout');
},
updateFocus: function(param) {
if (param) {
this.$().attr('tabindex', 2);
this.$().focus();
}//if
else {
this.$().attr('tabindex', -2);
this.$().blur();
}//else
},
init() {
...
},
click() {
this.set('focus', false);
this.showVideoSelect();
},
actions: {
videoSelected(sender, videoData) {
...
},
videoEnded() {
this.set('focus', false);
this.showVideoSelect();
this.set('displayVideo', false);
},
cycleBackground() {
...
},
cancelPressed() {
this.cancel();
},
resetTimeout() {
let component = this;
clearTimeout(this.get('displayVideoSelectTimeout'));
let timeout = setTimeout(() => {
component.hideVideoSelect();
//This set command was responsible for the lag
component.set('focus', true);
}, this.get('data.config.ui.idle') * 1000);
this.set('displayVideoSelectTimeout', timeout);
}
}
});
I want to run this code without having to click on the chrome.browserAction.onClicked.addListener. How do I do this?
This is the code:
var ToggleJSApplication = {
triggerWin: null,
urlPattern: 'http://*',
init: function() {
var self = this;
self.updateIcon(function() {
chrome.browserAction.onClicked.addListener(self.toggleState.bind(self));
chrome.windows.onFocusChanged.addListener(self.onWinFocusChanged.bind(self));
});
},
getState: function(incognito, callback) {
var self = this,
data = {
'primaryUrl': self.urlPattern,
'incognito': incognito || false
};
chrome.contentSettings.javascript.get(data, function(state) {
state.enabled = (state.setting === 'allow');
if (typeof callback === 'function') callback(state);
});
},
setState: function(incognito, enabled, callback) {
var self = this,
data = {
'primaryPattern': '<all_urls>',
'setting': (enabled) ? 'allow' : 'block',
'scope': (incognito === true) ? 'incognito_session_only' : 'regular'
};
chrome.contentSettings.javascript.set(data, function() {
self.updateIcon();
if (typeof callback === 'function') callback();
});
},
toggleState: function() {
var self = this;
chrome.windows.getCurrent(function(win) {
self.triggerWin = win;
self.getState(win.incognito, function(state) {
self.setState(win.incognito, !state.enabled, function() {
self.reloadCurrentTab();
});
});
});
},
onWinFocusChanged: function() {
var self = this;
chrome.windows.getCurrent(function(win) {
self.triggerWin = win;
self.updateIcon();
});
},
reloadCurrentTab: function() {
chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
var tab = tabs[0];
chrome.tabs.duplicate(tab.id);
chrome.tabs.remove(tab.id);
});
},
updateIcon: function(callback) {
var self = this,
incognito = (self.triggerWin && self.triggerWin.incognito) || false;
self.getState(incognito, function(state) {
if (state.enabled) {
chrome.browserAction.setIcon({path: 'icons/38-on.png'});
chrome.browserAction.setTitle({title: 'JavaScript is enabled'});
}
else {
chrome.browserAction.setIcon({path: 'icons/38-off.png'});
chrome.browserAction.setTitle({title: 'JavaScript is disabled'});
}
if (typeof callback === 'function') callback();
});
}
};
ToggleJSApplication.init();
I already tried using context menu's but I failed. Is there any workaround?
You mentioned that you want to use a button click in the existing webpage to trigger your script. In order to interact with the webpage, you need to use a content script, which must interact with the background script via message passing. The content script can be as simple as:
document.getElementById('buttonId').addEventListener('click',sendMessage);
// or $('#buttonId').click(sendMessage);
function sendMessage() {
chrome.runtime.sendMessage({'message':'buttonClicked'});
}
Then in your background script, you can add:
chrome.runtime.onMessage.addListener(messageListener);
function messageListener(request) {
if ( request.message === 'buttonClicked' ) {
ToggleJSApplication.toggleState();
}
}
We use jQuery DataTables plug in across our app and it works pretty well. However we're encountering an error when we try load up the plug in with mock data (services aren't ready yet) in a modal on the page. We get the following errors ( the 2nd one happens after you click the link again to open the modal)
TypeError: d[i] is undefined
TypeError: b.nTableWrapper is null
The code looks correct, so I can't figure it out. Anyone with experience on this error ? We built the table map to correspond with the sample data nodes - and we've also tried maps with current working ones to no avail. (They are separated by purpose).
I've added the HTML in the fiddle. But basically it's just a simple table with the ID - the other datatables across the site work just fine with the same structure. Just stumped.
var sampleData = [{
"approvable": true,
"id": 4938,
"order_number": "3948948392893",
"order_template": "AJHSFJKHAS-SDJAS",
"size": "45mb",
"size_sort": 4500,
"ad_type": "testadtype",
"production_status": "yep!"
}
];
var makeCampaignApproveModal = function () {
var $approveParams;
var $approveComments = $('#approveComments');
var $approveCampaignForm = $('#approveCampaignForm');
var $campaignApprove = $('#campaignApprove');
var $approveCampaignHeader = $campaignApprove.children('h3');
var $ratingStars = $('#ratingStars');
var $ratingStar = $('.ratingStar');
var $ratingApproveCampaign = $('#ratingApproveCampaign');
var $ratingCancelCampaign = $('#ratingCancelCampaign');
var init = function () {
makeCampaignBulkOrders(sampleData);
//bindings
$ratingStar.mouseover(function (e) {
var $this = $(this);
$this.prevAll().addClass('active');
$this.nextAll().addClass('inactive');
});
$ratingStar.mouseout(function (e) {
var $this = $(this);
$this.prevAll().removeClass('active');
$this.nextAll().removeClass('inactive');
});
$ratingStar.on("click", function (e) {
e.preventDefault();
var $this = $(this);
//style prevs
$this.addClass('selected');
$this.prevAll().addClass('selected');
$this.nextAll().removeClass('selected');
$ratingStars.data('rating', $this.attr('rel'));
});
$ratingApproveCampaign.on("click", function (e) {
e.preventDefault();
var approveHandler = Portal.Details.synchronousRatingHandler;
utils.makeProxyCall((actionQueryPath + '/proof/approve'), approveHandler, Portal.Details.proofReturnE);
callInProgress();
return false;
});
$ratingCancelCampaign.on("click", function (e) {
e.preventDefault();
$campaignApprove.modality('close');
});
$campaignApprove.addClass('initted');
}; //init
if (!$campaignApprove.hasClass('initted')) {
init();
}
aep.utils.setupForm($approveCampaignForm, true, false);
$ratingStars.data();
$ratingApproveCampaign.text($l(2019));
$approveCampaignHeader.html($l(2018) + '<span class="actionModalObjectNumber"></span>');
updateModalHeader($campaignApprove);
var curRating = actionDetails['rating'];
$ratingStar.each(function () {
var $this = $(this);
if ($this.attr('rel') <= curRating) {
$this.addClass('selected');
} else {
$this.removeClass('selected');
}
});
$ratingStars.data('rating', curRating);
$campaignApprove.modality(modalConfig);
};
var makeCampaignBulkOrders = function (coData) {
var $campaignBulkOrders = $('#campaignBulkOrders');
var $campaignBulkOrdersTable = $('#bulk-ords-table');
var DTConfig = {
'bDestroy': true,
'bAutoWidth': true,
'iDisplayLength': -1,
'bPaginate': false,
'sScrollY': '200px',
'bScrollCollapse': true,
'oLanguage': {
'sSearch': $l(1024)
}
};
var coData = sampleData || [];
var coMap = getTableMapBulkOrders();
var cDTConfig = DTConfig;
cDTConfig['aaData'] = coData;
cDTConfig['aaColumns'] = coMap;
cDTConfig['aaSorting'] = [[1, 'desc']];
cDTConfig['sScrollY'] = '';
cDTConfig['bScrollCollapse'] = false;
$campaignBulkOrders.find('.tableLoading').hide();
$campaignBulkOrdersTable.dataTable(cDTConfig).fnDraw();
cDTConfig['aaSorting'] = [];
};
var getTableMapBulkOrders = function () {
return [{
oid: 'approvable',
'sTitle': '',
'mDataProp': function (source, type, val) {
if (type == "display") {
return '<input type="checkbox" class="campaign-order-approval" rel="' + source.id + '" />';
}
return source.id;
},
'sClass': 'checkbox'
},
{
oid: 'order_number',
'sClass': 'order_number',
'mDataProp': function (source, type, val) {
var ordNumber = '<a class="detailsLink" href="/portal/details/#orders/' + source.id + '">' + source.order_number + '</a>';
if (type == 'display') {
return ordNumber;
}
return source['order_number'];
},
'sTitle': $l(2089),
'sClass': 'orderNumber'
},
{
oid: 'order_template',
'mDataProp': 'order_template',
'sTitle': $l(2048),
'sClass': 'order_template'
}, {
oid: 'fileSize',
'mDataProp': function (source, type, val) {
if (type == "sort") {
return source['size_sort'];
}
return source['size'];
},
'sTitle': $l(2099),
"sType": "numeric",
'sClass': 'file_size'
},
{
oid: 'ad_type',
'mDataProp': 'ad_type',
'sTitle': $l(2045),
'sClass': 'ad_type'
}, {
oid: 'production_status',
'mDataProp': 'production_status',
'sTitle': $l(2097),
'sClass': 'production_status'
}
];
};
jsfiddle is over here
I am not able to displaying answer-er Video with the sdpOffer of Offer-er. using WEBRTC.
Here is my code.could you please help me out. I don't understand Where am going wrong in my code.
var offer;
function getPeerOffer(video_stream) {
var message = {
id : 'Viwer'
}
ws.send(JSON.stringify(message));
ws.onmessage=function(message){
var obj = JSON.parse(message.data)
offer = obj.sdpOffer
answererPeer2(offer, video_stream);
}
}
function answererPeer2(offer, video_stream) {
answerer = new RTCPeerConnection(null);
answerer.addStream(video_stream);
answerer.onaddstream =function (event) {
offererToAnswerer.src = URL.createObjectURL(event.stream);
offererToAnswerer.play();
};
answerer.onicecandidate = function (event) {
if (!event || !event.candidate) return;
answerer.addIceCandidate(event.candidate);
};
var remoteDescription = new RTCSessionDescription(offer);
answerer.setRemoteDescription(remoteDescription);
answerer.createAnswer(function (answer) {
answerer.setLocalDescription(answer);
answerer.addStream(video_stream)
}, function() {}, video_constraints);
}
var video_constraints = {
mandatory: {},
optional: []
};
function getUserMedia(callback) {
var n = navigator;
n.getMedia = n.webkitGetUserMedia || n.mozGetUserMedia;
n.getMedia({
audio: true,
video: true
}, callback, onerror);
function onerror(e) {
alert(JSON.stringify(e, null, '\t'));
}
}
getUserMedia(function (video_stream) {
getPeerOffer(video_stream)
});
}
I'm a bit confused about the asynchous call to the DataBase.
I just want to have a javasctipt adapter class for the calls to the web sql. But I'm not quite sure how to do this. Propably somebody have a good hint for me.
The function OfflneAppDBAdapter.prototype.IsDeviceConfigured() should return true or false depending if there are any items in the Table DeviceConfig.
function OfflneAppDBAdapter() {
self = this;
this.deviceIsConfigured = false;
this.Init = function () {
$data.Entity.extend("$de.offlineapp.DeviceConfig", {
Id: { type: "int", key: true, computed: true },
Name: { type: "string", required: true },
Token: { type: "string" },
Type: { type: "string" }
});
$data.EntityContext.extend("$de.offlineapp.DataContext", {
DeviceConfig: { type: $data.EntitySet, elementType: $de.offlineapp.DeviceConfig }
});
}
self.Init();
$de.offlineapp.context = new $de.offlineapp.DataContext({
name: "webSql", databaseName: "OfflineApp"
});
$de.offlineapp.context.onReady(function () {
});
}
// ************************************************************************
// PUBLIC METHODS -- ANYONE MAY READ/WRITE
// ************************************************************************
OfflneAppDBAdapter.prototype.AddDeviceConfig = function (deviceName, deviceToken, deviceTyp) {
$de.offlineapp.context.onReady(function () {
var promise = $de.offlineapp.context.DeviceConfig.toArray(function (x) {
if (x.length == 0) {
var emp = new $de.offlineapp.DeviceConfig({ Name: deviceName, Token: deviceToken, Type: deviceTyp });
$de.offlineapp.context.DeviceConfig.add(emp);
$de.offlineapp.context.saveChanges();
}
}
)
});
}
OfflneAppDBAdapter.prototype.IsDeviceConfigured = function () {
$de.offlineapp.context.onReady(function () {
var promise = $de.offlineapp.context.DeviceConfig.toArray(function (x) {
if (x.length == 0) {
this.deviceIsConfigured = true;
}
}
)
});
return this.deviceIsConfigured;
}
var myOfflineAppDBAdapter = new OfflneAppDBAdapter();
myOfflineAppDBAdapter.AddDeviceConfig("DeviceName", "Token", "iPad");
console.log(myOfflineAppDBAdapter.IsDeviceConfigured());
As expected the console prints "false". I' aware that the jaydata call works with callbacks and the callbacks are not part of the main class. But there must be a possibility to do so?
I would really apprechiate any help.
Thank you in advance....
Chris
UPDATE:
As you requested the startup code:
function OfflineApplication()
{
self = this;
}
OfflineApplication.prototype.StartApplication = function () {
//Check if online, then sync and
if (navigator && navigator.onLine === true) {
this.IsDeviceConfigured();
}
else {
}
}
///check if the device has a base configuration
OfflineApplication.prototype.IsDeviceConfigured = function () {
myOfflineAppDBAdapter.GetDeviceConfiguration(function (result) {
if (result.length > 0) {
myOfflineAppDBAdapter.deviceIsConfigured = true;
myOfflineApplication.HasDeviceAnApplication();
}
else {
///Get the device base conf from the server.
myOfflineAppSynchronisationAdapter.getDeviceConfigurationByToken(token, myOfflineApplication.HasDeviceAnApplication);
myOfflineAppDBAdapter.deviceIsConfigured = true;
}
});
}
///check if the device has an "application config" in general
OfflineApplication.prototype.HasDeviceAnApplication = function () {
myOfflineAppDBAdapter.GetDeviceAnApplication(function (result) {
if (result.length > 0) {
myOfflineApplication.IsDeviceApplicationVersionLatest(result);
}
else {
myOfflineApplication.GetApplication(false);
}
});
}
///the application config could differ from time to time, so we have to check if a different application should be synct with the device
OfflineApplication.prototype.IsDeviceApplicationVersionLatest = function (result) {
myOfflineAppDBAdapter.DeleteDeviceAnApplication(function () { });
console.log(result);
}
///get the application from the server
OfflineApplication.prototype.GetApplication = function (clearConfig) {
if (clearConfig === true)
{
}
myOfflineAppSynchronisationAdapter.getDeviceApplicationByToken(token, myOfflineApplication.LoadApplication);
}
OfflineApplication.prototype.LoadApplication = function () {
console.log('Now everything is finde and the application gets loaded..');
}
var myOfflineAppDBAdapter = new OfflneAppDBAdapter();
var myOfflineAppSynchronisationAdapter = new OfflineAppSynchronisationAdapter();
var myOfflineApplication = new OfflineApplication();
myOfflineApplication.StartApplication();
There is no sync way. You handling promises wrong. Make your code simple :) You'll need something like this:
$data.Entity.extend("$de.offlineapp.DeviceConfig", {
Id: { type: "int", key: true, computed: true },
Name: { type: "string", required: true },
Token: { type: "string" },
Type: { type: "string" }
});
$data.EntityContext.extend("$de.offlineapp.DataContext", {
DeviceConfig: { type: $data.EntitySet, elementType: $de.offlineapp.DeviceConfig }
});
var context = new $de.offlineapp.DataContext({
name: "webSql", databaseName: "OfflineApp"
});
function AddDeviceConfig(deviceName, deviceToken, deviceTyp) {
return context.DeviceConfig.toArray()
.then(function (x) {
if (x.length == 0) {
var emp = new $de.offlineapp.DeviceConfig({ Name: deviceName, Token: deviceToken, Type: deviceTyp });
context.DeviceConfig.add(emp);
return context.saveChanges();
}
})
}
function IsDeviceConfigured() {
return context.DeviceConfig.toArray()
.then(function (x) {
return x.length > 0;
})
}
context.onReady()
.then(IsDeviceConfigured)
.then(console.log)
.then(function() { return AddDeviceConfig("DeviceName", "Token", "iPad"); })
.then(IsDeviceConfigured)
.then(console.log);
here's a fiddle which does this: http://jsfiddle.net/JayData/cpT5q/1/