supercredit_com_broker/front-end/js/summary.js

var layout= {
    id: 'summary_layout',
    css: 'summary_layout',
	"rows": [
        {
            view: "toolbar", id:"topMenu", elements:[
              {
                view: "icon", icon: "mdi mdi-menu",
                click: function(){
                  return ; //disable side menu
                  if( $$("menu").config.hidden){
                    $$("menu").show();
                  }
                  else
                    $$("menu").hide();
                }
              },
              {
                view: "label",
                label: "Supercredit Transactions"
              }
            ]
        },
        { id:"workspace", rows:[
            { template:"loading ...." }
        ]},
        { "view": "template", id:"footer", css: "footer",  "template": "", "role": "placeholder", "height": 20 }
	]
}

//main area
webix.ui(layout)

//side menu
webix.ready(function(){
    webix.ui({
        view: "sidemenu",
        id: "menu",
        width: 200,
        position: "left",
        state:function(state){
          var toolbarHeight = $$("header").$height;
          state.top = toolbarHeight;
          state.height -= toolbarHeight;
        },
        css: "my_menu",
        body:{
          view:"list",
          borderless:true,
          scroll: false,
          template: "<span class='webix_icon mdi mdi-#icon#'></span> #value#",
          data:[
            {id: 1, value: "All", icon: "briefcase-account"},
            {id: 2, value: "upfront", icon: "account-arrow-left"},
            {id: 3, value: "Trail", icon: "account"},
            {id: 4, value: "Procesing", icon: "cube"},
            {id: 5, value: "App in Progress", icon: "chart-bar"},
            {id: 6, value: "Approved", icon: "database"},
            {id: 7, value: "Settled", icon: "cash-usd"},
            {id: 8, value: "Finished", icon: "cogs"}
          ],
          select:true,
          type:{
            height: 40
          }
        }
      });
    

    initTopMenu($$('summary_layout'), $$('topMenu'));
});


//summary data
var summary_graph = {
	"cols": [
		{
            "width": 200,
            "css" : "Label",
			"rows": [
				{ "padding": { "left": 10 },
					"cols": [
						{ "view": "label", "label": "Brokers" },
						{ "view": "icon", "icon": "wxi-search" }
					]
				},
				{ "view": "list", "url": "data/staff.json", "select": "true" }
			]
		},
		{
			"rows": [
                {
                    "view":"timeline", 
                    "layout": "x",
                    "height": 200,
                    "data": demo_summary_loan_counts,
                    "scroll": false
                },
				{
					"cols": [
                        { "view": "chart", "width": 400, "pieInnerText": "#value#", "label": "#month#", "url": "data/demo_chart.json" },
                        { "view": "chart", "type": "spline", "xAxis": { "template": "#value#", "lines": false },
                            "yAxis": {},
                            "url": "data/demo_chart.json"
                        },
    
						{ "view": "chart", "type": "barH", "yAxis": { "template": "#value#" },
							"xAxis": {},
							"color": "#color#",
							"url": "data/demo_chart.json"
						}
					]
				},
				{
					"view": "datatable",
					"columns": [
						{ "id": "title", "header": "Loan description", "fillspace": true, "sort": "string" },
						{ "id": "year", "header": "Date", "sort": "string" },
						{ "id": "votes", "header": "Loan Amount", "sort": "string" },
						{ "id": "rating", "header": "Upfront", "sort": "string" },
						{ "id": "rank", "header": "Tail paid", "sort": "string" },
						{ "id": "category", "header": "Lender", "sort": "string", "width": 200 }
					],
					"url": "data/demo_table.json"
				}
			]
		}
	]
}

webix.ready(function(){
  menu_show_summary();
});

function subview(v) {
  webix.ui(v, $$('summary_layout').getChildViews()[1]);
}

function menu_show_summary() {
  subview(summary_graph);
}

