Merge pull request #563 from contactashish13/issue-481

use Show Chart button to trigger submit

Author: contactashish13

classes/Visualizer/Module/Chart.php

@@ -213,6 +213,29 @@ public function setJsonData() {
 			add_post_meta( $chart->ID, Visualizer_Plugin::CF_JSON_PAGING, $params['paging'] );
 		}
 
+		$time = filter_input(
+			INPUT_POST,
+			'time',
+			FILTER_VALIDATE_INT,
+			array(
+				'options' => array(
+					'min_range' => -1,
+				),
+			)
+		);
+
+		delete_post_meta( $chart_id, Visualizer_Plugin::CF_JSON_SCHEDULE );
+
+		if ( -1 < $time ) {
+			add_post_meta( $chart_id, Visualizer_Plugin::CF_JSON_SCHEDULE, $time );
+		}
+
+		// delete other source specific parameters.
+		delete_post_meta( $chart_id, Visualizer_Plugin::CF_DB_QUERY );
+		delete_post_meta( $chart_id, Visualizer_Plugin::CF_DB_SCHEDULE );
+		delete_post_meta( $chart_id, Visualizer_Plugin::CF_CHART_URL );
+		delete_post_meta( $chart_id, Visualizer_Plugin::CF_CHART_SCHEDULE );
+
 		$render         = new Visualizer_Render_Page_Update();
 		$render->id     = $chart->ID;
 		$render->data   = json_encode( $source->getRawData() );

classes/Visualizer/Render/Layout.php

@@ -270,14 +270,16 @@ class="visualizer-input json-form-element">
 					<form id="json-conclude-form" action="<?php echo $action; ?>" method="post" target="thehole">
 						<div class="json-wizard-hints html-table-editor-hints">
 							<ul class="info">
+								<li><?php _e( 'If you see Invalid Data in the table, you may have selected the wrong root to fetch data from. Please select an alternative from the JSON root dropdown.', 'visualizer' ); ?></li>
 								<li><?php _e( 'Select whether to include the data in the chart. Each column selected will form one series.', 'visualizer' ); ?></li>
 								<li><?php _e( 'If a column is selected to be included, specify its data type.', 'visualizer' ); ?></li>
 								<li><?php _e( 'You can use drag/drop to reorder the columns but this column position is not saved. So when you reload the table, you may have to reorder again.', 'visualizer' ); ?></li>
 								<li><?php _e( 'You can select any number of columns but the chart type selected will determine how many will display in the chart.', 'visualizer' ); ?></li>
+								<li><?php _e( 'Once you have made your selection, click \'Show Chart\' on the right to view the chart.', 'visualizer' ); ?></li>
 							</ul>
 						</div>
 						<div class="json-table"></div>
-						<button class="button button-primary" id="visualizer-json-conclude"><?php esc_html_e( 'Save &amp; Show Chart', 'visualizer' ); ?></button>
+						<button class="button button-primary" style="display: none" id="visualizer-json-conclude"></button>
 					</form>
 				</div>
 			</div>
@@ -443,7 +445,7 @@ public static function _renderEditorTable( $args ) {
 				if ( $editable_data ) {
 					echo '<td><input type="text" name="data' . $index++ . '[]" value="' . esc_attr( $value ) . '"></td>';
 				} else {
-					echo '<td>' . $value . '</td>';
+					echo '<td>' . ( is_array( $value ) ? __( 'Invalid Data', 'visualizer' ) : $value ) . '</td>';
 				}
 			}
 

classes/Visualizer/Render/Page/Data.php

