OSIT-AE-App-Native-Electron/app/js/module_app_ui.js

const os = require('os');
const path = require('path');
const fs = require('fs');

const { ipcRenderer } = require('electron');


exports.render_launcher = async function (launcher_tmp) {
  console.log('Rendering launcher_tmp...');
  
  console.log('In module_app_ui.js v2 idb to launcher object: ***');
  console.log(launcher_tmp);
  console.log('In module_app_ui.js v2 idb to launcher object: ^^^');
  
  for (var i in launcher_tmp.event) {
    if (launcher_tmp.event[i].id == event_id) {
      console.log('*** Event id ('+event_id+') found in launcher object.');
      for (var j in launcher_tmp.location) {
        if (launcher_tmp.location[j].id == event_location_id) {
          console.log('*** Location id ('+event_location_id+') found in launcher object.');
          document.getElementById('location_title').innerHTML = '<h1>Launcher '+launcher_tmp.location[j].name+'@'+launcher_tmp.event[i].name+'</h1>';
        } else {
        }
      }
    } else {
    }
  }
  
  document.getElementById('event_files_menu').innerHTML = '<h2>Event Files</h2>';
  document.getElementById('event_files_menu').innerHTML += '<ul class="list-group list-group-flush">';
  for (var i in launcher_tmp.event_file) {
    document.getElementById('event_files_menu').innerHTML += '<li id="menu_event_file_id_'+launcher_tmp.event_file[i].id+'" class="list-group-item btn btn-secondary d-flex justify-content-between align-items-center open_local_file" data-hash_sha256="'+launcher_tmp.event_file[i].hash_sha256+'.file" data-filename="'+launcher_tmp.event_file[i].event_file_filename+'">'+launcher_tmp.event_file[i].event_file_filename+'</li>';
  }
  document.getElementById('event_files_menu').innerHTML += '</ul>';
  
  
  document.getElementById('location_files_menu').innerHTML = '<h2>Location Files</h2>';
  document.getElementById('location_files_menu').innerHTML += '<ul class="list-group list-group-flush" role="">';
  for (var i in launcher_tmp.location_file) {
    document.getElementById('location_files_menu').innerHTML += '<li id="menu_event_file_id_'+launcher_tmp.location_file[i].id+'" class="list-group-item btn btn-secondary d-flex justify-content-between align-items-center open_local_file" data-hash_sha256="'+launcher_tmp.location_file[i].hash_sha256+'.file" data-filename="'+launcher_tmp.location_file[i].event_file_filename+'">'+launcher_tmp.location_file[i].event_file_filename+'</li>';
  }
  document.getElementById('location_files_menu').innerHTML += '</ul>';
  
  document.getElementById('sessions_menu').innerHTML = '<h2>Sessions</h2>';
  document.getElementById('sessions_menu').innerHTML += '<ul class="list-group list-group-flush" role="">';
  //let location_detail = '';
  if (document.getElementById('location_detail').innerHTML.length) {
    console.log('detail_session_id_xx already exists');
  } else {
    console.log('location_detail already populated');
    document.getElementById('location_detail').innerHTML = ''; // This needs to be reviewed.
  }
  for (var i in launcher_tmp.session) {
    // List sessions in menu
    document.getElementById('sessions_menu').innerHTML += '<li id="menu_session_id_'+launcher_tmp.session[i].id+'" class="list-group-item btn btn-info d-flex justify-content-between align-items-center btn_view_session" data-session_id="'+launcher_tmp.session[i].id+'">'+launcher_tmp.session[i].name+'</li>';
    
    // Create containers for each session
    let session_detail = '';
    
    if (typeof(document.getElementById('detail_session_id_'+launcher_tmp.session[i].id)) != 'undefined' && document.getElementById('detail_session_id_'+launcher_tmp.session[i].id) != null) {
      //console.log('detail_session_id_xx already exists');
    } else {
      //console.log('Adding detail_session_id_xx');
      session_detail += '<div id="detail_session_id_'+launcher_tmp.session[i].id+'" class="container d-none session_detail" data-session_id="'+launcher_tmp.session[i].id+'">';
    }
    
    
    
    var session_startdatetime = new Date(launcher_tmp.session[i].start_datetime);
    
    session_detail += '<h2 class="session_title d-flex justify-content-between align-items-center">'+launcher_tmp.session[i].name+'<span class="badge badge-pill badge-info">'+dateFns.format(session_startdatetime, 'ddd h:mm A')+'</span>'+'</h2>';
    
    
    // *** Session files card section start
    let session_files_card = '';
    if (typeof launcher_tmp.session[i].file !== 'undefined') {
      session_files_card += '<div class="card">';
      session_files_card += '<div class="card-header">Session Files:</div>';
      session_files_card += '<div class="card-body">';
      
      let files_list = '';
      files_list += '<ul class="list-group list-group-flush">';
      for (var j in launcher_tmp.session[i].file) {
        let file = launcher_tmp.session[i].file[j];
        //console.log(file.event_file_filename);
        
        files_list += '<li class="list-group-item btn btn-primary d-flex justify-content-between align-items-center open_local_file" data-hash_sha256="'+file.hash_sha256+'.file" data-filename="'+file.event_file_filename+'">';
        files_list += file.event_file_filename;
        files_list += '<span class="badge badge-pill badge-light">'+format_bytes(file.size, 2)+'; '+dateFns.format(file.created_on, 'MMM M h:mm A')+'; '+file.internal_os+'</span>';
        files_list += '</li>';
      }
      files_list += '</ul>';
      session_files_card += files_list;
      
      session_files_card += '</div>'; // for card-body
      session_files_card += '</div> <!-- for session files card -->'; // for session files card
    } else {
      //session_files_card = 'no session files found';
    }
    // *** Session files card section end
    
    session_detail += session_files_card;
    
    // *** Session presentations card section start
    let session_presentations_card = '';
    if (typeof launcher_tmp.session[i].presentation !== 'undefined') {
      
      session_presentations_card += '<div class="card">';
      session_presentations_card += '<div class="card-header">Presentations:</div>';
      session_presentations_card += '<div class="card-body">';
      
      let presentations_list = '';
      presentations_list += '<ul class="list-group list-group-flush">';
    
      let presentation = '';
      for (var j in launcher_tmp.session[i].presentation) {
        presentation = launcher_tmp.session[i].presentation[j];
        
        //var session_presentation_startdatetime = new Date(launcher_tmp.session[i].presentation[j].start_datetime);
        
        presentations_list += '<li class="list-group-item">';
          presentations_list += '<div class="list-group-item-heading d-flex justify-content-between align-items-center">';
            presentations_list += '<strong class="">'+presentation.name+'</strong>';
            presentations_list += '<span class="badge badge-pill badge-info">'+dateFns.format(presentation.start_datetime, 'h:mm a')+'</span>';
          presentations_list += '</div>';
        
        presentations_list += '<div class="list-group-item-text">'; // Start presentation file list and presenters with files lists
        
        if (typeof presentation.file !== 'undefined') {
          let files_list = '';
          files_list += '<ul class="list-group list-group-flush">';
          for (var k in presentation.file) {
            let file = presentation.file[k];
            //console.log(file.event_file_filename);
            
            files_list += '<li class="list-group-item btn btn-primary d-flex justify-content-between align-items-center open_local_file" data-hash_sha256="'+file.hash_sha256+'.file" data-filename="'+file.event_file_filename+'">';
            files_list += file.event_file_filename;
            files_list += '<span class="badge badge-pill badge-light float-right">'+format_bytes(file.size, 2)+'; '+dateFns.format(file.created_on, 'MMM M h:mm A')+'; '+file.internal_os+'</span>';
            files_list += '</li>';
          }
          files_list += '</ul>';
          presentations_list += files_list;
        } else {
          files_list = '<div>None here!</div>';
          presentations_list += files_list;
        }
        
        let presenters_list = '';
        for (var k in presentation.presenter) {
          let presenter = presentation.presenter[k];
          //console.log(presenter.given_name);
          
          presenters_list += '<li class="list-group-item">';
          presenters_list += '<strong class="list-group-item-heading">'+presenter.given_name+' '+presenter.family_name+'</strong>';
          
          if (typeof presenter.file !== 'undefined') {
            let files_list = '';
            files_list += '<ul class="list-group list-group-flush list-group-item-text">';
            for (var l in presenter.file) {
              let file = presenter.file[l];
              
              /*
              files_list += '<li class="list-group-item list-group-item-action open_local_file" data-hash_sha256="'+launcher_tmp.session[i].presentation[j].presenter[k].file[l].hash_sha256+'.file" data-filename="'+launcher_tmp.session[i].presentation[j].presenter[k].file[l].event_file_filename+'">';
              files_list += '<button class="btn btn-info open_local_file" data-hash_sha256="'+launcher_tmp.session[i].presentation[j].presenter[k].file[l].hash_sha256+'.file" data-filename="'+launcher_tmp.session[i].presentation[j].presenter[k].file[l].event_file_filename+'">'+launcher_tmp.session[i].presentation[j].presenter[k].file[l].event_file_filename+'</button>';
              
              var event_file_size = launcher_tmp.session[i].presentation[j].presenter[k].file[l].size;
              var event_file_created_on = new Date(launcher_tmp.session[i].presentation[j].presenter[k].file[l].created_on);
              
              session_detail += '<span class="badge badge-pill badge-light float-right">'+format_bytes(event_file_size, 2)+'; '+dateFns.format(event_file_created_on, 'MMM M h:mm A')+'; '+launcher_tmp.session[i].presentation[j].presenter[k].file[l].internal_os+'</span>';
              
              
              session_detail += '</li>';
              */
              files_list += '<li class="list-group-item btn btn-primary d-flex justify-content-between align-items-center open_local_file" data-hash_sha256="'+file.hash_sha256+'.file" data-filename="'+file.event_file_filename+'">';
              files_list += file.event_file_filename;
              files_list += '<span class="badge badge-pill badge-light float-right">'+format_bytes(file.size, 2)+'; '+dateFns.format(file.created_on, 'MMM M h:mm A')+'; '+file.internal_os+'</span>';
              files_list += '</li>';
            }
            files_list += '</ul>';
            presenters_list += files_list;
          } else {
            files_list = '<div>None here!</div>';
            presenters_list += files_list;
          }
          presenters_list +='</li>'; // End presenter's list group item (one presenter and their files)
        }
        presentations_list += presenters_list;
        
        presentations_list += '</li>'; // close presentation files and presenters with files
        
      }
      
      presentations_list += '</ul>'; // end of presentations with files list
      
      session_presentations_card += presentations_list;
      session_presentations_card += '</div>'; // for presentations card-body
      session_presentations_card += '</div> <!-- for card -->'; // for presentations card
    
      
      session_detail += session_presentations_card;
      //session_detail += '</div> <!-- for session_presentations -->'; // for session_presentations
      
    //session_detail += '</div>'; // for card-group
    
    }
    session_detail += '</div> <!-- End session detail for '+launcher_tmp.session[i].id+' -->';
    // *** Session presentations card section start
    
    //document.getElementById('location_detail').innerHTML += session_detail;
    
    if (typeof(document.getElementById('detail_session_id_'+launcher_tmp.session[i].id))  != 'undefined' && document.getElementById('detail_session_id_'+launcher_tmp.session[i].id) != null) {
      document.getElementById('detail_session_id_'+launcher_tmp.session[i].id).innerHTML = session_detail;
    } else {
      document.getElementById('location_detail').innerHTML += session_detail;
    }
    
    
  }
  document.getElementById('sessions_menu').innerHTML += '</ul>';
  
  index_location_detail('btn_view_session');
  
  index_open_file_buttons('open_local_file');

  
  //const btn_session_{{ event_presentation.id }}_name = document.querySelector('button#presentation_{{ event_presentation.id }}_name');
  //btn_presentation_{{ event_presentation.id }}_name.onclick = display_hide_poster_for_type_id.bind(this, true, 'presentation', {{ event_presentation.id }});
  console.log('Rendering launcher finished.');
  
  return true;
}


