mirror of
https://git.imnavajas.es/jjimenez/safekat.git
synced 2025-07-25 22:52:08 +00:00
Esbozos y pruebas iniciales
This commit is contained in:
imnavajas
@ -152,6 +152,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,352 @@
|
||||
<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 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 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 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-12">
|
||||
<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") ?>
|
||||
|
||||
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();
|
||||
|
||||
var elemCubierta = document.getElementById('draw-cubierta');
|
||||
var twoCubierta = new Two({fitted: true}).appendTo(elemCubierta);
|
||||
|
||||
var originCub = new Two.Vector(twoCubierta.width/2, twoCubierta.height/2);
|
||||
|
||||
|
||||
var areaMaquinaCubierta = twoCubierta.makeRectangle(originCub.x, originCub.y, 360, 255);
|
||||
areaMaquinaCubierta.stroke = 'black';
|
||||
areaMaquinaCubierta.linewidth = 1;
|
||||
|
||||
var areaImpresionCubierta = twoCubierta.makeRectangle(originCub.x, originCub.y, AIx, AIy);
|
||||
areaImpresionCubierta.stroke = 'red';
|
||||
areaImpresionCubierta.linewidth = 1;
|
||||
|
||||
var formaCubierta = twoCubierta.makeRectangle(originCub.x, originCub.y, 2*sizeX, 2*sizeY);
|
||||
formaCubierta.stroke = 'blue';
|
||||
formaCubierta.fill = 'blue';
|
||||
formaCubierta.linewidth = 1;
|
||||
|
||||
twoCubierta.update();
|
||||
|
||||
var elemPortada = document.getElementById('draw-portada');
|
||||
var twoPortada = new Two({fitted: true}).appendTo(elemPortada);
|
||||
|
||||
var originPor = new Two.Vector(twoPortada.width/2, twoPortada.height/2);
|
||||
|
||||
|
||||
var solapas = twoPortada.makeRectangle(originPor.x, originPor.y, 360, 255);
|
||||
solapas.stroke = 'black';
|
||||
solapas.fill = 'black';
|
||||
solapas.linewidth = 1;
|
||||
|
||||
var libro = twoPortada.makeRectangle(originPor.x, originPor.y, 300, 255);
|
||||
libro.stroke = 'red';
|
||||
libro.fill = 'red';
|
||||
libro.linewidth = 1;
|
||||
|
||||
var lomo = twoPortada.makeRectangle(originPor.x, originPor.y, 40, 255);
|
||||
lomo.stroke = 'blue';
|
||||
lomo.fill = 'blue';
|
||||
lomo.linewidth = 1;
|
||||
|
||||
twoPortada.update();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<?= $this->endSection() ?>
|
||||
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
<?= view("themes/backend/vuexy/form/presupuestos/cosidotapablanda/_datosLibroItems") ?>
|
||||
<?= view("themes/backend/vuexy/form/presupuestos/cosidotapablanda/_datosPresupuestoClienteItems") ?>
|
||||
<?= view("themes/backend/vuexy/form/presupuestos/cosidotapablanda/_lineasPresupuestoItems") ?>
|
||||
<?= view("themes/backend/vuexy/form/presupuestos/cosidotapablanda/_previewItems") ?>
|
||||
<?= view("themes/backend/vuexy/form/presupuestos/cosidotapablanda/_datosServiciosItems") ?>
|
||||
<?= view("themes/backend/vuexy/form/presupuestos/cosidotapablanda/_comentariosItems") ?>
|
||||
<?= view("themes/backend/vuexy/form/presupuestos/cosidotapablanda/_resumenPresupuestoItems") ?>
|
||||
@ -1087,6 +1088,7 @@
|
||||
<script src="https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js"></script>
|
||||
<script src="<?= site_url('themes/vuexy/js/datatables-editor/dataTables.editor.min.js') ?>"></script>
|
||||
<script src="<?= site_url('themes/vuexy/vendor/libs/autosize/autosize.js') ?>"></script>
|
||||
<script src="<?= site_url('themes/vuexy/vendor/libs/two/two.js') ?>"></script>
|
||||
<script src="<?= site_url('js_loader/comparadorCosidoTapaBlanda_js') ?>"></script>
|
||||
|
||||
<?=$this->endSection() ?>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user