energy_system_modelling_workflow/js/renderer.js

const { dialog } = require('@electron/remote')
const { Console } = require('console')
const { app, BrowserWindow, Notification, electron } = require('electron')
const { get } = require('http')
const path = require('path')

let {PythonShell} = require('python-shell')

function showNotification () {  new Notification({ title: 'NOTIFICATION_TITLE', body: 'event_text' }).show()}

document.getElementById('gml').addEventListener('click', async () => {
  document.getElementById('chart').style.visibility = 'hidden'
  dialog.showOpenDialog({ properties: ['openFile'], filters: [{ name: 'CityGml', extensions: ['gml'] }]}).then(function (response) {
    if (!response.canceled) {
      document.getElementById("gml_file_path").innerText = response.filePaths[0]
      var options = {args: ['-g ' + document.getElementById('gml_file_path').innerHTML]}
      run_script('ep_workflow.py', options)
    } 
    else {
      console.log("no file selected");
    }
  });
})

var dates = []
var heating = []
var cooling = []
var area = ''
var volume = ''
var chart;

function plot_results() {

  var Chart = require('chart.js');
  var canvas = document.getElementById('chart')
  var ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  try {
    chart.destroy()
  }
  catch {
    console.log('chart undefined')
  }
  chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'line',
  // The data for our dataset
  data: {
  labels: dates,
  datasets: [{
    label: 'Heating (J)',
    borderColor: 'rgb(255, 99, 132)',
    data: heating
  },
  { label: 'Cooling (J)',
    borderColor: 'rgb(132, 99, 255)',
    data: cooling
  }]
  },
  // Configuration options go here
  options: {}
  });
  document.getElementById('outputs').style.visibility = "visible"
  document.getElementById('chart').style.visibility = "visible"
}

function run_script(script, parameters='') {
  document.getElementById('outputs').style.visibility = "hidden"
  document.getElementById('spinner').style.visibility = "visible"
  var start = Date.now();
  document.getElementById('debug').innerHTML = ''
  script_path = String([path.join(__dirname, 'scripts', script)])
  //Options are the script parameters
  let pyshell = new PythonShell(script_path, parameters);
  pyshell.on('message', function (message) {
    document.getElementById("debug_div").style.visibility = "visible"
    if (message == '[simulation start]') {
      start = Date.now()
      dates = []
      heating = []
      cooling = []
    }
    else if (message == '[simulation end]')
    {
      document.getElementById("debug_div").style.visibility = "hidden"
      document.getElementById('spinner').style.visibility = "hidden"
      plot_results()
    }
    else if (message == '[simulation abort]')
    {
      document.getElementById('spinner').style.visibility = "hidden"
    }
    else if (message.substring(0, 4) == 'row:')
    {
      message = message.replace('row: ', '')
      row = message.split(',')
      dates.push(row[0])
      heating.push(row[1])
      cooling.push(row[2])
    }
    else if (message.substring(0, 6) == 'error:')
    {
      message = message.replace('error: ', '')
      message = '<label class="error">' + message + '</label>'
      document.getElementById('debug').innerHTML =  message
    }
    else if (message.substring(0, 5) == 'info:')
    {
      message = message.replace('info: ', '')
      info = message.split(',')
      idf_file = info[0]
      csv_file = info[1]
      eso_file = info[2]
      area = info[3]
      volume = info[4]
      obj_file = info[5]

      _link = document.getElementById('idf')
      _link.href = idf_file
      _link.innerHTML = idf_file.substring(idf_file.lastIndexOf('/')+1);

      _link = document.getElementById('csv')
      _link.href = csv_file
      _link.innerHTML = csv_file.substring(csv_file.lastIndexOf('/')+1);

      _link = document.getElementById('eso')
      _link.href = eso_file
      _link.innerHTML = eso_file.substring(eso_file.lastIndexOf('/')+1);

      document.getElementById('area').innerText = Math.round(area * 100)/100 + ' m²'
      document.getElementById('volume').innerText = Math.round(volume * 100)/100 + ' m³'

    }
    else {
      message = '<label class="highlight">' + (Date.now()-start) + ' ms</label>' + message
      start = Date.now()
      document.getElementById('debug').innerHTML =  message
    }

  });
  pyshell.end(function (err,code,signal) {    
    console.log(err);
    console.log(code);
    console.log(signal);
  });
}