/* Updated 2019-12-19 */
function index_location_detail(class_name) {
  var class_elements = document.getElementsByClassName(class_name);
  
  for (var i = 0; i < class_elements.length; i++) {
    class_elements[i].addEventListener( 'click', function() {view_session( this.getAttribute('data-session_id')) } );
  }
  
  return true;
}


/* Updated 2019-12-19 */
function view_session(session_id) {
  var class_elements = document.getElementsByClassName('session_detail');
  console.log('*** Session ID: '+session_id);
  for (var i = 0; i < class_elements.length; i++) {
    console.log('*** checking: '+class_elements[i].getAttribute('data-session_id'));
    if (class_elements[i].getAttribute('data-session_id') == session_id) {
      console.log('show');
      class_elements[i].classList.remove('d-none');
      class_elements[i].classList.add('d-block');
    } else {
      console.log('hide');
      class_elements[i].classList.remove('d-block');
      class_elements[i].classList.add('d-none');
    }
  }
  
  return true;
}





/* Updated 2019-12-20 */
function index_open_file_buttons(class_name) {
  var class_elements = document.getElementsByClassName(class_name);
  
  for (var i = 0; i < class_elements.length; i++) {
    //class_elements[i].addEventListener( 'click', function() {open_local_file( this.getAttribute('data-filename')) } );
    
    //let directory = 'file_cache/';
    
    //directory_and_filename = path.join(directory, class_elements[i].getAttribute('data-filename'));
    
    let file_path = path.join(host_file_cache_path, class_elements[i].getAttribute('data-hash_sha256'));
    let filename = class_elements[i].getAttribute('data-filename');
    
    class_elements[i].addEventListener( 'click', function() { ipcRenderer.send('open_local_file', file_path, filename) } );
    //ipcRenderer.send('open_local_file', this.getAttribute('data-filename')); // in render thread
  }
  
  return true;
}



function format_bytes(bytes, decimals = 2) {
    if (bytes === 0) return '0 Bytes';

    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

    const i = Math.floor(Math.log(bytes) / Math.log(k));

    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}