/**
* Dashboard for Portal Application
* <BR><BR><img src=../images/dashboard.png width=60%>
* <BR><BR><a href="../html/dashboard.html">DEMO</a>
*/
class Dashboard extends HTMLElement {
constructor() {
console.group("Dashboard.constructor")
super();
console.groupEnd();
};
/**
* Set observable values here. When Changed, attributeChangedCallback is invoked
* @observedAttributes
*/
static get observedAttributes() {
console.group("Dashboard.observedAttributes");
this.observables = ["background"];
console.groupEnd();
return this.observables;
};
/**
* This function is called when this is attached to DOM
* @connectedCallback.
*/
connectedCallback() {
console.group("Dashboard.connectedCallback")
let self = this;
// GET PROPERTIES AND INTERESTING ELEMENTS
this._initialize();
this.config = $.getJSON(this.properties.config, function(data) {
let header = data.header;
self.innerHTML = `
<!-- HEADER START -->
<div>
<wc-header id="dashboard-header" uname="${header.uname}" sname="${header.sname}" aname="<font color=#FFF>${header.aname}</font>" lob="${self.properties.lob}" search="false">
<wc-header-topmenus>
<ul>
<li><a href="#" id="Support">Support</a></li>
<li><a href="#" id="contact">Contact Us</a></li>
<li><a href="http://www.dtcc.com" id="dtcc" target=_blank>DTCC.com</a>
</ul>
</wc-header-topmenus><wc-header-cogmenus>
</wc-header-cogmenus><wc-header-botmenus>
</wc-header-botmenus></wc-header>
</div>
<!-- HEADER END -->
<div class="container dashboard-container">
<div class="row">
<div class="col-md-8 dashboard-lhs" style="width:750px;padding-left:30px">
</div>
<div class="col-md-4 dashboard-rhs" style="width:480px;">
</div>
</div>
</div>
<div style="margin-top:20px;">
<div class="dashboard-footer">
</div>
</div>`;
// TILES - START
let length = data.applications.length;
var tmp = "<div class='clearfix'><h4><i class='fa fa-folder-open-o'></i> Applications</h4>";
if (length > 9) {
this.cls = "tile-md";
} else {
this.cls = "tile-lg";
}
for (var i=0; i<length; i++) {
let obj = data.applications[i]
tmp += `
<wc-tile id="dashboard-tile-${i}" class="${this.cls} ${obj.lob} lob-border-bottom lob-hover">
<div class="tile-header">
${obj.name}
</div>
<div class="tile-body">
${obj.description}
</div>
</wc-tile>`;
}
tmp += "</div>";
let lhs = _(".dashboard-lhs");
$(lhs).append(tmp);
// TILES - END
// ACCESS - START
let obj = data.access;
tmp = `
<div class="clearfix">
<wc-access id="dashboard-access" icon="key" hoverable="true">
<div class="wc-access-header">
${obj.header}
</div>
<div class="wc-access-body">
${obj.body}
</div>
</wc-access>
</div>`
$(lhs).append(tmp);
// ACCESS - END
// PROFILE - START
let rhs = _(".dashboard-rhs");
obj = data.profile;
var tmp = `<h4><i class='fa fa-user-o'></i> Profile
</h4><div class='clearfix'>
<wc-profile id="dashboard-profile" name="${obj.name}" phone="${obj.phone}" email="${obj.email}"></wc-profile></div>`
$(rhs).append(tmp);
// PROFILE - END
// ANNOUNCEMENTS - START
obj = data.announcements;
var tmp = `
<h4><i class="fa fa-bell-o"></i> Announcements</h4>
<wc-announcements id="dashboard-announcements">
<div class="wc-announcements-header">
${obj.header}
</div>`;
length = obj.pages.length;
for (var i=0; i<length; i++) {
let page = obj.pages[i];
tmp += `
<div class="wc-announcements-body">
${page.page}
</div>`
}
tmp += "</wc-announcements>";
$(rhs).append(tmp);
// ANNOUNCEMENTS - END
// DOCUMENTATIONS - START
obj = data.documentation;
tmp = "<h4><i class='fa fa-file-pdf-o'></i> Documentation</h4><wc-documentation id='dashboard-documentation'>";
length = obj.items.length;
for (var i=0; i<length; i++) {
let item = obj.items[i];
tmp += `
<div class="wc-documentation-item" id="item-${i}">
${item.document}
</div>`
}
tmp += "</wc-documentation>";
$(rhs).append(tmp);
// DOCUMENTATIONS - END
// FOOTER
let footer = _(".dashboard-footer");
tmp = `
<wc-footer id="dashboard-footer" class="clearfix">
<wc-footer-menus-lhs></wc-footer-menus-lhs>
<wc-footer-menus-rhs>
<ul>
<li><a href="#" id="contact">Contact Us</a></li>
<li><a href="#" id="support">Support</a></li>
<li><a href="#" id="policy">Private Policy</a></li>
<li><a href="#" id="terms">Terms of Use</a></li>
</ul>
</wc-footer-menus-rhs>
<wc-footer-copyright>
DTCC © 2016 All Rights Reserved
</wc-footer-copyright>
</wc-footer>`;
$(footer).append(tmp);
});
// ADD STATS AND OTHER FINAL STUFF
this._finalize();
// SHOW IT NOW (NO FLICKERS)
this.style.visibility = "visible";
console.groupEnd();
};
/**
* Invoked When component is removed. Usually with a .remove() function call
* @disconnectedCallback
*/
disconnectedCallback() {
console.group("Dashboard.disconnectedCallback")
/* CLEAN UP NOW */
console.groupEnd();
};
/**
* Called with .setAttribute(...) function call
* @attributeChangedCallback
*/
attributeChangedCallback(attr, oldval, newval) {
console.group("Dashboard.attributeChangedCallback:", attr, oldval, newval);
this.properties = this.properties || [];
let obs = Dashboard.observedAttributes;
for (let i = 0; i < obs.length; i++) {
this.properties[obs[i]] = newval;
console.log(obs[i] + ": " + this.properties.background);
// YOUR CODE FOR CHANGES GO HERE
}
console.groupEnd();
};
/**
* Stores DOM elements of interest for future use
* @_fetchElements
*/
_fetchElements() {
console.group("Dashboard._fetchElements");
this.dom = this.dom || [];
this.dom.content = this.innerHTML;
console.groupEnd();
};
/**
* Component attributes are _fetched and defaults are set if undefined
* @_fetchAttributes
* @param {string} [background=indianred] background color
*/
_fetchAttributes() {
console.group("Dashboard._fetchAttributes");
this.properties = {
"cname" : "Dashboard",
"author" : "Mel Heravi",
"version" : "1.0",
"background" : "indianred"
};
// SAVE WIDGET SPECIFIC PROPERTIES
this.propertiesW = [];
// SAVE ALL OTHER PROPERTIES
let attrs = wc.getAttributes(this)
for (var key in attrs) {
this.properties[key] = this.getAttribute(key);
this.propertiesW[key] = this.getAttribute(key);
console.log(key + ": " + attrs[key]);
}
console.log("attributes: ", this.properties);
console.groupEnd();
};
/**
* Destroy the instance object and artifacts
* @_destroy
*/
destroy() {
console.group("Dashboard.destroy:", this.id);
// FREE POINTER
delete this;
// REMOVE ITEM FROM DOM
this.parentNode.removeChild(this);
console.groupEnd();
};
/**
* SAVE DATA FOR ANALYTICS
* @__initialize
*/
_initialize() {
console.group("Dashboard._initialize:", this.id);
// FETCH ALL INTERESTING ELEMENTS
this._fetchElements();
// FETCH ALL ATTRIBUTES
this._fetchAttributes();
console.groupEnd();
};
/**
* SAVE DATA FOR ANALYTICS
* @__finalize
*/
_finalize() {
console.group("Dashboard._finalize:", this.id);
this.classList.add("wc");
// ADD ANALYTICS HERE
wc.getStats(this, this.properties.cname, this.properties.version);
console.groupEnd();
};
/**
* FOR TESTING PURPOSES
* @test
*/
static test() {
console.group("Dashboard.test");
console.log("testing results will be printed here...");
console.groupEnd();
return true;
}
}
window.customElements.define('wc-dashboard', Dashboard);