Fri, 25 Jul 2014 23:27:08 +0200
Redesigned the web interface, one single app is too slow. The main dashboard will be a shiny ajax driven page, the setup pages will be simple and php only. Keep It Simple, Stupid.
/***************************************************************************** * 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&" + $.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&" + $.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 } ] }); });