@@ -175,7 +175,7 @@ protected function _renderSidebarContent() {
 													if ( Visualizer_Module::is_pro() ) {
 														?>
 												<p class="viz-group-description"><?php _e( 'How often do you want to check the URL', 'visualizer' ); ?></p>
-												<select name="vz-json-time" id="vz-json-time" class="visualizer-select" data-chart="<?php echo $this->chart->ID; ?>">
+												<select name="time" id="vz-json-time" class="visualizer-select json-form-element" data-chart="<?php echo $this->chart->ID; ?>">
 														<?php
 														$hours     = get_post_meta( $this->chart->ID, Visualizer_Plugin::CF_JSON_SCHEDULE, true );
 														$schedules = apply_filters(
@@ -200,7 +200,6 @@ protected function _renderSidebarContent() {
 													?>
 											</div>
 
-											<p class="viz-group-description viz-info-msg json-chart-msg" style="display: none"><?php echo sprintf( __( 'Please make sure you click \'Save & Show Chart\' on the left before you click \'Show Chart\' below.', 'visualizer' ) ); ?></p>
 											<input type="button" id="json-chart-button" class="button button-secondary show-chart-toggle"
 											value="<?php echo $bttn_label; ?>" data-current="chart"
 											data-t-filter="<?php _e( 'Show Chart', 'visualizer' ); ?>"

css/frame.css

@@ -1387,11 +1387,14 @@ span.viz-section-error {
 	min-width: 10px !important;
 }
 
-#json-conclude-form .json-table,
+#json-conclude-form .json-table {
+	width: 85%;
+}
+
 #vz-import-json-url,
 #vz-import-json-root,
 #vz-import-json-paging {
-	width: 85%;
+	width: 75%;
 }
 
 #json-conclude-form .json-table,

js/frame.js

@@ -390,25 +390,29 @@
 
         // toggle between chart and create/modify parameters
         $( '#json-chart-button' ).on( 'click', function(){
-            $('#content').css('width', 'calc(100% - 300px)');
+            var $bttn = $(this);
+            $('#content').css('width', 'calc(100% - 100px)');
             if( $(this).attr( 'data-current' ) === 'chart'){
+                // toggle from chart to LHS form
                 $(this).val( $(this).attr( 'data-t-filter' ) );
                 $(this).html( $(this).attr( 'data-t-filter' ) );
                 $(this).attr( 'data-current', 'filter' );
                 $( '.visualizer-editor-lhs' ).hide();
                 $( '#visualizer-json-screen' ).css("z-index", "9999").show();
-                $('.json-chart-msg').show();
                 $( '#canvas' ).hide();
             }else{
-                var filter_button = $(this);
-                $( '#visualizer-json-screen' ).css("z-index", "-1").hide();
-                $('#canvas').lock();
-                filter_button.val( filter_button.attr( 'data-t-chart' ) );
-                filter_button.html( filter_button.attr( 'data-t-chart' ) );
-                filter_button.attr( 'data-current', 'chart' );
-                $('.json-chart-msg').hide();
-                $( '#canvas' ).css("z-index", "1").show();
-                $('#canvas').unlock();
+                // toggle from LHS form to chart
+                $( '#json-conclude-form' ).trigger('submit');
+                $('body').on('visualizer:json:form:submit', function() {
+                    var filter_button = $bttn;
+                    $( '#visualizer-json-screen' ).css("z-index", "-1").hide();
+                    $('#canvas').lock();
+                    filter_button.val( filter_button.attr( 'data-t-chart' ) );
+                    filter_button.html( filter_button.attr( 'data-t-chart' ) );
+                    filter_button.attr( 'data-current', 'chart' );
+                    end_ajax( $( '#visualizer-json-screen' ) );
+                    $( '#canvas' ).css("z-index", "1").show();
+                });
             }
         } );
 
@@ -501,12 +505,13 @@
                 alert(visualizer.l10n.select_columns);
                 return false;
             }
+
             // populate the form elements that are in the other tabs.
-            $('#json-conclude-form-helper .json-form-element, #json-endpoint-form .json-form-element, #json-root-form .json-form-element').each(function(x, y){
+            $('#json-conclude-form-helper .json-form-element, #json-endpoint-form .json-form-element, #json-root-form .json-form-element, #vz-import-json .json-form-element').each(function(x, y){
                 $('#json-conclude-form').append('<input type="hidden" name="' + y.name + '" value="' + y.value + '">');
             });
-            $( '#json-chart-button' ).trigger('click');
-            $('#canvas').lock();
+
+            $('body').trigger('visualizer:json:form:submit');
         });
 
         // update the schedule