From f9ac80163f987df22a90f780db39f5b7ffd224a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ces=C3=A1rio=20Garcia=20Mil-Homens?=
 <cgmilhomens@isptgroup.com>
Date: Fri, 13 Oct 2023 13:02:03 +0100
Subject: [PATCH] QR Code final

---
 .../Templates/templateWorkstations.blade.php  | 207 ++++++++++++------
 1 file changed, 134 insertions(+), 73 deletions(-)
diff --git a/resources/views/Templates/templateWorkstations.blade.php b/resources/views/Templates/templateWorkstations.blade.php
index 2b5b2164..506b759d 100644
--- a/resources/views/Templates/templateWorkstations.blade.php
+++ b/resources/views/Templates/templateWorkstations.blade.php
@@ -9,15 +9,13 @@
     <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">
+    <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') }}">
     <!-- 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') }}">
+    <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 -->
@@ -31,27 +29,26 @@
     <!-- summernote -->
     <link rel="stylesheet" href="{{ URL::asset('assets/plugins/summernote/summernote-bs4.min.css') }}">
 
-  <style>
-    [class*=sidebar-dark] .btn-sidebar2,
-    [class*=sidebar-dark] .form-control-sidebar2 {
-      background-color: #3f474e;
-      border: 1px solid #56606a;
-      color: #fff;
-    }
-  </style>
+    <style>
+        [class*=sidebar-dark] .btn-sidebar2,
+        [class*=sidebar-dark] .form-control-sidebar2 {
+            background-color: #3f474e;
+            border: 1px solid #56606a;
+            color: #fff;
+        }
+    </style>
 
 </head>
 
 <body class="hold-transition sidebar-mini layout-fixed">
-  <div class="wrapper">
+    <div class="wrapper">
 
         <!-- Navbar -->
         <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>
+                    <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">
@@ -81,15 +78,13 @@
                 <!-- 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;">
+                        <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">
                         <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();">
+                            <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>
@@ -98,8 +93,7 @@
                 </li>
                 <!-- Control sidebar -->
                 <li class="nav-item">
-                    <a class="nav-link" data-widget="control-sidebar" data-controlsidebar-slide="true" href="#"
-                        role="button" style="color:#1f2d3d">
+                    <a class="nav-link" data-widget="control-sidebar" data-controlsidebar-slide="true" href="#" role="button" style="color:#1f2d3d">
                         <i class="fas fa-bars"></i>
                     </a>
                 </li>
@@ -111,8 +105,7 @@
         <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">
+                <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>
 
@@ -122,8 +115,7 @@ class="brand-image img-circle elevation-3" style="opacity: .8">
                 <!-- SidebarSearch Form -->
                 <div class="form-inline">
                     <div class="input-group" data-widget="sidebar-search">
-                        <input id="qrtext" class="form-control form-control-sidebar text-white" type="search"
-                            placeholder="Procurar" aria-label="Search">
+                        <input id="qrtextleft" class="form-control form-control-sidebar text-white" type="search" placeholder="Procurar" aria-label="Search">
                         <div class="input-group-append">
                             <button class="btn btn-sidebar">
                                 <i class="fas fa-search fa-fw text-white"></i>
@@ -134,8 +126,7 @@ class="brand-image img-circle elevation-3" style="opacity: .8">
 
                 <!-- Sidebar Menu -->
                 <nav class="mt-2">
-                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
-                        data-accordion="false">
+                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                         <!-- Add icons to the links using the .nav-icon class
                with font-awesome or any other icon font library -->
                         <li class="nav-item menu-closed">
@@ -148,17 +139,16 @@ class="brand-image img-circle elevation-3" style="opacity: .8">
                             </a>
                             <ul class="nav nav-treeview">
                                 @foreach ($equipmentsTodo as $equipmentTodo)
