mirror of
https://git.imnavajas.es/jjimenez/safekat.git
synced 2025-07-25 22:52:08 +00:00
Merge branch 'dev/formas_libro' into 'dev/presupuestos3'
Dev/formas libro See merge request jjimenez/safekat!74
This commit is contained in:
Ignacio Martinez Navajas
@ -21,6 +21,12 @@ class Js_loader extends BaseController
|
||||
|
||||
}
|
||||
|
||||
function previsualizador_js()
|
||||
{
|
||||
$this->response->setHeader('Content-Type', 'text/javascript');
|
||||
return view('themes/backend/vuexy/form/presupuestos/cosidotapablanda/previews.js');
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
<?php
|
||||
|
||||
namespace App\Controllers\Presupuestos;
|
||||
use App\Controllers\BaseController;
|
||||
|
||||
|
||||
class Js_loader extends BaseController
|
||||
{
|
||||
|
||||
function __construct()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
|
||||
function comparadorCosidoTapablanda_js()
|
||||
{
|
||||
|
||||
$this->load->view('themes/backend/vuexy/form/presupuestos/cosidotapablanda/comparador.js');
|
||||
$this->output->set_content_type('text/javascript');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -157,6 +157,10 @@ return [
|
||||
'comentariosSafekat' => 'Comentarios Safekat',
|
||||
'comentariosPresupuesto' => 'Comentarios Presupuesto',
|
||||
'comentariosProduccion' => 'Comentarios Produccion',
|
||||
'preview' => 'Previsualización de configuraciones',
|
||||
'previewMaquina' => 'Configuración de máquina',
|
||||
'previewCubierta' => 'Configuración de cubierta',
|
||||
'previewPortada' => 'Configuración de portada',
|
||||
'resumen' => 'Resumen del presupuesto',
|
||||
'confirmar' => 'Confirmar presupuesto',
|
||||
|
||||
|
||||
@ -0,0 +1,381 @@
|
||||
<div class="accordion mt-3" id="accordionPreview">
|
||||
<div class="card accordion-item active">
|
||||
<h2 class="accordion-header" id="headingOne">
|
||||
<button type="button" class="accordion-button" data-bs-toggle="collapse"
|
||||
data-bs-target="#accordionPreviewTip" aria-expanded="false"
|
||||
aria-controls="accordionPreviewTip">
|
||||
<h4><?= lang("Presupuestos.preview") ?></h4>
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<div id="accordionPreviewTip" class="accordion-collapse collapse show"
|
||||
data-bs-parent="#accordionPreview">
|
||||
<div class="accordion-body">
|
||||
<div class="nav-align-top mb-4">
|
||||
<ul class="nav nav-pills mb-3" role="tablist">
|
||||
<li id="tab-preview-maquina" class="nav-item">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link active"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#preview-maquina"
|
||||
aria-controls="preview-maquina"
|
||||
aria-selected="true">
|
||||
<?= lang("Presupuestos.previewMaquina") ?>
|
||||
</button>
|
||||
</li>
|
||||
<li id="tab-preview-cubierta" class="nav-item">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#preview-cubierta"
|
||||
aria-controls="preview-cubierta"
|
||||
aria-selected="false">
|
||||
<?= lang("Presupuestos.previewCubierta") ?>
|
||||
</button>
|
||||
</li>
|
||||
<li id="tab-preview-portada" class="nav-item">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#preview-portada"
|
||||
aria-controls="preview-portada"
|
||||
aria-selected="false">
|
||||
<?= lang("Presupuestos.previewPortada") ?>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="preview-maquina" role="tabpanel">
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<div class="p-4 mb-3 pb-3" >
|
||||
<!-- Configuraciones -->
|
||||
<h6>Configuración del papel: Rotativa</h6>
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-12">
|
||||
<a href="#">
|
||||
<div class="d-grid">
|
||||
<button type="button" class="btn btn-label-primary">Papel
|
||||
generico
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<a href="#">
|
||||
<div class="d-grid">
|
||||
<button type="button" class="btn btn-label-primary">Papel de
|
||||
compra
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<a href="#">
|
||||
<div class="d-grid">
|
||||
<button type="button" class="btn btn-label-primary">Máquina
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mx-n4"/>
|
||||
|
||||
<!-- Detalles del presupuesto -->
|
||||
<h6>Detalles del trabajo</h6>
|
||||
<dl class="row mb-0">
|
||||
<dt class="col-6 fw-normal">Gramaje:</dt>
|
||||
<dd class="col-6 text-left">TBD</dd>
|
||||
|
||||
<dt class="col-sm-6 fw-normal">Mano:</dt>
|
||||
<dd class="col-sm-6 text-success text-left">TBD</dd>
|
||||
|
||||
<dt class="col-6 fw-normal">Máquina:</dt>
|
||||
<dd class="col-6 text-left">TBDxTBD</dd>
|
||||
|
||||
<dt class="col-6 fw-normal">Máquina impresión:</dt>
|
||||
<dd class="col-6 text-left">TBDxTBD</dd>
|
||||
|
||||
<dt class="col-6 fw-normal">Libro:</dt>
|
||||
<dd class="col-6 text-left">TBDxTBD</dd>
|
||||
|
||||
<dt class="col-6 fw-normal">Formas:</dt>
|
||||
<dd class="col-6 text-left">TBD</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-9">
|
||||
<div class="p-4 mb-3 pb-3">
|
||||
<!-- Configuraciones -->
|
||||
<h6>Posición de formas</h6>
|
||||
|
||||
<div id="shape-container">
|
||||
<div id="draw-maquina" class="draw-shapes"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tab-pane fade" id="preview-cubierta" role="tabpanel">
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<div class="p-4 mb-3 pb-3" >
|
||||
<!-- Configuraciones -->
|
||||
<h6>Configuración del papel: Cubierta</h6>
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-12">
|
||||
<a href="#">
|
||||
<div class="d-grid">
|
||||
<button type="button" class="btn btn-label-primary">Papel
|
||||
generico
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<a href="#">
|
||||
<div class="d-grid">
|
||||
<button type="button" class="btn btn-label-primary">Papel de
|
||||
compra
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<a href="#">
|
||||
<div class="d-grid">
|
||||
<button type="button" class="btn btn-label-primary">Máquina
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mx-n4"/>
|
||||
|
||||
<!-- Detalles del presupuesto -->
|
||||
<h6>Detalles del trabajo</h6>
|
||||
<dl class="row mb-0">
|
||||
<dt class="col-6 fw-normal">Gramaje:</dt>
|
||||
<dd class="col-6 text-left">TBD</dd>
|
||||
|
||||
<dt class="col-sm-6 fw-normal">Mano:</dt>
|
||||
<dd class="col-sm-6 text-success text-left">TBD</dd>
|
||||
|
||||
<dt class="col-6 fw-normal">Máquina:</dt>
|
||||
<dd class="col-6 text-left">TBDxTBD</dd>
|
||||
|
||||
<dt class="col-6 fw-normal">Máquina impresión:</dt>
|
||||
<dd class="col-6 text-left">TBDxTBD</dd>
|
||||
|
||||
<dt class="col-6 fw-normal">Libro:</dt>
|
||||
<dd class="col-6 text-left">TBDxTBD</dd>
|
||||
|
||||
<dt class="col-6 fw-normal">Formas:</dt>
|
||||
<dd class="col-6 text-left">TBD</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-9">
|
||||
<div class="p-4 mb-3 pb-3">
|
||||
<!-- Configuraciones -->
|
||||
<h6>Posición de formas</h6>
|
||||
|
||||
<div id="shape-container" >
|
||||
<div id="draw-cubierta" class="draw-shapes"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="preview-portada" role="tabpanel">
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<div class="p-4 mb-3 pb-3" >
|
||||
<!-- Configuraciones -->
|
||||
<h6>Configuración de portada</h6>
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-12">
|
||||
<a href="#">
|
||||
<div class="d-grid">
|
||||
<button type="button" class="btn btn-label-primary">Papel
|
||||
generico
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<a href="#">
|
||||
<div class="d-grid">
|
||||
<button type="button" class="btn btn-label-primary">Papel de
|
||||
compra
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<a href="#">
|
||||
<div class="d-grid">
|
||||
<button type="button" class="btn btn-label-primary">Máquina
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mx-n4"/>
|
||||
|
||||
<!-- Detalles del presupuesto -->
|
||||
<h6>Detalles del trabajo</h6>
|
||||
<dl class="row mb-0">
|
||||
<dt class="col-6 fw-normal">Libro:</dt>
|
||||
<dd id='prevLibro' class="col-6 text-left">TBDxTBD</dd>
|
||||
|
||||
<dt class="col-6 fw-normal">Lomo:</dt>
|
||||
<dd id='prevLomo' class="col-6 text-left">TBD</dd>
|
||||
|
||||
<dt class="col-6 fw-normal">Solapas:</dt>
|
||||
<dd id='prevSolapas' class="col-6 text-left">TBD</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<div class="p-4 mb-3 pb-3">
|
||||
<!-- Configuraciones -->
|
||||
<h6>Posición de formas</h6>
|
||||
|
||||
<div id="shape-container">
|
||||
<div id="draw-portada" class="draw-shapes"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- //.accordion-body -->
|
||||
</div> <!-- //.accordion-collapse -->
|
||||
</div> <!-- //.accordion-item -->
|
||||
</div> <!-- //.accordion -->
|
||||
<!------------------------------------------------------->
|
||||
<!-- Código JS comportamiento ?????. -->
|
||||
<!------------------------------------------------------->
|
||||
<?= $this->section("additionalInlineJs") ?>
|
||||
|
||||
$('#tab-preview-cubierta').on( "click", function() {
|
||||
|
||||
var cubiertaObjeto = {
|
||||
anchoMaquina: 487,
|
||||
altoMaquina: 330,
|
||||
anchoImpresion: 475,
|
||||
altoImpresion: 310,
|
||||
anchoLibro:170,
|
||||
altoLibro:240,
|
||||
solapas:45,
|
||||
lomo:25};
|
||||
|
||||
previewCubierta(cubiertaObjeto);
|
||||
|
||||
} );
|
||||
|
||||
$('#tab-preview-portada').on( "click", function() {
|
||||
|
||||
var portadaObjeto = {
|
||||
anchoLibro:170,
|
||||
altoLibro:240,
|
||||
solapas:45,
|
||||
lomo:25};
|
||||
|
||||
previewPortada(portadaObjeto);
|
||||
|
||||
} );
|
||||
|
||||
var elem = document.getElementById('draw-maquina');
|
||||
var twoMaquina = new Two({fitted: true}).appendTo(elem);
|
||||
|
||||
var origin = new Two.Vector(twoMaquina.width/2, twoMaquina.height/2);
|
||||
|
||||
var sizeX = 148;
|
||||
var sizeY = 98;
|
||||
|
||||
var AIx = 355;
|
||||
var AIy = 250;
|
||||
|
||||
var styles = {
|
||||
size: 14,
|
||||
family: 'Lato'
|
||||
};
|
||||
|
||||
//var texts = [];
|
||||
|
||||
var areaMaquina = twoMaquina.makeRectangle(origin.x, origin.y, 360, 255);
|
||||
areaMaquina.stroke = 'black';
|
||||
areaMaquina.linewidth = 1;
|
||||
|
||||
var areaImpresion = twoMaquina.makeRectangle(origin.x, origin.y, AIx, AIy);
|
||||
areaImpresion.stroke = 'red';
|
||||
areaImpresion.linewidth = 1;
|
||||
|
||||
|
||||
var forma1 = twoMaquina.makeRectangle(origin.x - (AIx/4), origin.y - (AIy/4), sizeX, sizeY);
|
||||
forma1.stroke = 'blue';
|
||||
forma1.fill = 'blue';
|
||||
forma1.linewidth = 1;
|
||||
|
||||
var forma2 = twoMaquina.makeRectangle(origin.x + (AIx/4), origin.y - (AIy/4), sizeX, sizeY);
|
||||
forma2.stroke = 'grey';
|
||||
forma2.fill = 'grey';
|
||||
forma2.linewidth = 1;
|
||||
|
||||
var forma3 = twoMaquina.makeRectangle(origin.x - (AIx/4), origin.y + (AIy/4), sizeX, sizeY);
|
||||
forma3.stroke = 'blue';
|
||||
forma3.fill = 'blue';
|
||||
forma3.linewidth = 1;
|
||||
|
||||
var forma4 = twoMaquina.makeRectangle(origin.x + (AIx/4), origin.y + (AIy/4), sizeX, sizeY);
|
||||
forma4.stroke = 'grey';
|
||||
forma4.fill = 'grey';
|
||||
forma4.linewidth = 1;
|
||||
|
||||
var arrowX = twoMaquina.makeArrow(origin.x -200, origin.y, origin.x+200, origin.y, 0);
|
||||
arrowX.stroke = 'green';
|
||||
arrowX.dashes = [5, 5];
|
||||
arrowX.linewidth = 1;
|
||||
|
||||
var arrowY = twoMaquina.makeArrow(origin.x, origin.y-200, origin.x, origin.y+200, 0);
|
||||
arrowY.stroke = 'pink';
|
||||
arrowY.dashes = [5, 5];
|
||||
arrowY.linewidth = 2;
|
||||
|
||||
|
||||
//group = twoMaquina.makeGroup(areaMaquina, areaImpresion, ...texts);
|
||||
|
||||
//group.position.set(twoMaquina.width / 2, twoMaquina.height / 2);
|
||||
//group.center();
|
||||
|
||||
twoMaquina.update();
|
||||
|
||||
|
||||
<?= $this->endSection() ?>
|
||||
|
||||
|
||||
@ -0,0 +1,108 @@
|
||||
// Global parameters
|
||||
var _offsetSolapas = 2; // millimeters
|
||||
|
||||
var styles = {
|
||||
size: 13,
|
||||
family: 'Public Sans',
|
||||
}
|
||||
|
||||
|
||||
function previewCubierta(cubiertaObj) {
|
||||
|
||||
// Local parameters
|
||||
let fullBookWith = ((2 * cubiertaObj.anchoLibro) + (2 * (cubiertaObj.solapas + _offsetSolapas)) + cubiertaObj.lomo);
|
||||
|
||||
// Clear the canvas element
|
||||
$('#draw-cubierta').empty();
|
||||
// Get the element for placing the graphical elements
|
||||
var divCubierta = document.getElementById('draw-cubierta');
|
||||
var _previewCubierta = new Two({fitted: true}).appendTo(divCubierta);
|
||||
// Calculate the center of the canvas element
|
||||
var origenCubierta = new Two.Vector(_previewCubierta.width / 2, _previewCubierta.height / 2);
|
||||
|
||||
var areaMaquinaCubierta = _previewCubierta.makeRectangle(
|
||||
origenCubierta.x,
|
||||
origenCubierta.y,
|
||||
cubiertaObj.anchoMaquina,
|
||||
cubiertaObj.altoMaquina);
|
||||
areaMaquinaCubierta.stroke = 'black';
|
||||
areaMaquinaCubierta.linewidth = 1;
|
||||
|
||||
var areaImpresionCubierta = _previewCubierta.makeRectangle(
|
||||
origenCubierta.x,
|
||||
origenCubierta.y,
|
||||
cubiertaObj.anchoImpresion,
|
||||
cubiertaObj.altoImpresion);
|
||||
areaImpresionCubierta.stroke = 'red';
|
||||
areaImpresionCubierta.linewidth = 1;
|
||||
|
||||
var formaCubierta = _previewCubierta.makeRectangle(
|
||||
origenCubierta.x,
|
||||
origenCubierta.y,
|
||||
fullBookWith,
|
||||
cubiertaObj.altoLibro);
|
||||
formaCubierta.stroke = '#6997D3';
|
||||
formaCubierta.fill = '#6997D3';
|
||||
formaCubierta.linewidth = 1;
|
||||
|
||||
// Texts
|
||||
_previewCubierta.makeText(cubiertaObj.altoLibro, origenCubierta.x + (fullBookWith/2 -25), origenCubierta.y, styles);
|
||||
_previewCubierta.makeText(fullBookWith, origenCubierta.x, origenCubierta.y + (cubiertaObj.altoLibro/2-15) , styles);
|
||||
|
||||
_previewCubierta.update();
|
||||
|
||||
// Update preview info fields
|
||||
$('#prevLibro').text(cubiertaObj.anchoLibro + "X" + cubiertaObj.altoLibro );
|
||||
$('#prevLomo').text(cubiertaObj.lomo);
|
||||
$('#prevSolapas').text(cubiertaObj.solapas);
|
||||
|
||||
}
|
||||
|
||||
|
||||
function previewPortada(portadaObj) {
|
||||
|
||||
// Clear the canvas element
|
||||
$('#draw-portada').empty();
|
||||
// Get the element for placing the graphical elements
|
||||
var divPortada = document.getElementById('draw-portada');
|
||||
var _previewPortada = new Two({fitted: true}).appendTo(divPortada);
|
||||
// Calculate the center of the canvas element
|
||||
var origenPortada = new Two.Vector(_previewPortada.width / 2, _previewPortada.height / 2);
|
||||
|
||||
var solapas = _previewPortada.makeRectangle(
|
||||
origenPortada.x,
|
||||
origenPortada.y,
|
||||
((2 * portadaObj.anchoLibro) + (2 * (portadaObj.solapas + _offsetSolapas)) + portadaObj.lomo),
|
||||
portadaObj.altoLibro);
|
||||
solapas.stroke = '#5FD2B5';
|
||||
solapas.fill = '#5FD2B5';
|
||||
solapas.linewidth = 1;
|
||||
|
||||
var libro = _previewPortada.makeRectangle(
|
||||
origenPortada.x,
|
||||
origenPortada.y,
|
||||
((2 * portadaObj.anchoLibro) + portadaObj.lomo),
|
||||
portadaObj.altoLibro);
|
||||
libro.stroke = '#6997D3';
|
||||
libro.fill = '#6997D3';
|
||||
libro.linewidth = 1;
|
||||
|
||||
var lomo = _previewPortada.makeRectangle(
|
||||
origenPortada.x,
|
||||
origenPortada.y,
|
||||
portadaObj.lomo,
|
||||
portadaObj.altoLibro);
|
||||
lomo.stroke = '#8171D4';
|
||||
lomo.fill = '#8171D4';
|
||||
lomo.linewidth = 1;
|
||||
|
||||
_previewPortada.update();
|
||||
|
||||
// Update preview info fields
|
||||
$('#prevLibro').text(portadaObj.anchoLibro + "X" + portadaObj.altoLibro );
|
||||
$('#prevLomo').text(portadaObj.lomo);
|
||||
$('#prevSolapas').text(portadaObj.solapas);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -89,4 +89,10 @@ table.dataTable.table-hover>tbody>tr.selected:hover>* {
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
div.draw-shapes {
|
||||
width: 95%;
|
||||
height: 500px;
|
||||
margin: 2.5% auto;
|
||||
}
|
||||
|
||||
10675
httpdocs/themes/vuexy/vendor/libs/two/two.js
vendored
Normal file
10675
httpdocs/themes/vuexy/vendor/libs/two/two.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
89
httpdocs/themes/vuexy/vendor/libs/two/two.min.js
vendored
Normal file
89
httpdocs/themes/vuexy/vendor/libs/two/two.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user