calculo-techos.html

<div data-role="page" id="m1-ct-1">
    <div class="page-header" >
        <a href="#" class="open-menu"></a>
        <h1 class="projectName">Proyecto 1</h1>
        <a  id="back-t" class="backBtn page-back"></a>
        <a class="dot-menu"></a>
        <div class="menu-options">
            <div class="editar">Editar</div>
            <div class="duplicar" >Duplicar</div>
            <div class="eliminar">Eliminar</div>
        </div>
    </div>
    <div class="page-content">
        <div class="paso paso1">

            <div class="texto t1">Superficie de techo</div>

            <div class="texto t2">Largo</div>
            <input data-role="none" class="i1" type="number" step="0.01"/>
            <div class="texto t3">mts.</div>

            <div class="texto t2">Ancho</div>
            <input data-role="none" class="i2" type="number" step="0.01" />
            <div class="texto t3">mts.</div>


            <div class="grupo chapaTipo">
                <div class="texto">Tipo de chapa</div>
                <div class="op1 selected">Acanalada</div>
                <div class="op2">Trapezoidal</div>
            </div>

            <div class="texto t1 pa">Modelo</div>
            <div class="chapaModeloTrapezoidal" style="display: none;">
                <div class="modelo selected">
                    <span class="texto">T-101</span>
                    <div class="mas"></div>
                </div>
                <div class="modelo">
                    <span class="texto">T-98</span>
                    <div class="mas"></div>
                </div>
                <div class="modelo">
                    <span class="texto">T-90</span>
                    <div class="mas"></div>
                </div>
            </div>
            <div class="chapaModeloAcanalada">
                <div class="modelo selected">
                    <span class="texto">A-1086</span>
                    <div class="mas"></div>
                </div>
            </div>


            <div class="texto t1">Color</div>
            <div class="color">
                <div class="texto op1">Blanco nieve</div>
                <div class="texto op2">Celeste</div>
                <div class="texto op3 selected">Azul Millenium</div>
                <div class="texto op4">Rojo teja</div>
                <div class="texto op5">Verde Inglés</div>
                <div class="texto op6">Gris pizarra</div>
                <div class="texto op7">Negro</div>
            </div>

            <div class="boton ultimo-elemento siguiente-paso saveCalc">Finalizar cálculo</div>


            <div id="infoBlock">
                <a href="#" class="infoClose">X</a>

                <div class="modelData1">
                    <h1>Modelo</h1>
                    <h2>Chapa trapezoidal A-1086</h2>
                    <h3>
                        Ancho total: 1100<br/>
                        Ancho útil: 1,01mm.
                    </h3>
                    <p>Detalles</p>
                    <p>1. El tornillo puede aplicarse en la cresta o en el valle.</p>
                    <p>2. De 4 a 6 tornillos x m2.</p>
                </div>
                <div class="modelData2">
                    <h1>Modelo</h1>
                    <h2>Chapa trapezoidal T-101</h2>
                    <h3>
                        Ancho total: 1100<br/>
                        Ancho útil: 1,01mm.
                    </h3>
                    <p>Detalles</p>
                    <p>1. El tornillo puede aplicarse en la cresta o en el valle.</p>
                    <p>2. De 4 a 6 tornillos x m2.</p>
                </div>
                <div class="modelData3">
                    <h1>Modelo</h1>
                    <h2>Chapa trapezoidal T-98</h2>
                    <h3>
                        Ancho total: 1100<br/>
                        Ancho útil: 1,01mm.
                    </h3>
                    <p>Detalles</p>
                    <p>1. El tornillo puede aplicarse en la cresta o en el valle.</p>
                    <p>2. De 4 a 6 tornillos x m2.</p>
                </div>
                <div class="modelData4">
                    <h1>Modelo</h1>
                    <h2>Chapa trapezoidal T-90</h2>
                    <h3>
                        Ancho total: 1100<br/>
                        Ancho útil: 1,01mm.
                    </h3>
                    <p>Detalles</p>
                    <p>1. El tornillo puede aplicarse en la cresta o en el valle.</p>
                    <p>2. De 4 a 6 tornillos x m2.</p>
                </div>
            </div>

        </div>



        <div class="paso paso2">
			<div id="myRenderSaveT">


                <div class="texto t1 resumenDatos resumItem">Resumen de datos ingresados</div>

                <div class="item10 item resumItem">
                    <div class="resultado resumItem">
                        <span class="texto title">Superficie de techo</span>
                    </div>
                    <div class="valor largo resumItem">
                        <span class="texto">Largo</span>
                        <span class="texto medida"></span>
                    </div>
                    <div class="valor ultimo ancho resumItem">
                        <span class="texto">Ancho</span>
                        <span class="texto medida"></span>
                    </div>
                </div>
                <div class="item11 item resumItem">
                    <div class="resultado resumItem">
                        <span class="texto title">Tipo de chapa</span>
                    </div>
                    <div class="valor tipo resumItem">
                        <span class="texto"></span>
                    </div>
                    <div class="valor ultimo resumItem">
                        <span class="texto"></span>
                    </div>
                </div>

                <hr class="dataSeparator" />

                <div style="position: relative;">
                    <div class="texto resultado-techo">32</div>
                    <div class="texto resultado-medida">m2.</div>
                    <div class="texto resultado-leyenda">De techo a cubrir</div>
                </div>


				<div class="resultado">
					<span class="texto">1. Chapas para techo</span>
				</div>
				<div class="valor">
					<span class="texto">Cantidad</span>
					<span class="texto medida resultado-chapas">44 U.</span>
				</div>
                <div class="valor ultimo">
                    <span class="texto">Metros lineales de cada chapa</span>
                    <span class="texto medida resultado-lineales-chapas">50 ml.</span>
                </div>


				<div class="resultado">
					<span class="texto">2. Aislación</span>
				</div>
				<div class="valor ultimo">
					<span class="texto">Lana de vidrio</span>
					<span class="texto medida resultado-aislacion">32 m2.</span>
				</div>


				<div class="resultado">
					<span class="texto">3. Tornillos</span>
				</div>
				<div class="valor ultimo">
					<span class="texto">Cantidad</span>
					<span class="texto medida resultado-tornillos">154 U.</span>
				</div>

                <div class="resultado">
                    <span class="texto">4. Color</span>
                </div>
                <div class="valor ultimo colorValue">
                    <span class="texto elcolor">Color</span>
                    <span class="texto medida"> <div class="colorSample"></div> </span>
                </div>

			</div>

            <div class="boton savePDF">Ver PDF</div>
			<div class="boton ultimo-elemento shareCalc">Compartir</div>

        </div>

        <div class="pie">
            <div class="p1 selected">Techo</div>
            <div class="p2 disabled">Resultados</div>
        </div>


    </div>

    <script>

        $(document).ready(function(event) {

            setTimeout(function () {
                $('#back-t.backBtn.page-back').unbind('click').on('click',function(e){
                    e.preventDefault();
                    optionMsg('¿Estas por abandonar el cálculo. Estás seguro?', '¿Abandonar?', function(){
                        window.location.href="m-inicio.html";
                    });
                });
            },1500)
        });


        //Mostrar PDF
        $('.boton.savePDF').on('click',function(){
            var $this = $(this);
            animateBtnStart( $this , 'Abriendo PDF ');

            setTimeout(function(){
                generateDivRenderT();
            }, 1000);
        });

        //Guardar calculo en APP
//        $('.boton.saveCalc').on('click',function(){
//            console.log(stepCompleted);
//            setTimeout(function() {
//                //GUARDAMOS EL CALCULO EN LA VARIABLE LOCAL DE LA APP.
//                saveNewCalcTechos(values, 1);
//            }, 1000);
//        });

        $('.boton.shareCalc').on('click',function(){
            var $this = $(this);
            animateBtnStart($this, 'Cargando ');

            setTimeout(function() {
                var filename = localStorage.getItem('username') + '_techos_' + sessionStorage.getItem('projectName').replace(/\s/g, '_');
                sharePDF(filename, 'techo');
            }, 1000);
        });

        eventosTechos()
    </script>
</div>