pareto-anywhere/web/apps/js/hello-spatem.js

Open source IoT middleware suite that makes the data from just about anything usable. We believe in an open Internet of Things.

/**
 * Copyright reelyActive 2022-2026
 * We believe in an open Internet of Things
 */


// Constants
const TIME_OPTIONS = { hour: "2-digit", minute: "2-digit", hour12: false };
const DEMO_SEARCH_PARAMETER = 'demo';

// DOM elements
let connectIcon = document.querySelector('#connectIcon');
let demoalert = document.querySelector('#demoalert');
let message = document.querySelector('#message');
let deviceCount =  document.querySelector('#deviceCount');
let spatemRate = document.querySelector('#spatemRate');
let spatemDisplay = document.querySelector('#spatemdisplay');
let listLengthSelect = document.querySelector('#listLengthSelect');

// Other variables
let selectedDeviceSignature;
let cormorantOptions;
let maxNumberOfListedDevices = 10;

// Initialise based on URL search parameters, if any
let searchParams = new URLSearchParams(location.search);
let isDemo = searchParams.has(DEMO_SEARCH_PARAMETER);
let baseUrl = window.location.protocol + '//' + window.location.hostname + ':' +
              window.location.port;

// Instantiate the devices table
let devicesTableOptions = {
  beaver: beaver,
  digitalTwins: cormorant.digitalTwins,
  isFilteredDevice: isFilteredDevice,
  isClockDisplayed: true,
  maxRows: maxNumberOfListedDevices
};
let devicesTable = new DevicesTable('#devicestable', devicesTableOptions);

// Handle beaver events
beaver.on('connect', handleConnect);
beaver.on('spatem', handleSpatem);
beaver.on('stats', handleStats);
beaver.on('error', handleError);
beaver.on('disconnect', handleDisconnect);

// Handle devicesTable and selectListLength events
devicesTable.on('selection', handleSelection);
listLengthSelect.addEventListener('change', updateListLength);

// Demo mode: connect to starling.js
if(isDemo) {
  let demoIcon = createElement('b', 'animate-breathing text-success', 'DEMO');
  connectIcon.replaceChildren(demoIcon);
  beaver.stream(null, { io: starling, ioUrl: "http://pareto.local" });
}

// Normal mode: connect to socket.io
else {
  beaver.stream(baseUrl, { io: io });
  cormorantOptions = { associationsServerUrl: baseUrl };
}

// Handle stream connection
function handleConnect() {
  demoalert.hidden = true;
  connectIcon.replaceChildren(createElement('i', 'fas fa-cloud text-success'));
}

// Handle stream disconnection
function handleDisconnect() {
  connectIcon.replaceChildren(createElement('i', 'fas fa-cloud text-warning'));
}

// Handle error
function handleError(error) {
  connectIcon.replaceChildren(createElement('i', 'fas fa-cloud text-danger'));
  demoalert.hidden = false;
}

// Handle stats
function handleStats(stats) {
  deviceCount.textContent = stats.numberOfDevices;
  spatemRate.textContent = stats.eventsPerSecond.spatem.toFixed(1);
}

// Handle a spatem event
function handleSpatem(spatem) {
  let deviceSignature = spatem.deviceId + '/' + spatem.deviceIdType;
  let device = beaver.devices.get(deviceSignature);

  cormorant.retrieveDigitalTwin(deviceSignature, null, cormorantOptions,
                                (digitalTwin, isRetrievedFromMemory) => {
    if(digitalTwin && !isRetrievedFromMemory) {
      devicesTable.updateDigitalTwin(deviceSignature, digitalTwin);
    }
  });

  if(device) {
    devicesTable.insertDevice(deviceSignature, device);
  }
  if(!selectedDeviceSignature ||
     (deviceSignature === selectedDeviceSignature)) {
    cuttlefishSpatem.render(spatem, spatemdisplay);
    message.hidden = true;
  }
}

// Handle a device selection event
function handleSelection(deviceSignature) {
  selectedDeviceSignature = deviceSignature;
  let spatem;

  if(beaver.devices.has(selectedDeviceSignature)) {
    let selectedDevice = beaver.devices.get(selectedDeviceSignature);
    spatem = selectedDevice.spatem;
  }

  cuttlefishSpatem.render(spatem || {}, spatemdisplay);
}

// Update the length of devices listed in the table
function updateListLength() {
  maxNumberOfListedDevices = parseInt(listLengthSelect.value);
  devicesTable.changeMaxRows(maxNumberOfListedDevices);
}

// Determine if the given device is passing the filter
function isFilteredDevice(device) {
  return device.hasOwnProperty('spatem');
}

// Create an element as specified
function createElement(elementName, classNames, content) {
  let element = document.createElement(elementName);

  if(classNames) {
    element.setAttribute('class', classNames);
  }

  if((content instanceof Element) || (content instanceof DocumentFragment)) {
    element.appendChild(content);
  }
  else if(Array.isArray(content)) {
    content.forEach(function(item) {
      if((item instanceof Element) || (item instanceof DocumentFragment)) {
        element.appendChild(item);
      }
      else {
        element.appendChild(document.createTextNode(item));
      }
    });
  }
  else if(content) {
    element.appendChild(document.createTextNode(content));
  }

  return element;
}