www-thermferm/js/maintenance_panel.js

/*****************************************************************************
 * Copyright (C) 2014
 *   
 * Michiel Broek <mbroek at mbse dot eu>
 *
 * This file is part of ThermFerm
 *
 * This is free software; you can redistribute it and/or modify it
 * under the terms of the GNU General Public License as published by the
 * Free Software Foundation; either version 2, or (at your option) any
 * later version.
 *
 * ThermFerm is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with ThermFerm; see the file COPYING.  If not, write to the Free
 * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
 *****************************************************************************/

$(document).ready(function () {

    var data = {};
    var theme = 'ui-redmond';

    /*
     * 1-Wire bus
     */
    var source_bus = {
     	datatype: "json",
     	datafields: [
       	    { name: 'Address', type: 'string' },
       	    { name: 'Refcnt', type: 'int' },
       	    { name: 'Chip', type: 'string' },
       	    { name: 'Description', type: 'string' }
     	],
     	url: 'getbus.php'
    };
    var dataAdapter_bus = new $.jqx.dataAdapter(source_bus);
    $("#jqxgrid_bus").jqxGrid( {
	width: 770, height: 280,
	source: dataAdapter_bus,
	theme: theme,
	columnsresize: true,
	columns: [
	    { text: 'Address', datafield: 'Address', width: 150 },
	    { text: 'References', datafield: 'Refcnt', width: 100 },
	    { text: 'Chipset', datafield: 'Chip', width: 120 },
	    { text: 'Description', datafield: 'Description', minwidth: 120 }
	]
    });

    /*
     * Profiles
     */
    var source_profiles = {
        datatype: "json",
        datafields: [
            { name: 'UUID', type: 'string' },
            { name: 'Name', type: 'string' },
            { name: 'Steps', type: 'int' }
        ],
	id: 'UUID',
        url: 'getprofiles.php',
	insertrow: function (rowid, commit) {
	    var data = "insert=true&amp;" + $.param({Name: rowid});
	    $.ajax({
		dataType: 'json',
		url: 'getprofiles.php',
		data: data,
		cache: false,
		success: function (data, status, xhr) {
		    // insert command is executed.
		    commit(true);
		},
		error: function(jqXHR, textStatus, errorThrown) {
		    commit(false);
		}
	    });
	},
        deleterow: function (rowid, commit) {
            var data = "delete=true&amp;" + $.param({UUID: rowid});
            $.ajax({
                dataType: 'json',
                url: 'getprofiles.php',
                data: data,
                cache: false,
                success: function (data, status, xhr) {
                    // insert command is executed.
                    commit(true);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    commit(false);
                }
            });
        },
	updaterow: function (rowid, rowdata, commit) {
	    // synchronize with the server - send update command
	    var data = "update=true&UUID=" + rowdata.UUID + "&Name=" + rowdata.Name;
	    $.ajax({
		dataType: 'json',
		url: 'getprofiles.php',
		data: data,
		success: function (data, status, xhr) {
		    // update command is executed.
		    commit(true);
		},
		error: function () {
		    // cancel changes.
		    commit(false);
		}
	    });
	}
    };
    var dataAdapter_profiles = new $.jqx.dataAdapter(source_profiles);
    $("#jqxgrid_profiles").jqxGrid( {
        width: 770, height: 280,
	selectionmode: 'singlecell',
        source: dataAdapter_profiles,
        theme: theme,
        columnsresize: true,
	editable: true,
	showstatusbar: true,
	renderstatusbar: function (statusbar) {
	    // appends buttons to the status bar.
	    var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
	    var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");
	    var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../images/close.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></div>");
	    var reloadButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../images/refresh.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Reload</span></div>");
	    container.append(addButton);
	    container.append(deleteButton);
	    container.append(reloadButton);
	    statusbar.append(container);
	    addButton.jqxButton({  width: 60, height: 20 });
	    deleteButton.jqxButton({  width: 65, height: 20 });
	    reloadButton.jqxButton({  width: 65, height: 20 });
	    // add new row.
	    addButton.click(function (event) {
		/*
		 * Ask a new profile name using a popup window.
		 * Send "ADD PROFILE name" to the server using the getprofiles.php script.
		 * Refresh the data
		 */
		$("#jqxwindow_addprofile").jqxWindow('open');
		$("#jqxgrid_profiles").jqxGrid({ source: dataAdapter_profiles });
	    });
	    // delete selected row.
	    deleteButton.click(function (event) {
		var selectedrowindex = $("#jqxgrid_profiles").jqxGrid('getselectedrowindex');
		var rowscount = $("#jqxgrid_profiles").jqxGrid('getdatainformation').rowscount;
		var id = $("#jqxgrid_profiles").jqxGrid('getrowid', selectedrowindex);
		$("#jqxgrid_profiles").jqxGrid('deleterow', id);
	    });
	    // reload grid data.
	    reloadButton.click(function (event) {
		$("#jqxgrid_profiles").jqxGrid({ source: dataAdapter_profiles });
	    });
	},
        columns: [
            { text: 'UUID', editable: false, datafield: 'UUID', width: 280 },
            { text: 'Name', datafield: 'Name', minwidth: 120 },
            { text: 'Steps', editable: false, datafield: 'Steps', width: 50 }
        ]
    });
    $("#jqxwindow_addprofile").jqxWindow({ 
	theme: theme,
	resizable: false, 
	isModal: true,
	modalOpacity: 0.5,
	autoOpen: false, 
	width: 210,
	height: 180,
	cancelButton: $("#profile_cancelButton"),
	initContent: function () {
	    $("#profile_addButton").jqxButton({ width: 70, height: 25, theme: theme });
	    $("#profile_cancelButton").jqxButton({ width: 70, height: 25, theme: theme });
	    $("#profile_addButton").click(function () {
		var id = $("#profile_inputField").val();
		$("#jqxgrid_profiles").jqxGrid('insertrow', id);
		$("#jqxwindow_addprofile").jqxWindow('hide');
	    });
	}
    });

    /*
     * Units
     */
    var source_units = {
        datatype: "json",
        datafields: [
            { name: 'UUID', type: 'string' },
            { name: 'Name', type: 'string' },
            { name: 'Mode', type: 'string' }
        ],
        url: 'getunits.php'
    };
    var dataAdapter_units = new $.jqx.dataAdapter(source_units);
    $("#jqxgrid_units").jqxGrid( {
        width: 770, height: 280,
        source: dataAdapter_units,
        theme: theme,
        columnsresize: true,
	editable: true,
        columns: [
            { text: 'UUID', editable: false, datafield: 'UUID', width: 280 },
            { text: 'Name', datafield: 'Name', minwidth: 120 },
            { text: 'Mode', datafield: 'Mode', width: 70 }
        ]
    });
});