rolls-calculator-template/content-roll.php

<?php
/**
 * The template used for displaying page content in single-roll.php
 *
 * @package GeneratePress
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> <?php generate_do_microdata( 'article' ); ?>>
	<div class="inside-article">
		<?php
		/**
		 * generate_before_content hook.
		 *
		 * @since 0.1
		 *
		 * @hooked generate_featured_page_header_inside_single - 10
		 */
		do_action( 'generate_before_content' );

		if ( generate_show_entry_header() ) :
			?>

			<header class="entry-header">
				<?php
				/**
				 * generate_before_page_title hook.
				 *
				 * @since 2.4
				 */
				do_action( 'generate_before_page_title' );

				if ( generate_show_title() ) {
					$params = generate_get_the_title_parameters();

					the_title( $params['before'], $params['after'] );
				}

				/**
				 * generate_after_page_title hook.
				 *
				 * @since 2.4
				 */
				do_action( 'generate_after_page_title' );
				?>
			</header>

			<?php
		endif;

		/**
		 * generate_after_entry_header hook.
		 *
		 * @since 0.1
		 *
		 * @hooked generate_post_image - 10
		 */
		do_action( 'generate_after_entry_header' );

		$itemprop = '';

		if ( 'microdata' === generate_get_schema_type() ) {
			$itemprop = ' itemprop="text"';
		}
		?>

		<div class="entry-content"<?php echo $itemprop; // phpcs:ignore -- No escaping needed. ?>>
			<div class="gb-container gb-container-rolls">
				<div class="gb-inside-container gb-inner-rolls">
					<p>
						<b>Calcular mi cantidad de papel pintado.</b> Determina el número de rollos necesarios para tus paredes:
					</p>
			<?php
			the_content();?>
			<script>
			jQuery(document).ready(function($) {

					$("#getrolls").click(function(){
						$("#resultrolls").empty();
						$("#errorrolls").text("");
						$("#widthwall").removeClass("error-data-roll")
						$("#heightwall").removeClass("error-data-roll")
						$("#widthroll").removeClass("error-data-roll")
						$("#heightroll").removeClass("error-data-roll")
						$("#caseroll").removeClass("error-data-roll")
						var dataErrors = false;
						var wWidth = $("#widthwall").val();
						if(isNaN(wWidth) || wWidth === 0 || wWidth === "") {
							dataErrors = true;
							$("#widthwall").addClass("error-data-roll")
						}
						var wHeight = $("#heightwall").val();
						if(isNaN(wHeight) || wHeight === 0 || wHeight === "") {
							dataErrors = true;
							$("#heightwall").addClass("error-data-roll")
						}
						var rWidth = $("#widthroll").val();
						if(isNaN(rWidth) || rWidth === 0 || rWidth === "") {
							dataErrors = true;
							$("#widthroll").addClass("error-data-roll")
						}
						var rHeight = $("#heightroll").val();
						if(isNaN(rHeight) || rHeight === 0 || rHeight === "") {
							dataErrors = true;
							$("#heightroll").addClass("error-data-roll")
						}
						var rCase = $("#caseroll").val();
						if(isNaN(rCase) || rCase === "") {
							dataErrors = true;
							$("#caseroll").addClass("error-data-roll")
						}

						if(dataErrors) {
							$("#errorrolls").text("Hay errores en los datos introducidos");
						} else {
							wWidth = wWidth * 100; //to cm
							wHeight = wHeight * 100; //to cm
							rHeight = rHeight * 100; //to cm
							rWidth = Number(rWidth);
							rCase = Number(rCase);

							var rolls = (rHeight >= wHeight) ? getRollsIfHeightWallLessThanRoll(wWidth, wHeight, rWidth, rHeight, rCase) :
								getRollsIfHeightWallGreaterThanRoll(wWidth, wHeight, rWidth, rHeight, rCase)

							$("#resultrolls").append("Necesitas <b>" + rolls + "</b> rollos");
						}
					});

					function getRollsIfHeightWallGreaterThanRoll(wWidth, wHeight, rWidth, rHeight, rCase) {
						//obtenemos rollos para la altura
						var rolls = Math.ceil(wHeight / rHeight);
						//contamos rollos para la anchura de pared y los sumamos a los previos
						return Math.trunc(wWidth / rWidth) + rolls
					}

					function getRollsIfHeightWallLessThanRoll(wWidth, wHeight, rWidth, rHeight, rCase) {
						//obtenemos tiras para la altura
						var tiras = Math.trunc(rHeight / wHeight);
						var numTiras = 0;
						if(rCase > 0) {
							let accHeight = 0;
							for(let i = 1; i <= tiras; i++) {
								if(i === 1) accHeight = accHeight + wHeight
								else accHeight = accHeight + wHeight + rCase
								//update tiras with case
								if(accHeight > rHeight) {
									numTiras = i-1;
									break;
								}
								else numTiras = i
							}
						}
						//calcular rollos ancho
						var coveredWidth = numTiras * rWidth;
						return Math.ceil(wWidth / coveredWidth)
					}
			});
			</script>
			<label for="width-wall">Ancho de la pared (en m):</label><br>
			<small>Anchura total de las paredes que desea empapelar.</small>
			<input type="number" step="0.01" min="0.01" id="widthwall" placeholder="Ejemplo: 3.5" class="data-roll"/><br>

			<label for="height-wall">Altura de la pared (en m):</label><br>
			<small>Altura total desde el suelo hasta el techo (descontado el rodapié y/o la moldura).</small>
			<input type="number" step="0.01" min="0.01" id="heightwall" placeholder="Ejemplo: 2.4" class="data-roll"/><br>

			<label for="height-roll">Longitud del rollo (en m):</label><br>
			<small>datos incluidos en la hoja de descripción del producto.</small>
			<input type="number" step="0.01" min="0.01" id="heightroll" placeholder="Ejemplo: 10" class="data-roll"/><br>

			<label for="width-roll">Anchura del rollo (en cm):</label><br>
			<small>datos incluidos en la hoja de descripción del producto.</small>
			<input type="number" step="1" min="1" id="widthroll" placeholder="Ejemplo: 53" class="data-roll"/><br>

			<label for="case-roll">Case o Rapport del rollo (en cm):</label><br>
			<small>Repetición del patrón: datos incluidos en la hoja de descripción del producto.</small>
			<input type="number" step="1" min="1" id="caseroll" placeholder="Ejemplo: 64" class="data-roll"/><br>

			<input type="button" value="Calcular" id="getrolls"/><br>
			<div id="resultrolls">

			</div>
			<div id="errorrolls">

			</div>
			<?php
			wp_link_pages(
				array(
					'before' => '<div class="page-links">' . __( 'Pages:', 'generatepress' ),
					'after'  => '</div>',
				)
			);
			?>
				</div>
			</div>
		</div>

		<?php
		/**
		 * generate_after_content hook.
		 *
		 * @since 0.1
		 */
		do_action( 'generate_after_content' );
		?>

	</div>
</article>