vimana

index.js

import 'core-js/stable';

import './index.scss';

import {
  render,
  mount,
  cloneDeep
} from './modules/utilities';

import {
  get
} from './modules/request';

var DEVICES_ENDPOINT = 'https://app.staging.vimana.us/api/v3/interview/device';
var STATE_COLOR_ENDPOINT = 'https://app.staging.vimana.us/api/v3/interview/state/color';

var DEVICE_CARD = {
  tagname: 'div',
  attributes: {
    'class': 'device-card'
  },
  children: [
    'Welcome to Vimana'
  ],
  events: {}
};

var DEVICE_STATE = {
  tagname: 'div',
  attributes: {
    'class': 'device-state'
  },
  children: [
    'Welcome to Vimana'
  ],
  events: {}
};

var DEVICE_LIST = {
  tagname: 'div',
  attributes: {
    'class': 'device-list'
  },
  children: [],
  events: {}
};

var APP = {
  tagname: 'div',
  attributes: {
    'class': 'app'
  },
  children: [
    'Welcome to Vimana',
    DEVICE_LIST
  ],
  events: {}
};

function getStateColor() {
  return get(STATE_COLOR_ENDPOINT);
}

function buildDeviceGrid(data) {
  var frag = document.createDocumentFragment();
  for (var i = 0; i < data.length; i++) {
    frag.appendChild(createCard(data[i]));
  }
  return frag;
}

function getStatesForDevices(data) {
  for (var i = 0; i < data.length; i++) {
    get(`${DEVICES_ENDPOINT}/${data[i].id}/state`).then((color) => {
      updateCard(color);
    });
  }
}

function createCard(data) {
  var deviceCard = cloneDeep(DEVICE_CARD);
  deviceCard.children = [data.name];
  deviceCard.attributes.class = `${deviceCard.attributes.class} ${data.id}`;
  return render(deviceCard);
}

function updateCard(data) {
  var card = document.querySelector(`.${data.id}`);
  var state = cloneDeep(DEVICE_STATE);
  state.children = [data.state];
  card.appendChild(render(state));
  card.classList.add(data.state);
  card.style.backgroundColor = stateColors[data.state];
}

function fetchDevices() {
  return get(DEVICES_ENDPOINT);
}

let stateColors = null;
let devices = null;

document.addEventListener('DOMContentLoaded', async() => {
  const dom = render(APP);
  const selector = document.querySelector('#app');
  mount(dom, selector);

  // Get State Colors
  stateColors = await getStateColor();

  // Get Devices List
  devices = await fetchDevices();
  var devicesGrid = buildDeviceGrid(devices);
  var deviceList = document.querySelector('.device-list');
  deviceList.appendChild(devicesGrid);
  getStatesForDevices(devices);
}, true);