FireDaemon Fusion 6 (CORSing) example

Quickly shows how to use FireDaemon Fusion 6's API. It can be used in both scenarios - same-site and cross-origin (CORS).

by klaus triendl

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>
    <div id="fusion" class="table fusion-actions" data-link="class{merge:loggedIn toggle='loggedin'}">
      <div class="tcaption">
        Hello Fusion
      </div>
      <div class="thead">
        <div class="trow">
          <div class="tcell">
            Action
          </div>
          <div class="tcell">
            Last Http Status
          </div>
          <div class="tcell">
            Response Excerpt
          </div>
        </div>
      </div>
      <div class="tbody">
        <div class="trow">
          <div class="tcell">
            <button data-link="{on ~performLogin}">Login</button>
          </div>
          <div class="tcell" data-link="{:login.http} class{merge:lastAction=='login' toggle='last-action'}">
          </div>
          <div class="tcell" data-link="login.replyExcerpt">
          </div>
        </div>
        <div class="trow">
          <div class="tcell">
            <button data-link="{on ~performUi0detectStatus}">UI0Detect Status</button>
          </div>
          <div class="tcell" data-link="{:ui0detectStatus.http} class{merge:lastAction=='ui0detectStatus' toggle='last-action'}">
          </div>
          <div class="tcell" data-link="ui0detectStatus.replyExcerpt">
          </div>
        </div>
        <div class="trow">
          <div class="tcell">
            <button data-link="{on ~performUi0detectRestart}">Restart UI0Detect</button>
          </div>
          <div class="tcell" data-link="{:ui0detectRestart.http} class{merge:lastAction=='ui0detectRestart' toggle='last-action'}">
          </div>
          <div class="tcell" data-link="ui0detectRestart.replyExcerpt">
          </div>
        </div>
        <div class="trow">
          <div class="tcell">
            <button data-link="{on ~performFdproList}">FDPro services</button>
          </div>
          <div class="tcell" data-link="{:fdproList.http}...

CSS

body {
  display: block;
  margin: 0px;
  background: #20262e;
  font-family: Helvetica;
}

.table {
  display: table;
}
.trow {
  display: table-row;
}
.tcell {
  display: table-cell;
}
.tcaption {
  display: table-caption;
}
.thead {
  display: table-header-group;
  font-weight: bold;
}
.tbody {
  display: table-row-group;
}

.fusion-actions {
  table-layout: fixed;
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  margin: 20px auto;
  width: calc(100% - 40px * 2);
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
}

.fusion-actions.loggedin {
  background: #0084ff;
  color: #fff;
}

.fusion-actions.loggedin button {
  background: #fff;
  color: #000;
}

.fusion-actions > .tcaption {
  background: inherit;
  color: inherit;
  padding: 2px 20px;
  margin: 0 0 1px 0;
  border-radius: 4px;
  font-size: x-large;
  font-weight: bold;
}
.fusion-actions.loggedin > .tcaption {
  background: #fff;
  color: #000;
}
.fusion-actions .tcell {
  padding: 1px;
}
.fusion-actions > .thead .tcell {
  border-bottom: 1px dotted;
  padding-bottom: 5px;
}
.last-action:before {
  content: "⇒ ";
  font-weight: bold;
}

JavaScript

var fusionBaseUrl = 'https://127.0.0.1:20604';
var loginData = {
	userName: 'admin',
  password: 'admin'
};


function requestLogin() {
	return $.post({
    url: fusionBaseUrl + '/auth/login',
    data: JSON.stringify(loginData),
    contentType: 'application/json',
    dataType: 'json',
    xhrFields: { withCredentials: true },
  });
}

function requestLogout() {
  return $.ajax({
    type: 'delete',
    url: fusionBaseUrl + '/auth/logout',
    xhrFields: { withCredentials: true },
  });
}

function requestFetchCtrlStatus(svcname) {
  return $.get({
    url: fusionBaseUrl + encodeURI('/api/v1/services/' + svcname + '/control-state'),
    dataType: 'json',
    xhrFields: { withCredentials: true },
  });
}

function requestCtrlService(svcname, action) {
  return $.post({
    url: fusionBaseUrl + '/api/v1/services.control',
    data: { action: action, svcname: svcname },
    // contentType: 'application/x-www-form-urlencoded',
    xhrFields: { withCredentials: true },
  });
}

function requestFetchFdproList() {
  return $.get({
    url: fusionBaseUrl + encodeURI('/api/v1/services.datatables?fd-only='),
    dataType: 'json',
    xhrFields: { withCredentials: true },
  });
}


// sort out IE issues in regard to self-signed certs;
// http://jonnyreeves.co.uk/2013/making-xhr-request-to-https-domains-with-winjs/
// https://stackoverflow.com/a/28608501/279251
$.get('xyz', null, null);


var jsvmodel = {
  loggedIn: false,
  lastAction: null,
  login: {
    http: null,
    replyExcerpt: '',
  },
  ui0detectStatus: {
    http: null,
    replyExcerpt: '',
  },
  ui0detectRestart: {
    http: null,
    replyExcerpt: '',
  },
  fdproList: {
    http: null,
    replyExcerpt: '',
  },
  logout: {
    http: null,
    replyExcerpt: '',
  },
};

$(document).ready(function() {
  function showWaitStatus(action) {
    var props = {
      lastAction: action,
    };
    props[action + '.http'] = '...';
    props[action + '.replyExcerpt'] = null;
   ...