var list_loans =  {
  "width":0 ,
  "rows" : [
    {
      "id" : "loan_list",
      "view": "datatable",
      click: menu_loan_add,
      "columns": [
        { "id": "funder", "header": "Funder", "fillspace": true, "sort": "string" },
        { "id": "customer", "header": "Customers", "sort": "string", "width": 200 },
        { "id": "settlement", "header": "Settlement date", "sort": "string" },
        { "id": "loanamount", "header": "Loan Amount", "sort": "string" },
        {
          "id": "commission",
          "header": "Commission Margin",
          "sort": "string",
          "width": 200,
          "fillspace": false,
          "hidden": false,
          "css": "{'text-align':'center'}"
        },
        {
          "id": "net",
          "header": "Net Amount",
          "sort": "string",
          "width": 150,
          "fillspace": false,
          "hidden": false
        },
        { "id": "gst", "header": "GST", "fillspace": false, "hidden": false },
        { "id": "gross", "header": "Gross Amount", "fillspace": false, "hidden": false },
        { "id": "pay2broker", "header": "Pay to Broker", "width": 200, "fillspace": false, "hidden": false }
      ],
      "select": true,
      "scrollX": false,
      "url" : "data/loan.json",
      "width": 0
    },
    {
      "view": "datatable",
      "sort": false,
      "scroll" : false, 
      "columns": [
        { "id": "funder", "header": "", "fillspace": true, "sort": "string" },
        { "id": "customer", "header": "", "sort": "string", "width": 200 },
        { "id": "settlement", "header": " ", "sort": "string" },
        { "id": "loanamount", "header": " ", "sort": "string" },
        {
          "id": "commission",
          "header": " ",
          "sort": "string",
          "width": 200,
          "fillspace": false,
          "hidden": false,
          "css": "{'text-align':'center'}"
        },
        {
          "id": "net",
          "header": " ",
          "sort": "string",
          "width": 100,
          "fillspace": false,
          "hidden": false
        },
        { "id": "gst", "header": "", "fillspace": false, "hidden": false },
        { "id": "gross", "header": "", "fillspace": false, "hidden": false },
        { "id": "pay2broker", "header": "Total", "width": 200, "fillspace": false, "hidden": false }
      ],							
      "height": 100,
      "url" : "data/loan_total.json"
    }
  ]
};

function menu_loan_add() {
  loan_add_popup.show();
}

function menu_loan_list_all() {
  subview(list_loans);
  webix.ui({
    view:"contextmenu", id:"loan_list_cm",
    data: ["Add", "Edit", "Delete", "Properties"],
    master:$$("loan_list")   // component object
});
}

function menu_export_loans() {
  export_loans_popup.show();
  $$("export_loan_gage").setValue(0);
  setInterval(function(){
    $$("export_loan_gage").setValue(100);
  }, 100)

}


var search_loans = {
	"cols": [
		{
			"rows": [
				{
					"css": "webix_dark",
					"view": "toolbar",
					"cols": [
						{ "view": "label", "label": "Search Loan Transactions" },
						{ "view": "button", "label": "Close", "autowidth": true }
					]
				},
				{
					"autoheight": false,
					"view": "form",
					"rows": [
						{
							"cols": [
								{ "view": "text", "name": "name" },
								{ "view": "button", "css": "webix_primary", "label": "Search", "height": 38, "width": 100 }
							]
						},
						{
              "id": "search_loan_result",
							"view": "datatable",
							"columns": [
								{ "id": "funder", "header": "Funder", "fillspace": true, "sort": "string" },
								{ "id": "customer", "header": "Customers", "sort": "string", "width": 200 },
								{ "id": "settlement", "header": "Settlement date", "sort": "string" },
								{ "id": "loanamount", "header": "Loan Amount", "sort": "string" },
								{
									"id": "commission",
									"header": "Commission Margin",
									"sort": "string",
									"width": 200,
									"fillspace": false,
									"hidden": false,
									"css": "{'text-align':'center'}"
								},
								{
									"id": "net",
									"header": "Net Amount",
									"sort": "string",
									"width": 150,
									"fillspace": false,
									"hidden": false
								},
								{ "id": "gst", "header": "GST", "fillspace": false, "hidden": false },
								{ "id": "gross", "header": "Gross Amount", "fillspace": false, "hidden": false },
								{ "id": "pay2broker", "header": "Pay to Broker", "width": 200, "fillspace": false, "hidden": false }
							],
							"select": true,
							"scrollX": false,
							"url" : "data/loan.json",
							"width": 0
						},
					]
				}
			]
		}
	]
};

function menu_search_loans() {
  subview(search_loans);
}
function menu_list_trails() {
  trail_popup.show();
}
function menu_import_trail() {
  uploader_popup.show();
}
function menu_add_client() {
  client_form_popup.show();
}
function menu_list_clients() {
  alert("working...");
}
function menu_search_clients() {
  alert("working...");
}
function menu_broadcast_clients() {
  broadcast_popup.show();
}
function menu_add_broker() {
  broker_form_popup.show();
}
function menu_list_brokers() {
  alert("working...");
}
function menu_search_brokers() {
  alert("working...");
}
function menu_broadcast_brokers() {
  broadcast_popup.show();
}

function menu_list_unpaid_brokers() {
  alert("working...");
}

function load_add() {

}