-                                    <li class="nav-item">
-                                        {{-- <a href="#" class="nav-link text-white">
+                                <li class="nav-item">
+                                    {{-- <a href="#" class="nav-link text-white">
                                             <i class="fas fa-tag nav-icon"></i>
                                             <p>{{ $equipmentTodo->equipment_tag }}</p>
-                                        </a> --}}
-                                        <a href="{{ route('getEquipmentData', $equipmentTodo->equipment_id) }}"
-                                            class="nav-link text-white">
-                                            <i class="fas fa-tag nav-icon"></i>
-                                            <p>{{ $equipmentTodo->equipment_tag }}</p>
-                                        </a>
-                                    </li>
+                                    </a> --}}
+                                    <a href="{{ route('getEquipmentData', $equipmentTodo->equipment_id) }}" class="nav-link text-white">
+                                        <i class="fas fa-tag nav-icon"></i>
+                                        <p>{{ $equipmentTodo->equipment_tag }}</p>
+                                    </a>
+                                </li>
                                 @endforeach
                             </ul>
                         </li>
@@ -173,12 +163,12 @@ class="nav-link text-white">
                             </a>
                             <ul class="nav nav-treeview">
                                 @foreach ($equipmentsReturned as $equipmentReturned)
-                                    <li class="nav-item">
-                                        <a href="#" class="nav-link text-white">
-                                            <i class="fas fa-tag nav-icon"></i>
-                                            <p>{{ $equipmentReturned->equipment_tag }}</p>
-                                        </a>
-                                    </li>
+                                <li class="nav-item">
+                                    <a href="#" class="nav-link text-white">
+                                        <i class="fas fa-tag nav-icon"></i>
+                                        <p>{{ $equipmentReturned->equipment_tag }}</p>
+                                    </a>
+                                </li>
                                 @endforeach
                             </ul>
                         </li>
@@ -217,8 +207,7 @@ class="nav-link text-white">
         </div>
         <!-- /.content-wrapper -->
         <footer class="main-footer" style="background-color: #00B0EA">
-            <strong>Copyright &copy; 2017-{{ date('Y') }} <a href="https://www.isptgroup.com"
-                    target="_blank">ISPT - Industrial Services,
+            <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">
@@ -227,7 +216,7 @@ class="nav-link text-white">
         </footer>
 
         {{-- <footer class="main-footer">
-            <strong>Copyright &copy; 2017-2022 <a href="#">ISPT - Industrial Services, SA</a>.</strong>
+            <strong>Copyright © 2017-2022 <a href="#">ISPT - Industrial Services, SA</a>.</strong>
             Todos os direitos reservados.
             <div class="float-right d-none d-sm-inline-block">
                 <b>Versão</b> 1.0
@@ -235,15 +224,14 @@ class="nav-link text-white">
         </footer> --}}
 
         <!-- Control Sidebar -->
-        <aside class="control-sidebar control-sidebar-dark" style="background-color: #09255C">
+        <aside class="control-sidebar control-sidebar-dark" data-widget="control-treeview" style="background-color: #09255C">
             <!-- Control sidebar content goes here -->
             <div class="p-3 control-sidebar-content">
 
                 <!-- SidebarSearch Form -->
                 <div class="form-inline">
                     <div class="input-group" data-widget="sidebar-search">
-                        <input class="form-control form-control-sidebar text-white" type="search"
-                            placeholder="Procurar" aria-label="Search">
+                        <input id="qrtextright" class="form-control form-control-sidebar text-white" type="search" placeholder="Procurar" aria-label="Search">
                         <div class="input-group-append">
                             <button class="btn btn-sidebar">
                                 <i class="fas fa-search fa-fw text-white"></i>
@@ -254,8 +242,7 @@ class="nav-link text-white">
 
                 <!-- Sidebar Menu -->
                 <nav class="mt-2">
-                    <ul class="nav nav-pills nav-sidebar flex-column control-sidebar-treeview" role="menu"
-                        data-accordion="false">
+                    <ul class="nav nav-pills nav-sidebar flex-column control-sidebar-treeview" role="menu" data-accordion="false">
                         <!-- Add icons to the links using the .nav-icon class
                    with font-awesome or any other icon font library -->
                         <li class="nav-item menu-closed">
