js/server_synchronize.js

   1 /* vim: set expandtab sw=4 ts=4 sts=4: */
   2 /**
   3  * for server_synchronize.php
   4  *
   5  */
   6
   7 // Global variable row_class is set to even
   8 var row_class = 'even';
   9
  10 /**
  11 * Generates a row dynamically in the differences table displaying
  12 * the complete statistics of difference in  table like number of
  13 * rows to be updated, number of rows to be inserted, number of
  14 * columns to be added, number of columns to be removed, etc.
  15 *
  16 * @param  index         index of matching table
  17 * @param  update_size   number of rows/column to be updated
  18 * @param  insert_size   number of rows/coulmns to be inserted
  19 * @param  remove_size   number of columns to be removed
  20 * @param  insert_index  number of indexes to be inserted
  21 * @param  remove_index  number of indexes to be removed
  22 * @param  img_obj       image object
  23 * @param  table_name    name of the table
  24 */
  25
  26 function showDetails(i, update_size, insert_size, remove_size, insert_index, remove_index, img_obj, table_name)
  27 {
  28     // a jQuery object
  29     var $img = $(img_obj);
  30
  31     $img.toggleClass('selected');
  32
  33     // The image source is changed when the showDetails function is called.
  34     if ($img.hasClass('selected')) {
  35         if ($img.hasClass('struct_img')) {
  36             $img.attr('src', pmaThemeImage + 'new_struct_selected.png');
  37         }
  38         if ($img.hasClass('data_img')) {
  39             $img.attr('src', pmaThemeImage + 'new_data_selected.png');
  40         }
  41     } else {
  42         if ($img.hasClass('struct_img')) {
  43             $img.attr('src', pmaThemeImage + 'new_struct.png');
  44         }
  45         if ($img.hasClass('data_img')) {
  46             $img.attr('src', pmaThemeImage + 'new_data.png');
  47         }
  48     }
  49
  50     var div = document.getElementById("list");
  51     var table = div.getElementsByTagName("table")[0];
  52     var table_body = table.getElementsByTagName("tbody")[0];
  53
  54     //Global variable row_class is being used
  55     if (row_class == 'even') {
  56         row_class = 'odd';
  57     } else {
  58         row_class = 'even';
  59     }
  60     // If the red or green button against a table name is pressed then append a new row to show the details of differences of this table.
  61     if ($img.hasClass('selected')) {
  62         var newRow = document.createElement("tr");
  63         newRow.setAttribute("class", row_class);
  64         newRow.className = row_class;
  65         // Id assigned to this row element is same as the index of this table name in the  matching_tables/source_tables_uncommon array
  66         newRow.setAttribute("id" , i);
  67
  68         var table_name_cell = document.createElement("td");
  69         table_name_cell.align = "center";
  70         table_name_cell.innerHTML = table_name ;
  71
  72         newRow.appendChild(table_name_cell);
  73
  74         var create_table = document.createElement("td");
  75         create_table.align = "center";
  76
  77         var add_cols = document.createElement("td");
  78         add_cols.align = "center";
  79
  80         var remove_cols = document.createElement("td");
  81         remove_cols.align = "center";
  82
  83         var alter_cols = document.createElement("td");
  84         alter_cols.align = "center";
  85
  86         var add_index = document.createElement("td");
  87         add_index.align = "center";
  88
  89         var delete_index = document.createElement("td");
  90         delete_index.align = "center";
  91
  92         var update_rows = document.createElement("td");
  93         update_rows.align = "center";
  94
  95         var insert_rows = document.createElement("td");
  96         insert_rows.align = "center";
  97
  98         var tick_image = document.createElement("img");
  99         tick_image.src = PMA_getImage('s_success.png').attr('src');
 100         tick_image.className = PMA_getImage('s_success.png').attr('class');
 101
 102         if (update_size == '' && insert_size == '' && remove_size == '') {
 103           /**
 104           This is the case when the table needs to be created in target database.
 105           */
 106             create_table.appendChild(tick_image);
 107             add_cols.innerHTML = "--";
 108             remove_cols.innerHTML = "--";
 109             alter_cols.innerHTML = "--";
 110             delete_index.innerHTML = "--";
 111             add_index.innerHTML = "--";
 112             update_rows.innerHTML = "--";
 113             insert_rows.innerHTML = "--";
 114
 115             newRow.appendChild(create_table);
 116             newRow.appendChild(add_cols);
 117             newRow.appendChild(remove_cols);
 118             newRow.appendChild(alter_cols);
 119             newRow.appendChild(delete_index);
 120             newRow.appendChild(add_index);
 121             newRow.appendChild(update_rows);
 122             newRow.appendChild(insert_rows);
 123
 124         } else if (update_size == '' && remove_size == '') {
 125            /**
 126            This is the case when data difference is displayed in the
 127            table which is present in source but absent from target database
 128           */
 129             create_table.innerHTML = "--";
 130             add_cols.innerHTML = "--";
 131             remove_cols.innerHTML = "--";
 132             alter_cols.innerHTML = "--";
 133             add_index.innerHTML = "--";
 134             delete_index.innerHTML = "--";
 135             update_rows.innerHTML = "--";
 136             insert_rows.innerHTML = insert_size;
 137
 138             newRow.appendChild(create_table);
 139             newRow.appendChild(add_cols);
 140             newRow.appendChild(remove_cols);
 141             newRow.appendChild(alter_cols);
 142             newRow.appendChild(delete_index);
 143             newRow.appendChild(add_index);
 144             newRow.appendChild(update_rows);
 145             newRow.appendChild(insert_rows);
 146
 147         } else if (remove_size == '') {
 148             /**
 149              This is the case when data difference between matching_tables is displayed.
 150             */
 151             create_table.innerHTML = "--";
 152             add_cols.innerHTML = "--";
 153             remove_cols.innerHTML = "--";
 154             alter_cols.innerHTML = "--";
 155             add_index.innerHTML = "--";
 156             delete_index.innerHTML = "--";
 157             update_rows.innerHTML = update_size;
 158             insert_rows.innerHTML = insert_size;
 159
 160             newRow.appendChild(create_table);
 161             newRow.appendChild(add_cols);
 162             newRow.appendChild(remove_cols);
 163             newRow.appendChild(alter_cols);
 164             newRow.appendChild(delete_index);
 165             newRow.appendChild(add_index);
 166             newRow.appendChild(update_rows);
 167             newRow.appendChild(insert_rows);
 168
 169         } else {
 170             /**
 171             This is the case when structure difference between matching_tables id displayed
 172             */
 173             create_table.innerHTML = "--";
 174             add_cols.innerHTML = insert_size;
 175             remove_cols.innerHTML = remove_size;
 176             alter_cols.innerHTML = update_size;
 177             delete_index.innerHTML = remove_index;
 178             add_index.innerHTML = insert_index;
 179             update_rows.innerHTML = "--";
 180             insert_rows.innerHTML = "--";
 181
 182             newRow.appendChild(create_table);
 183             newRow.appendChild(add_cols);
 184             newRow.appendChild(remove_cols);
 185             newRow.appendChild(alter_cols);
 186             newRow.appendChild(delete_index);
 187             newRow.appendChild(add_index);
 188             newRow.appendChild(update_rows);
 189             newRow.appendChild(insert_rows);
 190         }
 191         table_body.appendChild(newRow);
 192
 193     } else {
 194       //The case when the row showing the details need to be removed from the table i.e. the difference button is deselected now.
 195         var table_rows = table_body.getElementsByTagName("tr");
 196         var j;
 197         var index = 0;
 198         for (j=0; j < table_rows.length; j++)
 199         {
 200             if (table_rows[j].id == i) {
 201                 index = j;
 202                 table_rows[j].parentNode.removeChild(table_rows[j]);
 203             }
 204         }
 205         //The table row css is being adjusted. Class "odd" for odd rows and "even" for even rows should be maintained.
 206         for(index = 0; index < table_rows.length; index++)
 207         {
 208             row_class_element = table_rows[index].getAttribute('class');
 209             if (row_class_element == "even") {
 210                 table_rows[index].setAttribute("class","odd");  // for Mozilla firefox
 211                 table_rows[index].className = "odd";            // for IE browser
 212             } else {
 213                 table_rows[index].setAttribute("class","even"); // for Mozilla firefox
 214                 table_rows[index].className = "even";           // for IE browser
 215             }
 216         }
 217     }
 218 }
 219
 220 /**
 221  * Generates the URL containing the list of selected table ids for synchronization and
 222  * a variable checked for confirmation of deleting previous rows from target tables
 223  *
 224  * @param   token   the token generated for each PMA form
 225  *
 226  */
 227 function ApplySelectedChanges(token)
 228 {
 229     /**
 230      Append the token at the beginning of the query string followed by
 231     Table_ids that shows that "Apply Selected Changes" button is pressed
 232     */
 233     var params = {
 234         token: $('#synchronize_form input[name=token]').val(),
 235         server: $('#synchronize_form input[name=server]').val(),
 236         checked: $('#delete_rows').prop('checked') ? 'true' : 'false',
 237         Table_ids: 1
 238     };
 239     var $rows = $('#list tbody tr');
 240     for(var i = 0; i < $rows.length; i++) {
 241         params[i] = $($rows[i]).attr('id');
 242     }
 243
 244     //Appending the token and list of table ids in the URL
 245     location.href += '?' + $.param(params);
 246 }
 247
 248
 249 /**
 250  * Validates a partial form (source part or target part)
 251  *
 252  * @param   which   'src' or 'trg'
 253  * @return  boolean  whether the partial form is valid
 254  *
 255  */
 256 function validateSourceOrTarget(which)
 257 {
 258     var partial_form_is_ok = true;
 259
 260     if ($("#" + which + "_type").val() != 'cur') {
 261         // did not choose "current connection"
 262         if ($("input[name='" + which + "_username']").val() == ''
 263             || $("input[name='" + which + "_pass']").val() == ''
 264             || $("input[name='" + which + "_db']").val() == ''
 265             // must have at least a host or a socket
 266             || ($("input[name='" + which + "_host']").val() == ''
 267                 && $("input[name='" + which + "_socket']").val() == '')
 268             // port can be empty
 269                 ) {
 270             partial_form_is_ok = false;
 271         }
 272     }
 273     return partial_form_is_ok;
 274 }
 275 /**
 276 * Displays an error message if any text field
 277 * is left empty other than the port field, unless
 278 * we are dealing with the "current connection" choice
 279 *
 280 * @return  boolean  whether the form is valid
 281 */
 282 function validateConnectionParams()
 283 {
 284     var form_is_ok = true;
 285
 286     if (! validateSourceOrTarget('src') || ! validateSourceOrTarget('trg')) {
 287         form_is_ok = false;
 288     }
 289     if (! form_is_ok) {
 290         alert(PMA_messages['strFormEmpty']);
 291     }
 292     return form_is_ok;
 293 }
 294
 295 /**
 296  * Handles the dynamic display of form fields related to a server selector
 297  */
 298
 299 function hideOrDisplayServerFields($server_selector, selected_option)
 300 {
 301     $tbody = $server_selector.closest('tbody');
 302     if (selected_option == 'cur') {
 303         $tbody.children('.current-server').css('display', '');
 304         $tbody.children('.remote-server').css('display', 'none');
 305     } else if (selected_option == 'rmt') {
 306         $tbody.children('.current-server').css('display', 'none');
 307         $tbody.children('.remote-server').css('display', '');
 308     } else {
 309         $tbody.children('.current-server').css('display', 'none');
 310         $tbody.children('.remote-server').css('display', '');
 311         var parts = selected_option.split('||||');
 312         $tbody.find('.server-host').val(parts[0]);
 313         $tbody.find('.server-port').val(parts[1]);
 314         $tbody.find('.server-socket').val(parts[2]);
 315         $tbody.find('.server-user').val(parts[3]);
 316         $tbody.find('.server-pass').val('');
 317         $tbody.find('.server-db').val(parts[4])
 318     }
 319 }
 320
 321 $(document).ready(function() {
 322     $('.server_selector').change(function(evt) {
 323         var selected_option = $(evt.target).val();
 324         hideOrDisplayServerFields($(evt.target), selected_option);
 325     });
 326
 327     // initial display of the selectors
 328     $('.server_selector').each(function() {
 329         var selected_option = $(this).val();
 330         hideOrDisplayServerFields($(this), selected_option);
 331     });
 332
 333     $('.struct_img').hover(
 334         // pmaThemeImage comes from js/messages.php
 335         function() {
 336             // mouse enters the element
 337             var $img = $(this);
 338             $img.addClass('hover');
 339             if ($img.hasClass('selected')) {
 340                 $img.attr('src', pmaThemeImage + 'new_struct_selected_hovered.png');
 341             } else {
 342                 $img.attr('src', pmaThemeImage + 'new_struct_hovered.png');
 343             }
 344         },
 345         function() {
 346             // mouse leaves the element
 347             var $img = $(this);
 348             $img.removeClass('hover');
 349             if ($img.hasClass('selected')) {
 350                 $img.attr('src', pmaThemeImage + 'new_struct_selected.png');
 351             } else {
 352                 $img.attr('src', pmaThemeImage + 'new_struct.png');
 353             }
 354         }
 355     );
 356
 357     $('.data_img').hover(
 358         function() {
 359             // mouse enters the element
 360             var $img = $(this);
 361             $img.addClass('hover');
 362             if ($img.hasClass('selected')) {
 363                 $img.attr('src', pmaThemeImage + 'new_data_selected_hovered.png');
 364             } else {
 365                 $img.attr('src', pmaThemeImage + 'new_data_hovered.png');
 366             }
 367         },
 368         function() {
 369             // mouse leaves the element
 370             var $img = $(this);
 371             $img.removeClass('hover');
 372             if ($img.hasClass('selected')) {
 373                 $img.attr('src', pmaThemeImage + 'new_data_selected.png');
 374             } else {
 375                 $img.attr('src', pmaThemeImage + 'new_data.png');
 376             }
 377         }
 378     );
 379
 380     $('#buttonGo').click(function(event) {
 381         if (! validateConnectionParams()) {
 382             event.preventDefault();
 383         }
 384     });
 385 });