Scott.Idem/OSIT-AE-App-Native-Electron
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Working on network online offline detection

Browse Source
This commit is contained in:
Scott Idem
2020-03-04 16:36:49 -05:00
parent 7bb17de8f6
commit e3c297fb98
11 changed files with 495 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/css/style.css
View File

@@ -44,3 +44,27 @@
align-items: center;
justify-content: center;
}
.filename {
/*
margin-left: .1rem;
padding-left: .1rem;
*/
}
.menu_session_code, .detail_session_code {
margin-left: .1rem;
padding-left: .1rem;
font-size: .5em;
}
.session_detail>h2 {
background-color: #F7F7F7;
/*border-bottom: solid .1rem black;*/
}
.detail_session_code {
margin-left: .1rem;
padding-left: .1rem;
font-size: .5em;
}

220
app/index.html
View File

@@ -61,6 +61,9 @@
<div id="reset1" class="btn btn-warning reset" data-spy="affix" data-offset-top="200">
<span class="fas fa-sync"></span> Reset Launcher
</div>
<div id="network_status1" class="btn btn-success network_status">
<span class="fas fa-globe"></span> Network Status
</div>
</div>
<div id="launcher_sessions" class="launcher_sessions col"></div> <!-- end location details div -->
@@ -121,6 +124,14 @@
let event_id = app_config.event_id;
let event_location_id = app_config.event_location_id;
// Start of API section
const api_token_loop_interval = app_config.api_token_loop_interval;
let api_update_period = app_config.idb_event_location_check_period;
let api_update_datetime = Date.now();
let waiting_on_api_token = false;
const secret_key = app_config.api_secret_key;
let api_temporary_token = null;
@@ -135,12 +146,95 @@
axios.defaults.baseURL = api_base_url;
axios.defaults.headers.post['Access-Control-Allow-Origin'] = app_config.access_control_allow_origin; // '*';
api_token_request_async(axios, secret_key).then( function(result) {
console.log('Setting temporary API token to axios Authorization header: '+result);
axios.defaults.headers.common['Authorization'] = `Token ${result}`;
api_temporary_token = result;
return result;
});
// Axios needs to authenticate first
let axios_headers_set = false;
/*if (app_online) {
api_token_request_async(axios, secret_key).then( function(result) {
console.log('Setting temporary API token to axios Authorization header: '+result);
axios.defaults.headers.common['Authorization'] = `Token ${result}`;
api_temporary_token = result;
return result;
});
} else {
console.log('Currently offline. Can not request temporary API token.');
}*/
let app_online = false;
window.addEventListener('online', app.currently_online);
window.addEventListener('offline', app.currently_offline);
let update_event_ui = true;
let update_event_location_ui = true;
let update_event_session_ui = true;
let update_event_presentation_ui = true;
let update_event_presenter_ui = true;
let update_event_file_ui = true;
if (window.onLine) {
app.currently_online();
} else {
app.currently_offline();
update_event_ui = true;
update_event_location_ui = true;
update_event_session_ui = true;
update_event_presentation_ui = true;
update_event_presenter_ui = true;
update_event_file_ui = true;
}
var api_token_loop = setInterval(function() {
if (app_online && api_update_datetime < Date.now()) {
let api_temporary_token = api_token_request_async(axios, secret_key)
.then(function (result) {
if (result) {
console.log('Setting temporary API token to axios Authorization header: '+result);
axios.defaults.headers.common['Authorization'] = `Token ${result}`;
api_temporary_token = result;
console.log('Axios headers have been set.');
axios_headers_set = true;
api_update_datetime = Date.now() + api_update_period;
} else {
console.log('Not online?????????????????????????');
console.log(window.onLine);
if (window.onLine) {
app.currently_online();
} else {
app.currently_offline();
}
}
})
.catch(function (error) {
console.log('Something went wrong');
console.log(error);
});
/*
api_token_request_async(axios, secret_key).then( function(result) {
console.log('Setting temporary API token to axios Authorization header: '+result);
axios.defaults.headers.common['Authorization'] = `Token ${result}`;
api_temporary_token = result;
console.log('Axios headers have been set.');
axios_headers_set = true;
api_update_datetime = Date.now() + api_update_period;
return result;
});
*/
} else if (app_online) {
//console.log('Currently online, but not asking for a new temporary token yet.');
} else {
console.log('Currently offline. Can not request a new temporary API token.');
}
}, api_token_loop_interval);
// End of API section
let idb_name = app_config.idb_name;
@@ -248,17 +342,16 @@
*/
const api_auth_loop_interval = 100; // only runs on start up
//const api_auth_loop_interval = 100; // only runs on start up
const open_tables_loop_interval = 10; // only runs on start up
const api_token_update_loop_interval = 120000; // loop forever
//const api_token_update_loop_interval = 120000; // loop forever
const update_idb_loop_interval = 500; // loop forever; update when check datetime has passed
const update_idb_loop_interval = app_config.update_idb_loop_interval; // loop forever
//const update_render_loop_interval = 10000; // loop forever; only run when the launcher object is safe
const check_file_cache_loop_interval = 250; // loop forever; only run after the event_file table has updated
const update_render_loop_interval = app_config.update_render_loop_interval; // loop forever
// Axios needs to authenticate first
let axios_headers_set = false;
// IDB tables need to be opened
let idb_tables_opened = false;
@@ -290,20 +383,14 @@
const host_file_cache_path = app_config.host_file_cache_path; //'file_cache/';
//const host_file_cache_check_period = app_config.host_file_cache_check_period; //30000; // 30 seconds
let idb_tables_have_records = false;
const display_session_codes = app_config.display_session_codes;
const display_session_badges = app_config.display_session_badges;
const display_presentation_codes = app_config.display_presentation_codes; // NOTE: not currently used
const display_presentation_badges = app_config.display_presentation_badges;
const display_presenter_codes = app_config.display_presenter_codes; // NOTE: not currently used
const display_presenter_badges = app_config.display_presenter_badges; // NOTE: not currently used
var api_auth_loop = setInterval(function() {
if (typeof axios.defaults.headers.common['Authorization'] !== 'undefined'
&& axios.defaults.headers.common['Authorization'] != null) {
console.log('Axios headers have been set.');
axios_headers_set = true;
//run_update_idb = true;
clearInterval(api_auth_loop);
} else {
axios_headers_set = false;
console.log('Waiting for Axios headers to be set.');
}
}, api_auth_loop_interval);
let idb_tables_have_records = false;
var open_tables_loop = setInterval(function() {
@@ -323,20 +410,11 @@
}, open_tables_loop_interval);
var api_token_update_loop = setInterval(function() {
api_token_request_async(axios, secret_key).then( function(result) {
console.log('Setting temporary API token to axios Authorization header: '+result);
axios.defaults.headers.common['Authorization'] = `Token ${result}`;
api_temporary_token = result;
return result;
});
}, api_token_update_loop_interval);
var update_idb_loop = setInterval(async function() {
//console.log('FLAG: axios_headers_set='+axios_headers_set);
//console.log('FLAG: idb_tables_opened='+idb_tables_opened);
if (axios_headers_set && idb_tables_opened) {
if (app_online && axios_headers_set && idb_tables_opened) {
if (idb_event_check_datetime < Date.now()) {
console.log('**** *** ** * Time to check events');
let v2_account_events = await v2_get_account_events(axios, account_id)
@@ -345,7 +423,8 @@
tbl_event.setItem(response[i].id.toString(), response[i]);
}
idb_event_check_datetime = Date.now() + idb_event_check_period;
let render_event_records_result = render_event_records(); // NOTE: v2 idb to ui
//let render_event_records_result = render_event_records(); // NOTE: v2 idb to ui
update_event_ui = true;
})
.catch(function (error) {
console.log('Trying to check events. Something went wrong. Expired token?');
@@ -361,7 +440,8 @@
tbl_event_location.setItem(v2_event_locations[i].id.toString(), v2_event_locations[i]);
}
idb_event_location_check_datetime = Date.now() + idb_event_location_check_period;
let render_event_location_records_result = render_event_location_records(); // NOTE: v2 idb to ui
//let render_event_location_records_result = render_event_location_records(); // NOTE: v2 idb to ui
update_event_location_ui = true;
}
if (idb_event_session_check_datetime < Date.now()) {
@@ -372,7 +452,8 @@
tbl_event_session.setItem(v2_event_sessions[i].id.toString(), v2_event_sessions[i]);
}
idb_event_session_check_datetime = Date.now() + idb_event_session_check_period;
let render_event_session_records_result = render_event_session_records(); // NOTE: v2 idb to ui
//let render_event_session_records_result = render_event_session_records(); // NOTE: v2 idb to ui
update_event_session_ui = true;
}
if (idb_event_presentation_check_datetime < Date.now()) {
@@ -382,7 +463,8 @@
tbl_event_presentation.setItem(v2_event_presentations[i].id.toString(), v2_event_presentations[i]);
}
idb_event_presentation_check_datetime = Date.now() + idb_event_presentation_check_period;
let render_event_presentation_records_result = await render_event_presentation_records(); // NOTE: v2 idb to ui
//let render_event_presentation_records_result = await render_event_presentation_records(); // NOTE: v2 idb to ui
update_event_presentation_ui = true;
}
if (idb_event_presenter_check_datetime < Date.now()) {
@@ -393,7 +475,8 @@
}
idb_event_presenter_check_datetime = Date.now() + idb_event_presenter_check_period;
let render_event_presenter_records_result = await render_event_presenter_records(); // NOTE: v2 idb to ui
//let render_event_presenter_records_result = await render_event_presenter_records(); // NOTE: v2 idb to ui
update_event_presenter_ui = true;
}
if (idb_event_file_check_datetime < Date.now()) {
@@ -427,21 +510,62 @@
run_check_file_cache = true; // Set to true so that the local file cache will be checked against the updated event files
idb_event_file_check_datetime = Date.now() + idb_event_file_check_period;
let render_event_file_records_result = await render_event_file_records(); // NOTE: v2 idb to ui
//let render_event_file_records_result = await render_event_file_records(); // NOTE: v2 idb to ui
update_event_file_ui = true;
}
} else if (app_online && idb_tables_opened && !axios_headers_set) {
console.log('Online and waiting for the Axios headers to be set.');
console.log('Using cached IDB data');
/*
let render_event_records_result = render_event_records();
let render_event_location_records_result = render_event_location_records();
let render_event_session_records_result = render_event_session_records();
let render_event_presentation_records_result = await render_event_presentation_records();
let render_event_presenter_records_result = await render_event_presenter_records();
let render_event_file_records_result = await render_event_file_records();
*/
} else if (app_online && axios_headers_set && !idb_tables_opened) {
console.log('Online and Axios headers are set. Waiting for the IDB tables to be opened');
} else if (!app_online) {
console.log('Waiting to update IDB once online.');
console.log('Using cached IDB data');
} else {
console.log('Waiting for the Axios headers to be set and/or IDB tables opened...');
console.log('This should not happen.');
}
}, update_idb_loop_interval);
/*var update_render_loop = setInterval(async function() {
}, update_render_loop_interval);*/
var update_render_loop = setInterval(async function() {
console.log('*** Update Render Loop ***');
if (update_event_ui) {
let render_event_records_result = render_event_records();
update_event_ui = false;
}
if (update_event_location_ui) {
let render_event_location_records_result = render_event_location_records();
update_event_location_ui = false;
}
if (update_event_session_ui) {
let render_event_session_records_result = render_event_session_records();
update_event_session_ui = false;
}
if (update_event_presentation_ui) {
let render_event_presentation_records_result = await render_event_presentation_records();
update_event_presentation_ui = false;
}
if (update_event_presenter_ui) {
let render_event_presenter_records_result = await render_event_presenter_records();
update_event_presenter_ui = false;
}
if (update_event_file_ui) {
let render_event_file_records_result = await render_event_file_records();
update_event_file_ui = false;
}
}, update_render_loop_interval);
var check_file_cache_loop = setInterval(async function() {

20
app/js/app_api.js
View File

@@ -1,5 +1,21 @@
async function api_token_request_async(axios, secret_key) {
console.log('Requesting API temporary token...');
if (waiting_on_api_token) {
console.log('Already waiting on an API token request. Not starting another until finished.');
return false;
} else {
}
if (navigator.onLine) {
} else {
app_online = false;
return false;
}
waiting_on_api_token = true;
const url = '/api_token_request';
let data = { secret_key: secret_key };
@@ -13,8 +29,10 @@ async function api_token_request_async(axios, secret_key) {
})
.catch(function (error) {
console.error(error);
return error;
return false;
});
waiting_on_api_token = false;
return response;
}

2
app/js/app_ui_files.js
View File

@@ -100,8 +100,10 @@ async function render_event_file_records() {
file_li_node.id = 'event_file_'+tbl_file_id;
if (tbl_for_type != 'event' && tbl_for_type != 'location') {
file_li_node.className = 'list-group-item btn btn-primary d-flex justify-content-between align-items-center open_local_file event_file';
//file_li_node.className = 'list-group-item btn btn-primary justify-content-between align-items-center open_local_file event_file';
} else {
file_li_node.className = 'list-group-item btn btn-sm btn-secondary d-flex justify-content-between align-items-center open_local_file event_file';
//file_li_node.className = 'list-group-item btn btn-sm btn-secondary justify-content-between align-items-center open_local_file event_file';
}
file_li_node.setAttribute('data-file_id', tbl_file_id);

31
app/js/app_ui_presentations.js
View File

@@ -38,7 +38,10 @@ async function render_event_presentation_records(events) {
console.log('Presentation ('+presentation_id+') was found in the session ('+session_id+'). Updating...');
document.getElementById('event_presentation_'+value.id).getElementsByTagName('div')[0].getElementsByTagName('strong')[0].innerHTML = value.name;
let presentation_startdatetime = new Date(value.start_datetime);
document.getElementById('event_presentation_'+value.id).getElementsByTagName('div')[0].getElementsByTagName('span')[0].innerHTML = dateFns.format(presentation_startdatetime, 'h:mm A');
let presentation_startdatetime_string = dateFns.format(presentation_startdatetime, 'h:mm A')
document.getElementById('event_presentation_'+value.id).getElementsByTagName('div')[0].getElementsByTagName('span')[0].innerHTML = presentation_startdatetime_string;
} else if (session_id != value.event_session_id && presentation_id == value.id) {
// Found presentation in a session that it should not be in. Removing...
@@ -120,10 +123,32 @@ async function render_event_presentation_records(events) {
presentation_name_strong_node.appendChild(presentation_name_text_node);
let presentation_heading_span_node = document.createElement('SPAN');
presentation_heading_span_node.className = 'badge badge-pill badge-info';
if (display_presentation_badges) {
presentation_heading_span_node.className = 'badge badge-pill badge-info d-inline';
} else {
presentation_heading_span_node.className = 'badge badge-pill badge-info d-none';
}
/*
// Create the session code span
let span_session_code_node = document.createElement('SPAN');
span_session_code_node.id = 'detail_session_code_'+value.id;
if ( display_session_codes && value.code && value.code.length) {
span_session_code_node.className = 'd-inline detail_session_code';
} else {
span_session_code_node.className = 'd-none detail_session_code';
}
let span_session_code_text_node = document.createTextNode('('+value.code+')');
span_session_code_node.appendChild(span_session_code_text_node);
*/
//let presenation_font = '<span class="fas fa-hourglass-start"></span> ';
let presentation_startdatetime = new Date(value.start_datetime);
let presentation_heading_span_text_node = document.createTextNode(dateFns.format(presentation_startdatetime, 'h:mm A'));
let presentation_startdatetime_string = dateFns.format(presentation_startdatetime, 'h:mm A');
let presentation_heading_span_text_node = document.createTextNode(presentation_startdatetime_string);
presentation_heading_span_node.appendChild(presentation_heading_span_text_node);
presentation_li_heading_div_node.appendChild(presentation_name_strong_node);

117
app/js/app_ui_sessions.js
View File

@@ -19,7 +19,7 @@ async function render_event_session_records() {
// *** ** * Checking if the session is already in the launcher menu * ** ***
if (document.getElementById('menu_event_session_'+value.id)) {
// Update the session menu list item
document.getElementById('menu_event_session_'+value.id).innerHTML = value.name;
document.getElementById('menu_session_name_'+value.id).innerHTML = value.name;
} else {
// Unhide the sessions menu
if (document.getElementById('sessions_menu').classList.contains('d-none') ) {
@@ -28,18 +28,38 @@ async function render_event_session_records() {
}
// Add the new session to the session menu
let node = document.createElement('LI');
node.id = 'menu_event_session_'+value.id;
node.className = 'list-group-item btn btn-success d-flex justify-content-between align-items-center btn_view_session';
node.setAttribute('data-session_id', value.id);
let li_session_node = document.createElement('LI');
li_session_node.id = 'menu_event_session_'+value.id;
//li_session_node.className = 'list-group-item btn btn-success d-flex justify-content-between align-items-center btn_view_session';
li_session_node.className = 'list-group-item btn btn-success justify-content-between align-items-center btn_view_session';
li_session_node.setAttribute('data-session_id', value.id);
node.title = 'id='+value.id+' session_id='+value.id;
li_session_node.title = 'id='+value.id+' session_id='+value.id;
let text_node = document.createTextNode(value.name);
// Create the session name span
let li_span_name_node = document.createElement('SPAN');
li_span_name_node.id = 'menu_session_name_'+value.id;
li_span_name_node.className = 'd-inline menu_session_name';
node.appendChild(text_node);
let li_span_name_text_node = document.createTextNode(value.name);
li_span_name_node.appendChild(li_span_name_text_node);
document.getElementById('sessions_menu').getElementsByTagName('ul')[0].appendChild(node);
// Create the session code span
let li_span_badge_node = document.createElement('SPAN');
if ( display_session_codes && value.code && value.code.length) {
li_span_badge_node.className = 'd-inline menu_session_code';
} else {
li_span_badge_node.className = 'd-none';
}
let li_span_badge_text_node = document.createTextNode('('+value.code+')');
li_span_badge_node.appendChild(li_span_badge_text_node);
li_session_node.appendChild(li_span_name_node);
li_session_node.appendChild(li_span_badge_node);
document.getElementById('sessions_menu').getElementsByTagName('ul')[0].appendChild(li_session_node);
}
let session_startdatetime = new Date(value.start_datetime);
@@ -48,33 +68,68 @@ async function render_event_session_records() {
if (document.getElementById('detail_session_'+value.id)) {
// Update the launcher sessions list
// NOTE: Updating this text is very awkward?
document.getElementById('detail_session_'+value.id).getElementsByTagName('h2')[0].firstChild.data = value.name;
console.log(document.getElementById('detail_session_'+value.id).getElementsByTagName('h2')[0]);
document.getElementById('detail_session_'+value.id).getElementsByTagName('h2')[0].getElementsByTagName('span')[0].innerHTML = dateFns.format(session_startdatetime, 'ddd h:mm A');
//document.getElementById('detail_session_'+value.id).getElementsByTagName('h2')[0].firstChild.data = value.name;
document.getElementById('detail_session_name_'+value.id).innerHTML = value.name;
document.getElementById('detail_session_code_'+value.id).innerHTML = '('+value.code+')';
//console.log(document.getElementById('detail_session_'+value.id).getElementsByTagName('h2')[0]);
document.getElementById('detail_session_badge_'+value.id).innerHTML = dateFns.format(session_startdatetime, 'ddd h:mm A');
} else {
// Add the new session to the launcher sessions list
let div_node = document.createElement('DIV');
div_node.id = 'detail_session_'+value.id;
div_node.className = 'container d-none session_detail event_session';
div_node.setAttribute('data-session_id', value.id);
let div_session_node = document.createElement('DIV');
div_session_node.id = 'detail_session_'+value.id;
div_session_node.className = 'container d-none session_detail event_session';
div_session_node.setAttribute('data-session_id', value.id);
let h2_node = document.createElement('H2');
h2_node.className = 'session_title d-flex justify-content-between align-items-center';
let h2_session_node = document.createElement('H2');
h2_session_node.className = 'session_heading d-flex justify-content-between align-items-center border-bottom border-primary';
//h2_session_node.className = 'detail_session_title justify-content-between align-items-center';
// NOTE: Instead of a text node should this just be wrapped in a set of tags?
// Updating this is kind of awkward... see above
let h2_text_node = document.createTextNode(value.name);
h2_node.appendChild(h2_text_node);
// Group the name and code together for the title
let span_session_title_node = document.createElement('SPAN');
span_session_title_node.className = 'session_title';
let h2_span_node = document.createElement('SPAN');
h2_span_node.className = 'badge badge-pill badge-info';
// Create the session name span
let span_session_name_node = document.createElement('SPAN');
span_session_name_node.id = 'detail_session_name_'+value.id;
span_session_name_node.className = 'detail_session_name';
let h2_span_text_node = document.createTextNode(dateFns.format(session_startdatetime, 'ddd h:mm A'));
h2_span_node.appendChild(h2_span_text_node);
let span_session_name_text_node = document.createTextNode('('+value.name+')');
span_session_name_node.appendChild(span_session_name_text_node);
h2_node.appendChild(h2_span_node);
//h2_session_node.appendChild(span_session_name_node);
span_session_title_node.appendChild(span_session_name_node);
div_node.appendChild(h2_node);
// Create the session code span
let span_session_code_node = document.createElement('SPAN');
span_session_code_node.id = 'detail_session_code_'+value.id;
if ( display_session_codes && value.code && value.code.length) {
span_session_code_node.className = 'd-inline detail_session_code';
} else {
span_session_code_node.className = 'd-none detail_session_code';
}
let span_session_code_text_node = document.createTextNode('('+value.code+')');
span_session_code_node.appendChild(span_session_code_text_node);
//h2_session_node.appendChild(span_session_code_node);
span_session_title_node.appendChild(span_session_code_node);
h2_session_node.appendChild(span_session_title_node);
let span_session_badge_node = document.createElement('SPAN');
span_session_badge_node.id = 'detail_session_badge_'+value.id;
if (display_session_badges) {
span_session_badge_node.className = 'badge badge-pill badge-info d-inline';
} else {
span_session_badge_node.className = 'badge badge-pill badge-info d-none';
}
let span_session_badge_text_node = document.createTextNode(dateFns.format(session_startdatetime, 'ddd h:mm A'));
span_session_badge_node.appendChild(span_session_badge_text_node);
h2_session_node.appendChild(span_session_badge_node);
div_session_node.appendChild(h2_session_node);
// Add placeholder cards for session files and session presentations
// Files
@@ -100,7 +155,7 @@ async function render_event_session_records() {
files_div_node.appendChild(files_header_div_node);
files_div_node.appendChild(files_body_div_node);
div_node.appendChild(files_div_node);
div_session_node.appendChild(files_div_node);
// Presentations
let presentations_div_node = document.createElement('DIV');
@@ -126,10 +181,10 @@ async function render_event_session_records() {
presentations_div_node.appendChild(presentations_header_div_node);
presentations_div_node.appendChild(presentations_body_div_node);
div_node.appendChild(presentations_div_node);
div_session_node.appendChild(presentations_div_node);
document.getElementById('launcher_sessions').appendChild(div_node);
document.getElementById('launcher_sessions').appendChild(div_session_node);
}
} else {

24
app/js/module_app.js
View File

@@ -63,5 +63,29 @@ exports.load_config = function () {
} else {
//close();
}
//console.log(config);
return config;
}
exports.currently_online = function() {
//alert('You are currently online');
console.log('Currently online');
app_online = true;
document.getElementById('network_status1').classList.remove('btn-warning');
document.getElementById('network_status1').classList.add('btn-success');
document.getElementById('network_status1').innerHTML = '<span class="fas fa-check"></span> <span class="fas fa-globe"></span> Currently Online';
//document.getElementById('network_status1').innerHTML('Currently Online');
}
exports.currently_offline = function() {
//alert('You are currently offline');
console.log('Currently offline');
app_online = false;
document.getElementById('network_status1').classList.remove('btn-success');
document.getElementById('network_status1').classList.add('btn-warning');
document.getElementById('network_status1').innerHTML = '<span class="fas fa-exclamation"></span> <span class="fas fa-globe"></span> Currently Offline';
//document.getElementById('network_status1').innerHTML('Currently Offline');
}
//window.addEventListener('online', currently_online);
//window.addEventListener('offline', currently_offline);