@@ -268,12 +255,12 @@ class="nav-link text-white">
                             </a>
                             <ul class="nav nav-treeview">
                                 @foreach ($equipmentsDone as $equipmentDone)
-                                    <li class="nav-item-right">
-                                        <a href="#" class="nav-link text-white">
-                                            <i class="fas fa-tag nav-icon"></i>
-                                            <p>{{ $equipmentDone->equipment_tag }}</p>
-                                        </a>
-                                    </li>
+                                <li class="nav-item-right">
+                                    <a href="#" class="nav-link text-white">
+                                        <i class="fas fa-tag nav-icon"></i>
+                                        <p>{{ $equipmentDone->equipment_tag }}</p>
+                                    </a>
+                                </li>
                                 @endforeach
                             </ul>
                         </li>
@@ -324,12 +311,34 @@ class="nav-link text-white">
     <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>
+        function searchForValueAndNavigate(value, itemsSelector, containerSelector) {
+            var searchQuery = value.toLowerCase();
+            var found = false; // Variable to track if any item is found
+
+            $(itemsSelector).each(function() {
+                var itemText = $(this).text().toLowerCase();
+                if (itemText.includes(searchQuery)) {
+                    found = true;
+                    window.location.href = $(this).attr('href');
+                    return false; // Exit the .each loop after attempting navigation
+                }
+            });
+
+            // If no item is found, change the class of <li> elements
+            if (!found) {
+                $(containerSelector + ' .nav-item.menu-open').each(function() {
+                    $(this).removeClass('menu-open').addClass('menu-closed');
+                });
+            }
+        }
+
         let scanner = new Html5Qrcode("reader");
         let startScan = document.getElementById("startScan");
         let reader = document.getElementById("reader");
-        let qrtext = document.getElementById("qrtext");
+        let qrtextleft = document.getElementById("qrtextleft");
+        let qrtextright = document.getElementById("qrtextright");
 
         startScan.addEventListener('click', function() {
             // Hiding the startScan button and showing the reader
@@ -347,10 +356,19 @@ class="nav-link text-white">
                     },
                     function(qrCodeMessage) {
                         // This is called when a QR Code is scanned
+
+                        // Suppress every text in front of "@" including it
+                        qrCodeMessage = qrCodeMessage.split('@')[0];
+
                         scanner.stop().then(() => {
-                            qrtext.value = qrCodeMessage;
+                            qrtextleft.value = qrCodeMessage;
+                            qrtextright.value = qrCodeMessage;
                             reader.style.display = "none";
                             startScan.style.display = "block";
+
+                            // Trigger the search functionality for both sidebars
+                            searchForValueAndNavigate(qrCodeMessage, '.main-sidebar .nav.nav-pills.nav-sidebar.flex-column li a', '.main-sidebar');
+                            searchForValueAndNavigate(qrCodeMessage, '.control-sidebar .nav.nav-pills.nav-sidebar.flex-column li a', '.control-sidebar');
                         });
                     },
                     function(errorMessage) {
@@ -366,27 +384,70 @@ function(errorMessage) {
 
     <script>
         $(document).ready(function() {
-            // Initially hide the nav-treeview
-            $('.control-sidebar-treeview .nav-treeview').hide();
-
-            $('.control-sidebar-treeview .nav-item > a').on('click', function(event) {
+            // Clone the behavior of treeview to control-treeview
+            $(document).on('click', '[data-widget="control-treeview"] .nav-link', function(event) {
                 event.preventDefault();
+                var checkElement = $(this).next();
 
-                var parentLi = $(this).parent();
-                var childUl = parentLi.find('ul.nav-treeview');
+                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");
 
-                // Check if the childUl is visible
-                if (childUl.is(':visible')) {
-                    // If it's visible, hide it
-                    childUl.slideUp('slow');
-                } else {
-                    // If it's not visible, show it
-                    childUl.slideDown('slow');
+                    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) {
+            $(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');
+                    });
+                }
+            });
+        }
+
+        // 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>
+</html>
\ No newline at end of file
