ispt4.0_laravel/resources/views/Templates/templateWorkstations.blade copy.php

740 lines
32 KiB
PHP
Executable File

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name') }}</title>
<link rel="icon" type="image/x-icon" href="{{ URL::asset('assets/dist/img/favicon.ico') }}">
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
{{--
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/fontawesome-free/css/all.min.css') }}"> --}}
<link rel="stylesheet" href="{{ asset('assets/plugins/fontawesome-6.4.2/css/all.css') }}">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet"
href="{{ URL::asset('assets/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css') }}">
<!-- iCheck -->
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
<!-- JQVMap -->
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/jqvmap/jqvmap.min.css') }}">
<!-- Theme style -->
<link rel="stylesheet" href="{{ URL::asset('assets/dist/css/adminlte.min.css') }}">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css') }}">
<!-- Daterange picker -->
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/daterangepicker/daterangepicker.css') }}">
<!-- summernote -->
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/summernote/summernote-bs4.min.css') }}">
<!-- Bootstrap CSS -->
{{--
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> --}}
<!-- Bootstrap JS Bundle (inclui Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<style>
[class*=sidebar-dark] .btn-sidebar2,
[class*=sidebar-dark] .form-control-sidebar2 {
background-color: #3f474e;
border: 1px solid #56606a;
color: #fff;
}
/* Css para icon de validacao da TE7 */
.info-icon {
width: 25px;
height: 25px;
background-color: #dc3545;
/* Vermelho por padrão */
color: white;
text-align: center;
line-height: 25px;
border-radius: 50%;
cursor: pointer;
font-weight: bold;
font-size: 18px;
}
.info-box {
display: none;
position: absolute;
top: -35px;
/* Ajuste para posicionar acima do ícone */
left: 50%;
/* Alinhar ao centro do ícone */
transform: translateX(-50%);
padding: 10px;
background-color: #343a40;
color: #fff;
border-radius: 5px;
white-space: nowrap;
z-index: 10;
}
.info-box.green {
background-color: #28a745;
/* Verde */
}
.info-box.red {
background-color: #dc3545;
/* Vermelho */
}
/* /* Css para icon de validacao da TE7 */
</style>
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
<!-- Navbar -->
<!-- Parte de cima da pagina (header)-->
<nav class="main-header navbar navbar-expand navbar-white navbar-light" style="background-color: #00B0EA">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"
style="color:#1f2d3d"></i></a>
</li>
<li class="nav-item">
<a class="nav-link">
<i class="fas fa-play" style="color:#1f3d2f"></i>
<span class="badge badge-info navbar-badge">{{ count($receiveAllEquipmentOfProject) }}</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link">
<i class="fa-solid fa-hourglass-start" style="color:#1f2d3d"></i>
<span class="badge badge-success navbar-badge" style="background-color: #1b4cad;">{{
count($executionEquipment) }} </span>
</a>
</li>
<li class="nav-item">
<a class="nav-link">
<i class="fa-solid fa-rotate-left" style="color:#1f2d3d"></i>
<span class="badge badge-success navbar-badge" style="background-color: orange;">{{
count($equipmentToReview) }} </span>
</a>
</li>
<li class="nav-item">
<a class="nav-link">
<i class="fas fa-check" style="color:#1f2d3d"></i>
<span class="badge badge-success navbar-badge" style="background-color: #28a745">{{
count($completedEquipments) }} </span>
</a>
</li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item d-none d-sm-inline-block">
<!--<div class="nav-link">{{ Auth::user()->user_name }}</div>-->
<div class="nav-link" style="color:#1f2d3d">{{ $receiveDataWs->nomenclature_workstation }}</div>
</li>
<!-- User Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<img src="{{ URL::asset('assets/dist/img/ispt.jpg') }}" class="img-circle elevation-2"
alt="User Image" style="width:30px;height:30px;">
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="nav-link" style="color:#1f2d3d">{{ $receiveDataWs->nomenclature_workstation }}
</div>
<form id="logout-form" action="{{ route('logout') }}" method="POST">
@csrf
@method('POST')
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
<i class="fas fa-sign-out-alt text-danger"></i>
<span>Terminar sessão</span>
</a>
</form>
</div>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4" style="background-color: #09255C">
<!-- Brand Logo -->
<p class="brand-link">
<img src="{{ URL::asset('assets/dist/img/ispt40.jpg') }}" alt="Ispt4.0 Logo"
class="brand-image img-circle elevation-3" style="opacity: .8">
<span class="brand-text font-weight-light">{{ config('app.name') }}</span>
</p>
<!-- Sidebar -->
<div class="sidebar mt-4">
<!-- SidebarSearch Form -->
<div class="form-inline">
<div class="input-group" data-widget="sidebar-search">
<input id="qrtextleft" class="form-control form-control-sidebar text-white" type="search"
placeholder="Tag/Equipamento" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-sidebar" onclick="triggerSearchFromInput()">
<i class="fas fa-search fa-fw text-white"></i>
</button>
</div>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-5">
<ul class="nav nav-pills nav-sidebar flex-column searchable" data-widget="treeview" role="menu"
data-accordion="false">
<!-- Por iniciar -->
<li class="nav-item has-treeview menu-closed">
<a href="#" class="nav-link text-white" style="background-color: #007BFF;">
<i class="nav-icon fas fa-play"></i>
<p>
Por iniciar: {{ count($receiveAllEquipmentOfProject) }}
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview pl-3">
@foreach ($receiveAllEquipmentOfProject as $equipmentOfProject)
<div class="row text-white">
<div class="col d-flex align-items-center ml-3">
<i class="fas fa-tag mr-2"></i>
<p class="mb-0 text-truncate" style="flex-grow: 1;">
{{ $equipmentOfProject->equipment_tag }}
</p>
</div>
</div>
@endforeach
</ul>
</li>
<!-- Em execução -->
<li class="nav-item has-treeview menu-closed mt-1">
<a href="#" class="nav-link text-white" style="background-color: #1b4cad;">
{{-- <i class="fa-solid fa-rotate-left"></i> --}}
<i class="fa-solid fa-hourglass-start"></i>
<p>
Em execução : {{ count($executionEquipment) }}
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
@foreach ($executionEquipment as $equipmentOfProject)
<div class="row text-white">
<div class="col d-flex align-items-center ml-3">
<i class="fas fa-tag mr-2"></i>
<p class="mb-0 text-truncate" style="flex-grow: 1;">
{{ $equipmentOfProject->equipment_tag }}
</p>
</div>
</div>
@endforeach
</ul>
</li>
<!-- Por rever -->
<li class="nav-item has-treeview menu-closed mt-1">
<a href="#" class="nav-link text-white" style="background-color: orange;">
<i class="fa-solid fa-rotate-left"></i>
<p>
Por rever : {{ count($equipmentToReview) }}
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
@foreach ($equipmentToReview as $equipmentOfProject)
<div class="row text-white">
<div class="col d-flex align-items-center ml-3">
<i class="fas fa-tag mr-2"></i>
<p class="mb-0 text-truncate" style="flex-grow: 1;">
{{ $equipmentOfProject->equipment_tag }}
</p>
</div>
</div>
@endforeach
</ul>
</li>
<!-- Concluidos -->
<li class="nav-item has-treeview menu-closed mt-1">
<a href="#" class="nav-link text-white" style="background-color: green;">
<i class="nav-icon fas fa-check"></i>
<p> Concluidos :
{{ count($completedEquipments) }}
<!-- válvulas concluídas -->
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
@foreach ($completedEquipments as $equipmentDone)
<div class="row text-white">
<div class="col d-flex align-items-center ml-3">
<i class="fas fa-tag mr-2"></i>
<p class="mb-0 text-truncate" style="flex-grow: 1;">
{{ $equipmentDone->equipment_tag }}
</p>
</div>
</div>
@endforeach
</ul>
</li>
</ul>
<ul class="nav nav-pills nav-sidebar flex-column searchable" id="qrcode-equipment-list"
style="display: none;">
<li class="nav-item menu-closed">
<a href="#" class="nav-link text-white" style="background-color: #007BFF;">
<i class="nav-icon fas fa-play"></i>
<p> {{ count($receiveQrcodeEquipmentsProject) }} a iniciar QrCodes
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
@foreach ($receiveQrcodeEquipmentsProject as $equipmentOfProject)
<li class="nav-item">
<a href="{{ route('getEquipmentData', ['equipment_id' => $equipmentOfProject->equipment_id, 'component_tag' => $equipmentOfProject->component_tag]) }}"
class="nav-link text-white">
<i class="fas fa-tag nav-icon"></i>
<p class="Tags">{{ $equipmentOfProject->component_tag }}</p>
</a>
</li>
@endforeach
</ul>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
{{-- <div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<!-- Info box1 -->
<div class="col-sm-6">
</div>
<!-- /.col -->
<div class="col-sm-6">
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div> --}}
<!-- /.content-header -->
<!-- Main content -->
<section class="content">
@yield('content')
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
{{-- <footer class="main-footer" style="background-color: #00B0EA">
<strong>Copyright © 2017-{{ date('Y') }} <a href="https://www.isptgroup.com" target="_blank">ISPT -
Industrial Services,
SA</a>.</strong>
Todos os direitos reservados.
<div class="float-right d-none d-sm-inline-block">
<b>Versão</b> {{ config('app.version') }}
</div>
</footer> --}}
</div>
<!-- ./wrapper -->
<!-- jQuery -->
<script src="{{ URL::asset('assets/plugins/jquery/jquery.min.js') }}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{{ URL::asset('assets/plugins/jquery-ui/jquery-ui.min.js') }}"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="{{ URL::asset('assets/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- ChartJS -->
<script src="{{ URL::asset('assets/plugins/chart.js/Chart.min.js') }}"></script>
<!-- Sparkline -->
<script src="{{ URL::asset('assets/plugins/sparklines/sparkline.js') }}"></script>
<!-- JQVMap -->
<script src="{{ URL::asset('assets/plugins/jqvmap/jquery.vmap.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/jqvmap/maps/jquery.vmap.usa.js') }}"></script>
<!-- jQuery Knob Chart -->
<script src="{{ URL::asset('assets/plugins/jquery-knob/jquery.knob.min.js') }}"></script>
<!-- daterangepicker -->
<script src="{{ URL::asset('assets/plugins/moment/moment.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/daterangepicker/daterangepicker.js') }}"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="{{ URL::asset('assets/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js') }}">
</script>
<!-- Summernote -->
<script src="{{ URL::asset('assets/plugins/summernote/summernote-bs4.min.js') }}"></script>
<!-- overlayScrollbars -->
<script src="{{ URL::asset('assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js') }}"></script>
<!-- AdminLTE App -->
<script src="{{ URL::asset('assets/dist/js/adminlte.js') }}"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="{{ URL::asset('assets/dist/js/pages/dashboard.js') }}"></script>
<!-- HTML5 QRCode-->
<script src="{{ URL::asset('assets/plugins/html5-qrcode/html5-qrcode.min.js') }}"></script>
<script>
// Função para simular uma pesquisa manual ao escanear o QR Code
function simulateManualSearch(value) {
var searchInput = document.getElementById("qrtextleft"); // Campo de busca
searchInput.value = value; // Insere o valor do QR code no campo de busca
// Simula o evento de digitação no campo de busca para ativar o search
var event = new Event('input', {
bubbles: true,
cancelable: true,
});
searchInput.dispatchEvent(event);
}
// Função para realizar a busca e navegação (após a leitura do QR code ou busca manual)
function searchForValueAndNavigate(value, itemsSelector, containerSelector) {
var searchQuery = value.toLowerCase();
var found = false; // Variável para verificar se encontrou o item
$(itemsSelector).each(function () {
var itemText = $(this).text().toLowerCase();
if (itemText.includes(searchQuery)) {
found = true;
window.location.href = $(this).attr('href'); // Navegar para a URL correspondente
return false; // Sair do loop após encontrar a correspondência
}
});
// Se não encontrar correspondência, fecha os itens abertos
if (!found) {
$(containerSelector + ' .nav-item.menu-open').each(function () {
$(this).removeClass('menu-open').addClass('menu-closed');
});
}
}
// Função de busca manual por input (usada no botão de busca)
function triggerSearchFromInput() {
let searchInput = document.getElementById("qrtextleft").value;
searchForValueAndNavigate(searchInput, '#qrcode-equipment-list li a', '#qrcode-equipment-list');
}
// Configuração do QR Code Scanner
let scanner = new Html5Qrcode("reader");
let startScan = document.getElementById("startScan");
let reader = document.getElementById("reader");
startScan.addEventListener('click', function () {
// Esconde o botão de início e exibe o leitor de QR Code
startScan.style.display = "none";
reader.style.display = "block";
scanner.start({
facingMode: "environment"
}, {
fps: 20,
qrbox: {
width: 250,
height: 250
}
},
function (qrCodeMessage) {
// Ao escanear o QR Code, simula a pesquisa
scanner.stop().then(() => {
simulateManualSearch(
qrCodeMessage); // Preenche o campo de busca e simula a digitação
reader.style.display = "none";
startScan.style.display = "block";
// Aciona a navegação automática se encontrar o valor correspondente
searchForValueAndNavigate(qrCodeMessage, '#qrcode-equipment-list li a',
'#qrcode-equipment-list');
});
},
function (errorMessage) {
// Em caso de erro no scan
console.log(errorMessage);
})
.catch(err => {
console.log(err);
});
});
// Função para lidar com a pesquisa no campo de input e exibir resultados dinamicamente
function handleSearch(inputSelector, itemsSelector, containerSelector) {
$(inputSelector).on('keyup', function () {
var searchQuery = $(this).val().toLowerCase();
var found = false; // Variável para verificar se encontrou algum item
$(itemsSelector).each(function () {
var itemText = $(this).text().toLowerCase();
if (itemText.includes(searchQuery)) {
$(this).show();
found = true;
} else {
$(this).hide();
}
});
// Altera a classe dos itens <li> quando o item é encontrado ou não
if (found) {
$(containerSelector + ' .nav-item.menu-closed').each(function () {
$(this).removeClass('menu-closed').addClass('menu-open');
});
} else {
$(containerSelector + ' .nav-item.menu-open').each(function () {
$(this).removeClass('menu-open').addClass('menu-closed');
});
}
});
}
// Aplicando a funcionalidade de pesquisa ao campo de pesquisa principal
handleSearch('#qrtextleft', '.searchable .nav.nav-pills.nav-sidebar.flex-column li.tags', '.searchable');
</script>
{{--
<script>
function simulateManualSearch(value) {
var searchInput = document.getElementById("qrtextleft"); // O campo de busca
searchInput.value = value; // Insere o valor do QR code no campo de busca
// Simula o evento de digitação no campo de busca para ativar o search
var event = new Event('input', {
bubbles: true,
cancelable: true,
});
searchInput.dispatchEvent(event);
}
let scanner = new Html5Qrcode("reader");
let startScan = document.getElementById("startScan");
let reader = document.getElementById("reader");
startScan.addEventListener('click', function () {
// Hide the startScan button and show the reader
startScan.style.display = "none";
reader.style.display = "block";
scanner.start({
facingMode: "environment"
}, {
fps: 20,
qrbox: {
width: 250,
height: 250
}
},
function (qrCodeMessage) {
// This is called when a QR Code is scanned
scanner.stop().then(() => {
// Simula a digitação manual com o valor do QR code
simulateManualSearch(qrCodeMessage);
reader.style.display = "none";
startScan.style.display = "block";
});
},
function (errorMessage) {
// In case of errors
console.log(errorMessage);
})
.catch(err => {
console.log(err);
});
});
</script>
<script>
// Função para realizar a busca e navegação
function searchForValueAndNavigate(value, itemsSelector, containerSelector) {
var searchQuery = value.toLowerCase();
var found = false;
$(itemsSelector).each(function () {
var itemText = $(this).text().toLowerCase();
if (itemText.includes(searchQuery)) {
found = true;
window.location.href = $(this).attr('href'); // Navegar para a URL correspondente
return false; // Sair do loop após encontrar a correspondência
}
});
// Se não encontrar correspondência, fecha os itens abertos
if (!found) {
$(containerSelector + ' .nav-item.menu-open').each(function () {
$(this).removeClass('menu-open').addClass('menu-closed');
});
}
}
// Função de busca manual por input
function triggerSearchFromInput() {
let searchInput = document.getElementById("searchInput").value;
searchForValueAndNavigate(searchInput, '#qrcode-equipment-list li a', '#qrcode-equipment-list');
}
// Configuração do QR Code Scanner
let scanner = new Html5Qrcode("reader");
let startScan = document.getElementById("startScan");
let reader = document.getElementById("reader");
let qrtextleft = document.getElementById("qrtextleft");
startScan.addEventListener('click', function () {
// Esconder o botão de início e mostrar o leitor
startScan.style.display = "none";
reader.style.display = "block";
scanner.start({
facingMode: "environment"
}, {
fps: 20,
qrbox: {
width: 250,
height: 250
}
},
function (qrCodeMessage) {
// Ao escanear o QR Code
scanner.stop().then(() => {
qrtextleft.value = qrCodeMessage; // Preenche o campo com o valor escaneado
reader.style.display = "none";
startScan.style.display = "block";
// Aciona a busca automaticamente
searchForValueAndNavigate(qrCodeMessage, '#qrcode-equipment-list li a',
'#qrcode-equipment-list');
});
},
function (errorMessage) {
// Em caso de erro no scan
console.log(errorMessage);
}
).catch(err => {
console.log(err);
});
});
</script>
<script>
$(document).ready(function () {
$(document).on('click', '[data-widget="control-treeview"] .nav-link', function (event) {
event.preventDefault();
var checkElement = $(this).next();
if ((checkElement.is('.nav-treeview')) && (checkElement.is(':visible'))) {
checkElement.slideUp('normal', function () {
checkElement.removeClass('menu-open');
});
checkElement.parent("li").removeClass("menu-open");
} else if ((checkElement.is('.nav-treeview')) && (!checkElement.is(':visible'))) {
var parent = $(this).parents('ul').first();
var ul = parent.find('ul:visible').slideUp('normal');
ul.removeClass('menu-open');
var parent_li = $(this).parent("li");
checkElement.slideDown('normal', function () {
checkElement.addClass('menu-open');
parent.find('.menu-open').not(checkElement).removeClass('menu-open');
});
}
if (checkElement.is('.nav-treeview')) {
event.preventDefault();
}
});
});
</script>
<script>
function handleSearch(inputSelector, itemsSelector, containerSelector) {
console.log(inputSelector);
$(inputSelector).on('keyup', function () {
var searchQuery = $(this).val().toLowerCase();
var found = false; // Variable to track if any item is found
$(itemsSelector).each(function () {
var itemText = $(this).text().toLowerCase();
if (itemText.includes(searchQuery)) {
$(this).show();
found = true;
} else {
$(this).hide();
}
});
// If any item is found, change the class of <li> elements
if (found) {
$(containerSelector + ' .nav-item.menu-closed').each(function () {
$(this).removeClass('menu-closed').addClass('menu-open');
});
} else {
$(containerSelector + ' .nav-item.menu-open').each(function () {
$(this).removeClass('menu-open').addClass('menu-closed');
});
}
});
}
// Nao me parece fazer nada, nao encontrei funcionalidade ainda, ja que a pesquisa ainda e feita, e a selacao tambem.
handleSearch('#qrtextleft', '.searchable .nav.nav-pills.nav-sidebar.flex-column li.tags', '.searchable');
// Apply the search functionality for the main sidebar
// handleSearch('#qrtextleft', '.main-sidebar .nav.nav-pills.nav-sidebar.flex-column li', '.main-sidebar');
// Apply the search functionality for the control sidebar
// handleSearch('#qrtextright', '.control-sidebar .nav.nav-pills.nav-sidebar.flex-column li', '.control-sidebar');
</script> --}}
</body>
</html>